/* Load Playfair Display for the Missionary "Classic" heading style.
   Asthoria is reserved for the logo wordmark only. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

/*
 * Unified Radio Theme — Missionary Radio "Classic" Variant
 *
 * Scoped to html[data-style="missionary"].
 * Overrides design tokens and layered visual styles drawn from the original
 * Missionary Radio theme: indigo accent, Asthoria display font, warm parchment
 * tones, topbar ticker, vinyl now-playing card, and hymnal warmth.
 *
 * Load order: tokens.css → base.css → components.css → page.css → THIS FILE
 */

/* ══════════════════════════════════════════════════════════════════════════════
   1. TOKEN OVERRIDES
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] :root,
html[data-style="missionary"] {
  /* Indigo accent */
  --accent:        #4c5cb1;
  --accent-strong: #3b4a9e;
  --accent-soft:   oklch(0.92 0.06 265);
  --accent-ink:    #ffffff;

  /* Warm parchment palette */
  --bg:            oklch(0.972 0.012 80);
  --bg-elev:       oklch(1.00 0 0);
  --bg-sunken:     oklch(0.945 0.014 75);
  --bg-inverse:    oklch(0.22 0.025 250);
  --surface:       oklch(1.00 0 0);
  --surface-2:     oklch(0.945 0.014 75);

  --text:          oklch(0.22 0.025 250);
  --text-muted:    oklch(0.58 0.018 250);
  --text-soft:     oklch(0.40 0.025 250);
  --text-on-inverse: oklch(0.972 0.012 80);

  --border:        oklch(0.88 0.012 80);
  --border-strong: oklch(0.78 0.012 80);

  /* Typography: Playfair Display for headings, Newsreader serif, Geist sans.
     Asthoria is intentionally kept ONLY for the logo wordmark via a specific rule. */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-serif:   "Newsreader", ui-serif, Georgia, serif;
  --font-body:    "Geist", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;
  --font-logo:    "Asthoria", "Bowlby One SC", system-ui, sans-serif;

  /* Shadows */
  --shadow-1: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(20,18,10,.05), 0 12px 32px -16px rgba(20,18,10,.12);
  --shadow-2: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 18px rgba(20,15,5,.10);
  --shadow-3: 0 12px 32px -16px rgba(20,18,10,.25);

  /* Geometry — slightly rounder */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* Lamp logo URL — override in wp-config or Customizer */
  --lamp-url: url('../images/mark.png');
}

/* Dark mode for Missionary Radio */
html[data-style="missionary"].dark {
  --bg:            oklch(0.20 0.024 250);
  --bg-elev:       oklch(0.245 0.028 250);
  --bg-sunken:     oklch(0.17 0.022 250);
  --bg-inverse:    oklch(0.972 0.012 80);
  --surface:       oklch(0.245 0.028 250);
  --surface-2:     oklch(0.20 0.024 250);

  --text:          oklch(0.96 0.012 80);
  --text-muted:    oklch(0.62 0.018 250);
  --text-soft:     oklch(0.80 0.014 80);
  --text-on-inverse: oklch(0.22 0.025 250);

  --border:        oklch(0.32 0.022 250);
  --border-strong: oklch(0.42 0.022 250);
}


/* ══════════════════════════════════════════════════════════════════════════════
   2. TYPOGRAPHY OVERRIDES
   ══════════════════════════════════════════════════════════════════════════════ */

/* Increase base body size slightly throughout the Missionary variant */
html[data-style="missionary"] body { font-size: 17px; }

html[data-style="missionary"] h1,
html[data-style="missionary"] h2,
html[data-style="missionary"] h3,
html[data-style="missionary"] .section-head h2 {
  font-family: var(--font-display);
  letter-spacing: -.01em;
  font-weight: 700;
  /* Playfair Display reads elegantly in mixed case — no forced uppercase on narrative heads */
  text-transform: none;
}

/* Per-level weight tuning */
html[data-style="missionary"] h1 { font-weight: 700; }
html[data-style="missionary"] h2 {
  font-weight: 600;
  font-size: clamp(2rem, 3.2vw, 3.2rem);
}
html[data-style="missionary"] h3 {
  font-weight: 500;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
}

html[data-style="missionary"] h1 em,
html[data-style="missionary"] h2 em { font-style: normal; color: var(--accent); }

