/* ===========================================================================
   Rushville Baptist Temple — main stylesheet
   ---------------------------------------------------------------------------
   Written "mobile first": the plain rules are for phones, and the
   @media (min-width: …) blocks add changes for bigger screens.

   Sections:
     1. Settings (colors, fonts, spacing)   ← change the look here
     2. Fonts
     3. Base / reset
     4. Layout helpers
     5. Buttons
     6. Header & navigation
     7. Footer
     8. Home page
     9. Inner pages (page header, FAQ, doctrine, ministries, media, contact)
    10. Shared bits (cards, service times, social links, theme verse)
    11. Scroll fade-in
   =========================================================================== */


/* ===== 1. Settings ======================================================= */

:root {
  /* Colors */
  --navy:        #243f82;   /* main church blue — links, buttons */
  --navy-dark:   #14295e;   /* header accents, footer background */
  --gold:        #d4a73c;   /* bright gold — icons & lines on DARK backgrounds only */
  --gold-text:   #8a6414;   /* darker gold — readable text on white or cream */
  --accent:      #8a1010;   /* deep red from the old site — top edge of the visit card */
  --text:        #23201c;   /* warm near-black */
  --text-muted:  #5f5a52;   /* warm gray */
  --bg:          #ffffff;
  --bg-alt:      #f8f4ec;   /* soft cream for alternating sections */
  --bg-strip:    #efe6d4;   /* slightly deeper cream (service times strip) */
  --border:      #e8dfcf;

  /* Fonts */
  --font-heading: "Poppins", system-ui, sans-serif;
  --font-body:    "Open Sans", system-ui, sans-serif;
  --font-serif:   "Lora", Georgia, serif;   /* Scripture & quotes */

  /* Sizes */
  --container:   1120px;    /* max page width */
  --narrow:      760px;     /* max width for long reading text */
  --radius:      10px;
  --shadow:      0 4px 18px rgba(20, 41, 94, 0.10);
  --header-height: 72px;
}


/* ===== 2. Fonts (self-hosted — no Google requests) ======================= */

@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-variable.woff2") format("woff2");
  font-weight: 300 800;   /* one file covers every weight */
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-italic-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}


/* ===== 3. Base / reset =================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);  /* so #links aren't hidden under the header */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy-dark);
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: 1.2rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--navy); }
a:hover { color: var(--navy-dark); }

img { max-width: 100%; height: auto; display: block; }

address { font-style: normal; margin-bottom: 1em; }

/* Visible focus ring for keyboard users */
:focus-visible {
  outline: 3px solid var(--gold-text);
  outline-offset: 2px;
}

/* "Skip to content" link — hidden until a keyboard user tabs to it */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--navy-dark);
  color: #fff;
}
.skip-link:focus { left: 1rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}


/* ===== 4. Layout helpers ================================================= */

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

.section     { padding: 3.5rem 0; }
.section-alt { background: var(--bg-alt); }

.section-title { margin-bottom: 1rem; }
.text-center   { text-align: center; }

.lead {
  font-size: 1.2rem;
  color: var(--text);
}

/* Small label that sits above a heading */
.eyebrow {
  margin: 0 0 0.25rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* Two columns: a photo beside some text. Stacks on phones. */
.split {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.split-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
}

@media (min-width: 800px) {
  .section { padding: 5rem 0; }
  .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .split-reverse .split-media { order: 2; }   /* photo on the right */
}


/* ===== 5. Buttons ======================================================== */

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.button:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: #fff;
}

/* White button for dark photo backgrounds */
.button-light {
  background: #fff;
  border-color: #fff;
  color: var(--navy-dark);
}
.button-light:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-dark);
}

/* See-through button with a white border, for dark photo backgrounds */
.button-ghost {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.button-ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy-dark);
}

