/*
 * ChurchBeacon Sites — styles.css
 * One stylesheet, themed entirely by CSS custom properties that app.js sets
 * from the active theme (themes.js → themeToCssVars). Structural variants
 * (hero style, button style, card shadow, spacing) are toggled by
 * data-* attributes on <html> / body classes.
 *
 * Accessibility floor (THEMES.md): body ≥ 16px, tap targets ≥ 44px,
 * 4.5:1 contrast (theme palettes are chosen to satisfy this).
 */

/* ── defaults (overridden per-theme at runtime) ────────────────────────── */
:root {
  --c-primary: #8B1A1A;
  --c-secondary: #2B2B2B;
  --c-accent: #C9A24B;
  --c-background: #FFFFFF;
  --c-surface: #F7F5F1;
  --c-text: #222222;
  --c-text-on-primary: #FFFFFF;
  --font-heading: Georgia, serif;
  --font-body: 'Segoe UI', system-ui, sans-serif;
  --heading-transform: none;
  --max-content: 1100px;
  --hero-overlay-opacity: 0.45;
  --section-gap: 5rem;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.10);
  --radius: 6px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-background);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  text-transform: var(--heading-transform);
  line-height: 1.2;
  margin: 0 0 0.5rem;
  color: var(--c-secondary);
}

img { max-width: 100%; display: block; }
a { color: var(--c-primary); }

.container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section { padding: var(--section-gap) 0; }
.section-surface { background: var(--c-surface); }

.section-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  padding-bottom: 0.75rem;
}
.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--c-accent);
  margin: 0.6rem auto 0;
}
.section-title-light { color: #fff; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  padding: 0.75rem 1.6rem;
  min-height: 44px;
  min-width: 44px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--c-primary); color: var(--c-text-on-primary); border-color: var(--c-primary); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.85); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }
