/* ============================================================
   Hilltop Tabernacle — site styles
   Exact same palette as SanDiegoCampMeeting.com/css/style.css —
   same 6 hex values, no additional shades invented:
   #f5f5f5 (cream) · #1e5f74 (teal) · #d4a45f (gold)
   #0B3D5E (navy) · #e8d8b9 (sand) · #c0392b (live-red)
   Every rgba() overlay below is also lifted directly from SDCM's
   stylesheet (same alpha values on the same navy/gold decimals),
   not approximated.
   ============================================================ */

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

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--cream);color:#1a1a1a;}
img{max-width:100%;display:block;}
html{scroll-behavior:smooth;scroll-padding-top:78px;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--navy);height:66px;display:flex;align-items:center;padding:0 28px;box-shadow:0 2px 20px rgba(0,0,0,.35);}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.nav-logo img{height:36px;width:auto;filter:brightness(0) invert(1);}
.nav-links{display:flex;align-items:stretch;height:66px;margin:0 auto;}
.nav-item{display:flex;align-items:stretch;position:relative;}
.nav-item > a{display:flex;align-items:center;padding:0 15px;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;cursor:pointer;}
.nav-item > a:hover{color:#fff;}
.nav-item.active > a{color:var(--gold);}
.nav-item.active > a::after{content:'';position:absolute;bottom:0;left:15px;right:15px;height:2px;background:var(--gold);border-radius:2px 2px 0 0;}
.nav-item > a .ch{font-size:8px;margin-left:3px;opacity:.5;}
.dd{display:none;position:absolute;top:66px;left:0;background:#fff;min-width:210px;border-top:2px solid var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.15);padding:8px 0;z-index:2000;}
.dd.open{display:block;}
.dd a{display:block;padding:10px 20px;font-size:12px;font-weight:600;color:#333;text-decoration:none;}
.dd a:hover{background:var(--cream);color:var(--navy);}
.dd hr{border:none;border-top:1px solid #eee;margin:4px 0;}
.dd-wide{min-width:380px;columns:2;}
.dd-wide a{break-inside:avoid;}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.btn-live{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:5px;font-size:10px;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)}}
.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 (two-column) ── */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding-top:66px;}
.hero-video-wrap{position:absolute;inset:0;overflow:hidden;}
.hero-video{width:100%;height:100%;object-fit:cover;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,61,94,.90) 0%,rgba(11,61,94,.72) 55%,rgba(11,61,94,.55) 100%);}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 400px;gap:52px;max-width:1240px;width:100%;padding:60px 48px;align-items:center;}
.hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;}
.hero-title{font-size:clamp(34px,5vw,66px);font-weight:900;line-height:1.0;color:#fff;letter-spacing:-.02em;margin-bottom:12px;}
.hero-title span{color:var(--gold);display:block;}
.hero-sub{font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:30px;}
.hero-times{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px;}
.hero-time{background:rgba(11,61,94,.7);border:1px solid rgba(212,164,95,.4);border-radius:6px;padding:10px 15px;backdrop-filter:blur(4px);}
.hero-time .day{font-size:9px;font-weight:700;letter-spacing:.15em;color:var(--gold);text-transform:uppercase;}
.hero-time .time{font-size:14px;font-weight:800;color:#fff;margin-top:3px;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.hero-btn-primary{padding:13px 26px;background:var(--gold);color:var(--navy);border-radius:6px;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:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .2s,border-color .2s;}
/* Real live cue once js/main.js confirms an actual broadcast is running */
.hero-btn-secondary.is-live{background:var(--live-red);border-color:var(--live-red);color:#fff;}

/* ── HERO CONTACT FORM PANEL ── */
.hero-form-panel{background:rgba(11,61,94,.88);border:1px solid rgba(212,164,95,.35);border-radius:12px;padding:26px;backdrop-filter:blur(18px);}
.hero-form-title{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(212,164,95,.3);}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:9px 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:5px;color:#fff;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s;}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.3);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold);}
.form-group textarea{height:76px;resize:vertical;}
.form-group select option{background:var(--navy);color:#fff;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.form-submit{width:100%;padding:11px;background:var(--gold);color:var(--navy);border:none;border-radius:5px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;margin-top:4px;}
.form-submit:hover{background:var(--sand);}

/* ── VISION ── */
.vision-section{background:#fff;padding:80px 40px;}
.vision-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center;}
.vision-text .label{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.vision-text h2{font-size:38px;font-weight:900;letter-spacing:-.02em;color:var(--navy);margin-bottom:18px;line-height:1.1;}
.vision-text p{font-size:15px;color:#555;line-height:1.85;margin-bottom:14px;}
.vision-text .attribution{font-size:12px;color:#aaa;font-style:italic;}
.vision-photo{border-radius:10px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.13);}
.vision-photo img{width:100%;height:480px;object-fit:cover;object-position:top center;display:block;}

/* ── CARDS ── */
.cards-section{background:var(--cream);padding:70px 40px;}
.cards-inner{max-width:1100px;margin:0 auto;}
.cards-inner .label{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.cards-inner h2{font-size:32px;font-weight:900;color:var(--navy);margin-bottom:36px;letter-spacing:-.02em;}
.cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.info-card{background:#fff;border-radius:10px;padding:28px;border:1px solid #e8e8e8;border-top:3px solid var(--gold);}
.info-card .icon{font-size:28px;margin-bottom:14px;}
.info-card h3{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:8px;}
.info-card p{font-size:13px;color:#666;line-height:1.7;}

/* ── CTA BAND + FOOTER ── */
.cta-band{background:var(--navy);padding:56px 40px;text-align:center;}
.cta-band h2{font-size:30px;font-weight:900;color:#fff;margin-bottom:8px;}
.cta-band p{font-size:14px;color:rgba(255,255,255,.5);margin-bottom:26px;}
.cta-band a{display:inline-block;padding:13px 36px;background:var(--gold);color:var(--navy);border-radius:5px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;}
/* Exact footer color used on SanDiegoCampMeeting.com — a dedicated dark
   navy-black, not the --navy variable itself. */
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 img{height:26px;filter:brightness(0) invert(1);opacity:.4;}
footer a{color:var(--gold);text-decoration:none;}

/* ── PAGE BANNER (interior pages) ── */
.page-banner{background:var(--navy);padding-top:66px;}
.page-banner-inner{max-width:900px;margin:0 auto;padding:44px 24px 52px;text-align:center;}
.page-eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.page-title{font-size:clamp(30px,5vw,46px);font-weight:900;color:#fff;margin-bottom:12px;letter-spacing:-.02em;}
.page-subtitle{color:rgba(255,255,255,.75);font-size:15px;max-width:560px;margin:0 auto;}

/* ── VISIT FORM PAGE ── */
.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,
.visit-form gmp-place-autocomplete{
  width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:6px;
  font-size:14px;font-family:inherit;color:#1a1a1a;outline:none;
  transition:border-color .15s;background:#fff;
}
.visit-form input:focus,
.visit-form select:focus,
.visit-form textarea:focus{border-color:var(--gold);}
.visit-form textarea{min-height:100px;resize:vertical;}
#address-autocomplete-mount{position:relative;}
.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-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 — hints, subheadings, reveals ── */
.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;}

/* ── CHECKBOX PILLS (used for the form's YES/NO and multi-select questions) ── */
.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 ── */
.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;}
/* Explicit stacked lines (not a flowing auto-fit grid) — each fieldLine()
   from js/plan-a-visit.js is its own row, so which fields share a line is
   controlled deliberately (name fields together, phone type + number
   together on their own full-width line) instead of left to wrap however
   the available width happens to allow. */
.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 type + number as one bound pair, under a single "Phone Number"
   label — keeps the type dropdown immediately next to the number it
   belongs to, rather than the two drifting apart when the row wraps. */
.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);}

/* ── RESPONSIVE ──
   Note: there's no mobile hamburger yet — the desktop nav-links row just
   wraps/scrolls on narrow screens for now. A proper mobile nav toggle is a
   follow-up item, not something to silently hide without a replacement. */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .vision-inner{grid-template-columns:1fr;}
  .cards-row{grid-template-columns:1fr;}
  footer{justify-content:center;text-align:center;}
  .visit-form .form-row{grid-template-columns:1fr;}
  .visit-form-card{padding:28px;}
}