.button-outline {
  background: transparent;
  color: var(--navy);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.button-row.center { justify-content: center; }


/* ===== 6. Header & navigation ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

/* Logo + church name */
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.brand img { width: 52px; height: auto; }
.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  color: var(--navy-dark);
}

/* --- Hamburger button (phones & small tablets) --- */
.menu-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--navy-dark);
  font: 600 0.95rem var(--font-heading);
  cursor: pointer;
}

/* The three lines of the ☰ icon, drawn with CSS */
.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s, background 0.25s;
}
.menu-toggle-bars { position: relative; }
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-toggle-bars::before { top: -7px; }
.menu-toggle-bars::after  { top:  7px; }

/* When open, the ☰ turns into an ✕ */
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- Menu: phone layout (a drop-down panel under the header) --- */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* With JavaScript on, the phone menu starts closed until ☰ is tapped */
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }

.nav-list,
.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list { padding: 0.5rem 1.25rem 1rem; }

.nav-list a,
.submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.8rem 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--navy-dark);
  font: 600 1.05rem var(--font-heading);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav-list a[aria-current="page"] { color: var(--gold-text); }

.chevron {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  transition: transform 0.2s;
}
.submenu-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* Sub-menu (About → What to Expect, Doctrine, Pastor) */
.submenu { padding-left: 1rem; }
.js .submenu { display: none; }
.js .submenu-toggle[aria-expanded="true"] + .submenu { display: block; }
.submenu a { font-weight: 400; }

/* --- Menu: desktop layout (a row of links across the top) --- */
@media (min-width: 900px) {
  .menu-toggle { display: none; }

  .site-nav,
  .js .site-nav {
    display: block;
    position: static;
    border: 0;
    box-shadow: none;
    background: none;
  }

  .nav-list {
    display: flex;
    gap: 0.25rem;
    padding: 0;
  }

  .nav-list a,
  .submenu-toggle {
    width: auto;
    padding: 0.5rem 0.9rem;
    border: 0;
    border-radius: 8px;
    font-size: 0.98rem;
  }
  .nav-list a:hover,
  .submenu-toggle:hover { background: var(--bg-alt); }
  .chevron { margin-left: 0.25rem; width: 16px; height: 16px; }

  /* Dropdown opens on hover, keyboard focus, or click */
  .has-submenu { position: relative; }
  .submenu,
  .js .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu,
  .submenu-toggle[aria-expanded="true"] + .submenu { display: block; }

  .submenu a { display: block; }
}


/* ===== 7. Footer ========================================================= */

