/* ============================================================
   San Diego Camp Meeting (SDCM) — site styles
   Palette: #f5f5f5 (cream) · #1e5f74 (teal) · #d4a45f (gold)
            #0B3D5E (navy) · #e8d8b9 (sand)
   ============================================================ */

:root {
  --cream: #f5f5f5;
  --teal: #1e5f74;
  --gold: #d4a45f;
  --navy: #0B3D5E;
  --sand: #e8d8b9;
  --live-red: #c0392b;

  --font-display: 'Cinzel', serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* So an in-page anchor jump (quick-nav links, etc.) doesn't land a section
   heading right underneath the fixed 66px nav bar. */
html { scroll-behavior: smooth; scroll-padding-top: 78px; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: #1a1a1a;
}

img { max-width: 100%; display: block; }

/* ── NAV ──
   Only Home, the live-status badge, Plan a Visit, and the hamburger live in
   the bar itself, at every screen size. Everything else (About, Events,
   Ministries, Connect, Español) lives in the hamburger-triggered dropdown
   panel below — there's no separate "desktop row" version of that menu
   anymore.
   Scoped to #site-nav (not a bare `nav` selector) on purpose — travel.php's
   quick-jump menu is also a semantic <nav> (.page-quicknav), and a bare
   `nav {...}` selector here would apply this fixed/full-width styling to
   that element too, stacking it on top of and hiding the real header. */
#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--navy);
  height: 66px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; margin-right: 18px; }
.nav-logo img { height: 36px; width: auto; filter: brightness(0) invert(1); }

/* Home + hamburger, grouped together on the left side of the bar. Relative
   so the dropdown (a child of this group) can anchor to it directly. */
