/* =========================================================================
   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:        #6a7160;
  --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: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", 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%; }
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); }
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; }
.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: 1.22rem; 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;
  background: rgba(246,244,236,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; 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: .3rem; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu > li > a {
  display: block; padding: .55rem .7rem; color: var(--ink); font-weight: 600;
  font-size: .93rem; letter-spacing: .01em; border-radius: 5px;
}
.menu > li > a:hover, .menu > li > a[aria-current="page"] { 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; }

/* dropdown */
.has-drop > a::after { content: "▾"; font-size: .7em; margin-left: .35rem; color: var(--muted); }
.drop {
  position: absolute; top: calc(100% + 6px); left: 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; transform: translateY(6px); transition: all .16s ease;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.drop a { display: block; padding: .55rem .8rem; border-radius: 6px; font-size: .92rem; color: var(--body); }
.drop a:hover { background: var(--green-wash); color: var(--green-dark); }

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

@media (max-width: 980px) {
  .nav-cta { display: none; }
  .nav-toggle { 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);
    transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
  }
  body.nav-open .menu { transform: translateX(0); }
  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 { padding: .8rem .6rem; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .has-drop > a::after { float: right; }
  .drop {
    position: static; opacity: 1; visibility: visible; 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 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 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: 1.08rem; }
.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 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; }
@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; }

/* leadership */
.people { display:flex; flex-wrap:wrap; gap: .8rem; }
.pill { background:#fff; border:1px solid var(--line); border-radius: 40px; padding:.5rem 1.1rem; font-weight:600; color:var(--ink); box-shadow: var(--shadow-sm); }
.pill span { color: var(--muted); font-weight: 400; }

/* 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; }

/* tour video */
.tour video { width:100%; border-radius: var(--radius); box-shadow: var(--shadow-md); background:#000; }

/* 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(--line); 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; }
.form-note { font-size:.85rem; color:var(--muted); margin-top:.8rem; }

/* =====================  FOOTER  ===================== */
.site-footer { background: var(--green-darker); color: #cdd6bd; padding: clamp(3rem,6vw,4.5rem) 0 2rem; }
.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 h4 { color:#fff; font-family: var(--font-sans); font-size:.82rem; 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:1rem; }
.footer-brand img { height: 54px; background:#fff; border-radius:8px; padding:4px; }
.footer-brand b { font-family: var(--font-serif); font-size:1.2rem; color:#fff; display:block; }
.footer-brand span { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-light); }
.fmenu { list-style:none; margin:0; padding:0; }
.fmenu li { margin-bottom:.5rem; }
.footer-motto { font-family: var(--font-serif); font-style: italic; color: var(--gold-light); font-size:1.15rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.14); margin-top:2.5rem; padding-top:1.4rem; font-size:.84rem; 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:#fff; 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; }