.site-footer {
  background: var(--navy-dark);
  color: #dfe5f2;
  padding: 3.5rem 0 0;
}
.site-footer h2 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.site-footer a { color: #fff; }

.footer-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

.footer-verse {
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.copyright {
  margin: 3rem 0 0;
  padding: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  font-size: 0.9rem;
}

/* Footer versions of shared pieces */
.site-footer .service-times dt { color: #fff; }
.site-footer .social-links a { border-color: rgba(255, 255, 255, 0.35); }


/* ===== 8. Home page ====================================================== */

/* --- Sections with a full-width photo behind them ---
   The photo is a real <img class="bg-photo"> so phones can load a smaller
   file. A dark tint goes over it so white text stays readable. */
.hero,
.section-photo {
  position: relative;
  overflow: hidden;
  color: #fff;
}
.bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::before,
.section-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero > .container,
.section-photo > .container {
  position: relative;
  z-index: 2;            /* keep content above the photo and tint */
}
.section-photo::before { background: rgba(12, 20, 40, 0.78); }
.section-photo h2,
.section-photo h3 { color: #fff; }

/* --- Hero: aerial photo of Rushville, everything centered --- */
.hero {
  display: grid;
  place-items: center;
  min-height: min(88vh, 760px);
  padding: 4rem 0;
  text-align: center;
}
.hero::before {
  background: linear-gradient(rgba(10, 22, 52, 0.70), rgba(10, 22, 52, 0.80));
}
.hero-content { max-width: 820px; }
.hero-logo {
  width: 150px;
  height: auto;
  margin: 0 auto 1.25rem;
  /* The logo is black, so flip it to white on the dark photo */
  filter: invert(1);
}
.hero h1 { color: #fff; }
.hero-eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero-tagline {
  font-size: 1.15rem;
  margin-bottom: 2rem;
  opacity: 0.95;
}

/* --- Welcome section: text + icons on the left, visit card on the right --- */
.welcome-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
.welcome-text .lead { color: #e8ecf5; }
.welcome-text h3 { margin-top: 2rem; }

@media (min-width: 1000px) {
  .welcome-grid { grid-template-columns: 1.6fr 1fr; gap: 3.5rem; }
}

/* "RBT Is a Place to Find" icon tiles */
.icon-grid {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.icon-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}
.icon-grid svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 640px) {
  .icon-grid { grid-template-columns: repeat(4, 1fr); }
}

/* "Plan Your Visit" card */
.visit-card {
  padding: 2rem;
  background: #fff;
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  border-top: 5px solid var(--accent);
}
.visit-card h2 { color: var(--navy-dark); font-size: 1.6rem; }
.visit-card .button-row { margin-top: 0.5rem; }

/* --- "Life at RBT" photo collage ---
   Desktop: 4 columns. The big tile covers 2×2, the wide tile 2×1,
   so 8 photos fill 3 rows exactly. Phones: 2 columns. */
.section-intro {
  max-width: 620px;
  margin: 0 auto 2rem;
  color: var(--text-muted);
}
.photo-mosaic {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 150px;
  grid-auto-flow: dense;   /* let small photos fill any gaps */
  gap: 0.6rem;
}
.photo-mosaic li {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.photo-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.photo-mosaic li:hover img { transform: scale(1.05); }

/* Caption sits on a dark fade at the bottom of each photo */
.photo-mosaic span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 0.75rem 0.6rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
}
.photo-mosaic .tile-big,
.photo-mosaic .tile-wide { grid-column: span 2; }
.photo-mosaic .tile-big  { grid-row: span 2; }

@media (min-width: 800px) {
  .photo-mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 0.75rem;
  }
  .photo-mosaic span { font-size: 1rem; }
}

/* --- "Join Us This Sunday" closing banner --- */
.join-us .lead { color: #e8ecf5; }

/* --- Service times bar ---
   A white card that slides up over the bottom of the hero photo.
   Phones: the three parts stack. Desktop: three columns with thin dividers. */
.hero { padding-bottom: 7rem; }   /* room for the card to overlap */

.service-bar {
  position: relative;
  z-index: 3;
  margin-top: -4rem;           /* pulls the card up over the hero */
}
.service-bar-card {
  display: grid;
  background: #fff;
  border-radius: var(--radius);
  border-top: 4px solid var(--gold);
  box-shadow: 0 18px 50px rgba(12, 20, 40, 0.18);
}
.service-bar-item {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 1.5rem;
}
.service-bar-item + .service-bar-item { border-top: 1px solid var(--border); }

/* Round cream badge holding the clock / map-pin icon */
.service-bar-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-alt);
}
.service-bar-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Small gold label: SUNDAY / WEDNESDAY / LOCATION */
.service-bar h2 {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.service-bar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-bar li,
.service-bar p {
  margin: 0;
  line-height: 1.8;
  color: var(--text);
}
/* Each line is two columns (time | name) so a long name wraps under itself */
.service-bar li {
  display: grid;
  grid-template-columns: 5.4em 1fr;
  gap: 0.5rem;
}
.service-bar li strong {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy-dark);
}
.service-bar-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
.service-bar-link:hover { text-decoration: underline; }

/* Less space above the section right after the bar */
.service-bar + .section { padding-top: 3.5rem; }

/* Small phones: a bit tighter so service names fit on one line */
@media (max-width: 420px) {
  .service-bar-item { padding: 1.25rem 1.1rem; gap: 0.85rem; }
  .service-bar-icon { width: 40px; height: 40px; }
  .service-bar li { grid-template-columns: 4.9em 1fr; gap: 0.35rem; font-size: 0.97rem; }
}

/* Tablets: Sunday | Wednesday side by side, Location across the bottom */
@media (min-width: 640px) and (max-width: 999px) {
  .service-bar-card { grid-template-columns: 1fr 1fr; }
  .service-bar-item:nth-child(2) {
    border-top: 0;
    border-left: 1px solid var(--border);
  }
  .service-bar-item:last-child { grid-column: 1 / -1; }
}

/* Desktop: three columns with thin dividers */
@media (min-width: 1000px) {
  .service-bar { margin-top: -5rem; }
  .service-bar-card { grid-template-columns: 1.15fr 1.1fr 1fr; }
  .service-bar-item { padding: 2rem 1.75rem; }
  .service-bar-item + .service-bar-item {
    border-top: 0;
    border-left: 1px solid var(--border);
  }
}
}

/* --- Pastor intro: keep the photo a sensible size --- */
.pastor-intro .split-media img { max-width: 460px; margin: 0 auto; }


/* ===== 9. Inner pages ==================================================== */

/* --- Photo banner at the top of inner pages ---
   Set "heading" and "headerPhoto" at the top of a page (see base.njk). */
.page-header {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 3rem 0;
  background: var(--navy-dark);   /* shows if a page has no photo */
  text-align: center;
  overflow: hidden;
}
.page-header::before {             /* dark tint over the photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(12, 20, 40, 0.68);
}
.page-header .container {
  position: relative;
  z-index: 2;
}
.page-header h1 { color: #fff; margin: 0; }
@media (min-width: 800px) {
  .page-header { min-height: 300px; }
}

/* --- FAQ accordion (About page) --- */
.faq details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.faq summary {
  position: relative;
  padding: 1rem 3rem 1rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy-dark);
  cursor: pointer;
  list-style: none;            /* hides the default triangle */
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {          /* our own + / − sign */
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--navy);
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 1.25rem; }
.faq details p:last-child { padding-bottom: 0.5rem; }

/* --- Doctrine page ---
   Phones: topic buttons on top, beliefs below.
   Desktop: topic list in a left column that stays in view while scrolling. */
.doctrine-layout {
  display: grid;
  gap: 2rem;
}
.doctrine-nav-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.doctrine-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.doctrine-nav a {
  display: block;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: 0.9rem;
  text-decoration: none;
}
.doctrine-nav a:hover { border-color: var(--navy); }

.doctrine { max-width: var(--narrow); }
.doctrine h2 {
  margin-top: 2.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--border);
}

@media (min-width: 900px) {
  .doctrine-layout {
    grid-template-columns: 230px 1fr;
    gap: 3.5rem;
    align-items: start;
  }
  .doctrine-nav {
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
  }
  .doctrine-nav ul {
    flex-direction: column;
    gap: 0;
    border-left: 2px solid var(--border);
  }
  .doctrine-nav a {
    padding: 0.4rem 0 0.4rem 1rem;
    border: 0;
    border-radius: 0;
    background: none;
    margin-left: -2px;
    border-left: 2px solid transparent;
  }
  .doctrine-nav a:hover { border-left-color: var(--navy); }
}

/* Scripture references under a paragraph */
.refs {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
}

/* --- Bible verse pull-quote (Ministries) --- */
.verse {
  margin: 2rem 0 0;
  padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--gold);
  background: var(--bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-style: italic;
}
.verse p { margin-bottom: 0.5rem; }
.verse cite {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  color: var(--navy);
}

/* --- Ministries: alternating photo/text rows --- */
.ministry {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 4rem;
}
.ministry:last-child { margin-bottom: 0; }
.ministry-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Several photos: one big on top, two small underneath */
.photo-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.photo-stack img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.photo-stack img:first-child { grid-column: 1 / -1; }

@media (min-width: 800px) {
  .ministry { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .ministry:nth-child(even) .ministry-media { order: 2; }  /* zig-zag */
}

/* --- Media page: livestream grid --- */
.video-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 800px) {
  .video-grid { grid-template-columns: 1fr 1fr; }
}
.video { margin: 0; }
.video-frame {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.video figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.6rem;
  color: var(--text-muted);
}
.video figcaption strong { color: var(--navy-dark); }

/* YouTube thumbnail that turns into the player when clicked (youtube.js) */
.video-poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s, opacity 0.3s;
}
.video-poster:hover img { transform: scale(1.03); opacity: 0.9; }