.nav-home-group { position: relative; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-home-link {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
}
.nav-home-link:hover { color: #fff; }

/* Live badge + Plan a Visit — pinned to the right edge of the bar. */
.nav-bar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The dropdown panel — anchored to .nav-home-group (not the full nav bar),
   sized to its widest item via width:max-content instead of stretching
   edge-to-edge across the page. Same behavior at every screen width. */
.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: max-content;
  min-width: 180px;
  max-width: min(300px, calc(100vw - 32px));
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: var(--navy);
  border-radius: 8px;
  display: none;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.nav-menu.open { display: flex; }

.nav-links { display: flex; flex-direction: column; width: 100%; }
.nav-item { display: flex; flex-direction: column; align-items: stretch; }
.nav-item > a {
  display: flex; align-items: center;
  padding: 14px 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.08);
  transition: color .15s;
  cursor: pointer;
}
.nav-item:first-child > a { border-top: none; }
.nav-item > a:hover { color: #fff; }

.btn-live {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s;
}
/* Default/unknown state until JS confirms status — avoid implying "always live" */
.btn-live.offline { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }
.btn-live.offline .live-dot { background: rgba(255,255,255,.5); animation: none; }
.btn-live.is-live { background: var(--live-red); color: #fff; }
.btn-live.is-live .live-dot { background: #fff; animation: pulse 1.4s ease-in-out infinite; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.65); } }

/* Hero secondary "Watch Online"/"Watch Live Now" button gets a subtle live cue too */
.hero-btn-secondary.is-live { background: var(--live-red); border-color: var(--live-red); color: #fff; }
.btn-visit {
  padding: 9px 18px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 5px;
  font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: 66px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.hero-video-wrap {
  /* Pinned to exactly one viewport height, not `inset:0` (which would
     match .hero's own rendered height instead). .hero is `min-height:
     100vh` with content that stacks into a single column on mobile and
     can easily grow taller than one screen — inset:0 would stretch this
     wrap (and the video inside it, via object-fit:cover) to match that
     taller, content-driven height, forcing the video to zoom in far more
     than intended to cover it. Fixing the height to the viewport keeps the
     video at the same effective zoom level regardless of how tall the
     rest of the hero's content ends up being. dvh accounts for mobile
     Safari/Chrome's address bar show/hide; vh is the fallback for
     browsers that don't support it. */
  position: absolute; top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 0;
}
.hero-video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Hidden by default — not just covered by a sibling. Safari's native
     "autoplay blocked, tap to play" affordance is drawn as part of the
     video element's own internal UI layer and doesn't reliably respect
     normal z-index stacking against sibling elements, so occluding it with
     another element on top isn't dependable. Making the element itself
     invisible until playback is *confirmed* (see main.js) hides anything
     the browser draws for it, no exceptions. */
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-video.is-playing {
  opacity: 1;
}
.hero-video-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.hero-video-cover.is-playing {
  opacity: 0;
  pointer-events: none;
}
.hero-overlay {
  /* Same fix as .hero-video-wrap above: pinned to one viewport height so
     the gradient stays matched to the video's actual bounds instead of
     stretching down across .hero's full (possibly much taller, on mobile)
     content height. */
  position: absolute; top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(135deg, rgba(11,61,94,.90) 0%, rgba(11,61,94,.72) 55%, rgba(11,61,94,.55) 100%);
  z-index: 0;
}

.hero-quote {
  position: relative; z-index: 2;
  margin: 48px auto 0;
  max-width: 900px;
  background: rgba(11,61,94,.88);
  border: 1px solid rgba(212,164,95,.35);
  padding: 22px 40px;
  text-align: center;
}
.hero-quote p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 3.4vw, 34px);
  color: var(--cream);
  letter-spacing: .01em;
}

.hero-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  max-width: 1200px;
  width: 100%;
  padding: 48px 40px 70px;
  align-items: start;
}

.hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 18px;
}

.hero-welcome { font-family: var(--font-body); font-weight: 400; font-size: clamp(24px, 3vw, 32px); color: #fff; margin-bottom: 2px; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5.4vw, 58px);
  line-height: 1.08;
  color: #fff;
  background: var(--navy);
  display: inline-block;
  padding: 8px 14px;
  margin-bottom: 24px;
  letter-spacing: .01em;
}
.hero-title-line { display: block; }

.hero-times { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-time {
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: rgba(11,61,94,.7);
  border: 1px solid rgba(212,164,95,.4);
  border-radius: 6px;
  padding: 10px 15px;
  max-width: 250px;
  backdrop-filter: blur(4px);
}
/* Speaker-photo thumbnail — a real <button>, not a link, since it triggers
   the lightbox rather than navigating anywhere. Kept as a separate click
   target from .venue-address on purpose so the two never fight for the tap. */
.hero-photo-btn {
  flex-shrink: 0;
  width: 46px;
  padding: 0;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero-photo-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo-btn:hover, .hero-photo-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.hero-time-info { min-width: 0; }
.hero-time .day { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.hero-time .time { font-size: 14px; font-weight: 800; color: #fff; margin-top: 3px; }
.hero-time .venue-address {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(212,164,95,.3);
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.hero-time .venue-address .venue-name { font-weight: 800; color: #fff; }
.hero-time .venue-address:hover,
.hero-time .venue-address:focus {
  color: var(--gold);
}
.hero-time .venue-address:hover .venue-name,
.hero-time .venue-address:focus .venue-name {
  color: var(--gold);
}

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-btn-primary {
  padding: 13px 26px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 4px;
  font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
}
.hero-btn-secondary {
  padding: 13px 26px;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
}

/* ── QUICK LINKS SIDEBAR ── */
.quick-links {
  background: var(--teal);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quick-links a {
  display: block;
  background: var(--gold);
  color: var(--navy);
  text-align: center;
  padding: 13px 16px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.quick-links a:hover { background: var(--sand); transform: translateY(-1px); }

/* ── SPEAKER PHOTO LIGHTBOX ──────────────────────────────────
   One shared overlay, opened from any .hero-photo-btn thumbnail in the
   hero-times boxes above (see js/main.js initSpeakerLightbox). The close
   button is position:fixed at the viewport corner — not inside
   .lightbox-inner — so it stays reachable no matter how large the photo
   is, which matters most on portrait phones where the image can leave
   almost no backdrop margin to tap outside of. */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.88);
}
.lightbox.open { display: flex; }
.lightbox-inner { max-width: 90vw; max-height: 90vh; }
.lightbox-inner img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 3001;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lightbox-close:hover, .lightbox-close:focus-visible { background: rgba(0,0,0,.85); border-color: var(--gold); }
/* Locks background scroll while the lightbox is open (toggled on <body>
   by js/main.js). */
body.lightbox-open { overflow: hidden; }

/* ── LOCATION BAND ── */
.location-band {
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: 34px 24px;
}
.location-band p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 26px);
  line-height: 1.6;
}
.location-band .accent { color: var(--gold); }

/* ── TRAVEL PAGE ── */
.page-banner {
  background: var(--navy);
  padding-top: 66px;
}
.page-banner-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 48px;
  text-align: center;
}
.back-link {
  display: inline-block;
  color: var(--sand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 24px;
}
.back-link:hover { color: #fff; }
.page-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.page-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 46px);
  color: #fff;
  margin-bottom: 12px;
}
.page-subtitle { color: rgba(255,255,255,.75); font-size: 15px; max-width: 560px; margin: 0 auto; }

/* Simple jump-to-section menu right under the page banner. */
.page-quicknav {
  background: var(--cream);
  border-bottom: 1px solid rgba(11,61,94,.12);
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.page-quicknav a {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  background: #fff;
  border: 1px solid rgba(11,61,94,.15);
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.page-quicknav a:hover { background: var(--gold); border-color: var(--gold); }

.travel-section { padding: 56px 24px; }
.travel-section.airport-section { background: var(--cream); }
.travel-section.hotels-section { background: #fff; }
.travel-section.car-rentals-section { background: var(--cream); }
.travel-section.restaurants-section { background: #fff; }
.travel-section.things-section { background: var(--cream); }
.travel-container { max-width: 1100px; margin: 0 auto; }

/* ── "COMING SOON" PLACEHOLDER PAGES ── */
.travel-section.coming-soon-section {
  background: var(--cream);
  text-align: center;
  padding: 110px 24px;
}
.coming-soon-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 32px);
  color: var(--navy);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 30px);
  color: var(--navy);
  margin-bottom: 24px;
}
.section-title:has(+ .section-intro) { margin-bottom: 6px; }
.section-intro { font-size: 14px; color: #666; margin-bottom: 24px; }
.airport-code { color: var(--gold); }

.booking-note {
  background: var(--sand);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.booking-note p { font-size: 14px; line-height: 1.6; color: #3a2f1f; }
.booking-note p + p { margin-top: 6px; }
.booking-note strong { color: var(--navy); }
.booking-deadline { font-weight: 700; }

.airport-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--navy);
  border-radius: 10px;
  overflow: hidden;
}
.airport-details { padding: 32px; color: #fff; }
.airport-address { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.airport-note { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.75); margin-bottom: 24px; }
.airport-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-gold, .btn-outline {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
}
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.35); }
.airport-map { min-height: 320px; }
.airport-map iframe { display: block; height: 100%; min-height: 320px; }

/* ── GIVING PAGE ── */
.travel-section.giving-section { background: var(--cream); }
.giving-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--navy);
  border-radius: 10px;
  overflow: hidden;
}
.giving-details { padding: 32px; color: #fff; }
.giving-features { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.giving-feature {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--sand);
  background: rgba(212,164,95,.12);
  border: 1px solid rgba(212,164,95,.35);
  border-radius: 20px;
  padding: 6px 14px;
}
.btn-give { font-size: 13px; padding: 15px 34px; }
.giving-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  background: rgba(255,255,255,.04);
}
.giving-qr img { width: 160px; height: 160px; border-radius: 8px; background: #fff; padding: 10px; }
.giving-qr p { font-size: 12px; color: rgba(255,255,255,.65); text-align: center; }

.things-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.thing-card {
  background: var(--cream);
  border-radius: 8px;
  padding: 22px 20px;
  border-left: 4px solid var(--gold);
}
.thing-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--navy); margin-bottom: 8px; }
.thing-desc { font-size: 13px; line-height: 1.6; color: #444; }
.thing-map-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
}
.thing-map-link:hover { text-decoration: underline; }

/* Neutral "details still coming" tag — deliberately muted (not gold like
   .hotel-badge, which signals a positive deal) since it just flags that an
   item isn't finalized yet. */
.status-pill {
  display: inline-block;
  background: rgba(11,61,94,.08);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
}
/* Row for a card's trailing tags (map link, status pill) — used instead of
   letting .thing-map-link's own margin-top stack with a following pill. */
.thing-card-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.thing-card-footer .thing-map-link { margin-top: 0; }

.subsection-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  margin: 32px 0 16px;
}

/* Preferred hotels — a step up visually from the plain thing-card grid,
   since they carry more information (rate, room type, phone, direct
   booking link) and are the ones with a negotiated camp meeting rate. */
.hotel-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hotel-card {
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 22px 20px;
}
.hotel-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.hotel-rate-label {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal);
  margin-top: 8px;
}
.hotel-rate { font-size: 15px; font-weight: 800; color: var(--navy); }
.hotel-room-type { font-size: 12px; color: #666; margin-top: 2px; }
.hotel-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  font-size: 13px;
}
.hotel-contact a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.hotel-contact a:hover { color: var(--gold); }
.hotel-book-btn { margin-top: 16px; }

/* ── SCHEDULE PAGE ── */
.travel-section.schedule-section { background: var(--cream); }
.schedule-list { display: flex; flex-direction: column; gap: 16px; }
.schedule-row {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.schedule-photo {
  width: 120px;
  height: 150px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 8px;
  background: var(--navy);
}
.schedule-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--sand);
}
.schedule-info { min-width: 0; }
.schedule-day { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--navy); }
.schedule-time { font-weight: 800; font-size: 15px; color: var(--gold); margin-top: 2px; }
.schedule-speaker { font-size: 13px; color: #555; margin-top: 8px; }
.schedule-venue, .schedule-venue-plain {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.schedule-venue {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.schedule-venue .venue-name { font-weight: 800; color: var(--navy); }
.schedule-venue:hover { color: var(--gold); }
.schedule-venue:hover .venue-name { color: var(--gold); }
.schedule-venue-plain { color: #777; }

/* ── PLAN A VISIT FORM ──
   Ported from Hilltop Tabernacle's own Plan a Visit form (same palette, so
   values are carried over as-is, not re-derived) — see that project's
   connect/plan-a-visit.php, js/plan-a-visit.js, and api/plan-a-visit-
   submit.php for the reveal-logic/household-repeater/PCO-submission
   mechanics this markup is designed to work with. */
.form-page-section { background: var(--cream); padding: 60px 24px 80px; }
.visit-form-card {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(11,61,94,.08);
}
.visit-form .form-group { margin-bottom: 18px; }
.visit-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.visit-form label {
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 6px;
}
.visit-form input[type="text"],
.visit-form input[type="email"],
.visit-form input[type="tel"],
.visit-form input[type="date"],
.visit-form select,
.visit-form textarea {
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #1a1a1a;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.visit-form input:focus,
.visit-form select:focus,
.visit-form textarea:focus { border-color: var(--gold); }
.visit-form textarea { min-height: 100px; resize: vertical; }
.visit-form-submit {
  width: 100%;
  padding: 14px;
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
}
.visit-form-submit:hover { background: var(--sand); }
.visit-form-submit:disabled { opacity: .6; cursor: not-allowed; }
.visit-form-note { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--teal); text-align: center; display: none; }
.visit-form-note.visible { display: block; }
.visit-form-note.success { color: var(--teal); }
.visit-form-note.error { color: var(--live-red); }

.visit-form .field-hint { font-size: 12px; color: #777; margin: -2px 0 8px; font-weight: 400; text-transform: none; letter-spacing: normal; }
.visit-form .form-subheading { font-size: 15px; font-weight: 800; color: var(--navy); margin: 28px 0 16px; padding-top: 20px; border-top: 1px solid #eee; }

.reveal-group { animation: reveal-fade .2s ease; }
@keyframes reveal-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.reveal-inline { margin-top: 10px; }

/* Yes/No and multi-select questions, rendered as pill-shaped checkboxes
   rather than a plain checkbox list. */
.checkbox-row { display: flex; flex-wrap: wrap; gap: 10px; }
.checkbox-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: normal;
  color: #333;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.checkbox-pill:has(input:checked) { border-color: var(--gold); background: var(--cream); color: var(--navy); }
.checkbox-pill input { width: auto; margin: 0; accent-color: var(--gold); }

/* Household members repeater — one row per adult/child added via JS. */
.household-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.household-row { display: flex; align-items: flex-start; gap: 8px; background: var(--cream); border-radius: 8px; padding: 12px; }
.household-row-fields { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.household-line { display: flex; gap: 8px; flex-wrap: wrap; }
.household-field { flex: 1; min-width: 100px; display: flex; flex-direction: column; gap: 4px; }
.household-field label { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #888; margin: 0; }
.household-row-fields input,
.household-row-fields select,
.household-row-fields textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: #1a1a1a;
}
.household-row-fields textarea { resize: vertical; min-height: 120px; }
.phone-input-group { display: flex; gap: 6px; }
.phone-input-group select { flex: 0 0 92px; width: auto; }
.phone-input-group input { flex: 1; min-width: 0; }
.household-remove-btn {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  color: #999;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.household-remove-btn:hover { background: #fde; color: var(--live-red); }
.household-add-btn {
  display: inline-block;
  padding: 8px 16px;
  margin-bottom: 16px;
  background: transparent;
  border: 1px dashed var(--teal);
  color: var(--teal);
  border-radius: 20px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.household-add-btn:hover { background: var(--cream); }

@media (max-width: 600px) {
  .visit-form .form-row { grid-template-columns: 1fr; }
  .visit-form-card { padding: 28px; }
}

/* ── FOOTER ── */
footer {
  background: #061f30;
  color: rgba(255,255,255,.55);
  padding: 26px 40px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 12px;
}
.footer-brand { font-family: var(--font-display); font-weight: 900; color: #fff; letter-spacing: .06em; }
footer a { color: var(--gold); text-decoration: none; }

/* ── RESPONSIVE ── */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .airport-card { grid-template-columns: 1fr; }
  .airport-map { min-height: 260px; }
  .giving-card { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  #site-nav { padding: 0 16px; }

  .hero-quote { padding: 16px 20px; margin-top: 16px; }
  .hero-inner { padding: 40px 24px 56px; gap: 28px; }
}

/* Tighten the bar itself (logo, Home, live badge, Plan a Visit, hamburger)
   so all five fit without overflowing on phone-width screens. */
@media (max-width: 600px) {
  #site-nav { padding: 0 12px; }
  .nav-logo { margin-right: 10px; }
  .nav-logo img { height: 26px; }
  .nav-home-link { font-size: 10px; }
  .nav-bar-actions { gap: 6px; }
  .btn-live { padding: 6px 8px; font-size: 8px; gap: 4px; }
  .btn-visit { padding: 6px 10px; font-size: 8px; }
}

@media (max-width: 520px) {
  .hero-inner { padding: 32px 18px 48px; }
  .hero-times { gap: 8px; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btn-primary, .hero-btn-secondary { text-align: center; }
  .quick-links { padding: 16px; }
  footer { padding: 20px; text-align: center; justify-content: center; }
  .schedule-row { flex-direction: column; align-items: flex-start; }
  .schedule-photo { width: 100%; height: 220px; }
}