.btn-accent { background: var(--c-accent); color: #1a1a1a; border-color: var(--c-accent); }
.btn-accent:hover { filter: brightness(1.08); }
.btn-live { background: #d32f2f; color: #fff; border-color: #d32f2f; }
.btn-lg { font-size: 1.1rem; padding: 0.9rem 2.2rem; }

/* button style variants (html[data-btn] is set by app.js) */
html[data-btn="outline"] .btn-primary {
  background: transparent; color: var(--c-primary); border-color: var(--c-primary);
}
html[data-btn="outline"] .btn-primary:hover { background: var(--c-primary); color: var(--c-text-on-primary); }
html[data-btn="outline"] .btn-accent { background: transparent; color: var(--c-accent); border-color: var(--c-accent); }
html[data-btn="outline"] .btn-accent:hover { background: var(--c-accent); color: #1a1a1a; }

html[data-btn="pill"] .btn { border-radius: 999px; }
html[data-btn="solid"] .btn { border-radius: var(--radius); }

/* ── skip link ──────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-primary); color: #fff; padding: 0.6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ── utility bar ────────────────────────────────────────────────────────── */
.utility-bar {
  background: var(--c-secondary);
  color: #fff;
  font-size: 0.875rem;
  padding: 0.4rem 0;
}
.utility-inner { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: flex-end; }
.util-link {
  color: rgba(255,255,255,0.92); text-decoration: none; display: inline-flex;
  align-items: center; gap: 0.4rem; min-height: 32px;
}
.util-link:hover { color: #fff; text-decoration: underline; }
.util-ico { font-size: 1em; }

/* ── header / nav ───────────────────────────────────────────────────────── */
.site-header {
  background: var(--c-background);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .8rem; min-width: 0; text-decoration: none; }
.site-logo { height: 52px; width: auto; object-fit: contain; }
.site-name {
  font-family: var(--font-heading);
  font-size: 1.55rem; font-weight: 700; color: var(--c-primary);
  line-height: 1.1; display: inline-block; white-space: nowrap;
}

.nav-list {
  list-style: none; display: flex; align-items: center; gap: 0.25rem;
  margin: 0; padding: 0;
}
.nav-list > li { position: relative; }
.nav-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
  color: var(--c-text); text-decoration: none;
  padding: 0.6rem 0.8rem; min-height: 44px;
  background: none; border: 0; cursor: pointer;
}
.nav-btn:hover { color: var(--c-primary); }
.nav-live { color: #d32f2f; }
.caret { font-size: 0.7em; }

/* dropdown */
.dropdown {
  list-style: none; margin: 0; padding: 0.4rem;
  position: absolute; top: 100%; left: 0;
  min-width: 190px;
  background: var(--c-background);
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: var(--radius);
  display: none;
}
.nav-drop.open .dropdown, .nav-drop:hover .dropdown { display: block; }
.drop-item {
  padding: 0.6rem 0.9rem; min-height: 44px;
  display: flex; align-items: center;
  color: var(--c-text); text-decoration: none; border-radius: 4px;
  font-size: 0.95rem;
}
.drop-item:hover { background: var(--c-surface); color: var(--c-primary); }

/* hamburger */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 3px; width: 100%;
  background: var(--c-text); border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero {
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 5rem 1.25rem;
}
.hero-tagline {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hero-subtitle {
  color: rgba(255,255,255,0.92);
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 560px;
  margin: -0.5rem auto 1.5rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.hero-actions {
  display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center;
}
.hero-logo {
  height: 84px; margin: 0 auto 1.25rem; width: auto;
}
.hero-logo-top { height: 64px; margin-bottom: 1rem; }
.hero-logo-text {
  font-family: var(--font-heading); font-size: 1.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 1rem; color: #fff;
}

/* banner */
.hero-plain {
  background: var(--c-primary);
}
.hero-plain .hero-content { padding: 4rem 1.25rem; }
.hero-plain .hero-tagline { text-shadow: none; color: var(--c-text-on-primary); }

/* Minimalist — a barely-there dot texture keeps the flat hero from feeling
   empty without adding clutter (Ron's "subtle pattern" ask, 2026-09-30).
   Fine dots on a 26px grid + one soft off-center glow, both very low alpha. */
.theme-minimalist .hero-plain::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.6px),
    radial-gradient(ellipse at 78% 18%, rgba(255,255,255,0.07), transparent 55%);
  background-size: 26px 26px, 100% 100%;
  pointer-events: none;
  z-index: 0;
}
.theme-minimalist .hero-plain .container { position: relative; z-index: 1; }
/* Minimalist — bigger, centered logo, lower in the hero (2026-09-30). */
.theme-minimalist .hero-plain .hero-content { padding-top: 5.5rem; }
.theme-minimalist .hero-plain .hero-logo {
  margin-left: auto; margin-right: auto;
  height: 96px; margin-top: 1.5rem; margin-bottom: 2.5rem;
}

/* overlay */
.hero-overlay {
  min-height: 78vh;
  display: flex; align-items: center;
  background: var(--c-secondary) center/cover no-repeat;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.hero-shade {
  position: absolute; inset: 0;
  background: rgba(0,0,0,var(--hero-overlay-opacity));
}
.hero-center { position: relative; z-index: 1; text-align: center; }
.hero-center .hero-content { padding: 4rem 0; }

/* centered (Traditional) — large centered logo over a photo backdrop */
.hero-centered {
  min-height: 82vh;
  display: flex; align-items: center;
  background: var(--c-primary) center/cover no-repeat;
}
.hero-centered .hero-content { padding: 4rem 1.25rem; }
.hero-logo-lg { height: 150px; width: auto; max-width: 320px; margin: 0 auto 1.75rem; display: block; }
.hero-centered .hero-logo-text { font-size: 2.2rem; margin-bottom: 1.25rem; }

/* light (Simple) — stark, on the page background, dark text */
.hero-light {
  background: var(--c-background);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.hero-light-inner { text-align: center; padding: 4.5rem 1.25rem; }
.hero-light .hero-tagline {
  color: var(--c-text); text-shadow: none;
  font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 700;
}
.hero-light .hero-subtitle { color: var(--c-text); opacity: 0.72; text-shadow: none; }
.hero-light .hero-actions { margin-top: 1.75rem; }
.hero-light .hero-logo-top { height: 76px; }

/* split */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 60vh;
  background: var(--c-primary);
}
.hero-split-text {
  display: flex; align-items: center;
  padding: 3rem 2.5rem;
}
.hero-split-text .hero-content { margin: 0; text-align: left; padding: 0; }
.hero-split-text .hero-actions { justify-content: flex-start; }
.hero-split-img {
  background: var(--c-secondary) center/cover no-repeat;
  min-height: 200px;
}

/* editorial (Traditional) — photograph first, welcome card below */
.hero-editorial { color: var(--c-text); background: var(--c-background); }
.hero-editorial-image {
  min-height: clamp(360px, 58vw, 620px);
  background: var(--c-surface) center/cover no-repeat;
}
.hero-editorial-copy { max-width: 880px; background: var(--c-background); }
.hero-editorial .hero-content { max-width: 780px; padding: 2.8rem 1.5rem 3.2rem; }
.hero-editorial .hero-tagline { color: var(--c-text); text-shadow: none; margin-bottom: 1rem; }
.hero-editorial .hero-subtitle { color: var(--c-text); opacity: 0.78; text-shadow: none; }
.hero-editorial .btn-ghost { color: var(--c-primary); border-color: var(--c-primary); }
.hero-editorial .btn-ghost:hover { color: var(--c-text-on-primary); background: var(--c-primary); }

/* architectural (Minimalist & Clean) — bold left-aligned photo statement */
.hero-architectural {
  min-height: min(76vh, 780px); display: flex; align-items: flex-end;
  background: var(--c-secondary) center/cover no-repeat;
}
.hero-architectural .hero-shade {
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 52%, rgba(0,0,0,.06) 100%);
}
.hero-architectural-inner { position: relative; z-index: 1; width: 100%; }
.hero-architectural .hero-content { margin: 0; padding: 5rem 1.25rem 6rem; text-align: left; max-width: 760px; }
.hero-architectural .hero-tagline { font-size: clamp(3rem, 7vw, 6.5rem); line-height: .92; letter-spacing: -.045em; }
.hero-architectural .hero-subtitle { margin-left: 0; }
.hero-architectural .hero-actions { justify-content: flex-start; }

/* classic (Standard) — familiar church banner with left-side copy */
.hero-classic {
  min-height: min(68vh, 680px); display: flex; align-items: center;
  background: var(--c-secondary) center/cover no-repeat;
}
.hero-classic .hero-shade { background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.32) 62%, rgba(0,0,0,.16)); }
.hero-classic-inner { position: relative; z-index: 1; width: 100%; }
.hero-classic .hero-content { margin: 0; text-align: left; padding: 5rem 1.25rem; max-width: 650px; }
.hero-classic .hero-actions { justify-content: flex-start; }
.hero-classic .hero-subtitle { margin-left: 0; }

/* framed (Elegant & Refined) — a gallery-like image inside the page */
.hero-framed { color: #fff; background: var(--c-background); padding: 2rem 0 3rem; }
.hero-framed-media {
  min-height: min(78vh, 760px); position: relative; display: flex; align-items: center;
  background: var(--c-secondary) center/cover no-repeat; overflow: hidden;
}
.hero-framed .hero-shade { background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.58)); }
.hero-framed-inner { position: relative; z-index: 1; width: 100%; }
.hero-framed .hero-tagline { font-size: clamp(2.8rem, 6vw, 5.3rem); font-weight: 400; }
.hero-framed .hero-logo { height: 116px; }

/* ── about ──────────────────────────────────────────────────────────────── */
.about-text {
  max-width: 760px; margin: 0 auto;
  font-size: 1.15rem; text-align: center;
}
.about-imgs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 2rem;
}
.about-imgs img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius); }