html[data-style="missionary"] .lead,
html[data-style="missionary"] blockquote {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
}

/* ══════════════════════════════════════════════════════════════════════════════
   3. SITE HEADER — sticky with backdrop blur
   ══════════════════════════════════════════════════════════════════════════════ */

/* Missionary header: slightly more opaque backdrop than WVHM base */
html[data-style="missionary"] .nav {
  background: color-mix(in oklab, var(--bg), transparent 8%);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

/* More generous nav padding to match original Missionary spacing */
html[data-style="missionary"] .nav-inner {
  padding-top: 22px;
  padding-bottom: 14px;
}

/* Logo wordmark keeps Asthoria — it's the one place the display font belongs */
html[data-style="missionary"] .nav-brand .wordmark,
html[data-style="missionary"] .footer-brand b {
  font-family: var(--font-logo);
  font-size: 26px;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text);
}

html[data-style="missionary"] .nav-brand .tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  display: block;
}

/* Nav links: mono uppercase, matching original Missionary primary nav */
html[data-style="missionary"] .nav-links {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}

html[data-style="missionary"] .nav-link {
  border-radius: 0;
  padding: 8px 2px;
}

html[data-style="missionary"] .nav-link.active,
html[data-style="missionary"] .nav-link[aria-current="page"] {
  background: transparent;
  color: var(--text);
  position: relative;
}

html[data-style="missionary"] .nav-link.active::after,
html[data-style="missionary"] .nav-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Indigo-themed logo glow — subtle in light, prominent in dark */
html[data-style="missionary"] .heart-mark {
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,0.10))
    drop-shadow(0 0 8px color-mix(in oklch, var(--accent) 28%, transparent));
}

html[data-style="missionary"].dark .heart-mark,
html[data-style="missionary"] .on-dark .heart-mark,
html[data-style="missionary"] .footer .heart-mark {
  filter:
    drop-shadow(0 0 24px color-mix(in oklch, var(--accent) 70%, transparent))
    drop-shadow(0 0 6px  color-mix(in oklch, var(--accent) 50%, transparent));
}

/* ══════════════════════════════════════════════════════════════════════════════
   5. HERO — copy-left / image-right layout
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .hero::before {
  opacity: 0.30;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--accent) 14%, transparent) 1px, transparent 1px),
    linear-gradient(45deg, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px;
  background-position: 0 0, 18px 18px;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse at 48% 40%, black 0%, black 46%, transparent 86%);
}

html[data-style="missionary"].dark .hero::before {
  opacity: 0.24;
}

html[data-style="missionary"] .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--accent);
}

html[data-style="missionary"] .hero-slide {
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: end;
}

html[data-style="missionary"] .hero-slide.hero-slide--full-image {
  grid-template-columns: 1fr;
  gap: 0;
  min-height: 0;
  align-items: center;
}

html[data-style="missionary"] .hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 8.4vw, 140px);
  line-height: .86;
  margin-top: 18px;
  letter-spacing: -.005em;
  text-transform: uppercase;
}

html[data-style="missionary"] .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

html[data-style="missionary"] .eyebrow .bar {
  width: 24px; height: 1px;
  background: var(--text-muted);
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   6. NOW-PLAYING CARD — vinyl record animation
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .nowcard {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
}

html[data-style="missionary"] .nowcard::before {
  content: "";
  position: absolute; inset: auto -40% -60% auto;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  opacity: .22;
  pointer-events: none;
  filter: blur(8px);
}

html[data-style="missionary"] .now-body {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: center;
}

html[data-style="missionary"] .albumart {
  width: 92px; height: 92px;
  border-radius: 10px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent), black 10%) 0%,
    color-mix(in oklab, var(--accent), black 30%) 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 16px -6px rgba(0,0,0,.25);
}

html[data-style="missionary"] .albumart::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 40%),
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.06) 8px 9px);
}

/* Vinyl record spinning out of album art */
html[data-style="missionary"] .albumart .vinyl {
  position: absolute; right: -30px; top: 50%;
  transform: translateY(-50%);
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #111 18%, #222 19%, #111 36%, #2a2a2a 37%, #111 60%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
  animation: mr-spin 6s linear infinite;
}

@keyframes mr-spin { to { transform: translateY(-50%) rotate(360deg); } }

