/* ============================================================
   Flamborough Christian Fellowship main stylesheet
   Ported from the V1 "liquid glass" design concept.
   ============================================================ */

/* --- SELF-HOSTED FONT (optional) ---------------------------------
   To drop the Google Fonts CDN: download Sora (400/500/600/700),
   place the .woff2 files in ../fonts/, uncomment below, and remove
   the 'flamcf-fonts' enqueue in functions.php.

@font-face { font-family:"Sora"; font-weight:400; font-display:swap;
  src:url("../fonts/sora-400.woff2") format("woff2"); }
@font-face { font-family:"Sora"; font-weight:500; font-display:swap;
  src:url("../fonts/sora-500.woff2") format("woff2"); }
@font-face { font-family:"Sora"; font-weight:600; font-display:swap;
  src:url("../fonts/sora-600.woff2") format("woff2"); }
@font-face { font-family:"Sora"; font-weight:700; font-display:swap;
  src:url("../fonts/sora-700.woff2") format("woff2"); }
------------------------------------------------------------------ */

:root {
  --bg: #eef0f4;
  --bg-2: #e3e7ef;
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.6);
  --surface-solid: #ffffff;
  --text: #1d1d1f;
  --text-soft: #44474d;
  --accent: #2456c4;          /* royal blue, slightly toned */
  --accent-soft: #3568d6;
  --accent-2: #5ba3e0;
  --accent-glow: rgba(53, 104, 214, 0.22);
  /* Fixed royal-blue gradient for filled buttons / chips. Stays deep in dark
     mode so white text keeps its contrast (unlike --accent, which lightens). */
  --grad-blue: linear-gradient(135deg, #3568d6, #2456c4);
  --ring: rgba(0, 0, 0, 0.07);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05), 0 6px 18px rgba(20,20,40,0.07);
  --shadow-lg: 0 12px 50px rgba(20,20,50,0.14), 0 3px 10px rgba(0,0,0,0.06);
  --radius: 24px;
  --radius-lg: 34px;
  --blur: saturate(180%) blur(26px);
  --blur-strong: saturate(200%) blur(40px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --glass-read: rgba(255, 255, 255, 0.9);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0c;
    --bg-2: #131318;
    --glass: rgba(40, 40, 46, 0.5);
    --glass-strong: rgba(44, 44, 52, 0.68);
    --glass-border: rgba(255, 255, 255, 0.12);
    --surface-solid: #16161a;
    --text: #f5f5f7;
    --text-soft: #aeb0b8;
    --accent: #6aa6e8;
    --accent-soft: #7db8ef;
    --accent-2: #9cc8f5;
    --accent-glow: rgba(122, 184, 239, 0.28);
    --glass-read: rgba(26, 26, 30, 0.92);
    --ring: rgba(255, 255, 255, 0.10);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 6px 18px rgba(0,0,0,0.5);
    --shadow-lg: 0 16px 60px rgba(0,0,0,0.6), 0 3px 10px rgba(0,0,0,0.5);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Clip horizontal overflow on the root, not body. If body itself is the
   horizontal clip it becomes a scroll container, which on iOS lets the fixed
   ambient background's oversized layers leak into the page height (phantom
   space below the footer). Keeping it on html avoids that. */