/* Red rounded play button with a white triangle, drawn in CSS */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: rgba(200, 0, 0, 0.9);
}
.play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}

/* Text only screen readers hear */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Contact page --- */
.contact-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 800px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}
.contact-card {
  padding: 2rem;
  background: var(--bg-alt);
  border-radius: var(--radius);
}
.contact-card h2 { font-size: 1.3rem; }
.contact-card h2:not(:first-child) { margin-top: 2rem; }
.contact-card .note {
  margin-top: 1.25rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.map {
  aspect-ratio: 16 / 9;
  max-height: 450px;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
}
.map iframe { width: 100%; height: 100%; border: 0; }


/* ===== 10. Shared bits =================================================== */

/* --- Photo cards ("Let's Get Busy" gallery) --- */
.card-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (min-width: 640px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.card-body { padding: 1.25rem 1.5rem 1.5rem; }

/* If the last card would sit alone on its row, stretch it across the full
   width with the photo beside the text, so the grid never looks unfinished. */
@media (min-width: 640px) and (max-width: 999px) {
  .card:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .card:last-child:nth-child(2n + 1) img { height: 100%; }
}
@media (min-width: 1000px) {
  .card:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }
  .card:last-child:nth-child(3n + 1) img { height: 100%; }
  .card:last-child:nth-child(3n + 1) .card-body { padding: 2rem 2.5rem; }
}
.card-body p { margin: 0; color: var(--text-muted); }

/* --- Service times list --- */
.service-times { margin: 0 0 1.25rem; }
.service-times dt {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy-dark);
  margin-top: 0.75rem;
}
.service-times dt:first-child { margin-top: 0; }
.service-times dd { margin: 0; }
.service-times dd strong { display: inline-block; min-width: 5.5em; }