html[data-style="missionary"] .now-meta .program {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .005em;
}

html[data-style="missionary"] .progress {
  margin-top: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
html[data-style="missionary"] .progress > i {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 2px;
}

/* Station selector from the original Missionary hero */
html[data-style="missionary"] .tower {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

html[data-style="missionary"] .tower-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

html[data-style="missionary"] .tower-head h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-muted);
}

html[data-style="missionary"] .tower-head a {
  font-size: 12px;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
}

html[data-style="missionary"] .stations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html[data-style="missionary"] .station {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: 82px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  position: relative;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

html[data-style="missionary"] .station:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--text), transparent 75%);
}

html[data-style="missionary"] .station .freq {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--text);
}

html[data-style="missionary"] .station .freq .fm {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  margin-left: 6px;
  color: var(--text-muted);
  vertical-align: top;
}

html[data-style="missionary"] .station .city {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.25;
}

html[data-style="missionary"] .station.active,
html[data-style="missionary"] .station[aria-checked="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

html[data-style="missionary"] .station.active .freq,
html[data-style="missionary"] .station.active .city,
html[data-style="missionary"] .station.active .freq .fm,
html[data-style="missionary"] .station[aria-checked="true"] .freq,
html[data-style="missionary"] .station[aria-checked="true"] .city,
html[data-style="missionary"] .station[aria-checked="true"] .freq .fm {
  color: var(--bg);
}

html[data-style="missionary"] .station.active::before,
html[data-style="missionary"] .station[aria-checked="true"]::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
}

@media (max-width: 640px) {
  html[data-style="missionary"] .stations {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   7. SECTION HEADS — display font, uppercase
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .section-head h2 {
  font-size: clamp(36px, 4.5vw, 72px);
  line-height: .9;
  letter-spacing: -.005em;
}

/* ══════════════════════════════════════════════════════════════════════════════
   8. PROGRAMS GRID — MR card style with featured spans
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .program-grid { grid-template-columns: repeat(12, 1fr); }
html[data-style="missionary"] .program-card       { grid-column: span 3; }
html[data-style="missionary"] .program-card.feat  { grid-column: span 6; }
html[data-style="missionary"] .grid-progs { gap: 24px; }
html[data-style="missionary"] .grid-progs .program-card.std { grid-column: span 3; }

html[data-style="missionary"] .program-card .card-img { aspect-ratio: 4 / 3; }
html[data-style="missionary"] .program-card.feat .card-img { aspect-ratio: 16 / 10; }

html[data-style="missionary"] .program-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .005em;
  font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════════════════
   9. SCHEDULE STRIP — Newsreader / Geist Mono font overrides
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .schedule {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
}

/* In dark mode the schedule blends into the page — lift to a visibly lighter
   surface so individual rows read clearly against the background */
html[data-style="missionary"].dark .schedule {
  background: oklch(0.29 0.026 250);
  border-color: oklch(0.38 0.022 250);
}

html[data-style="missionary"] .schedule-row {
  border-bottom: 1px solid var(--border);
  padding: 10px 8px 14px;
  min-height: 104px;
  position: relative;
}

html[data-style="missionary"].dark .schedule-row {
  border-bottom-color: oklch(0.35 0.022 250);
}

html[data-style="missionary"] .schedule-row:last-child { border-bottom: 0; }

html[data-style="missionary"] .sched-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .12em;
}

html[data-style="missionary"] .sched-title {
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--text);
  margin-top: 6px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

html[data-style="missionary"] .schedule-row.is-dim {
  background: color-mix(in oklab, var(--surface-2), var(--bg) 50%);
}

html[data-style="missionary"] .schedule-row.is-live {
  background: color-mix(in oklab, var(--accent), var(--bg) 78%);
  border-left: none;
}

html[data-style="missionary"].dark .schedule-row.is-live {
  background: color-mix(in oklab, var(--accent) 16%, oklch(0.29 0.026 250));
}

html[data-style="missionary"] .sched-live-badge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--accent);
  font-size: 0;
  padding: 0;
  border-radius: 0;
}

html[data-style="missionary"] .timestrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