/* ── services ───────────────────────────────────────────────────────────── */
.services-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem; max-width: 960px; margin: 0 auto;
}
.service-day-group {
  overflow: hidden; border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius); background: var(--c-background);
}
.service-day {
  margin: 0; padding: 0.8rem 1.15rem; color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-background));
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em;
}
.service-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.service-row:last-child { border-bottom: 0; }
.service-row:nth-child(odd) { background: rgba(255,255,255,0.4); }
.service-name { font-weight: 600; font-size: 1.05rem; }
.service-time { color: var(--c-text); font-weight: 700; white-space: nowrap; }

/* ── latest sermon ──────────────────────────────────────────────────────── */
.sermon-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center;
}
.sermon-panel[hidden] { display: none; }
.sermon-section-title { margin-bottom: 2rem; }
.sermon-media { position: relative; }
.sermon-media-link {
  position: relative; display: block; width: 100%; margin: 0; padding: 0;
  border: 0; border-radius: var(--radius); background: transparent; cursor: pointer;
}
.sermon-media-link:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 4px; }
.sermon-play-icon {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 76px; height: 54px; padding-left: 4px;
  border-radius: 14px; background: #f00; color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.35);
  font: 700 1.6rem/1 sans-serif;
}
.sermon-media-link:hover .sermon-play-icon { background: #c00; transform: translate(-50%, -50%) scale(1.05); }
.sermon-youtube-player {
  display: block; width: 100%; aspect-ratio: 16/9; border: 0;
  border-radius: var(--radius); box-shadow: var(--card-shadow);
}
.sermon-media img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--card-shadow);
}
.sermon-media-empty {
  width: 100%; aspect-ratio: 16/9;
  background: var(--c-surface); border: 2px dashed rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,0.4); border-radius: var(--radius);
}
.sermon-play { margin-top: 1rem; }
.sermon-series {
  color: var(--c-accent); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.85rem; margin-bottom: 0.25rem;
}
.sermon-title { font-size: 1.7rem; margin-bottom: 0.5rem; }
.sermon-title a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.14em; }
.sermon-title a:hover { color: var(--c-primary); }
.sermon-meta { color: rgba(0,0,0,0.6); margin-bottom: 0.75rem; }
.sermon-summary { margin-bottom: 1rem; }
.sermon-current-notes { margin: 0 0 0.8rem; }
.sermon-selector { margin-top: 1.5rem; }
.sermon-selector-inner { max-width: 720px; margin-left: auto; }
.sermon-prev-heading {
  margin-bottom: 0.55rem; color: var(--c-text); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem;
}
.sermon-select {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem;
  width: 100%; padding: 0.8rem 0; border: 0; border-top: 1px solid rgba(0,0,0,.12);
  background: transparent; color: var(--c-text); text-align: left; cursor: pointer;
}
.sermon-select[aria-current="true"] { display: none; }
.sermon-select:hover .sermon-select-title { color: var(--c-primary); text-decoration: underline; }
.sermon-select-title { min-width: 0; font-weight: 700; }
.sermon-select-meta { color: rgba(0,0,0,.58); font-size: 0.85rem; white-space: nowrap; }
.sermon-notes-missing, .sermon-video-missing { color: rgba(0,0,0,.55); font-size: 0.86rem; }
.sermon-prev-list { list-style: none; margin: 0; padding: 0; }
.sermon-prev-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem;
  padding: 0.75rem 0; border-top: 1px solid rgba(0,0,0,0.1);
}
.sermon-link-title { min-width: 0; font-weight: 600; }
.sermon-prev-title { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.14em; }
.sermon-prev-title:hover { color: var(--c-primary); }
.sermon-link-meta { color: rgba(0,0,0,0.55); font-size: 0.9rem; white-space: nowrap; }
.sermon-prev-list .sermon-notes-link { grid-column: 1 / -1; justify-self: start; }

/* ── events ─────────────────────────────────────────────────────────────── */
.events-list {
  display: grid; gap: 0.9rem;
  max-width: 720px; margin: 0 auto 1.5rem;
}
.event-card {
  display: flex; align-items: center; gap: 1.25rem;
  width: 100%; text-align: left;
  padding: 1rem 1.25rem;
  background: var(--c-background);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  cursor: pointer; font-family: var(--font-body);
  transition: transform 0.1s, box-shadow 0.15s;
  color: var(--c-text);
}
.event-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.event-datebox {
  flex: 0 0 64px; text-align: center;
  background: var(--c-primary); color: var(--c-text-on-primary);
  border-radius: var(--radius); padding: 0.4rem 0;
  display: flex; flex-direction: column;
}
.event-month { font-size: 0.7rem; letter-spacing: 0.1em; }
.event-day { font-size: 1.6rem; font-weight: 700; line-height: 1.1; font-family: var(--font-heading); }
.event-weekday { font-size: 0.7rem; opacity: 0.85; }
.event-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.event-title { font-weight: 600; font-size: 1.05rem; }
.event-sub { color: rgba(0,0,0,0.6); font-size: 0.9rem; }
.events-more { text-align: center; }

/* ── ministries ─────────────────────────────────────────────────────────── */
.ministries-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.ministry-card {
  text-decoration: none; color: var(--c-text);
  background: var(--c-background);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--card-shadow);
  display: flex; flex-direction: column;
  transition: transform 0.1s, box-shadow 0.15s;
}
.ministry-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.14); }
.ministry-img { overflow: hidden; }
.ministry-img img { width: 100%; height: 170px; object-fit: cover; }
.ministry-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.ministry-title { color: var(--c-primary); font-size: 1.3rem; margin: 0; }
.ministry-teaser { color: rgba(0,0,0,0.65); font-size: 0.95rem; margin: 0; }
.ministry-cta { margin-top: auto; color: var(--c-primary); font-weight: 700; }

/* ── giving ─────────────────────────────────────────────────────────────── */
.section-giving { background: var(--c-primary); }
.giving-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  flex-wrap: wrap;
}
.giving-inner .section-title { text-align: left; margin-bottom: 0.5rem; }
.giving-inner .section-title::after { margin-left: 0; }
.giving-text { max-width: 560px; margin: 0; color: rgba(255,255,255,0.92); }