/* --- Facebook / YouTube buttons --- */
.social-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}
.social-links svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* --- Theme verse (1 Corinthians 9:23) ---
   A centered quote with a small gold ornament above it. Text color follows
   the section it sits in, so it works on light and dark backgrounds. */
.theme-verse {
  max-width: 640px;
  margin: 0 auto 2rem;
  text-align: center;
}
.theme-verse::before {             /* ── ✦ ── ornament */
  content: "✦";
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 120px;
  margin: 0 auto 0.75rem;
  color: var(--gold);
  font-size: 0.9rem;
  background: linear-gradient(var(--gold), var(--gold)) left center / 42px 1px no-repeat,
              linear-gradient(var(--gold), var(--gold)) right center / 42px 1px no-repeat;
  justify-content: center;
}
.theme-verse blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.5;
}
.theme-verse figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}
.site-footer .theme-verse { margin-bottom: 0; color: #fff; }


/* ===== 11. Scroll fade-in ================================================ */
/* Sections gently fade and rise into view as you scroll. Pure CSS — browsers
   that don't support it (or visitors who turn off motion) simply see
   everything normally. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card,
    .photo-mosaic li,
    .ministry,
    .split,
    .visit-card,
    .icon-grid li,
    .faq details,
    .contact-card,
    .video {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}