html[data-style="missionary"] .hour {
  position: relative;
  min-height: 118px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

html[data-style="missionary"] .hour.now {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

html[data-style="missionary"] .hour .time {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
}

html[data-style="missionary"] .hour .time small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

html[data-style="missionary"] .hour.now .time small {
  color: color-mix(in oklab, var(--bg), transparent 25%);
}

html[data-style="missionary"] .hour b {
  display: block;
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.2;
}

html[data-style="missionary"] .hour em {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-soft);
}

html[data-style="missionary"] .hour.now em {
  color: color-mix(in oklab, var(--bg), transparent 25%);
}

html[data-style="missionary"] .nowbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--pct, 0%);
  height: 4px;
  background: var(--accent);
}

html[data-style="missionary"] .legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

html[data-style="missionary"] .legend span {
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
}

@media (max-width: 760px) {
  html[data-style="missionary"] .timestrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   10. VERSE PANEL — dark inverse section with lamp logo
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .verse-section {
  background: var(--text);
  color: var(--bg);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

html[data-style="missionary"] .verse-section::before {
  /* accent glow in corner */
  content: "";
  position: absolute; left: -10%; top: -30%;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  opacity: .18;
}

html[data-style="missionary"] .verse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: var(--s-8) var(--s-7);
  max-width: none;
  text-align: left;
}
@media (max-width: 800px) {
  html[data-style="missionary"] .verse { grid-template-columns: 1fr; padding: var(--s-6) var(--s-5); }
  html[data-style="missionary"] .verse .lamp { display: none; }
}

html[data-style="missionary"] .verse .lamp {
  width: 200px; height: 200px;
  background: var(--lamp-url) center / contain no-repeat;
  filter: drop-shadow(0 12px 36px color-mix(in oklab, var(--accent), transparent 50%));
  justify-self: center;
}

html[data-style="missionary"] .verse-quote {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.8vw, 42px);
  line-height: 1.18;
  letter-spacing: -.005em;
  color: var(--bg);
  font-weight: 380;
  text-wrap: balance;
  margin: 0;
}
html[data-style="missionary"] .verse-quote em  { font-style: italic; color: var(--accent-soft); }
html[data-style="missionary"] .verse-ref { margin-top: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in oklab, var(--bg), transparent 35%); }

/* Dark mode override — swap back to surface card */
html[data-style="missionary"].dark .verse-section { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
html[data-style="missionary"].dark .verse-quote   { color: var(--text); }
html[data-style="missionary"].dark .verse-ref     { color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════════
   11. STATION CARDS — frequency display style
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .freq-list b {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: .01em;
}

html[data-style="missionary"] .freq-list .fm {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  margin-left: 6px;
  color: var(--text-muted);
  vertical-align: top;
}

/* ══════════════════════════════════════════════════════════════════════════════
   12. GIVING PAGE — pledge tiers + progress bar
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .tier-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  html[data-style="missionary"] .tier-grid { grid-template-columns: repeat(2, 1fr); }
}

html[data-style="missionary"] .tier-price {
  font-family: var(--font-display);
  font-size: 60px;
  letter-spacing: -.01em;
}

/* FAQ — details/summary accordion */
html[data-style="missionary"] .faq { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
html[data-style="missionary"] .faq-item { border-bottom: 1px solid var(--border); }
html[data-style="missionary"] .faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  list-style: none; cursor: pointer; padding: 22px 0;
}
html[data-style="missionary"] .faq-item summary::-webkit-details-marker { display: none; }
html[data-style="missionary"] .faq-q { font-family: var(--font-serif); font-size: 21px; color: var(--text); line-height: 1.3; font-weight: 500; }
html[data-style="missionary"] .faq-mark { font-family: var(--font-mono); font-size: 24px; color: var(--text-muted); transition: transform .2s; width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; }
html[data-style="missionary"] .faq-item[open] .faq-mark { transform: rotate(45deg); color: var(--accent); }
html[data-style="missionary"] .faq-a { font-family: var(--font-serif); font-size: 16px; color: var(--text-soft); line-height: 1.6; margin: 0 0 22px; max-width: 78ch; font-weight: 380; }

/* ══════════════════════════════════════════════════════════════════════════════
   13. FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .footer,
html[data-style="missionary"].dark .footer {
  border-top: none;
  padding: var(--s-7) 0 var(--s-5);
  font-size: 13px;
  margin-top: var(--s-5);
  --text-on-inverse: oklch(0.96 0.012 80);    /* ensure child rules that use this token work */
}

html[data-style="missionary"] .footer {
  background: oklch(0.20 0.024 250);   /* deep indigo — explicit, beats page.css variable cascade */
  color:      oklch(0.96 0.012 80);    /* warm parchment */
}

html[data-style="missionary"].dark .footer {
  background: oklch(0.16 0.022 250);   /* slightly deeper in dark mode, beats page.css #0A0805 */
  color:      oklch(0.96 0.012 80);
}

html[data-style="missionary"] .footer-brand b {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .01em;
  text-transform: uppercase;
}

html[data-style="missionary"] .footer-newsletter {
  border: 2px solid currentColor;
  border-radius: 0;
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  box-shadow: 8px 8px 0 color-mix(in oklch, var(--accent) 34%, transparent);
}

html[data-style="missionary"] .footer-newsletter h5 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .02em;
}