/* ── contact ────────────────────────────────────────────────────────────── */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start;
}
.contact-grid .section-title { text-align: left; }
.contact-grid .section-title::after { margin-left: 0; }
.contact-services { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; }
.contact-line { margin: 0.6rem 0; display: flex; gap: 0.5rem; align-items: baseline; }
.inline-link { font-weight: 600; white-space: nowrap; }
.contact-map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); }
.map-frame { width: 100%; height: 360px; border: 0; display: block; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--c-secondary);
  color: rgba(255,255,255,0.85);
  padding: 2.5rem 0;
  margin-top: 0;
}
.footer-inner {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center;
}
.footer-brand { font-family: var(--font-heading); font-size: 1.25rem; color: #fff; }
.footer-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.footer-nav a { color: rgba(255,255,255,0.8); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.footer-nav a:hover { color: #fff; }
.footer-copy { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.footer-copy a { color: rgba(255,255,255,0.8); }

/* ── page (beliefs / ministry) views ────────────────────────────────────── */
.page-hero {
  background: var(--c-primary) center/cover no-repeat;
  position: relative; color: #fff;
  padding: 3.5rem 0 2.5rem;
}
.page-hero[style*="--page-bg"] { background: var(--page-bg) center/cover no-repeat; }
.page-hero-shade { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.page-hero .container { position: relative; z-index: 1; }
.back-link {
  display: inline-block; color: rgba(255,255,255,0.9); text-decoration: none;
  margin-bottom: 0.75rem; min-height: 44px; display: inline-flex; align-items: center;
}
.back-link:hover { color: #fff; }
.page-title { color: #fff; font-size: clamp(2rem, 5vw, 3rem); margin: 0; }
.page-body { max-width: 780px; }
.page-block { margin-bottom: 2rem; }
.page-block-h { font-size: 1.5rem; color: var(--c-primary); margin-bottom: 0.4rem; }
.page-block p { font-size: 1.05rem; }
.page-block-img { border-radius: var(--radius); margin-top: 1rem; width: 100%; }

/* ── app-matched Home priority: notice, next event, or Daily KJB Verse ─── */
.home-priority {
  background: color-mix(in srgb, var(--c-accent) 10%, var(--c-background));
  border-bottom: 1px solid color-mix(in srgb, var(--c-primary) 20%, transparent);
  padding: 1.35rem 0;
}
.priority-card {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start;
  background: var(--c-background); border-radius: var(--radius); padding: 1rem 1.15rem;
  box-shadow: var(--card-shadow); border-left: 5px solid var(--c-primary);
}
.priority-notice { border-left-color: #b42318; }
.priority-icon { color: var(--c-primary); font-size: 1.25rem; line-height: 1.4; }
.priority-notice .priority-icon, .priority-notice .priority-label { color: #b42318; }
.priority-label {
  color: var(--c-primary); font-size: 0.78rem; font-weight: 800; margin: 0 0 0.25rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.priority-card h2 { color: var(--c-text); font-size: 1.2rem; margin: 0 0 0.2rem; }
.priority-card p { color: var(--c-text); margin: 0; }
.priority-card blockquote { color: var(--c-text); font-family: var(--font-heading); font-size: 1.15rem; margin: 0; }
.priority-meta { opacity: 0.68; font-size: 0.88rem; margin-top: 0.35rem !important; }
.priority-link { display: inline-block; color: var(--c-primary); font-weight: 700; margin-top: 0.5rem; }

/* ── modals ─────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.modal-backdrop[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.modal {
  position: relative;
  background: var(--c-background);
  border-radius: calc(var(--radius) + 4px);
  max-width: 560px; width: 100%;
  max-height: 88vh; overflow: auto;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.modal-close {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 44px; height: 44px;
  font-size: 1.6rem; line-height: 1;
  background: none; border: 0; cursor: pointer;
  color: var(--c-text); opacity: 0.6;
}
.modal-close:hover { opacity: 1; }

/* calendar */
.modal-calendar { max-width: 720px; }
.cal-head { display: flex; align-items: center; justify-content: center; gap: 0.65rem; margin-bottom: 0.6rem; }
.cal-title { text-align: center; font-size: 1.5rem; color: var(--c-primary); }
.cal-nav, .cal-today-btn {
  border: 1px solid color-mix(in srgb, var(--c-primary) 35%, transparent);
  border-radius: 999px; background: transparent; color: var(--c-primary);
  min-height: 38px; padding: 0.4rem 0.8rem; cursor: pointer; font: inherit; font-weight: 700;
}
.cal-nav { min-width: 42px; font-size: 1.1rem; }
.cal-nav:hover, .cal-today-btn:hover { background: color-mix(in srgb, var(--c-primary) 9%, transparent); }
.sermon-notes-link { display: inline-block; margin-top: 0.25rem; font-weight: 700; text-decoration: underline; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-dow {
  text-align: center; font-weight: 700; font-size: 0.75rem;
  color: var(--c-primary); padding: 0.3rem 0; text-transform: uppercase;
}
.cal-cell {
  min-height: 74px; padding: 4px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.cal-blank { border: 0; }
.cal-num { font-size: 0.8rem; font-weight: 600; }
.cal-has { background: rgba(255,255,255,0.5); }
.cal-today .cal-num {
  background: var(--c-primary); color: var(--c-text-on-primary);
  border-radius: 50%; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-chip {
  font-size: 0.68rem; text-align: left;
  background: var(--c-primary); color: var(--c-text-on-primary);
  border: 0; border-radius: 3px; padding: 2px 4px;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip:hover { filter: brightness(1.15); }

/* public prayer request */
.prayer-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; align-items: start; }
.prayer-form { display: grid; gap: 1rem; }
.prayer-form label { display: grid; gap: .4rem; font-weight: 700; }
.prayer-form input:not([type="checkbox"]), .prayer-form textarea {
  width: 100%; border: 1px solid rgba(0,0,0,.2); border-radius: var(--radius); padding: .8rem; font: inherit;
}
.prayer-check { display: flex !important; align-items: center; gap: .6rem !important; font-weight: 500 !important; }
.prayer-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.prayer-status { min-height: 1.5em; font-weight: 600; }
@media (max-width: 720px) { .prayer-wrap { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ── genuinely distinct design systems ─────────────────────────────────── */

/* Traditional: centered boxed page and alternating editorial blocks. */
.theme-traditional { background: color-mix(in srgb, var(--c-surface) 62%, #e9e7e1); }
.theme-traditional .site-header,
.theme-traditional .home-priority,
.theme-traditional .home-main > .hero,
.theme-traditional .home-main > .section,
.theme-traditional .site-footer { max-width: 1120px; margin-left: auto; margin-right: auto; }
.theme-traditional .site-header { position: relative; border: 0; }
.theme-traditional .header-inner { min-height: 92px; }
.theme-traditional .site-logo { height: 58px; }
.theme-traditional .nav-btn { text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
.theme-traditional .section { background: var(--c-background); }
.theme-traditional .section-surface { background: var(--c-surface); }
.theme-traditional .section-title { font-size: clamp(2rem, 4vw, 3rem); }
.theme-traditional .section-title::after { width: 34px; height: 2px; }
.theme-traditional #about .container { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 3rem; }
.theme-traditional #about .section-title,
.theme-traditional #about .about-text { text-align: left; margin-left: 0; }
.theme-traditional #about .section-title::after { margin-left: 0; }
.theme-traditional #about .about-imgs { grid-template-columns: 1fr; margin: 0; }
.theme-traditional #about .about-imgs img { height: 260px; border-radius: 0; }
.theme-traditional #about .about-imgs img + img { display: none; }
.theme-traditional .services-list { border: 0; border-radius: 0; max-width: 820px; }
.theme-traditional .service-row { border-color: color-mix(in srgb, var(--c-primary) 20%, transparent); }
.theme-traditional .sermon-media img,
.theme-traditional .ministry-card,
.theme-traditional .event-card,
.theme-traditional .contact-map { border-radius: 0; }
.theme-traditional .ministries-grid { gap: 0; }
.theme-traditional .ministry-card { border: 0; }
.theme-traditional .ministry-card:nth-child(2) { background: var(--c-surface); }
.theme-traditional .section-giving { background: var(--c-accent); }
.theme-traditional .section-giving .section-title-light,
.theme-traditional .section-giving .giving-text { color: var(--c-text); }
.theme-traditional .section-giving .btn-accent { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-text-on-primary); }

/* Modern: cinematic, wide, oversized and high-contrast. */
.theme-modern .site-header { position: absolute; top: 0; left: 0; right: 0; background: rgba(255,255,255,.94); border: 0; }
.theme-modern .header-inner { max-width: none; padding-inline: 2rem; }
.theme-modern .site-header + .home-main > .home-priority {
  padding-top: calc(1.35rem + 72px);
}
.theme-modern .nav-btn { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.theme-modern .hero-overlay { min-height: 92vh; align-items: flex-end; }
.theme-modern .hero-center { max-width: none; width: 100%; padding: 0 5vw; }
.theme-modern .hero-center .hero-content { margin: 0; text-align: left; padding: 9rem 0 5rem; max-width: 940px; }
.theme-modern .hero-tagline { font-size: clamp(3.4rem, 8.5vw, 8rem); letter-spacing: -.055em; line-height: .88; max-width: 980px; }
.theme-modern .hero-subtitle { margin-left: 0; max-width: 680px; }
.theme-modern .hero-actions { justify-content: flex-start; }
.theme-modern .section { padding: clamp(5rem, 9vw, 9rem) 0; }
.theme-modern .section-title { text-align: left; font-size: clamp(2.8rem, 6vw, 5.5rem); letter-spacing: -.045em; line-height: .92; }
.theme-modern .section-title::after { margin-left: 0; width: 90px; }
.theme-modern #latest-sermon { background: var(--c-secondary); color: #fff; }
.theme-modern #latest-sermon h2,
.theme-modern #latest-sermon h3 { color: #fff; }
.theme-modern #latest-sermon .sermon-meta,
.theme-modern #latest-sermon .sermon-summary,
.theme-modern #latest-sermon .sermon-link-meta,
.theme-modern #latest-sermon .sermon-select-meta,
.theme-modern #latest-sermon .sermon-notes-missing { color: rgba(255,255,255,.7); }
.theme-modern #latest-sermon .sermon-link,
.theme-modern #latest-sermon .sermon-prev-list li { color: #fff; border-color: rgba(255,255,255,.2); }
.theme-modern .sermon-grid { grid-template-columns: 1.2fr .8fr; max-width: 1360px; }
.theme-modern .sermon-selector { max-width: 1360px; }
.theme-modern .sermon-selector-inner { width: 40%; margin-left: auto; }
.theme-modern .sermon-prev-heading,
.theme-modern .sermon-select { color: #fff; }
.theme-modern .sermon-select { border-color: rgba(255,255,255,.2); }
.theme-modern .sermon-media img { border-radius: 0; }
.theme-modern .ministries-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.theme-modern .ministry-card { position: relative; min-height: 360px; border: 0; border-radius: 18px; background: var(--c-secondary); }
.theme-modern .ministry-img { position: absolute; inset: 0; }
.theme-modern .ministry-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 25%, rgba(0,0,0,.82)); }
.theme-modern .ministry-img img { width: 100%; height: 100%; object-fit: cover; }
.theme-modern .ministry-body { position: relative; z-index: 1; justify-content: flex-end; padding: 2rem; color: #fff; }
.theme-modern .ministry-title,
.theme-modern .ministry-cta { color: #fff; }
.theme-modern .ministry-teaser { color: rgba(255,255,255,.82); }
.theme-modern .events-list { max-width: none; grid-template-columns: repeat(3, 1fr); }
.theme-modern .event-card { align-items: flex-start; min-height: 190px; border: 0; border-radius: 16px; flex-direction: column; padding: 1.6rem; }
.theme-modern .event-datebox { border-radius: 999px; flex: 0 0 auto; width: 68px; }
.theme-modern .services-list { max-width: none; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border: 0; gap: 1rem; background: transparent; }
.theme-modern .service-day-group { border: 0; border-radius: 0; }
.theme-modern .service-day { padding: 1rem 1.5rem; background: var(--c-primary); color: #fff; }
.theme-modern .service-row { display: flex; border-bottom: 1px solid rgba(0,0,0,.1); background: var(--c-background); min-height: 0; padding: 1rem 1.5rem; }
.theme-modern .service-time { display: block; font-size: 1.15rem; font-weight: 800; }
.theme-modern #about .container { display: grid; grid-template-columns: .75fr 1.25fr; gap: 4rem; }
.theme-modern #about .section-title,
.theme-modern #about .about-text { text-align: left; margin-left: 0; }
.theme-modern #about .section-title::after { margin-left: 0; }
.theme-modern #about .about-imgs { margin: 0; }

/* Warm Community: rounded, tactile and friendly. */
.theme-community .site-header { box-shadow: 0 8px 30px rgba(0,0,0,.06); border: 0; }
.theme-community .hero-split { min-height: 70vh; border-radius: 0 0 64px 0; }
.theme-community .hero-split-text { padding: clamp(3rem, 7vw, 7rem); }
.theme-community .hero-tagline { font-size: clamp(2.7rem, 6vw, 5rem); }
.theme-community .section-title::after { border-radius: 999px; width: 70px; height: 7px; }
.theme-community .services-list { display: grid; grid-template-columns: 1fr 1fr; border: 0; gap: 1rem; max-width: 900px; }
.theme-community .service-day-group { border: 0; border-radius: 18px; box-shadow: var(--card-shadow); }
.theme-community .service-day { border-radius: 18px 18px 0 0; }
.theme-community .service-row { border-radius: 0; background: var(--c-background); box-shadow: none; align-items: flex-start; }
.theme-community .ministry-card,
.theme-community .event-card,
.theme-community .sermon-media img,
.theme-community .contact-map { border-radius: 24px; }
.theme-community .ministry-card:nth-child(2) { transform: translateY(2rem); }
.theme-community .section-giving { border-radius: 64px 0 0 64px; margin-left: min(6vw, 90px); }

/* Minimalist & Clean: Bridgetown-inspired architecture and image pathways. */
.theme-minimalist .site-header { position: relative; border: 0; }
.theme-minimalist .header-inner { min-height: 110px; }
.theme-minimalist .site-logo { height: 66px; }
.theme-minimalist .nav-btn { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.theme-minimalist .section { padding: clamp(5rem, 8vw, 8rem) 0; }
.theme-minimalist .section-title { text-align: left; color: var(--c-primary); font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: -.04em; }
.theme-minimalist .section-title::after { margin-left: 0; width: 80px; }
.theme-minimalist #ministries { background: var(--c-surface); }
.theme-minimalist .ministries-grid { gap: .75rem; }
.theme-minimalist .ministry-card { min-height: 390px; position: relative; border: 0; border-radius: 16px; background: var(--c-secondary); }
.theme-minimalist .ministry-img { position: absolute; inset: 0; }
.theme-minimalist .ministry-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 32%, rgba(0,0,0,.82)); }
.theme-minimalist .ministry-img img { width: 100%; height: 100%; object-fit: cover; }
.theme-minimalist .ministry-body { position: relative; z-index: 1; justify-content: flex-end; color: #fff; padding: 1.6rem; }
.theme-minimalist .ministry-title,
.theme-minimalist .ministry-cta { color: #fff; }
.theme-minimalist .ministry-teaser { color: rgba(255,255,255,.82); }
.theme-minimalist #about .container { display: grid; grid-template-columns: .7fr 1.3fr; gap: 4rem; align-items: center; }
.theme-minimalist #about .section-title,
.theme-minimalist #about .about-text { text-align: left; margin-left: 0; }
.theme-minimalist #about .section-title::after { margin-left: 0; }
.theme-minimalist #about .about-imgs { margin: 0; }
.theme-minimalist #services .container { display: grid; grid-template-columns: .55fr 1.45fr; gap: 4rem; align-items: start; }
.theme-minimalist .services-list { margin: 0; max-width: none; border: 0; }
.theme-minimalist .service-row { border: 0; border-left: 4px solid var(--c-secondary); margin-bottom: .8rem; background: var(--c-background); }
.theme-minimalist .events-list { max-width: none; grid-template-columns: repeat(3, 1fr); }
.theme-minimalist .event-card { min-height: 180px; flex-direction: column; align-items: flex-start; border: 0; border-radius: 16px; padding: 1.5rem; }
.theme-minimalist .sermon-grid { grid-template-columns: .8fr 1.2fr; }
.theme-minimalist .section-giving { margin-inline: 4vw; border-radius: 0 60px 60px 0; }
.theme-minimalist .section-giving .section-title { color: #fff; }

/* Standard: familiar and practical, modeled on a conventional church site. */
.theme-simple .utility-bar { padding: .55rem 0; }
.theme-simple .site-header { position: relative; }
.theme-simple .header-inner { min-height: 96px; }
.theme-simple .site-logo { height: 64px; }
.theme-simple .section-title { text-align: left; font-size: 2.35rem; }
.theme-simple .section-title::after { margin-left: 0; }
.theme-simple .sermon-grid { max-width: 980px; }
.theme-simple #services .container { display: grid; grid-template-columns: .55fr 1.45fr; gap: 2.5rem; }
.theme-simple .services-list { margin: 0; max-width: none; }
.theme-simple .events-list { max-width: 900px; margin-left: 0; }
.theme-simple .events-more { text-align: left; }
.theme-simple .ministries-grid { gap: 1rem; }
.theme-simple .ministry-card { border-radius: 0; box-shadow: none; border-top: 5px solid var(--c-primary); }
.theme-simple .section-giving .section-title { color: #fff; }
.theme-simple #about .container { display: grid; grid-template-columns: .7fr 1.3fr; gap: 3rem; }
.theme-simple #about .about-text { text-align: left; margin-left: 0; }
.theme-simple #about .about-imgs { margin: 0; }

/* Elegant: framed imagery, fine rules and restrained, gallery-like spacing. */
.theme-elegant .site-header { position: relative; border: 0; }
.theme-elegant .header-inner { min-height: 100px; }
.theme-elegant .nav-btn { font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; }
.theme-elegant .section { padding: clamp(6rem, 10vw, 10rem) 0; }
.theme-elegant .section-title { font-size: clamp(2.6rem, 5vw, 4.8rem); font-weight: 400; }
.theme-elegant .section-title::after { height: 1px; width: 110px; }
.theme-elegant #about .about-text { max-width: 840px; font-family: var(--font-heading); font-size: 1.45rem; line-height: 1.8; }
.theme-elegant .about-imgs { gap: 2rem; margin-top: 4rem; }
.theme-elegant .about-imgs img { height: 340px; border-radius: 0; }
.theme-elegant .sermon-grid { gap: 5rem; }
.theme-elegant .sermon-media img,
.theme-elegant .event-card,
.theme-elegant .ministry-card,
.theme-elegant .contact-map { border-radius: 0; box-shadow: none; }
.theme-elegant .services-list { border-width: 0 0 1px; border-radius: 0; }
.theme-elegant .service-row { padding: 1.4rem .5rem; }
.theme-elegant .events-list { max-width: 900px; }
.theme-elegant .event-card { border-width: 0 0 1px; padding: 1.5rem 0; background: transparent; }
.theme-elegant .event-datebox { background: transparent; color: var(--c-primary); border-right: 1px solid var(--c-accent); border-radius: 0; }
.theme-elegant .ministries-grid { gap: 2rem; }
.theme-elegant .ministry-card { border: 0; }
.theme-elegant .ministry-body { padding-inline: 0; }
.theme-elegant .section-giving { background: var(--c-secondary); }

/* event detail */
.event-detail-datebox {
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--c-primary); color: var(--c-text-on-primary);
  border-radius: var(--radius); padding: 0.5rem 1rem; margin-bottom: 1rem;
}
.event-detail-title { font-size: 1.6rem; margin-bottom: 0.4rem; }
.event-detail-meta { color: rgba(0,0,0,0.6); margin-bottom: 0.75rem; }
.event-detail-desc { margin-bottom: 1.25rem; }

/* ── demo design + color picker ─────────────────────────────────────────── */
.theme-picker {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 150;
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  padding: 1rem;
  width: min(340px, calc(100vw - 2rem));
  max-height: min(720px, calc(100vh - 2rem));
  overflow: auto;
  color: #18212b;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.theme-picker-head { display: flex; flex-direction: column; margin-bottom: .85rem; }
.theme-picker-head strong { font-size: .95rem; }
.theme-picker-head span { font-size: .75rem; color: #5f6b78; }
.theme-picker-close,
.theme-picker-toggle,
.theme-picker-backdrop { display: none; }
.theme-picker-label {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: #5b6470; margin-bottom: 0.45rem;
}
.color-picker-label { margin-top: .9rem; }
.theme-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.theme-design {
  border: 2px solid #d9dee5; border-radius: 10px; padding: 6px;
  cursor: pointer; background: #fff; display: grid; gap: 5px; color: #27313c;
}
.theme-design:hover, .color-choice:hover { border-color: #7890aa; }
.theme-design.active, .color-choice.active { border-color: #116a83; box-shadow: 0 0 0 2px rgba(17,106,131,.14); }
.design-name { font-size: .69rem; font-weight: 700; line-height: 1.15; }
.layout-mini {
  height: 52px; background: #f0f2f4; position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 8px 24px 1fr; gap: 2px;
}
.layout-mini i { display: block; background: #89939f; }
.layout-mini .mini-nav { grid-column: 1 / -1; background: #c9ced4; }
.layout-mini .mini-hero { grid-column: 1 / -1; background: #596572; }
.layout-mini .mini-block { background: #aab2bb; }
.layout-mini-traditional { width: 82%; margin-inline: auto; }
.layout-mini-traditional .mini-block-c { display: none; }
.layout-mini-modern { grid-template-columns: 1.4fr .6fr; }
.layout-mini-modern .mini-hero { height: 28px; }
.layout-mini-community .mini-hero { grid-column: 1; grid-row: 2 / 4; }
.layout-mini-community .mini-block-a { grid-column: 2; grid-row: 2 / 4; background: #b9c0c7; }
.layout-mini-community .mini-block-b, .layout-mini-community .mini-block-c { display: none; }
.layout-mini-minimalist { grid-template-rows: 8px 28px 1fr; }
.layout-mini-minimalist .mini-hero { width: 92%; border-radius: 0 0 14px 0; }
.layout-mini-simple .mini-block-a { grid-column: 1 / -1; }
.layout-mini-elegant { padding: 4px; background: #fff; }
.layout-mini-elegant .mini-hero { margin: 0 4px; }
.color-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.color-choice {
  min-height: 44px; border: 2px solid #d9dee5; border-radius: 9px; background: #fff;
  padding: 5px 7px; cursor: pointer; display: flex; align-items: center; gap: 7px;
  color: #27313c; font: 600 .68rem/1.15 'Segoe UI', system-ui, sans-serif; text-align: left;
}
.color-choice-logo { grid-column: 1 / -1; }
.logo-color-mark {
  width: 42px; height: 26px; border-radius: 6px; display: grid; place-items: center;
  background: linear-gradient(135deg,#1d4ed8,#06b6d4,#f59e0b); color: #fff; font-size: .62rem;
}
.palette-dots { display: flex; width: 42px; flex: 0 0 auto; }
.palette-dots i { width: 18px; height: 26px; border: 1px solid rgba(0,0,0,.08); }
.palette-dots i:first-child { border-radius: 6px 0 0 6px; }
.palette-dots i:last-child { border-radius: 0 6px 6px 0; }
.demo-notice {
  position: fixed; bottom: 1rem; left: 1rem; z-index: 150;
  background: rgba(0,0,0,0.8); color: #fff;
  font-size: 0.8rem; padding: 0.5rem 0.9rem; border-radius: 8px;
  max-width: 300px;
}
.demo-notice a { color: #7dd3fc; font-weight: 600; text-decoration: underline; }
.footer-admin {
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.85rem;
}
.footer-admin a {
  color: #7dd3fc; font-weight: 600;
}
.footer-admin a:hover { text-decoration: underline; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ministries-grid { grid-template-columns: 1fr 1fr; }
  .sermon-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero-split { grid-template-columns: 1fr; }
  .hero-split-img { min-height: 240px; order: -1; }
  .hero-split-text { padding: 2.5rem 1.5rem; }
  .theme-traditional #about .container,
  .theme-modern #about .container,
  .theme-minimalist #about .container,
  .theme-simple #about .container,
  .theme-minimalist #services .container,
  .theme-simple #services .container { grid-template-columns: 1fr; gap: 2rem; }
  .theme-modern .sermon-grid,
  .theme-minimalist .sermon-grid { grid-template-columns: 1fr; }
  .theme-modern .sermon-selector-inner { width: 100%; }
  .theme-modern .services-list { grid-template-columns: 1fr 1fr; }
  .theme-modern .events-list,
  .theme-minimalist .events-list { grid-template-columns: 1fr; }
  .theme-minimalist .ministries-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --section-gap: 3.5rem; }
  body { font-size: 16px; }

  .nav-toggle { display: flex; }
  .header-inner { min-height: 72px !important; }
  .brand { max-width: calc(100% - 58px); gap: .55rem; }
  .site-logo { height: 44px !important; max-width: 64px; }
  .site-name { overflow: hidden; text-overflow: ellipsis; font-size: 1.15rem; }
  .site-nav {
    position: fixed; inset: 72px 0 auto 0;
    background: var(--c-background);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    max-height: 0; overflow: hidden;
    transition: max-height 0.25s ease;
  }
  body.nav-open .site-nav { max-height: calc(100vh - 72px); overflow: auto; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem; }
  .nav-list > li { border-bottom: 1px solid rgba(0,0,0,0.06); }
  .nav-btn { width: 100%; justify-content: space-between; padding: 0.9rem 1rem; }
  .dropdown {
    position: static; box-shadow: none; border: 0;
    background: var(--c-surface);
    display: block; padding: 0.25rem;
  }
  .nav-drop .dropdown[hidden] { display: none; }
  .utility-inner { justify-content: center; gap: 0.9rem; }
  .ministries-grid { grid-template-columns: 1fr; }
  .about-imgs { grid-template-columns: 1fr; }
  .hero-content { padding: 3.5rem 1.25rem; }
  .cal-cell { min-height: 54px; }
  .cal-chip { font-size: 0.6rem; }
  .theme-picker {
    left: .5rem; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom));
    width: auto; max-height: min(74dvh, 680px); padding: 1rem;
    border-radius: 18px 18px 12px 12px;
    transform: translateY(calc(100% + 1.5rem)); opacity: 0; visibility: hidden;
    pointer-events: none; transition: transform .24s ease, opacity .2s ease, visibility .24s;
  }
  .theme-picker.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .theme-picker-head { min-height: 42px; position: sticky; top: -1rem; z-index: 2; margin: -1rem -1rem .85rem; padding: 1rem 3.75rem .8rem 1rem; border-bottom: 1px solid #e4e8ec; background: rgba(255,255,255,.98); }
  .theme-picker-close { width: 40px; height: 40px; display: grid; position: absolute; right: .75rem; top: .75rem; place-items: center; border: 1px solid #d5dbe2; border-radius: 50%; background: #fff; color: #243444; cursor: pointer; font: 700 1.45rem/1 system-ui,sans-serif; }
  .theme-picker-toggle { min-height: 48px; padding: .72rem 1rem; display: flex; position: fixed; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 152; align-items: center; gap: .5rem; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: #fff; color: #17334b; box-shadow: 0 8px 26px rgba(0,0,0,.24); cursor: pointer; font: 700 .82rem/1 system-ui,sans-serif; transition: transform .2s ease, opacity .2s ease; }
  .theme-picker-toggle > span { font-size: 1rem; }
  .theme-picker-open .theme-picker-toggle { opacity: 0; pointer-events: none; transform: translateY(10px); }
  .theme-picker-backdrop { display: block; position: fixed; inset: 0; z-index: 149; border: 0; background: rgba(8,20,31,.46); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s; }
  .theme-picker-open .theme-picker-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  body.theme-picker-open { overflow: hidden; }
  .demo-notice { display: none; }
  .hero-editorial-image { min-height: 330px; }
  .hero-architectural,
  .hero-classic { min-height: 620px; }
  .hero-framed { padding: .75rem 0 1.5rem; }
  .hero-framed-media { min-height: 640px; }
  .theme-modern .site-header { position: relative; }
  .theme-modern .site-header + .home-main > .home-priority { padding-top: 1.35rem; }
  .theme-modern .hero-center .hero-content { padding: 5rem 0 4rem; }
  .theme-modern .hero-tagline,
  .theme-minimalist .hero-tagline { font-size: clamp(2.8rem, 13vw, 4.7rem); }
  .theme-modern .ministries-grid,
  .theme-minimalist .ministries-grid,
  .theme-community .services-list,
  .theme-modern .services-list { grid-template-columns: 1fr; }
  .sermon-prev-list li { grid-template-columns: 1fr; }
  .sermon-link-meta { white-space: normal; }
  .theme-community .ministry-card:nth-child(2) { transform: none; }
  .theme-community .section-giving,
  .theme-minimalist .section-giving { margin-inline: 0; border-radius: 0; }
}