html { scroll-behavior: smooth; overflow-x: hidden; background: #d6e4f1; }

body {
  font-family: var(--font);
  color: var(--text);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  position: relative;
  background: #d6e4f1;
}
/* The root background carries the ambient field's tone so iOS Safari tints the
   status bar and toolbar to blend in, no hard grey line at the screen edges.
   The visible page is the fixed .ambient layer, so this only affects the chrome. */
@media (prefers-color-scheme: dark) { html, body { background: #0a0a0c; } }

/* Visible keyboard focus for everyone, important for older / low-vision users */
:where(a, button, .btn, .tile, .nav__links a, .ep-modal__close, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Screen-reader-only + skip link (keyboard bypass) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; }
.skip-link:focus { left: 50%; transform: translateX(-50%); top: 8px; padding: 11px 20px; background: var(--surface-solid); color: var(--accent); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: var(--shadow-lg); font-weight: 650; }

/* Use the Sora display font for headings (body stays on the system stack) */
.hero h1, .section-head h2, .service__info h2, .contact__info h3, .tile h3,
.cta-band h2, .story h2, .page-shell h1, .page-shell h2, .page-shell h3,
.policy h2, .vt-card h3, .ep-modal__title, .clock-card .time {
  font-family: var(--font-display);
}

/* Ambient color field behind the glass.
   Base stays fixed (always covers); the colored blobs sit on their own
   oversized layers that shift slowly on scroll for a sense of depth. */
.ambient {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(1400px 1000px at 50% -5%, rgba(91,163,224,0.16), transparent 72%),
    radial-gradient(1200px 1000px at 82% 108%, rgba(99,102,241,0.13), transparent 70%),
    radial-gradient(1000px 900px at 10% 65%, rgba(53,104,214,0.10), transparent 66%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.ambient::before {
  content:""; position:absolute; inset:-50%;
  background:
    radial-gradient(58% 50% at 34% 38%, rgba(91,163,224,0.20), transparent 60%),
    radial-gradient(60% 52% at 67% 46%, rgba(53,104,214,0.17), transparent 60%);
  transform: translate3d(0, var(--amb-shift, 0px), 0);
  will-change: transform;
}
.ambient::after {
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(420px 420px at 70% 60%, rgba(56,189,248,0.15), transparent 60%),
    radial-gradient(380px 380px at 25% 75%, rgba(99,102,241,0.12), transparent 60%);
  animation: drift 34s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate(-3%, -2%) scale(1); } to { transform: translate(4%, 3%) scale(1.08); } }

/* ---------- Floating liquid-glass nav ---------- */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 9px 12px 9px 18px;
  width: min(1100px, calc(100% - 32px));
  background: var(--glass-strong);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: 980px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.5);
}
.nav__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brandname {
  font-family: "Sora", var(--font);
  font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
  white-space: nowrap; line-height: 1; color: var(--text);
}
/* Initials F C F: full weight + a soft blue glow (not a heavy blue fill) */
.brandname b {
  font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
  text-shadow: 0 0 9px rgba(53, 104, 214, 0.6);
}
@media (max-width: 480px) { .brandname { font-size: 13px; white-space: normal; } }
.nav__links { display: flex; gap: 2px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav__links li { list-style: none; }
.nav__links a {
  color: var(--text); text-decoration: none; font-size: 16px;
  font-weight: 600; padding: 11px 16px; border-radius: 980px;
  transition: background .2s, color .2s;
}
.nav__links a:hover, .nav__links a:focus-visible { background: rgba(127,127,127,0.14); }
.nav__cta {
  background: var(--grad-blue);
  color: #fff !important; padding: 11px 20px !important; font-weight: 650 !important;
  border-radius: 980px; box-shadow: 0 4px 14px var(--accent-glow);
  text-decoration: none !important; white-space: nowrap;
}
.nav__cta:hover { filter: brightness(1.05); }
/* Desktop: links + Zoom button sit inline on the right of the bar. */
.nav__menu { display: flex; align-items: center; gap: 28px; }

/* Mobile menu: links inline on desktop; a hamburger toggles a panel on phones,
   so every destination (and the Zoom button) stays reachable without overflowing
   the pill. */
.nav__toggle {
  display: none; flex: 0 0 44px; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: none; border-radius: 50%; color: var(--text); background: rgba(127,127,127,0.12);
}
.nav__toggle svg { display: block; }
/* Full-screen scrim that blurs the page behind the open mobile menu. The nav
   bar (z-index 100) and the menu panel stay above it and crisp. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 90; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  background: rgba(10, 12, 20, 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%);
}
.nav.is-open ~ .nav-scrim { opacity: 1; pointer-events: auto; }
@media (max-width: 760px) {
  .nav__toggle { display: flex; margin-left: auto; }
  .nav__menu { display: none; }
  .nav.is-open .nav__menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    position: absolute; top: calc(100% + 10px); right: 0; left: auto;
    width: min(260px, calc(100vw - 32px));
    background: var(--glass-read); backdrop-filter: var(--blur-strong); -webkit-backdrop-filter: var(--blur-strong);
    border: 1px solid var(--glass-border); border-radius: 20px; padding: 8px;
    box-shadow: var(--shadow-lg);
  }
  .nav.is-open .nav__menu .nav__links { display: flex; flex-direction: column; width: 100%; gap: 2px; }
  .nav.is-open .nav__menu .nav__links li { width: 100%; }
  .nav.is-open .nav__menu .nav__links a { min-height: 48px; display: flex; align-items: center; padding: 12px 18px; border-radius: 12px; }
  .nav.is-open .nav__menu .nav__cta { margin-top: 4px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
}

/* ---------- Logo mark ---------- */
.logo { display:block; width: 34px; height: 34px; }
.logo--lg { width: 76px; height: 76px; }

/* ---------- Layout container ---------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 max(20px, 4vw); }
section.block { padding: clamp(56px, 8vw, 100px) 0; }

.glass {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.45);
}

/* ---------- Hero ---------- */
.hero { text-align: center; padding: clamp(130px, 16vw, 200px) 0 clamp(56px, 8vw, 96px); position: relative; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 650; color: var(--accent);
  background: var(--glass-strong); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  padding: 8px 16px; border-radius: 980px; margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.hero h1 {
  font-size: clamp(40px, 7.5vw, 88px);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 750;
  max-width: 15ch; margin: 0 auto 24px;
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--accent-soft), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p {
  font-size: clamp(18px, 2.2vw, 23px); color: var(--text-soft);
  max-width: 58ch; margin: 0 auto 38px; line-height: 1.5;
}
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Warm hero photo, framed in glass */
.hero__media { max-width: 980px; margin: clamp(40px, 6vw, 66px) auto 0; padding: 10px; border-radius: var(--radius-lg); }
.hero__media img { display: block; width: 100%; height: clamp(220px, 40vw, 460px); object-fit: cover; object-position: center 32%; border-radius: calc(var(--radius-lg) - 10px); }

/* Framed scene (church photo) cropped to a calm banner */
.scene { max-width: 980px; margin: clamp(36px, 5vw, 56px) auto 0; padding: 8px; border-radius: var(--radius-lg); }
.scene img, .scene svg { display: block; width: 100%; height: clamp(240px, 42vw, 470px); object-fit: cover; object-position: center 44%; border-radius: calc(var(--radius-lg) - 8px); }

/* Feature: offset church photo with a floating liquid-glass card (parallax) */
.feature { position: relative; }
.feature__media { width: 80%; margin-left: auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.feature__media img { display: block; width: 100%; height: clamp(340px, 46vw, 560px); object-fit: cover; object-position: center; }
.feature__card {
  position: absolute; left: 0; top: 50%; z-index: 2;
  transform: translateY(calc(-50% + var(--feat-py, 0px)));
  width: min(440px, 50%); padding: clamp(26px, 3vw, 40px); border-radius: var(--radius-lg);
  will-change: transform;
}
.feature__eyebrow { display: inline-block; color: var(--accent); font-weight: 650; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.feature__card h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; margin-bottom: 14px; }
.feature__card p { color: var(--text); font-size: 16.5px; margin-bottom: 22px; }
@media (max-width: 820px) {
  .feature__media { width: 100%; }
  .feature__card { position: static; transform: none; width: auto; margin: -54px 16px 0; }
}

.btn {
  font-family: var(--font); font-size: 16px; font-weight: 650;
  padding: 14px 30px; border-radius: 980px; border: none; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: transform .15s ease, box-shadow .2s, filter .2s;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--grad-blue); color: #fff; box-shadow: 0 8px 24px var(--accent-glow); }
.btn--primary:hover { box-shadow: 0 14px 36px var(--accent-glow); filter: brightness(1.04); }
.btn--glass {
  background: var(--glass-strong); color: var(--text);
  backdrop-filter: var(--blur); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn--glass:hover { filter: brightness(1.03); }
.btn--white { background: rgba(255,255,255,0.92); color: #2456c4; backdrop-filter: var(--blur); }
.btn--white:hover { background:#fff; }

/* Floating glass orbs in hero */
.orb { position: absolute; border-radius: 50%; backdrop-filter: var(--blur-strong);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg), inset 0 2px 10px rgba(255,255,255,0.4); z-index:-1; }
.orb--1 { width: 104px; height: 104px; top: 18%; left: 9%; background: rgba(245,158,11,0.10); animation: float 9s ease-in-out infinite; }
.orb--2 { width: 70px; height: 70px; top: 30%; right: 12%; background: rgba(56,189,248,0.09); animation: float 7s ease-in-out infinite reverse; }
.orb--3 { width: 48px; height: 48px; bottom: 14%; left: 21%; background: rgba(99,102,241,0.10); animation: float 11s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-18px) } }
@media (prefers-color-scheme: dark) {
  .orb--1 { background: rgba(245,158,11,0.05); }
  .orb--2 { background: rgba(56,189,248,0.045); }
  .orb--3 { background: rgba(99,102,241,0.05); }
}
@media (max-width:760px){ .orb{ display:none; } }

/* ---------- Section heads ---------- */
.section-head { text-align: center; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.025em; font-weight: 750; margin-bottom: 14px; }
.section-head p { color: var(--text-soft); font-size: 18px; max-width: 54ch; margin: 0 auto; }

/* ---------- Service feature ---------- */
.service {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
  border-radius: var(--radius-lg); overflow: hidden;
}
.service__info { padding: clamp(32px, 5vw, 60px); display: flex; flex-direction: column; justify-content: center; }
.service__info h2 { font-size: 30px; letter-spacing: -0.02em; margin-bottom: 8px; }
.service__info .when { color: var(--accent); font-weight: 650; font-size: 19px; margin-bottom: 18px; }
.service__info p { color: var(--text-soft); margin-bottom: 26px; font-size: 17px; }
.service__visual {
  position: relative; display: grid; place-items: center; min-height: 320px;
  background:
    radial-gradient(500px 300px at 70% 25%, rgba(91,163,224,0.40), transparent 65%),
    linear-gradient(135deg, #3b78e0, #2456c4);
  overflow: hidden;
}
.service__visual::before { content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  background: rgba(255,255,255,0.12); top:-60px; right:-60px; }
.clock-card {
  position: relative; z-index:1;
  background: rgba(255,255,255,0.22); backdrop-filter: var(--blur-strong);
  border: 1px solid rgba(255,255,255,0.45); border-radius: 24px;
  padding: 30px 42px; text-align: center; color:#fff;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.6);
}
.clock-card .time { font-size: 54px; font-weight: 750; letter-spacing: -0.03em; }
.clock-card .day { font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; opacity:.92; }
.clock-card .badge { display:inline-block; margin-top:16px; font-size:13px; font-weight:650; color:#fff; background: rgba(255,255,255,0.25); padding:6px 14px; border-radius:980px; border:1px solid rgba(255,255,255,0.4); }
.service__visual--photo { padding: 0; background: var(--bg-2); }
.service__visual--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
@media (max-width: 800px) { .service { grid-template-columns: 1fr; } .service__visual { order: -1; min-height: 260px; } }

/* ---------- Explore grid ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 920px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .grid--2 { grid-template-columns: 1fr; } }
.tile {
  border-radius: var(--radius); padding: 30px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .25s ease, box-shadow .3s, background .3s;
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); background: var(--glass-strong); }
.tile__icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 25px; color: #fff; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.4); }
/* Each Explore chip uses a fitting, muted tone (deep, not a neon rainbow) */
.ic-1 { background: linear-gradient(135deg, #45a06a, #2f7e4f); }  /* Directions: green (location) */
.ic-2 { background: linear-gradient(135deg, #c8923f, #9a6420); }  /* Our History: amber (heritage) */
.ic-3 { background: linear-gradient(135deg, #8569c9, #5f47a6); }  /* Podcasts: violet (audio) */
.ic-4 { background: linear-gradient(135deg, #5d6fd0, #4149a8); }  /* History of Elim: indigo */
.ic-5 { background: linear-gradient(135deg, #d06a86, #ab4057); }  /* Give: rose (heart) */
.ic-6 { background: var(--grad-blue); }                           /* A.O.D.A.: accessibility blue */
.tile h3 { font-size: 19px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tile p { color: var(--text); font-size: 16px; }
.tile__more { color: var(--accent); font-weight: 650; font-size: 15px; margin-top: auto; }

/* Inline SVG icon sizing (replaces emoji) */
.tile__icon svg { width: 27px; height: 27px; display: block; }
.ep-modal__icon svg { width: 26px; height: 26px; display: block; }
.row__icon { color: var(--accent); }
.row__icon svg { width: 19px; height: 19px; display: block; }

/* ---------- Contact / map ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; }
.contact__info { padding: clamp(32px, 5vw, 58px); }
.contact__info h3 { font-size: 28px; letter-spacing: -0.02em; margin-bottom: 26px; }
.row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.row__icon { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; background: var(--glass-strong); border:1px solid var(--glass-border); display: grid; place-items: center; font-size: 18px; }
.row__label { font-size: 13.5px; color: var(--text-soft); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.row__value { font-size: 16px; font-weight: 550; }
.row__value a { color: var(--accent); text-decoration: none; }
.row__value a:hover { text-decoration: underline; }
.map { min-height: 340px; background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%); position: relative; overflow: hidden; }
@media (prefers-color-scheme: dark) { .map { background: linear-gradient(135deg,#064e3b,#065f46); } }
.map::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px); background-size: 44px 44px; }
.map__road { position:absolute; height:16px; width:140%; top:55%; left:-20%; background: rgba(255,255,255,.65); transform: rotate(-8deg); }
.map__road2 { position:absolute; width:16px; height:140%; left:42%; top:-20%; background: rgba(255,255,255,.5); transform: rotate(6deg); }
.map__pin { position:absolute; top:50%; left:46%; width:36px; height:36px; border-radius:50% 50% 50% 0; background: var(--accent); box-shadow:0 8px 18px rgba(0,0,0,.3); rotate:-45deg; animation: drop 2s ease-in-out infinite; }
.map__pin::after { content:""; position:absolute; inset:10px; background:#fff; border-radius:50%; }
@keyframes drop { 0%,100%{ translate:0 0 } 50%{ translate:0 -8px } }
.map__label { position:absolute; bottom:18px; left:18px; z-index:500; pointer-events:none; background: var(--glass-strong); backdrop-filter: var(--blur); padding:11px 17px; border-radius:14px; box-shadow: var(--shadow-sm); font-size:13px; font-weight:650; border:1px solid var(--glass-border); }
/* Map fills the rounded card (iframe or Leaflet canvas) */
.map iframe, .map__canvas { position:absolute; inset:0; width:100%; height:100%; border:0; }
.map__canvas { background: var(--bg-2); z-index:0; }
/* Branded marker (Leaflet divIcon) */
.map-pin { background: var(--accent); border:3px solid #fff; border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,0.35); }
/* Night map: soften the light tiles to a muted night palette (not pure black).
   Only the tiles are filtered, so the pin, controls and labels stay normal. */
@media (prefers-color-scheme: dark) {
  .map__canvas .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(0.97) contrast(0.88) saturate(0.85); }
}
@media (max-width: 800px) { .contact { grid-template-columns: 1fr; } .map { order:-1; min-height: 240px; } }

/* ---------- CTA band ---------- */
.cta-band { border-radius: var(--radius-lg); padding: clamp(48px, 7vw, 80px); text-align: center; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(600px 300px at 30% 0%, #4a86d6, transparent 60%), var(--grad-blue); box-shadow: 0 24px 60px var(--accent-glow); }
.cta-band::after { content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,0.12); bottom:-120px; right:-60px; }
.cta-band h2 { font-size: clamp(28px,4.5vw,48px); letter-spacing: -0.025em; margin-bottom: 14px; position:relative; }
.cta-band p { opacity: 1; font-size: 19px; max-width: 50ch; margin: 0 auto 30px; position:relative; }
.cta-band .btn { position: relative; }
.cta-family { position: absolute; left: clamp(14px, 4vw, 44px); bottom: 16px; width: clamp(116px, 17vw, 188px); color: #fff; opacity: 0.30; pointer-events: none; }
.cta-family svg { display: block; width: 100%; height: auto; }
@media (max-width: 620px) { .cta-family { opacity: 0.16; } }

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 56px 24px 70px; color: var(--text-soft); font-size: 15px; }
.site-footer .fnav { display: flex; gap: 6px 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.site-footer .fnav a { color: var(--text-soft); text-decoration: none; display: inline-block; padding: 10px 10px; }
.site-footer .fnav a:hover, .site-footer .fnav a:focus-visible { color: var(--text); text-decoration: underline; }
.site-footer .credit { margin-top: 10px; font-size: 12.5px; letter-spacing: 0.02em; }
.site-footer .credit a { color: var(--text-soft); text-decoration: none; font-weight: 600; }
.site-footer .credit a:hover, .site-footer .credit a:focus-visible { color: var(--accent); }

/* ---------- Inner pages (posts, pages, archives, 404) ---------- */
.page-shell { max-width: 880px; margin: 0 auto; padding: clamp(120px, 16vw, 190px) max(20px, 4vw) 90px; }
.page-shell h1, .page-shell h2, .page-shell h3 { letter-spacing: -0.025em; }
.page-shell h1 { font-size: clamp(32px, 5vw, 54px); margin-bottom: 24px; }
.page-shell h2 { font-size: clamp(24px, 3.5vw, 34px); margin: 36px 0 14px; }
.page-shell p { color: var(--text-soft); margin-bottom: 18px; }
.page-shell a:not(.btn) { color: var(--accent); }
.page-shell img { border-radius: var(--radius); max-width: 100%; height: auto; }

/* ---------- Story / content-rich page (History of Elim) ---------- */
.story, .policy { max-width: 820px; margin: 0 auto; }
.story__lead { border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 42px); margin: 4px 0 36px; }
.story__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650;
  color: var(--accent); background: var(--glass-strong); border: 1px solid var(--glass-border);
  padding: 7px 15px; border-radius: 980px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.story__intro { font-size: clamp(19px, 2.4vw, 24px); line-height: 1.45; letter-spacing: -0.01em; color: var(--text); }
.story p { color: var(--text); font-size: 17px; margin-bottom: 20px; }
.story h2 { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.025em; margin: 46px 0 22px; }

/* Timeline */
.timeline { display: grid; gap: 16px; margin: 6px 0 42px; }
@media (min-width: 720px) { .timeline { grid-template-columns: repeat(3, 1fr); } }
.tl-item { border-radius: var(--radius); padding: 24px; }
.tl-year {
  font-family: "Sora", var(--font); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px;
  background: linear-gradient(120deg, var(--accent-soft), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tl-item h3 { font-size: 16px; letter-spacing: -0.01em; margin-bottom: 8px; }
.tl-item p { font-size: 16px; margin: 0; }

/* Vertical timeline (Our History): alternating sides */
.vtimeline { list-style: none; position: relative; max-width: 860px; margin: 14px auto 0; padding: 0; }
.vtimeline::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 4px; bottom: 4px; width: 2px; background: var(--glass-border); }
.vt-item { position: relative; width: 50%; padding-bottom: 30px; }
.vt-item:nth-child(odd) { left: 0; padding-right: 44px; }
.vt-item:nth-child(even) { left: 50%; padding-left: 44px; }
.vt-item::after { content: ""; position: absolute; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-soft), var(--accent)); box-shadow: 0 0 0 5px var(--accent-glow); }
.vt-item:nth-child(odd)::after { right: -8px; }
.vt-item:nth-child(even)::after { left: -8px; }
.vt-year { position: absolute; top: 2px; font-family: "Sora", var(--font); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--accent); }
.vt-item:nth-child(odd) .vt-year { left: calc(100% + 22px); }
.vt-item:nth-child(even) .vt-year { right: calc(100% + 22px); }
.vt-card { border-radius: var(--radius); padding: 20px 22px; }
.vt-card h3 { font-size: 18px; letter-spacing: -0.01em; margin-bottom: 6px; overflow-wrap: anywhere; }
.vt-card p { color: var(--text); font-size: 16px; margin: 0; }
@media (max-width: 720px) {
  .vtimeline { max-width: 100%; }
  .vtimeline::before { left: 22px; transform: none; }
  .vt-item, .vt-item:nth-child(odd), .vt-item:nth-child(even) { width: 100%; left: 0; padding: 0 0 24px 56px; }
  .vt-item::after, .vt-item:nth-child(odd)::after, .vt-item:nth-child(even)::after { left: 14px; right: auto; }
  .vt-year, .vt-item:nth-child(odd) .vt-year, .vt-item:nth-child(even) .vt-year { position: static; left: auto; right: auto; display: block; margin-bottom: 8px; }
}

/* Value cards */
.value-grid { display: grid; gap: 14px; margin: 4px 0 36px; }
@media (min-width: 620px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
.value {
  border-radius: 18px; padding: 18px 20px; font-size: 16px; font-weight: 550; color: var(--text);
  display: flex; gap: 13px; align-items: flex-start; line-height: 1.4;
}
.value::before {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent)); box-shadow: 0 0 0 4px var(--accent-glow);
}

/* Pull quote */
.pullquote {
  margin: 38px 0 6px; padding: 30px 34px; border-radius: var(--radius-lg);
  background: radial-gradient(600px 300px at 30% 0%, rgba(91,163,224,0.18), transparent 60%), var(--glass);
  border: 1px solid var(--glass-border); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.45);
  font-size: clamp(19px, 2.4vw, 23px); line-height: 1.5; letter-spacing: -0.01em;
}
.pullquote strong { color: var(--accent); }

/* Video, framed in glass and centered (4:3 to match the source) */
.video-frame { max-width: 680px; margin: 8px auto 30px; padding: 10px; border-radius: var(--radius-lg); }
.video-embed { position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--radius-lg) - 10px); overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-caption { color: var(--text-soft); font-size: 13.5px; text-align: center; margin: 12px 0 0; }

/* Policy page */
.policy h2 { font-size: clamp(20px, 3vw, 28px); letter-spacing: -0.02em; margin: 38px 0 14px; }
.policy h2:first-of-type { margin-top: 28px; }
.policy p { color: var(--text); font-size: 17px; margin-bottom: 18px; }
.policy ul, .policy ol { margin: 0 0 14px 1.15em; }
.policy li { color: var(--text); margin-bottom: 9px; }
.policy ul ul { margin-top: 9px; }

/* Buzzsprout podcast player, framed in glass */
.podcast-embed { border-radius: var(--radius-lg); padding: clamp(14px, 2.4vw, 22px); }
.podcast-embed #buzzsprout-large-player { min-height: 200px; }
.podcast-card { cursor: pointer; }
.podcast-more { text-align: center; margin-top: 32px; }

/* ---------- Feed fallback (podcasts / sermons unavailable) ---------- */
.feed-fallback { text-align: center; padding: 32px 16px; }
.feed-fallback p { color: var(--text-soft); font-size: 16px; margin-bottom: 18px; }

/* ---------- Sermons catalogue ---------- */
.sermons { max-width: 100%; margin: 0; }
.sermons-hero { text-align: center; max-width: 680px; margin: 0 auto 42px; }
.sermons-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--accent); background: var(--glass-strong); border: 1px solid var(--glass-border); padding: 8px 16px; border-radius: 980px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.sermons-hero__title { font-family: var(--font-display); font-size: clamp(40px, 7vw, 72px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 750; margin-bottom: 14px; background: linear-gradient(120deg, var(--accent-soft), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sermons-hero__sub { color: var(--text-soft); font-size: clamp(17px, 2.2vw, 20px); margin-bottom: 28px; }
.sermons-hero__search { position: relative; max-width: 520px; margin: 0 auto; }
.sermons-hero__searchicon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-soft); pointer-events: none; }
.sermon-search { width: 100%; min-height: 56px; padding: 14px 22px 14px 52px; font-size: 16px; border-radius: 980px; border: 1px solid var(--glass-border); background: var(--glass-read); color: var(--text); box-shadow: var(--shadow-lg); }
.sermon-search::placeholder { color: var(--text-soft); }
.sermon-count { color: var(--text-soft); font-size: 14px; margin: 14px 0 0; }
.sermon-list { display: flex; flex-direction: column; }
/* Collapsible year sections */
.sy { border-top: 1px solid var(--glass-border); }
.sy:last-of-type { border-bottom: 1px solid var(--glass-border); }
.sy > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 8px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); }
.sy > summary::-webkit-details-marker { display: none; }
.sy > summary:hover, .sy > summary:focus-visible { color: var(--accent); }
.sy__count { color: var(--text-soft); font-family: var(--font); font-weight: 500; font-size: 14px; }
.sy > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--text-soft); border-bottom: 2px solid var(--text-soft); transform: rotate(45deg); transition: transform .2s; }
.sy[open] > summary::after { transform: rotate(-135deg); }
.sy__rows { padding: 2px 0 12px; }
.sermon-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 14px; text-decoration: none; color: var(--text); border: 1px solid transparent; transition: background .15s, border-color .15s; }
.sermon-row:hover, .sermon-row:focus-visible { background: var(--glass); border-color: var(--glass-border); }
.sermon-row__play { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--grad-blue); }
.sermon-row__play svg { width: 14px; height: 14px; margin-left: 1px; }
.sermon-row__title { flex: 1 1 auto; font-weight: 600; font-size: 16px; }
.sermon-row__meta { flex: 0 0 auto; color: var(--text-soft); font-size: 13.5px; white-space: nowrap; }
.sermon-empty { text-align: center; color: var(--text-soft); padding: 28px; }
@media (max-width: 560px) {
  .sermon-row { flex-wrap: wrap; gap: 6px 14px; }
  .sermon-row__meta { flex-basis: 100%; padding-left: 48px; }
}

/* ---------- Podcast episode modal ---------- */
.ep-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.ep-modal.is-open { display: flex; }
.ep-modal__backdrop { position: absolute; inset: 0; background: rgba(15,18,30,0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: epFade .25s ease; }
.ep-modal__panel { position: relative; z-index: 1; width: min(560px, 100%);
  border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); text-align: center;
  animation: epPop .3s cubic-bezier(.2,.8,.2,1); }
@keyframes epFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes epPop { from { opacity: 0; transform: translateY(16px) scale(.97) } to { opacity: 1; transform: none } }
.ep-modal__close { position: absolute; top: 12px; right: 14px; width: 44px; height: 44px;
  display: grid; place-items: center; cursor: pointer; border-radius: 50%; font-size: 22px; line-height: 1;
  color: var(--text-soft); background: var(--glass-strong); border: 1px solid var(--glass-border);
  transition: filter .2s, color .2s; }
.ep-modal__close:hover { color: var(--text); filter: brightness(1.05); }
.ep-modal__icon { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 18px;
  display: grid; place-items: center; font-size: 24px; color: #fff;
  background: linear-gradient(135deg,#ff9f0a,#c2410c); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.4); }
.ep-modal__title { font-size: clamp(20px, 3vw, 26px); letter-spacing: -0.02em; line-height: 1.22; margin-bottom: 12px; }
.ep-modal__meta { color: var(--accent); font-weight: 650; font-size: 14px; margin-bottom: 16px; }
.ep-modal__desc { color: var(--text); font-size: 16px; margin-bottom: 22px; }
/* Custom audio player (branded, replaces the native controls) */
.player { margin: 6px 0 18px; }
.player__seek { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 980px; cursor: pointer; background: linear-gradient(to right, var(--accent) var(--pct, 0%), rgba(127,127,127,0.28) var(--pct, 0%)); }
.player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.3); cursor: pointer; }
.player__seek::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); cursor: pointer; }
.player__times { display: flex; justify-content: space-between; margin-top: 8px; color: var(--text-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.player__controls { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 16px; }
.player__play { width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer; background: var(--grad-blue); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px var(--accent-glow); }
.player__play svg { width: 24px; height: 24px; }
.player__play .i-pause { display: none; }
.ep-modal.is-playing .player__play .i-play { display: none; }
.ep-modal.is-playing .player__play .i-pause { display: block; }
.player__skip { background: none; border: none; cursor: pointer; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px; font-weight: 700; }
.player__skip svg { width: 24px; height: 24px; }
.player__skip:hover, .player__skip:focus-visible { color: var(--accent); }
.player__rate { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: var(--glass-strong); border: 1px solid var(--glass-border); color: var(--text); border-radius: 980px; padding: 7px 12px; font-weight: 650; font-size: 13px; cursor: pointer; min-width: 46px; }
@media (max-width: 430px) { .player__controls { gap: 16px; flex-wrap: wrap; } .player__rate { position: static; transform: none; } }
.ep-modal__link { color: var(--accent); text-decoration: none; font-weight: 650; font-size: 14px; }
.ep-modal__link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ep-modal__backdrop, .ep-modal__panel { animation: none; } }

/* Near-opaque reading surfaces so long text never sits on the drifting field */
.story__lead, .vt-card, .podcast-embed { background: var(--glass-read); }

/* Dark-mode polish: calmer glass rim, and dim the bright church photo to dusk */
@media (prefers-color-scheme: dark) {
  .glass, .nav, .btn--glass, .pullquote { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08); }
  .scene img { filter: brightness(0.82) saturate(0.92); }
}

/* If the browser lacks backdrop-filter, keep text off the raw colored field */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .nav, .hero__eyebrow, .story__lead, .vt-card, .podcast-embed { background: var(--glass-read); }
}

/* ---------- Reveal ----------
   Content is visible by default. JS adds .reveal--armed (hide) then .in
   (reveal), so if scripts fail or are blocked nothing is ever lost. */
.reveal { transition: opacity .7s ease, transform .7s ease; }
.reveal--armed { opacity: 0; transform: translateY(26px); }
.reveal--armed.in { opacity: 1; transform: none; }

/* Images fade in as they finish loading. JS adds .img-fade only when running,
   so images are always visible without JS. */
.img-fade { opacity: 0; transition: opacity .7s ease; }
.img-fade.img-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--armed, .img-fade { opacity: 1; transform: none; transition: none; }
  .ambient::after, .orb, .map__pin { animation: none; }
}

/* Visitor "pause motion" control (WCAG 2.2.2) and the state it applies */
.footer-tools { margin-top: 14px; }
.motion-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 12.5px; line-height: 1; color: var(--text-soft);
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 980px; padding: 8px 14px; cursor: pointer;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: color .2s, border-color .2s;
}
.motion-toggle:hover { color: var(--text); border-color: var(--accent); }
.motion-toggle svg { opacity: .8; }
body.motion-off .ambient::before { transform: none; }
body.motion-off .ambient::after,
body.motion-off .orb,
body.motion-off .map__pin { animation: none; }
body.motion-off .reveal,
body.motion-off .reveal--armed,
body.motion-off .img-fade { opacity: 1; transform: none; transition: none; }