html[data-style="missionary"] .footer-newsletter-form input[type="email"],
html[data-style="missionary"] .footer-newsletter-form input[type="text"],
html[data-style="missionary"] .footer-newsletter-form .mauticform-input {
  border-radius: 0;
}

html[data-style="missionary"] .footer-newsletter-form input[type="submit"],
html[data-style="missionary"] .footer-newsletter-form button,
html[data-style="missionary"] .footer-newsletter-form .mailpoet_submit,
html[data-style="missionary"] .footer-newsletter-form .mauticform-button {
  border-radius: 0;
  background: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════════
   15. FLOATING PLAYER
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .floating-player {
  background: var(--surface);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -4px 24px rgba(0,0,0,.15);
  font-family: var(--font-sans);
}

html[data-style="missionary"] .fp-title {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
}

html[data-style="missionary"] .fp-subtitle {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--text-muted);
}

html[data-style="missionary"] .fp-play {
  background: var(--accent);
  color: #fff;
  border-radius: 2px;
}

html[data-style="missionary"] .fp-play:hover {
  background: var(--accent-dark, oklch(from var(--accent) calc(l - .08) c h));
}

/* ══════════════════════════════════════════════════════════════════════════════
   16. PLEDGE / GIVING BANNER
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .pledge-banner {
  background: var(--accent);
  color: #fff;
  border-radius: 0;
  padding: var(--s-6) 0;
}

html[data-style="missionary"] .pledge-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}

html[data-style="missionary"] .pledge-banner p {
  font-family: var(--font-serif);
  font-size: 18px;
  color: rgba(255,255,255,.85);
  max-width: 60ch;
}

html[data-style="missionary"] .pledge-banner .btn {
  background: #fff;
  color: var(--accent);
  font-family: var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 700;
}

html[data-style="missionary"] .pledge-banner .btn:hover {
  background: rgba(255,255,255,.9);
}

/* ══════════════════════════════════════════════════════════════════════════════
   17. ON-AIR STRIP
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .onair {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--s-3) 0;
}

html[data-style="missionary"] .onair-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

html[data-style="missionary"] .onair-show {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
}

html[data-style="missionary"] .onair-host {
  background: linear-gradient(135deg, var(--accent), oklch(from var(--accent) calc(l + .08) calc(c - .03) calc(h + 20)));
}

html[data-style="missionary"] .onair-next {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════════
   18. SCHEDULE ROWS
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .schedule-row {
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
}

html[data-style="missionary"] .schedule-row.is-live {
  background: oklch(from var(--accent) l c h / .07);
  border-left: 3px solid var(--accent);
}

html[data-style="missionary"] .sched-time {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: .04em;
}

html[data-style="missionary"] .sched-title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
}

html[data-style="missionary"] .sched-host {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--text-muted);
}

html[data-style="missionary"] .sched-live-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 2px 6px;
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   19. DAY TABS
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .day-tabs {
  border-bottom: 2px solid var(--border);
  gap: 0;
}

html[data-style="missionary"] .day-tab {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: var(--s-2) var(--s-4);
  border-radius: 0;
  background: transparent;
  transition: color .15s, border-color .15s;
}

html[data-style="missionary"] .day-tab:hover {
  color: var(--text);
  border-color: var(--border);
}

html[data-style="missionary"] .day-tab[aria-selected="true"],
html[data-style="missionary"] .day-tab.active {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════════
   20. FREQUENCY RAIL
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .freq-rail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: var(--s-5) 0;
}

html[data-style="missionary"] .freq-rail-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
}

html[data-style="missionary"] .freq-item {
  flex: 1;
  border-right: 1px solid var(--border);
  padding: var(--s-4) var(--s-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html[data-style="missionary"] .freq-item:last-child { border-right: none; }

html[data-style="missionary"] .freq-cta {
  flex: 0 0 auto;
  padding: var(--s-4) var(--s-5);
}

html[data-style="missionary"] .freq-value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}

html[data-style="missionary"] .freq-band {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

html[data-style="missionary"] .freq-location {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-soft);
  margin-top: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   21. STAFF GRID
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .staff-grid { gap: var(--s-5); }

html[data-style="missionary"] .staff-card { text-align: center; }

html[data-style="missionary"] .staff-name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: var(--s-3);
}

html[data-style="missionary"] .staff-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 4px;
}

html[data-style="missionary"] .staff-bio {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.6;
  margin-top: var(--s-2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   22. EVENTS LIST
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .events-list { gap: var(--s-4); }

html[data-style="missionary"] .event-card {
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}

html[data-style="missionary"] .event-date-badge {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: var(--s-2) var(--s-3);
  border-radius: 0;
}

html[data-style="missionary"] .event-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
}

html[data-style="missionary"] .event-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

html[data-style="missionary"] .event-desc {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════════════════════════
   23. ARTICLE GRID
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .article-grid { gap: var(--s-4); }

html[data-style="missionary"] .article-card {
  border: 1px solid var(--border);
  border-radius: 0;
}

html[data-style="missionary"] .article-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

html[data-style="missionary"] .article-title {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--text);
  line-height: 1.3;
  font-weight: 600;
}

html[data-style="missionary"] .article-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-muted);
}

html[data-style="missionary"] .article-excerpt {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════════════════════════
   24. VOLUNTEER SPOTLIGHT
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .spotlight {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: var(--s-6);
}

html[data-style="missionary"] .spotlight-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 4px 10px;
  border-radius: 2px;
}

html[data-style="missionary"] .spotlight-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text);
}

html[data-style="missionary"] .spotlight-quote {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 22px);
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.55;
  border-left: 3px solid var(--accent);
  padding-left: var(--s-4);
}

html[data-style="missionary"] .spotlight-bio {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════════════════════════
   25. PAGE HEADER
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-style="missionary"] .page-header {
  background: linear-gradient(135deg,
    oklch(from var(--accent) calc(l - .05) c h) 0%,
    oklch(from var(--accent) calc(l + .08) calc(c - .04) calc(h + 15)) 100%);
  padding: var(--s-7) 0 var(--s-6);
  border-bottom: 1px solid var(--border);
}

html[data-style="missionary"] .page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
}

html[data-style="missionary"] .page-header .page-subtitle {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 22px);
  color: rgba(255,255,255,.8);
  max-width: 60ch;
  margin-top: var(--s-3);
}

html[data-style="missionary"] .page-header .breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: var(--s-3);
}

/* ══════════════════════════════════════════════════════════════════════════════
   14. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  html[data-style="missionary"] .topbar .row { height: auto; padding: 8px var(--s-4); flex-wrap: wrap; gap: 10px; }
  html[data-style="missionary"] .program-grid { grid-template-columns: 1fr !important; }
  html[data-style="missionary"] .program-card,
  html[data-style="missionary"] .program-card.feat { grid-column: span 1; }
  html[data-style="missionary"] .tier-grid { grid-template-columns: 1fr !important; }
  html[data-style="missionary"] .schedule { grid-template-columns: repeat(6, 1fr) !important; }
  html[data-style="missionary"] .freq-rail-inner { display: grid; grid-template-columns: repeat(2, 1fr); }
  html[data-style="missionary"] .freq-item { flex: unset; border-right: none; border-bottom: 1px solid var(--border); }
  html[data-style="missionary"] .freq-cta { grid-column: 1 / -1; border-bottom: none; }
  html[data-style="missionary"] .staff-grid { grid-template-columns: repeat(2, 1fr); }
  html[data-style="missionary"] .article-grid { grid-template-columns: 1fr; }
  html[data-style="missionary"] .onair { padding: var(--s-2) 0; }
  html[data-style="missionary"] .page-header { padding: var(--s-5) 0 var(--s-4); }
}