/* =========================================================================
   Elkins Park Reformed Presbyterian Church
   Static site stylesheet
   ========================================================================= */

:root {
  --green:        #4b7a2b;
  --green-dark:   #345a1c;
  --green-darker: #223c11;
  --green-light:  #6f9c4a;
  --green-wash:   #eef3e5;
  --gold:         #b8923f;
  --gold-light:   #ddc07d;
  --cream:        #f6f4ec;
  --paper:        #ffffff;
  --ink:          #20291a;
  --body:         #40473a;
  --muted:        #69705f;
  --line:         #e4e0d1;
  --shadow-sm: 0 1px 3px rgba(30,40,20,.08), 0 1px 2px rgba(30,40,20,.06);
  --shadow-md: 0 10px 30px rgba(30,45,20,.10), 0 4px 10px rgba(30,45,20,.06);
  --radius: 10px;
  --maxw: 1140px;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--body);
  background: var(--cream);
  line-height: 1.7;
  font-size: 18px;
}
img { max-width: 100%; height: auto; display: block; image-orientation: from-image; }
a { color: var(--green-dark); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--green); }
#main-content a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
  text-decoration-color: currentColor;
}
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ink); line-height: 1.15; font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1.1em; }
hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.narrow { max-width: 820px; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.center { text-align: center; }
.eyebrow {
  font-family: var(--font-sans); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; font-size: .78rem; color: var(--green);
  margin: 0 0 .9rem;
}
.lede { font-size: inherit; color: var(--muted); }
.bg-cream { background: var(--cream); }
.bg-paper { background: var(--paper); }
.bg-wash  { background: var(--green-wash); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-weight: 700; font-size: .95rem;
  letter-spacing: .03em; padding: .8rem 1.6rem; border-radius: 6px;
  background: var(--green); color: #fff !important; border: 2px solid var(--green);
  cursor: pointer; transition: all .18s ease;
}
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-1px); color:#fff; }
.btn-outline { background: transparent; color: var(--ink) !important; border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff !important; }
.btn-light { background:#fff; color: var(--green-dark) !important; border-color:#fff; }
.btn-light:hover { background: var(--cream); border-color: var(--cream); color: var(--green-darker) !important; }
.btn-ghost { background: transparent; color:#fff !important; border-color: rgba(255,255,255,.7); }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color:#fff; }

/* =====================  TOP UTILITY BAR  ===================== */
.topbar {
  background: var(--green-darker); color: #e7ecdd;
  font-size: .82rem; letter-spacing: .02em;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .5rem; }
.topbar a { color: #fff; }
.topbar .motto { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--gold-light); }
.topbar .tb-times strong { color:#fff; }
@media (max-width: 760px) { .topbar .tb-times { display: none; } .topbar .container { justify-content: center; } }

/* =====================  HEADER / NAV  ===================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* NB: no transform/filter/backdrop-filter here — those would make the
     fixed mobile menu (a descendant) be contained by the header box
     instead of the viewport, collapsing it to a thin strip. */
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.site-header .container, .topbar .container { max-width: 1260px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding-block: .6rem; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { height: 52px; width: auto; }
.brand .bt { font-family: var(--font-serif); line-height: 1.05; }
.brand .bt b { display: block; font-size: 1.18rem; color: var(--green-dark); font-weight: 700; letter-spacing:.01em; }
.brand .bt span { display: block; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-family: var(--font-sans); font-weight:600; }

.menu { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu > li > a, .menu > li > button {
  display: block; padding: .55rem .62rem; color: var(--ink); font-weight: 600;
  font-size: .92rem; letter-spacing: .005em; border: 0; border-radius: 5px; background: transparent;
  white-space: nowrap; cursor: pointer;
}
.menu > li > a:hover, .menu > li > button:hover, .menu > li > a[aria-current="page"], .menu > li.is-current > button { color: var(--green-dark); background: var(--green-wash); }
.menu > li > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--green); border-radius: 5px 5px 0 0; }
.menu > li.nav-login > a { background: var(--green); color:#fff; padding-inline:.9rem; }
.menu > li.nav-login > a:hover, .menu > li.nav-login > a[aria-current="page"] { background:var(--green-dark); color:#fff; box-shadow:none; border-radius:5px; }

/* dropdown */
.has-drop > .drop-toggle::after { content: "▾"; display: inline-block; font-size: .7em; margin-left: .35rem; color: var(--muted); transition: transform .16s ease; }
.has-drop > .drop-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.drop {
  position: absolute; top: calc(100% + 6px); left: auto; right: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow-md); padding: .4rem; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.drop-toggle[aria-expanded="true"] + .drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.drop a { display: block; padding: .55rem .8rem; border-radius: 6px; font-size: .92rem; color: var(--body); }
.drop a:hover, .drop a[aria-current="page"] { background: var(--green-wash); color: var(--green-dark); }

.nav-toggle { display: none; background: none; border: 0; border-radius: 5px; cursor: pointer; padding: .4rem; color: var(--ink); }
.nav-toggle svg { width: 30px; height: 30px; }

@media (max-width: 1090px) {
  .nav-toggle { position: relative; z-index: 55; display: inline-flex; }
  .menu {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw);
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; padding: 5rem 1.2rem 2rem; box-shadow: var(--shadow-md);
    overflow-y: auto;
    /* Shown/hidden in place (no off-screen transform) so this fixed panel
       never creates horizontal scroll on small screens. */
    visibility: hidden; pointer-events: none;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .menu { visibility: visible; pointer-events: auto; }
  body.nav-open::after { content:""; position: fixed; inset: 0; background: rgba(20,30,15,.4); z-index: 40; }
  .menu { z-index: 45; }
  .menu > li > a, .menu > li > button { width: 100%; padding: .8rem .6rem; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; }
  .menu > li.nav-login > a { margin-top:.8rem; padding:.75rem 1rem; border:0; border-radius:6px; text-align:center; }
  .has-drop > .drop-toggle::after { float: right; margin-top: .55rem; }
  .drop {
    position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    box-shadow: none; border: 0; border-bottom: 1px solid var(--line);
    padding: 0 0 .4rem .6rem; margin: 0; border-radius: 0; display: block;
  }
  .drop-toggle[aria-expanded="false"] + .drop { display: none; }
  .drop-toggle[aria-expanded="true"] + .drop { display: block; }
  .drop a { padding: .5rem .6rem; }
}

/* =====================  HERO  ===================== */
.hero { position: relative; color: #fff; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,35,12,.55) 0%, rgba(20,35,12,.45) 40%, rgba(25,45,15,.78) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: clamp(4.5rem, 12vw, 9rem) 0; }
.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.hero .kicker { color: var(--gold-light); font-weight: 700; letter-spacing:.2em; text-transform: uppercase; font-size:.85rem; margin-bottom:1rem; }
.hero .verse { font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; max-width: 40ch; color: #f2efe2; margin: 1.2rem 0 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero-facts {
  position: relative; z-index: 2; margin-top: clamp(2rem,5vw,3rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; overflow: hidden;
}
.hero-facts div { background: rgba(20,35,12,.35); backdrop-filter: blur(3px); padding: 1.1rem 1.2rem; }
.hero-facts .t { font-family: var(--font-sans); text-transform: uppercase; letter-spacing:.12em; font-size:.72rem; color: var(--gold-light); font-weight:700; }
.hero-facts .v { font-family: var(--font-serif); font-size: 1.5rem; color:#fff; font-weight:600; }
.hero-facts .s { font-size: .82rem; color:#dfe4d5; }
@media (max-width: 720px){ .hero-facts { grid-template-columns: 1fr; } }

/* =====================  PAGE HEADER (interior pages)  ===================== */
.page-hero { position: relative; color:#fff; padding: clamp(3rem,8vw,5.5rem) 0 clamp(2.6rem,6vw,4rem); overflow: hidden; }
.page-hero.plain { background: linear-gradient(120deg, var(--green-darker), var(--green-dark)); }
.page-hero .ph-media { position:absolute; inset:0; }
.page-hero .ph-media img { width:100%; height:100%; object-fit:cover; }
.page-hero.has-img::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,35,12,.55), rgba(20,35,12,.75)); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color:#fff; margin-bottom:.3rem; }
.page-hero .crumb { font-size:.85rem; letter-spacing:.06em; color:#dbe2ce; }
.page-hero .crumb ol { display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; list-style:none; }
.page-hero .crumb li + li::before { content:"/"; margin-right:.35rem; color:#dbe2ce; }
.page-hero .crumb a { color:#fff; }
.page-hero .sub { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color:#eef1e5; max-width: 46ch; margin-top:.6rem; }

/* =====================  GENERIC CONTENT  ===================== */
.prose { font-size: inherit; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.8rem; color: var(--green-dark); }
.prose h4 { font-size: 1.15rem; margin-top: 1.6rem; color: var(--green-dark); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--gold-light); }
.prose blockquote {
  margin: 1.8rem 0; padding: 1.2rem 1.6rem; border-left: 4px solid var(--green);
  background: var(--green-wash); border-radius: 0 8px 8px 0; font-family: var(--font-serif);
  font-size: 1.25rem; font-style: italic; color: var(--ink);
}
.prose blockquote cite { display:block; font-size:.95rem; font-style: normal; color: var(--muted); margin-top:.6rem; font-family: var(--font-sans); }

/* =====================  GRIDS & CARDS  ===================== */
.grid { display: grid; gap: 1.6rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){ .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card .ic { font-size: 1.6rem; }
.card h2, .card h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.card .meta { color: var(--green); font-weight: 700; font-family: var(--font-sans); font-size:.95rem; }

/* split feature (image + text) */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3.5rem); align-items: center; }
.feature.rev .fx-media { order: 2; }
.feature .fx-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); aspect-ratio: 4/3; object-fit: cover; }
.feature .fx-media.portrait img { aspect-ratio: 3/4; max-height: 560px; margin-inline:auto; }
.feature .fx-media.tall img { aspect-ratio: 3/4; }
.feature .fx-media.event-flyer img { aspect-ratio: auto; max-height: 720px; object-fit: contain; margin-inline: auto; }
@media (max-width: 820px){ .feature { grid-template-columns: 1fr; } .feature.rev .fx-media { order: 0; } }

/* schedule list */
.sched { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background:#fff; box-shadow: var(--shadow-sm); }
.sched-row { display: grid; grid-template-columns: 240px 1fr; gap: 1.4rem; padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); }
.sched-row:last-child { border-bottom: 0; }
.sched-row:nth-child(even) { background: var(--cream); }
.sched-row .when { text-align: right; }
.sched-row .when b { display:block; font-family: var(--font-serif); font-size: 1.25rem; color: var(--ink); font-weight:700; }
.sched-row .when .time { color: var(--green); font-weight: 700; font-size:.98rem; }
.sched-row .what { color: var(--body); }
@media (max-width: 640px){ .sched-row { grid-template-columns: 1fr; gap:.3rem; } .sched-row .when { text-align: left; } }

/* photo gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery img { width:100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow-sm); }
@media (max-width: 680px){ .gallery { grid-template-columns: 1fr 1fr; } }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem .3rem; font-family: var(--font-serif);
  font-size: 1.28rem; color: var(--ink); font-weight: 700; display: flex; justify-content: space-between; gap:1rem; align-items:center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-size: 1.6rem; font-family: var(--font-sans); line-height:1; transition: transform .2s ease; }
.faq details[open] summary::after { content: "–"; }
.faq .ans { padding: 0 .3rem 1.3rem; color: var(--body); }
.faq .ans p { margin: 0 0 .8rem; }

/* source-backed question search */
.ask-layout { max-width: 980px; }
.ask-intro { max-width: 780px; margin-bottom: 2rem; }
.ask-intro h2 { margin-bottom: .35rem; }
.index-stats { color: var(--green-dark); font-weight: 700; font-size: .92rem; }
.ask-search-card {
  background: var(--green-wash); border: 1px solid #d8e2ca; border-radius: 14px;
  box-shadow: var(--shadow-sm); padding: clamp(1.2rem, 3vw, 2rem); margin-bottom: 2rem;
}
.ask-form > label { display:block; color: var(--ink); font-weight: 700; font-size: 1.05rem; margin-bottom: .55rem; }
.ask-input-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .65rem; }
.ask-input-row input {
  width:100%; min-height: 54px; padding: .75rem 1rem; border: 1px solid var(--muted);
  border-radius: 7px; background:#fff; color:var(--ink); font:inherit; font-size:1.05rem;
}
.ask-input-row input:focus, .ask-tools select:focus {
  outline: 3px solid rgba(75,122,43,.22); outline-offset: 1px; border-color: var(--green);
}
.ask-tools { display:flex; flex-wrap:wrap; align-items:end; gap:.8rem 1.1rem; margin-top:1rem; }
.ask-tools label { color:var(--muted); font-size:.86rem; font-weight:600; }
.ask-tools select {
  display:block; min-height: 40px; margin-top:.25rem; padding:.35rem 2rem .35rem .65rem;
  border:1px solid var(--muted); border-radius:6px; background:#fff; color:var(--ink); font:inherit; font-size:.9rem;
}
.ask-clear { border:0; background:none; padding:.45rem 0; color:var(--green-dark); font:inherit; font-weight:700; cursor:pointer; }
.ask-pdf-link { margin-left:auto; padding:.45rem 0; font-weight:700; font-size:.9rem; }
.ask-privacy { margin:.9rem 0 0; color:var(--muted); font-size:.82rem; }
.example-questions { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid #d3ddc5; }
.example-questions > span { color:var(--muted); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-right:.2rem; }
.example-questions button {
  border:1px solid #bdcaaa; border-radius:30px; background:#fff; color:var(--green-dark);
  padding:.38rem .7rem; font:inherit; font-size:.84rem; line-height:1.25; cursor:pointer;
}
.example-questions button:hover { border-color:var(--green); background:var(--cream); }
.example-questions button:focus-visible, .ask-clear:focus-visible, .refinement-button:focus-visible {
  outline:3px solid rgba(75,122,43,.3); outline-offset:2px;
}
.search-status { color:var(--muted); font-weight:600; margin:0 0 .8rem; }
.answer-card {
  margin:0 0 1.25rem; padding:clamp(1.15rem,3vw,1.7rem); border:1px solid #cbd9b8;
  border-left:6px solid var(--green); border-radius:10px; background:var(--green-wash); box-shadow:var(--shadow-sm);
}
.answer-card[hidden], .search-refinements[hidden] { display:none; }
.answer-card.is-care { background:#fff8e9; border-color:#e3cf9c; border-left-color:var(--gold); }
.answer-card.is-emergency { background:#fff0ed; border-color:#d9a095; border-left-color:#9f3425; }
.answer-eyebrow { margin:0 0 .25rem; color:var(--green-dark); font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.answer-card.is-emergency .answer-eyebrow { color:#872b1f; }
.answer-title { margin:0 0 .55rem; color:var(--ink); font-size:clamp(1.45rem,3vw,1.85rem); }
.answer-body { color:var(--ink); font-size:1.02rem; line-height:1.65; }
.answer-body p:last-child { margin-bottom:0; }
.answer-sources { display:flex; flex-wrap:wrap; gap:.45rem .7rem; margin:.95rem 0 0; padding-top:.85rem; border-top:1px solid rgba(38,77,30,.18); }
.answer-sources-label { width:100%; color:var(--muted); font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.answer-source { font-size:.86rem; font-weight:700; }
.search-refinements { margin:0 0 1.15rem; padding:.9rem 1rem; border:1px solid var(--line); border-radius:8px; background:var(--cream); }
.refinement-label { display:block; margin-bottom:.55rem; color:var(--muted); font-size:.84rem; font-weight:700; }
.refinement-list { display:flex; flex-wrap:wrap; gap:.45rem; }
.refinement-button { border:1px solid #bdcaaa; border-radius:30px; background:#fff; color:var(--green-dark); padding:.35rem .65rem; font:inherit; font-size:.84rem; cursor:pointer; }
.refinement-button:hover { border-color:var(--green); }
.search-results { border-top:1px solid var(--line); }
.search-result { background:#fff; border-bottom:1px solid var(--line); }
.search-result summary {
  display:grid; grid-template-columns:64px minmax(0,1fr) 28px; gap:1rem; align-items:start;
  list-style:none; cursor:pointer; padding:1.25rem .35rem; border-radius:8px;
}
.search-result summary::-webkit-details-marker { display:none; }
.search-result summary:hover { background:var(--cream); }
.search-result summary:focus-visible { outline:3px solid rgba(75,122,43,.3); outline-offset:2px; }
.result-location {
  display:inline-flex; justify-content:center; align-items:center; min-height:34px; padding:.2rem .45rem;
  border-radius:5px; background:var(--green-dark); color:#fff; font-weight:700; font-size:.84rem; letter-spacing:.04em;
}
.result-location.is-site { background:#6c5831; }
.result-location.is-scripture { background:#51436f; }
.result-main { display:flex; min-width:0; flex-direction:column; }
.result-title { color:var(--ink); font-family:var(--font-serif); font-size:1.35rem; font-weight:700; line-height:1.2; }
.result-meta { color:var(--green-dark); font-size:.78rem; font-weight:700; letter-spacing:.035em; text-transform:uppercase; margin-top:.25rem; }
.result-snippet { color:var(--body); font-size:.92rem; line-height:1.5; margin-top:.5rem; }
.result-keywords { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.65rem; }
.match-keyword { background:#efe4c6; color:#604b1e; border-radius:20px; padding:.12rem .48rem; font-size:.72rem; font-weight:700; }
.result-chevron { color:var(--green); font-size:1.65rem; line-height:1; transition:transform .18s ease; }
.search-result[open] .result-chevron { transform:rotate(45deg); }
.result-expanded { margin:0 0 1.2rem 80px; padding:1.2rem 1.35rem; border-left:4px solid var(--gold); background:var(--cream); border-radius:0 8px 8px 0; }
.result-passage { color:var(--ink); font-family:var(--font-serif); font-size:1.14rem; line-height:1.62; white-space:pre-line; }
.result-source { display:inline-block; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line); font-size:.84rem; font-weight:700; }
.result-source-note { display:block; margin-top:.6rem; color:var(--muted); font-size:.8rem; }
.load-more { display:flex; margin:1.5rem auto 0; }
.load-more[hidden] { display:none; }
.search-notice, .search-note { color:var(--muted); font-size:.9rem; }
.index-guide { border-top:1px solid var(--line); }
.index-guide-grid { margin-top:2rem; }
.index-guide-grid > div { position:relative; }
.index-guide-grid b { display:flex; width:34px; height:34px; align-items:center; justify-content:center; background:var(--green-dark); color:#fff; border-radius:50%; margin-bottom:.8rem; }
.index-guide-grid h3 { font-size:1.22rem; }
.index-guide-grid p { font-size:.92rem; }
.index-guide .search-note { margin:2rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line); }
@media (max-width: 650px) {
  .ask-input-row { grid-template-columns:1fr; }
  .ask-input-row .btn { justify-content:center; }
  .ask-pdf-link { width:100%; margin-left:0; }
  .search-result summary { grid-template-columns:54px minmax(0,1fr) 20px; gap:.65rem; padding-block:1rem; }
  .result-location { font-size:.76rem; }
  .result-title { font-size:1.16rem; }
  .result-expanded { margin-left:0; }
}

/* leadership */
.leadership-heading { max-width: 720px; margin-bottom: 2rem; }
.leadership-heading > :last-child { margin-bottom: 0; }
.leadership-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,3vw,2rem); }
.leadership-grid-elders { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; }
.leader-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.leader-photo-placeholder {
  display:grid; place-items:center; align-content:center; gap:.65rem; aspect-ratio:4/5; min-height:280px;
  background:linear-gradient(145deg,var(--green-wash),#dce6cf); color:var(--green-dark); text-align:center;
}
.leader-photo-placeholder span { font:700 clamp(2.8rem,7vw,4.6rem)/1 var(--font-serif); letter-spacing:.06em; opacity:.72; }
.leader-photo-placeholder small { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.leader-copy { padding:1.25rem 1.35rem 1.45rem; }
.leader-copy h3 { margin-bottom:.55rem; }
.leader-role { margin-bottom:.3rem; color:var(--green); font-size:.74rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.leader-bio { margin-bottom:0; color:var(--muted); font-size:.94rem; }
@media (max-width:760px) {
  .leadership-grid,.leadership-grid-elders { grid-template-columns:1fr; max-width:480px; }
  .leader-photo-placeholder { min-height:0; }
}

/* callout / cta band */
.cta-band { background: linear-gradient(120deg, var(--green-dark), var(--green-darker)); color:#fff; text-align:center; }
.cta-band h2 { color:#fff; }
.cta-band p { color:#e6ecdb; max-width: 52ch; margin-inline:auto; }
.cta-actions { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }

/* info cards row (contact) */
.info-cards { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; }
@media (max-width:760px){ .info-cards { grid-template-columns:1fr; } }
.info-cards .card .ic { color: var(--green); }

/* map */
.map-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); border:1px solid var(--line); }
.map-wrap iframe { display:block; width:100%; height: 420px; border:0; }
.private-embed { min-height:320px; display:grid; align-content:center; padding:clamp(1.2rem,4vw,2.4rem); background:var(--green-wash); color:var(--body); }
.private-embed-choice { max-width:54ch; margin-inline:auto; text-align:center; }
.private-embed-choice h3 { margin-bottom:.65rem; }
.private-embed-actions { display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap; }
.private-embed-loaded-actions { min-height:2.8rem; padding-top:.8rem; }
.private-embed-status { margin:.8rem 0 0; color:var(--muted); font-size:.88rem; text-align:center; }
.private-embed iframe { width:100%; min-height:420px; border:0; background:#fff; }
.private-embed iframe[hidden], .private-embed [hidden] { display:none; }

/* tour video */
.tour-card {
  position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; padding:0;
  border:0; border-radius:var(--radius); background:#000; color:#fff; cursor:pointer; box-shadow:var(--shadow-md);
}
.tour-card img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.tour-card-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,16,5,.08) 30%,rgba(8,16,5,.76) 100%); }
.tour-card-copy { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:1.25rem; }
.tour-card-copy .video-play { position:static; translate:none; width:clamp(54px,7vw,76px); height:clamp(54px,7vw,76px); font-size:clamp(1.05rem,2vw,1.45rem); }
.tour-card-copy strong { color:#fff; font-family:var(--font-serif); font-size:clamp(1.65rem,4vw,3rem); line-height:1.1; text-shadow:0 3px 18px rgba(0,0,0,.75); }
.tour-card:hover img { transform:scale(1.018); }
.tour-card:hover .video-play { background:var(--gold); }
.tour-card:focus-visible { outline:3px solid var(--gold-light); outline-offset:4px; }
@media (prefers-reduced-motion:reduce) { .tour-card img { transition:none; } }

/* embedded sermon archive */
.sermon-browser {
  margin-top: clamp(2.5rem,6vw,4.5rem); padding: clamp(1.1rem,2.5vw,1.8rem);
  background: linear-gradient(145deg, var(--green-darker), var(--green-dark));
  border: 1px solid rgba(190,157,77,.5); border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-md);
}
.sermon-browser-head { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin-bottom:1.25rem; }
.sermon-browser-head h2 { color:#fff; margin-bottom:0; }
.sermon-browser-head .eyebrow { color:var(--gold-light); }
.sermon-browser-head > p { color:#dfe4d5; max-width:34ch; margin-bottom:.2rem; text-align:right; }
.sermon-embed { overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); background:#10150e; }
.sermon-embed iframe { display:block; width:100%; height:clamp(540px,68vh,720px); border:0; }
.sermon-embed.private-embed { background:#10150e; color:#dfe4d5; }
.sermon-embed .private-embed-choice h3 { color:#fff; }
.sermon-embed .private-embed-status { color:#dfe4d5; }
.sermon-embed .private-embed-actions a { color:#fff; text-decoration:underline; }
@media (max-width: 720px){
  .sermon-browser { padding:.75rem; }
  .sermon-browser-head { display:block; padding:.5rem .35rem 0; }
  .sermon-browser-head > p { max-width:none; text-align:left; }
  .sermon-embed iframe { height:620px; }
}

/* horizontal church video rail + lightbox player */
.video-showcase { overflow:hidden; }
.video-showcase-head { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:1.7rem; }
.video-showcase-head h2 { margin-bottom:.45rem; }
.video-showcase-head p:last-child { max-width:62ch; margin-bottom:0; }
.video-rail-controls { display:flex; gap:.55rem; flex:0 0 auto; }
.video-rail-controls button {
  width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:#fff;
  color:var(--green-dark); font:700 1.2rem/1 var(--font-sans); cursor:pointer; box-shadow:var(--shadow-sm);
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.video-rail-controls button:hover { background:var(--green); color:#fff; transform:translateY(-2px); }
.video-rail-controls button:focus-visible, .video-card:focus-visible, .video-lightbox-close:focus-visible {
  outline:3px solid var(--gold-light); outline-offset:3px;
}
.video-rail {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(270px,31%); gap:1.15rem;
  overflow-x:auto; overscroll-behavior-inline:contain; scroll-behavior:smooth; scroll-snap-type:inline mandatory;
  scrollbar-color:var(--green-light) transparent; scrollbar-width:thin; padding:.2rem .1rem 1rem;
}
.video-card {
  appearance:none; display:block; min-width:0; padding:0; overflow:hidden; scroll-snap-align:start;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink); text-align:left;
  cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.video-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--green-light); }
.video-card-media { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--green-darker); }
.video-card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(8,15,5,.62)); }
.video-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.video-card-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.34); font:700 clamp(3rem,9vw,6rem)/1 var(--font-serif); letter-spacing:.08em; background:radial-gradient(circle at 50% 35%,#4b7a2b,#223c11 68%); }
.video-card:hover .video-card-media img { transform:scale(1.035); }
.video-play {
  position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%; display:grid; place-items:center;
  width:50px; height:50px; padding-left:3px; border:2px solid rgba(255,255,255,.9); border-radius:50%;
  background:rgba(34,60,17,.86); color:#fff; box-shadow:0 7px 22px rgba(0,0,0,.28);
}
.video-duration { position:absolute; z-index:2; right:.55rem; bottom:.5rem; padding:.18rem .38rem; border-radius:4px; background:rgba(8,12,6,.82); color:#fff; font-size:.76rem; font-weight:700; }
.video-card-copy { display:block; min-height:112px; padding:1rem 1.05rem 1.1rem; }
.video-card-copy strong { display:block; color:var(--ink); font-family:var(--font-serif); font-size:1.22rem; line-height:1.2; }
.video-card-copy > span { display:block; margin-top:.55rem; color:var(--muted); font-size:.84rem; }
body.video-modal-open { overflow:hidden; }
.video-lightbox {
  position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  overflow-y:auto; background:rgba(10,19,7,.78); -webkit-backdrop-filter:blur(7px) saturate(.7); backdrop-filter:blur(7px) saturate(.7);
}

/* embedded Shepherd management portal */
.shepherd-section {
  padding:.75rem 0 0;
  background:linear-gradient(120deg,var(--green-darker),var(--green-dark)) top/100% .75rem no-repeat,var(--cream);
}
.shepherd-privacy { margin:.2rem 1rem .7rem; text-align:right; font-size:.82rem; }
.shepherd-privacy a { color:var(--green-dark); text-decoration:underline; }
.shepherd-frame-shell {
  position:relative; width:min(1540px,calc(100% - 28px)); min-height:760px; margin-inline:auto;
  overflow:hidden; border:1px solid var(--line); border-bottom:0; border-radius:14px 14px 0 0;
  background:#fff; box-shadow:0 18px 55px rgba(28,45,18,.14);
}
.shepherd-frame { display:block; width:100%; height:clamp(760px,82vh,1080px); border:0; background:#fff; }
.shepherd-frame-status, .shepherd-frame-error {
  position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:2rem; text-align:center; background:linear-gradient(145deg,var(--cream),#fff);
}
.shepherd-frame-status[hidden], .shepherd-frame-error[hidden] { display:none; }
.shepherd-frame-error h2 { margin-bottom:0; }
.shepherd-frame-error p { max-width:52ch; }
.shepherd-spinner { width:42px; height:42px; border:4px solid var(--line); border-top-color:var(--green); border-radius:50%; animation:shepherd-spin .8s linear infinite; }
@keyframes shepherd-spin { to { transform:rotate(360deg); } }

body.shepherd-modal-open { overflow:hidden; }
.shepherd-leave { position:fixed; z-index:1200; inset:0; display:grid; place-items:center; padding:1rem; }
.shepherd-leave[hidden] { display:none; }
.shepherd-leave-backdrop { position:absolute; inset:0; background:rgba(15,26,10,.72); -webkit-backdrop-filter:blur(5px) saturate(.7); backdrop-filter:blur(5px) saturate(.7); }
.shepherd-leave-dialog { position:relative; width:min(540px,100%); padding:clamp(1.5rem,4vw,2.4rem); border:1px solid rgba(184,146,63,.75); border-radius:14px; background:var(--cream); box-shadow:0 30px 90px rgba(0,0,0,.42); }
.shepherd-leave-dialog h2 { font-size:clamp(1.8rem,5vw,2.45rem); }
.shepherd-leave-actions { display:flex; justify-content:flex-end; gap:.7rem; margin-top:1.6rem; }
.shepherd-leave button:focus-visible, .shepherd-frame-error button:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
@media (max-width:720px) {
  .shepherd-frame-shell { width:100%; min-height:680px; border-inline:0; border-radius:0; }
  .shepherd-frame { height:max(680px,82vh); }
  .shepherd-leave-actions { flex-direction:column-reverse; }
  .shepherd-leave-actions .btn { justify-content:center; }
}
.video-lightbox[hidden] { display:none; }
.focus-sentinel { position:fixed; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.video-lightbox-dialog {
  width:min(1120px,100%); overflow:hidden; border:1px solid rgba(190,157,77,.7); border-radius:calc(var(--radius) + 5px);
  background:var(--green-darker); box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.video-lightbox-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem .85rem .8rem 1.25rem; }
.video-lightbox-head h2 { overflow:hidden; margin:0; color:#fff; font-size:clamp(1.1rem,2.5vw,1.55rem); text-overflow:ellipsis; white-space:nowrap; }
.video-lightbox-close { flex:0 0 auto; width:42px; height:42px; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font:400 1.9rem/1 var(--font-sans); cursor:pointer; }
.video-lightbox-close:hover { background:#fff; color:var(--green-darker); }
.video-player-shell { aspect-ratio:16/9; background:#000; }
.video-player-shell iframe { display:block; width:100%; height:100%; border:0; }
.video-direct { margin:.7rem 1.25rem 1rem; text-align:right; }
.video-direct a { color:#fff; text-decoration:underline; }
@media (max-width: 760px){
  .video-showcase-head { align-items:start; }
  .video-showcase-head p:last-child { max-width:48ch; }
  .video-rail { grid-auto-columns:84%; }
  .video-rail-controls { display:none; }
  .video-lightbox { padding:.65rem; }
  .video-lightbox-head { padding:.55rem .55rem .55rem .9rem; }
  .video-lightbox-close { width:38px; height:38px; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .video-lightbox { place-items:start center; padding:.4rem; }
  .video-lightbox-dialog { width:min(100%,136vh); margin-inline:auto; }
}

/* contact form */
.contact-form label { display:block; font-weight:600; color:var(--ink); margin-bottom:1rem; font-size:.95rem; }
.contact-form input, .contact-form textarea {
  width:100%; margin-top:.35rem; padding:.7rem .8rem; font: inherit; color: var(--ink);
  background:#fff; border:1px solid var(--muted); border-radius:7px;
}
.contact-form input:focus, .contact-form textarea:focus { outline:2px solid var(--green-light); outline-offset:1px; border-color:var(--green); }
.contact-form textarea { resize: vertical; }
.contact-form .btn { margin-top:.4rem; }
.contact-form .form-honey { display:none; }
.form-note { font-size:.85rem; color:var(--muted); margin-top:.8rem; }

/* =====================  FOOTER  ===================== */
.site-footer { background: var(--green-darker); color: #cdd6bd; padding: 1.85rem 0 1.3rem; font-size:.78rem; line-height:1.55; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 820px){ .footer-grid { grid-template-columns: 1fr; gap:1.8rem; } .site-footer { padding-top:2.5rem; } }
.site-footer h2 { color:#fff; font-family: var(--font-sans); font-size:.72rem; letter-spacing:.16em; text-transform: uppercase; margin-bottom:1rem; }
.site-footer a { color:#e7ecdd; }
.site-footer a:hover { color:#fff; }
.footer-brand { display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem; }
.footer-brand img { height: 54px; background:#fff; border-radius:8px; padding:4px; }
.footer-brand b { font-family: var(--font-serif); font-size:1rem; color:#fff; display:block; }
.footer-brand span { font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-light); }
.footer-column p { margin-bottom:.9rem; }
.footer-congregation { color:#eef1e5; font-size:1rem; margin-bottom:.15rem !important; }
.footer-visit p { margin-bottom:.85rem; }
.footer-subheading { display:inline-block; margin-bottom:.05rem; }
.footer-directions { margin-top:1.15rem; margin-bottom:0 !important; }
.footer-directions span { display:inline-block; margin-left:.35rem; font-size:1.15rem; line-height:1; }
.fmenu { list-style:none; margin:0; padding:0; }
.fmenu li { margin-bottom:.05rem; }
.footer-email { margin-top:.25rem; margin-bottom:0 !important; font-weight:700; }
.footer-motto { font-family: var(--font-serif); font-style: italic; color: var(--gold-light); font-size:1rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.14); margin-top:2rem; padding-top:1.25rem; font-size:.7rem; color:#aebc9a; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* small utilities */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.stack > * + * { margin-top: 1.1rem; }
.tag { display:inline-block; background:var(--gold); color:var(--ink); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.25rem .7rem; border-radius:40px; }
.divider-leaf { text-align:center; color:var(--green-light); font-size:1.4rem; margin: .4rem 0 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}

html :focus-visible:focus {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ink);
}

/* Shepherd-authenticated page text editor */
.page-editor {
  position:fixed; z-index:900; right:1rem; bottom:1rem; width:min(390px,calc(100vw - 2rem));
  padding:1rem; border:1px solid rgba(190,157,77,.75); border-radius:12px;
  background:#fff; color:var(--ink); box-shadow:0 18px 55px rgba(15,26,10,.28);
}
.page-editor-heading { margin:0; color:var(--green-dark); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.page-editor-identity { margin:.2rem 0 0; color:var(--muted); font-size:.82rem; }
.page-editor-status { margin:.65rem 0 .8rem; font-size:.92rem; line-height:1.35; }
.page-editor-status[data-state="success"] { color:#22631b; }
.page-editor-status[data-state="error"] { color:#9b241c; font-weight:600; }
.page-editor-actions { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.page-editor button {
  min-height:38px; padding:.52rem .8rem; border-radius:7px; font:700 .85rem/1 var(--font-sans); cursor:pointer;
}
.page-editor button[hidden] { display:none; }
.page-editor button:disabled { cursor:not-allowed; opacity:.5; }
.page-editor-primary { border:1px solid var(--green); background:var(--green); color:#fff; }
.page-editor-primary:hover:not(:disabled) { background:var(--green-dark); }
.page-editor-secondary { border:1px solid var(--line); background:#fff; color:var(--ink); }
.page-editor-link { padding-inline:.25rem !important; border:0; background:transparent; color:var(--green-dark); text-decoration:underline; }
.page-editor button:focus-visible { outline:3px solid var(--gold-light); outline-offset:2px; }
.page-editor-active [data-page-editor-id] {
  border-radius:3px; outline:2px dashed rgba(48,92,28,.65); outline-offset:2px; cursor:text;
  min-width:.75em; min-height:1em;
}
.page-editor-active [data-page-editor-id]:empty::before { content:'Empty text'; color:var(--muted); font-style:italic; }
.page-editor-active [data-page-editor-id]:hover { background:rgba(220,231,207,.55); }
.page-editor-active [data-page-editor-id]:focus {
  outline:3px solid var(--gold); outline-offset:2px; background:#fff8dc; box-shadow:0 0 0 5px rgba(255,255,255,.9);
}
@media (max-width:600px) {
  .page-editor { right:.5rem; bottom:.5rem; width:calc(100vw - 1rem); max-height:42vh; overflow:auto; }
}