/* ==========================================================================
   caclouky.org redesign — homepage stylesheet
   Self-contained; does not depend on the legacy css/styles.css.
   Design reference: design/mockup-final.png
   ========================================================================== */

:root {
  --gold: #bf9a4e;
  --gold-dark: #a07f38;
  --ink: #1f2a33;
  --muted: #5c6b74;
  --cream: #faf7f0;
  --line: #e9e2d4;
  /* Warm gold-tinted hairline for mobile-menu dividers (~18% gold). */
  --gold-line: rgba(191, 154, 78, 0.2);
  --white: #ffffff;
  --meeting-red: #7a1f24;
  --meeting-red-dark: #5f171c;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container: 1200px;
  --shadow-sm: 0 2px 10px rgba(31, 42, 51, 0.06);
  --shadow-md: 0 10px 30px rgba(31, 42, 51, 0.10);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.65;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 0.4em;
  color: var(--ink);
}

p {
  margin: 0 0 1em;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn-gold {
  background: var(--gold);
  color: var(--white);
}

.btn-gold:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.8);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.btn-outline-dark {
  background: transparent;
  color: var(--ink);
  border-color: var(--gold);
}

.btn-outline-dark:hover {
  background: var(--gold);
  color: var(--white);
}

/* Live Stream button (hero): red outline, red fill on hover */
.hero-actions .btn-outline-dark {
  border-color: #e21b20;
}

.hero-actions .btn-outline-dark:hover {
  background: #e21b20;
  border-color: #e21b20;
  color: #ffffff;
}

/* ---- Site header ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.site-header .container {
  display: grid;
  /* Logo pinned left, nav links truly centered in the header, equal gutters */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  min-height: 84px;
}

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-self: start;
  /* Share the drawer's motion curve/duration so the two move in concert. */
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* While the mobile drawer flies out, slide the header logo off the left edge
   in the same motion (the brand is mirrored inside the drawer); it slides back
   into place when the drawer retracts. The extra `.site-header` qualifier
   raises specificity above the responsive `transform: none` reset that applies
   to overlay pages. Mobile widths only — the drawer never opens at desktop. */
@media (max-width: 980px) {
  body.menu-open .site-header .site-logo {
    transform: translateX(-150%);
  }
}

.site-logo img {
  height: 70px;
  width: auto;
  display: block;
}

/* Two logo variants share the slot; only one shows per header state.
   Default (solid white header, e.g. interior pages): gold two-tone. */
.site-logo .logo-hero {
  display: none;
}
.site-logo .logo-solid {
  display: block;
}

/* Overlay header over the hero: all-gold variant reads best on the dark photo */
body.overlay-nav .site-logo .logo-hero {
  display: block;
}
body.overlay-nav .site-logo .logo-solid {
  display: none;
}

/* Scrolled = solid white bar: switch back to the gold two-tone */
body.overlay-nav .site-header.scrolled .logo-hero {
  display: none;
}
body.overlay-nav .site-header.scrolled .logo-solid {
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
}

.main-nav .nav-link {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
  transition: color 0.2s ease;
}

.main-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.25s ease;
}

.main-nav .nav-link:hover {
  color: var(--gold-dark);
}

.main-nav .nav-link:hover::after {
  width: 100%;
}

.main-nav .btn {
  padding: 11px 22px;
}

/* ---- Special MEETING button (desktop nav, temporary/seasonal) ---------- */
.nav-meeting {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--meeting-red-dark);
  border: 2px solid var(--gold);
  border-radius: 4px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.nav-meeting:hover {
  background: var(--meeting-red);
  color: var(--white);
  transform: translateY(-2px);
}

/* ---- Nav dropdown (Media) --------------------------------------------- */
/* The trigger is a non-navigating <button class="nav-link nav-dropdown-toggle">,
   so .nav-link styling above already applies; reset native button chrome and
   add a small caret. */
.main-nav .nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.main-nav .nav-dropdown-toggle {
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  /* Inherit family from page (was browser-button default) but let the
     .nav-link rule keep its font-size / weight / letter-spacing */
  font-family: inherit;
}

.main-nav .nav-caret {
  font-size: 0.65em;
  margin-left: 7px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.main-nav .nav-item.has-dropdown:hover .nav-caret,
.main-nav .nav-item.has-dropdown:focus-within .nav-caret,
.main-nav .nav-item.has-dropdown.open .nav-caret {
  transform: rotate(180deg);
}

/* Popup panel — flush below the trigger (no visual gap), so mouse transit
   never loses :hover on the parent .nav-item */
.main-nav .nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background: var(--white);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibility transitions discretely; delay it to the END of the opacity
     fade-out on close, but 0 on open so the panel appears instantly and the
     opacity/transform animate. */
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
  z-index: 110;
}

.main-nav .nav-item.has-dropdown:hover .nav-dropdown,
.main-nav .nav-item.has-dropdown:focus-within .nav-dropdown,
.main-nav .nav-item.has-dropdown.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0s;
}

.main-nav .nav-dropdown a {
  display: block;
  padding: 11px 22px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.main-nav .nav-dropdown a:hover {
  background: var(--cream);
  color: var(--gold-dark);
}

/* Hamburger (mobile only). Icon sized to balance the logo height in the bar;
   the explicit i font-size overrides FontAwesome's fa-lg. */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
  justify-self: end;
  line-height: 0;
}

.nav-toggle i {
  font-size: 2.25rem;
}

/* Logo shrinks to 52px here, so bring the hamburger down to match. */
@media (max-width: 640px) {
  .nav-toggle i {
    font-size: 1.85rem;
  }
}

/* ---- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  /* Full-page photo, cropped to fill the viewport. A diagonal dark scrim sits
     over the left/upper area so the white welcome text stays legible while the
     church and warm sky on the right stay clear. */
  background: linear-gradient(
      105deg,
      rgba(31, 42, 51, 0.88) 0%,
      rgba(31, 42, 51, 0.78) 22%,
      rgba(31, 42, 51, 0.6) 40%,
      rgba(31, 42, 51, 0.4) 55%,
      rgba(31, 42, 51, 0.22) 70%,
      rgba(31, 42, 51, 0.08) 85%,
      rgba(31, 42, 51, 0) 100%
    ),
    /* Subtle vignette on the far-right edge so the bright clouds don't pull
       the eye away from the welcome text */
    linear-gradient(
      to left,
      rgba(31, 42, 51, 0.38) 0%,
      rgba(31, 42, 51, 0.12) 12%,
      rgba(31, 42, 51, 0) 28%
    ),
    url("../images/cac-golden-hour-hero-graded.jpg") center 30% / cover no-repeat;
  color: var(--white);
  /* Extra top padding clears the overlay header that floats above the photo. */
  padding: clamp(116px, 16vh, 180px) 0 clamp(56px, 8vh, 104px);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
}

/* Let the hero span full width so the card can sit at the far left */
.hero > .container {
  max-width: none;
  padding-left: clamp(24px, 5vw, 72px);
  padding-right: clamp(24px, 5vw, 72px);
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 28px;
  /* Nudge the whole welcome block slightly lower in the hero */
  transform: translateY(40px);
}

.hero-card {
  max-width: 560px;
}

/* Gold uppercase kicker with a short gold rule beneath it */
.hero-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 20px;
}

.hero-eyebrow::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  background: var(--gold);
  margin-top: 14px;
}

.hero-card-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--white);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.1;
  margin: 0 0 0.5em;
  /* Crisp edge + soft halo: lifts the serif off the sky and adds depth */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* Gold rule–cross–rule flourish (rules taper to points at the outer ends),
   left-aligned and smaller than the interior-page banner version. */
.hero-flourish {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  margin: 0 0 30px;
}

.hero-flourish .rule {
  display: block;
  width: clamp(70px, 12vw, 150px);
  height: 3px;
  background: var(--gold);
}

.hero-flourish .rule:first-of-type {
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.hero-flourish .rule:last-of-type {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Desktop: stretch the rules so the cross + lines span the full width of the
   "Assembly Church" title line (the card is already sized to that line).
   Home hero only (.hero); mobile keeps the fixed, centered flourish. */
@media (min-width: 641px) {
  .hero .hero-flourish .rule {
    width: auto;
    flex: 1;
  }
}

.hero-flourish .cross {
  position: relative;
  width: 16px;
  height: 30px;
  flex: none;
}

.hero-flourish .cross::before,
.hero-flourish .cross::after {
  content: "";
  position: absolute;
  background: var(--gold);
}

.hero-flourish .cross::before {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
}

.hero-flourish .cross::after {
  top: 28%;
  left: 0;
  width: 100%;
  height: 4px;
}

.hero-card-text {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
  /* Narrower than the headline so the copy reads in tighter lines */
  max-width: 470px;
  margin-bottom: 2em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
}

.hero-actions .btn .fa-arrow-right {
  margin-left: 10px;
  font-size: 0.82em;
}

/* "Welcome" scroll cue lives in the hero but is shown on mobile only
   (see the max-width: 640px block). Hidden on desktop. */
.hero-welcome-btn {
  display: none;
}

/* When jumping to the Welcome section, clear the fixed header. */
.welcome {
  scroll-margin-top: 90px;
}

/* Deep link to the Contact Us form (#contact, e.g. from the yms.html button):
   clear the sticky header so the title isn't hidden underneath it. */
#contact {
  scroll-margin-top: 110px;
}

/* ---- Home: overlay header floating on the full-page hero --------------- */
/* The header sits over the photo (no white bar) with a soft top scrim so the
   light logo and nav links stay legible. Once the user scrolls past the hero
   it turns solid (see .scrolled, toggled in redesign-nav.js). */
body.overlay-nav .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  /* A touch of extra height below the logo gives the fade more room to blend */
  padding-bottom: 22px;
  border-bottom: 0;
  box-shadow: none;
  transition: background 0.45s ease, box-shadow 0.45s ease,
    border-color 0.45s ease, padding 0.45s ease;
}

/* Glass scrim moved off the header element onto ::before so descendants
   (e.g. the Media dropdown panel that overflows below the header) aren't
   clipped by the mask. The pseudo holds the gradient tint + backdrop blur +
   bottom mask-feather; it sits behind the logo/nav via z-index: -1. */
body.overlay-nav .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(31, 42, 51, 0.72) 0%,
    rgba(31, 42, 51, 0.52) 35%,
    rgba(31, 42, 51, 0.28) 62%,
    rgba(31, 42, 51, 0.1) 84%,
    rgba(31, 42, 51, 0) 100%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  transition: opacity 0.45s ease;
}

/* Homepage header shares the hero's full-width / left-padding coordinate
   system so the logo can be aligned to the title below it. */
body.overlay-nav .site-header .container {
  max-width: none;
  padding-left: clamp(24px, 5vw, 72px);
  padding-right: clamp(24px, 5vw, 72px);
  min-height: 98px;
}

/* Slide the logo right so it sits centered above the word "Church" in the
   hero title (offset scales with the title font). Only at >=1600px, where
   there's clearance beside the viewport-centered nav; below that the logo
   stays left-aligned so it never collides with the links. */
@media (min-width: 1600px) {
  body.overlay-nav .site-logo {
    transform: translateX(calc(7.12 * clamp(2.6rem, 5vw, 4.2rem) - 155px));
  }
}

body.overlay-nav .site-header .main-nav .nav-link,
body.overlay-nav .site-header .nav-toggle {
  color: rgba(255, 255, 255, 0.88);
}

body.overlay-nav .site-header .main-nav .nav-link:hover {
  color: #faf7f0;
}

body.overlay-nav .site-header.scrolled {
  background: #f8f6f2;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding-bottom: 0;
}

/* Hide the glass scrim under the solid scrolled bar */
body.overlay-nav .site-header.scrolled::before {
  opacity: 0;
}

body.overlay-nav .site-header.scrolled .main-nav .nav-link,
body.overlay-nav .site-header.scrolled .nav-toggle {
  color: var(--ink);
}

body.overlay-nav .site-header.scrolled .main-nav .nav-link:hover {
  color: var(--gold-dark);
}

/* ---- About page only: flat frosted-glass navbar -----------------------
   Scoped to body.about so it does NOT affect the homepage. Replaces the
   feathered gradient scrim with a flat translucent dark bar + light blur and
   a hairline bottom border. The .scrolled (solid white) state above still
   wins on scroll thanks to its higher specificity. */
body.about .site-header {
  /* Header itself stays transparent; the glass is on ::before so the dropdown
     panel that overflows below the header isn't clipped by the mask. */
  background: transparent;
  padding-bottom: 22px;
  border-bottom: 0;
  /* Transition, scrolled-bar color (#f8f6f2), and navbar height (98px) are now
     shared in the body.overlay-nav rules above, so both pages match. */
}

body.about .site-header::before {
  /* About page tunes the homepage scrim: cooler near-black tint, lighter blur,
     and a higher feather start (mask 68%) for a flatter bar feel. */
  background: linear-gradient(
    to bottom,
    rgba(5, 8, 12, 0.32) 0%,
    rgba(5, 8, 12, 0.28) 45%,
    rgba(5, 8, 12, 0.1) 75%,
    rgba(5, 8, 12, 0) 100%
  );
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}

/* ---- Page banner (interior pages) ------------------------------------- */
.page-banner {
  position: relative;
  background: linear-gradient(
      to bottom,
      rgba(31, 42, 51, 0.45),
      rgba(31, 42, 51, 0.65)
    ),
    url("../images/church-golden-hour.jpg") center 55% / cover no-repeat;
  color: var(--white);
  text-align: center;
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(72px, 14vh, 150px) 0;
}

/* About Us: vintage Gospel Assembly Church photo, focused on the gothic tower */
.page-banner.is-aboutus {
  /* Full-page hero treatment to match the homepage. */
  min-height: 100vh;
  background: none;
}

/* Photo lives on its own layer so a subtle grade can be applied without
   touching the title text. Historic-elegance grade: a little more contrast
   and midtone separation, blacks slightly deeper — no HDR punch, no crushed
   shadows, no oversaturation. */
.page-banner.is-aboutus::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
      to bottom,
      rgba(31, 42, 51, 0.5),
      rgba(31, 42, 51, 0.68)
    ),
    url("../images/aboutus-hero-graded.jpg") center 30% / cover no-repeat;
  filter: contrast(1.1) brightness(0.97);
}

.page-banner .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 16px;
}

.page-banner h1 {
  color: var(--white);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0;
}

/* About banner: elegant high-contrast serif title + gold cross flourish.
   Nudge the whole group down so it sits in the lower "safe" zone — the tower,
   nav bar, and heavy serif all pull the eye upward, so true-center reads high. */
.page-banner.is-aboutus .container {
  position: relative;
  z-index: 1;
  transform: translateY(clamp(55px, 7vh, 75px));
}

.page-banner .banner-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3.35rem, 9.3vw, 7.4rem);
  letter-spacing: 0.5px;
  line-height: 1.05;
  /* Soft halo so the white title stays readable on brighter monitors */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(0, 0, 0, 0.28);
}

.banner-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 38px);
  margin-top: clamp(40px, 5vh, 62px);
}

/* Rules taper to a point at the outer ends, full thickness toward the cross */
.banner-flourish .rule {
  display: block;
  width: clamp(80px, 15vw, 210px);
  height: 6px;
  background: var(--gold);
}

.banner-flourish .rule:first-of-type {
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.banner-flourish .rule:last-of-type {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Thin gold Latin cross built from two bars */
.banner-flourish .cross {
  position: relative;
  width: 22px;
  height: 42px;
  flex: none;
}

.banner-flourish .cross::before,
.banner-flourish .cross::after {
  content: "";
  position: absolute;
  background: var(--gold);
}

.banner-flourish .cross::before {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 5px;
  height: 100%;
}

.banner-flourish .cross::after {
  top: 30%;
  left: 0;
  width: 100%;
  height: 5px;
}

/* ---- Page prose (single-column article) -------------------------------- */
.page-prose {
  background: #f5f2eb; /* revert to #f7f5f1 if needed */
  padding: clamp(64px, 7vh, 96px) 0 clamp(56px, 7vh, 84px);
}

.page-prose .container {
  max-width: 900px;
}

/* Books page: narrow the prose column so the intro eyebrow + paragraph line up
   with the 760px feature card below them (808 − 48px container padding = 760). */
body.books .page-prose .container {
  max-width: 808px;
}

/* Keep auto-hyphenation off for the books intro paragraph at all widths so long
   words (e.g. "reflection") aren't split mid-word. The mobile rule restates
   this alongside its justify/size tweaks. */
body.books .page-prose .container > p {
  -webkit-hyphens: none;
  hyphens: none;
}

/* Small section intro / eyebrow above the prose for hierarchy */
.prose-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 28px;
}

/* Thin gold rule beneath the section label — slightly warmer + 1px thicker */
.prose-eyebrow::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: rgba(181, 124, 40, 0.55);
  margin-top: 14px;
}

.page-prose p {
  font-size: 1.18rem;
  line-height: 1.85;
  color: #2f3540;
  margin: 0 0 30px;
  text-align: justify;
  hyphens: auto;
}

.page-prose p:last-child {
  margin-bottom: 0;
}

/* ---- Online giving: hero + content ------------------------------------- */
/* Full-photo hero in the homepage style: a left-aligned card over the
   side-front golden-hour church photo. The church sits on the right and the
   bright sky/sun on the left, so a diagonal dark scrim falls on the left to
   keep the white copy legible while the church stays clear. */
.give-hero {
  position: relative;
  /* Dark left-to-right fade over the full-width church photo (replaces the
     former solid brown panel). Dark behind the text on the left, dissolving to
     clear by mid-frame so the church reads on the right. The dark portion is
     sized (~0–30%) to match the old panel's footprint. */
  background: linear-gradient(
      to right,
      rgba(14, 11, 8, 0.95) 0%,
      rgba(14, 11, 8, 0.88) 14%,
      rgba(14, 11, 8, 0.64) 24%,
      rgba(14, 11, 8, 0.32) 34%,
      rgba(14, 11, 8, 0.1) 44%,
      rgba(14, 11, 8, 0) 56%
    ),
    url("../images/cac-side-front-hero-graded.jpg") center 38% / cover no-repeat;
  color: var(--white);
  /* Top padding clears the overlay header that floats above the photo. */
  padding: clamp(116px, 16vh, 180px) 0 clamp(56px, 8vh, 104px);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
}

/* Span full width so the card can sit toward the left, like the homepage.
   Keep the copy above the cream fade-out at the bottom of the hero. */
.give-hero > .container {
  max-width: none;
  padding-left: clamp(24px, 5vw, 72px);
  padding-right: clamp(24px, 5vw, 72px);
  position: relative;
  z-index: 2;
}

/* Nudge the whole hero block ~40–56px to the right so it balances with the
   building and leaves less empty space at the left edge. */
.give-hero .hero-content {
  margin-left: clamp(0px, 4vw, 56px);
}

/* The flourish supplies the rule beneath the eyebrow here, so drop the
   eyebrow's own underline to avoid a double rule. */
.give-hero .hero-eyebrow::after {
  display: none;
}

.give-hero .hero-eyebrow {
  margin-bottom: 18px;
}

/* Very subtle gold halo so the cross above the title quietly catches the eye */
.give-hero .hero-flourish .cross {
  filter: drop-shadow(0 0 9px rgba(196, 154, 74, 0.4))
    drop-shadow(0 0 16px rgba(196, 154, 74, 0.18));
}

/* Scripture accent: the verse reads as an elegant pull-quote — a touch larger,
   italic, narrower, with the reference in gold. */
.give-hero .hero-card-text {
  font-style: italic;
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  line-height: 1.7;
  max-width: 390px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.9);
}

.give-hero .verse-ref {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Mobile: the text block is tall, so back it with a uniform dark scrim. */
@media (max-width: 640px) {
  .give-hero {
    min-height: 100vh;
    padding: clamp(110px, 16vh, 140px) 0 clamp(40px, 6vh, 60px);
    background: linear-gradient(
        to bottom,
        rgba(38, 28, 20, 0.8) 0%,
        rgba(38, 28, 20, 0.62) 45%,
        rgba(38, 28, 20, 0.66) 100%
      ),
      url("../images/cac-side-front-hero-graded.jpg") center 35% / cover no-repeat;
  }
}

/* Subtle parallax: pin the photo so it feels alive as the page scrolls over
   it. Scoped to non-mobile widths — touch browsers ignore fixed attachment
   (and it can be janky there), so this is a safe progressive enhancement.
   Declared after the media blocks above so it wins on larger screens. */
@media (min-width: 641px) {
  .give-hero {
    background-attachment: fixed;
  }
}


.give {
  /* Slightly darker than the cream elsewhere so the white cards gain a touch
     more separation from the page. */
  background: #efede8;
  padding: clamp(56px, 7vh, 88px) 0;
}

.give-grid {
  display: grid;
  /* Equal-width columns that stretch to the same height, like the old layout */
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.give-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 46px);
  box-shadow: var(--shadow-sm);
  /* Centered content, matching the old giving page */
  text-align: center;
}

/* Center the gold eyebrow rule under the centered label */
.give-card .prose-eyebrow::after {
  margin-left: auto;
  margin-right: auto;
}

/* Longer explanatory paragraphs read better justified than centered */
.give-card > p {
  text-align: justify;
}

.give-card h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 0.5em;
}

.give-card > p {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 1.6em;
}

/* Sub-blocks within the main giving card, divided by a faint hairline rule.
   The app section is secondary, so keep the divider light and the gap tight. */
.give-block + .give-block {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(233, 226, 212, 0.55);
}

/* Primary call to action: larger, taller, more prominent gold so it draws the
   eye immediately. */
.btn-give {
  font-size: 1.02rem;
  padding: 17px 42px;
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(191, 154, 78, 0.32);
}

.btn-give:hover {
  box-shadow: 0 11px 26px rgba(191, 154, 78, 0.42);
}

.btn-give .fa-arrow-right {
  margin-left: 10px;
  font-size: 0.82em;
}

/* Trust / reassurance line beneath the primary CTA */
.give-secure {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.give-secure .fa-lock {
  color: var(--gold-dark);
  margin-right: 6px;
  font-size: 0.9em;
}

.give-block h3 {
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.5em;
}

.give-block p {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 1.2em;
}

/* App store badges */
.app-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.app-badges img {
  height: 46px;
  width: auto;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.app-badges a:hover img {
  transform: translateY(-2px);
}

.give-help {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold-dark);
}

.give-help:hover {
  color: var(--gold);
}

/* Notes card */
.give-notes h2 {
  font-size: clamp(1.55rem, 2.6vw, 1.95rem);
  margin-bottom: 0;
}

/* Gold divider under the notes heading, matching the eyebrow rule used
   elsewhere on the site. */
.notes-rule {
  display: block;
  width: 56px;
  height: 2px;
  background: rgba(181, 124, 40, 0.55);
  margin: 16px auto 22px;
}

.give-notes ol {
  margin: 1.4em 0 0;
  padding-left: 1.2em;
  /* The numbered list reads left-to-right, not centered */
  text-align: left;
}

.give-notes li {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.1em;
  text-align: justify;
}

.give-notes li:last-child {
  margin-bottom: 0;
}

.give-notes li strong {
  color: var(--ink);
}

@media (max-width: 880px) {
  .give-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Pillars ----------------------------------------------------------- */
.pillars {
  background: var(--white);
  padding: 72px 0;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.pillar {
  text-align: center;
  padding: 0 10px;
}

.pillar .pillar-icon {
  font-size: 2.4rem;
  color: var(--gold);
  margin-bottom: 16px;
  line-height: 1;
}

.pillar h3 {
  font-size: 1.2rem;
  margin-bottom: 0.35em;
}

.pillar p {
  color: var(--muted);
  font-size: 0.98rem;
  margin: 0;
}

.pillars-grid .pillar + .pillar {
  border-left: 1px solid var(--line);
}

/* ---- Welcome / split --------------------------------------------------- */
.welcome {
  background: #f5f2eb;
  padding: 90px 0 85px;
}

.welcome-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}

.welcome-photo {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.welcome-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(201, 163, 92, 0.05),
    rgba(0, 0, 0, 0.05)
  );
  pointer-events: none;
}

.welcome-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.welcome-eyebrow {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 14px;
}

.welcome-text {
  align-self: start;
  margin-top: 40px;
}

.welcome-text h2 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin-bottom: 0.5em;
}

.welcome-text p {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 2;
  text-align: justify;
  margin-top: 24px;
  margin-bottom: 1.6em;
}

.welcome-text .btn {
  margin-top: 18px;
}

/* ---- Service times ----------------------------------------------------- */
.services {
  padding: 80px 0;
  background: var(--white);
  text-align: center;
}

.services h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-bottom: 48px;
}

.services .section-sub {
  color: var(--muted);
  margin-bottom: 48px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.service-card .day {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.service-card .time {
  font-size: 1.4rem;
  color: var(--gold-dark);
  font-weight: 700;
}

.service-card .tz {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  padding: 64px 0 0;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}

.site-footer h4 {
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.site-footer a:hover {
  color: var(--gold);
}

.footer-links a {
  display: block;
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.82);
}

.footer-contact p {
  margin: 0 0 10px;
}

.footer-brand p {
  max-width: 28em;
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

/* Home: the footer is only the copyright bar, so drop the empty top padding
   that .site-footer reserves for the (removed) brand/links grid. */
body.overlay-nav .site-footer {
  padding-top: 0;
}

/* ---- Mobile slide menu + overlay -------------------------------------- */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 85vw;
  height: 100%;
  background: var(--white);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  /* Ease-out curve for a premium, settled entrance. */
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 200;
  padding: 0 28px 28px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* Drawer header: in-menu logo + close button, anchored by a gold divider so
   the menu reads as an intentional, branded panel. */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 15px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--gold-line);
}

.mobile-menu-logo {
  display: inline-flex;
  padding: 0;
}

.mobile-menu-logo img {
  height: 53px;
  width: auto;
  display: block;
}

/* Primary mobile nav links — lighter weight + wider tracking than the old
   heavy treatment, with generous touch padding. */
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu-nav > a,
.mobile-dropdown-toggle {
  position: relative;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 0;
  color: var(--ink);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Content-aligned dividers: a hairline that starts at the text and trails off
   before the right edge, rather than running the full drawer width. */
.mobile-menu-nav > a::after,
.mobile-dropdown-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 22px;
  bottom: 0;
  height: 1px;
  background: var(--gold-line);
}

/* Touch feedback: a brief warm gold wash on press (and hover on pointers). */
.mobile-menu-nav > a:active,
.mobile-dropdown-toggle:active,
.mobile-submenu a:active {
  background: rgba(191, 154, 78, 0.14);
}

@media (hover: hover) {
  .mobile-menu-nav > a:hover,
  .mobile-dropdown-toggle:hover,
  .mobile-submenu a:hover {
    background: rgba(191, 154, 78, 0.08);
    color: var(--gold-dark);
  }
}

/* Mobile Media dropdown: button styled to match the flat menu links, with a
   caret that flips when open and a max-height collapse for the submenu. */
.mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
  font-family: inherit;
}

.mobile-dropdown-toggle .fa-chevron-down {
  font-size: 0.7em;
  opacity: 0.7;
  transition: transform 0.28s ease-in-out;
}

.mobile-dropdown-toggle[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

/* Submenu items stack vertically and indent. flex-column is what fixes the
   old bug where the inline <a>s wrapped into ragged columns. */
.mobile-submenu {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.28s ease, opacity 0.28s ease;
}

.mobile-submenu.open {
  max-height: 320px;
  opacity: 1;
}

.mobile-submenu a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
  padding: 12px 0 12px 38px;
  color: var(--ink);
  opacity: 0.9;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Divider aligned to the indented submenu text. */
.mobile-submenu a::after {
  content: "";
  position: absolute;
  left: 38px;
  right: 22px;
  bottom: 0;
  height: 1px;
  background: var(--gold-line);
}

.mobile-submenu a:last-child::after {
  display: none;
}

.mobile-close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  padding: 6px;
  line-height: 0;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

/* Match the close glyph to the hamburger it replaces / the drawer logo.
   Explicit size overrides FontAwesome's smaller fa-lg. */
.mobile-close i {
  font-size: 1.85rem;
}

.mobile-close:hover {
  background: rgba(191, 154, 78, 0.1);
}

/* Seasonal MEETING badge — mobile-drawer counterpart to the desktop
   .nav-meeting button. A light, on-theme promo card (cream fill, gold hairline,
   serif title) set apart from the nav links above. It expands to fill the open
   space below the menu. Toggled per-page via the comment markers around its markup. */
.mobile-meeting-badge {
  /* Sits a comfortable gap below the nav links. (Service Times — which carried
     the other auto margin for centering — is currently commented out.) */
  margin-top: 30px;
  padding: 26px 22px 28px;
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--gold-line);
  border-top: 4px solid var(--gold);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}

.mobile-meeting-badge .badge-title {
  display: block;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.mobile-meeting-badge .badge-dates {
  display: block;
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.mobile-meeting-badge .badge-button {
  display: block;
  margin-top: 20px;
  padding: 14px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--gold);
  border-radius: 5px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.mobile-meeting-badge .badge-button:active {
  background: var(--gold-dark);
}

@media (hover: hover) {
  .mobile-meeting-badge .badge-button:hover {
    background: var(--gold-dark);
    transform: translateY(-1px);
  }
}

/* Service times pinned to the foot of the drawer, filling the empty space
   below the CTA with something useful for first-time visitors. */
.mobile-menu-hours {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--gold-line);
}

.mobile-menu-hours-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
}

/* Active page: gold text + a left accent rail so visitors know where they are.
   JS (redesign-nav.js) sets aria-current / .is-active based on the URL. */
.mobile-menu-nav > a[aria-current="page"],
.mobile-dropdown-toggle.is-active {
  color: var(--gold-dark);
  box-shadow: inset 3px 0 0 var(--gold);
  padding-left: 12px;
}

.mobile-submenu a[aria-current="page"] {
  color: var(--gold-dark);
  font-weight: 600;
  opacity: 1;
  box-shadow: inset 3px 0 0 var(--gold);
}

.mobile-menu-hours ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-hours li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.875rem;
  color: var(--ink);
}

.mobile-menu-hours li span:first-child {
  font-weight: 500;
}

.mobile-menu-hours li span:last-child {
  color: var(--gold-dark);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  z-index: 150;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ---- Responsive -------------------------------------------------------- */
/* Narrower than this the church drifts left, so strengthen the left scrim a
   touch to keep the welcome text legible over it. */
@media (max-width: 1300px) {
  .hero {
    background: linear-gradient(
        100deg,
        rgba(31, 42, 51, 0.92) 0%,
        rgba(31, 42, 51, 0.65) 42%,
        rgba(31, 42, 51, 0.2) 68%,
        rgba(31, 42, 51, 0) 90%
      ),
      url("../images/cac-golden-hour-hero-graded.jpg") center 30% / cover no-repeat;
  }
}

@media (max-width: 980px) {
  /* Keep the logo, hide the link list, show the hamburger */
  .main-nav .nav-link {
    display: none;
  }
  /* MEETING button is desktop-only — never show it in the mobile layout */
  .nav-meeting {
    display: none !important;
  }
  .nav-toggle {
    display: inline-flex;
  }
  /* Logo stays pinned left beside the hamburger — no title to align to */
  body.overlay-nav .site-logo {
    transform: none;
  }
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
  }
  .pillars-grid .pillar + .pillar {
    border-left: 0;
  }
  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 820px) {
  /* Stack the hero: logo on top, text below */
  .hero-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
  }
  .hero-logo {
    width: clamp(220px, 56vw, 320px);
  }
}

@media (max-width: 540px) {
  .pillars-grid {
    grid-template-columns: 1fr;
  }
  .service-grid {
    grid-template-columns: 1fr;
  }
  .hero-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* Mobile: the text block is tall and centered, so back the whole frame with a
   uniform dark scrim (slightly heavier toward the top where the text sits). */
@media (max-width: 640px) {
  .site-logo img {
    height: 52px;
  }
  .hero {
    min-height: 100vh;
    padding: clamp(110px, 16vh, 140px) 0 clamp(40px, 6vh, 60px);
    background: linear-gradient(
        to bottom,
        rgba(31, 42, 51, 0.78) 0%,
        rgba(31, 42, 51, 0.6) 45%,
        rgba(31, 42, 51, 0.62) 100%
      ),
      url("../images/cac-golden-hour-hero-graded.jpg") center 20% / cover no-repeat;
  }
  /* Center the hero block horizontally over the church on mobile, and push it
     down toward the grass so it clears the building. */
  .hero-content {
    align-items: center;
    text-align: center;
    transform: translateY(clamp(120px, 22vh, 210px));
  }
  /* Trim side padding so the enlarged title has room to stay on two lines
     (keeps "Assembly Church" on one line down to ~310px-wide phones) */
  .hero > .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  .hero-card {
    text-align: center;
  }
  .hero-eyebrow {
    font-size: 1.05rem;
  }
  /* Larger title; nowrap guarantees it never spills past the two
     <br />-separated lines ("Christian" / "Assembly Church") */
  .hero-card-title {
    font-size: clamp(2.2rem, 11.5vw, 3.4rem);
    white-space: nowrap;
  }
  /* Mobile-only scroll cue to the Welcome section */
  .hero-welcome-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 36px;
  }
  .hero-welcome-btn .fa-arrow-down {
    margin-left: 10px;
    font-size: 0.82em;
  }
  .hero-eyebrow::after {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-flourish {
    justify-content: center;
  }
  .hero-actions {
    justify-content: center;
  }
  /* Center the "Learn More About Us" button when the welcome block stacks */
  .welcome-text .btn {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =======================================================================
   General Youth Meeting (ym2026) — banner variant + rich prose content
   ======================================================================= */

/* Banner: full-height golden-hour church photo, like the other interior
   heroes. Reuses .banner-title + .banner-flourish from the About banner. */
.page-banner.is-ym {
  min-height: 100vh;
  /* Lighter scrim than the other interior heroes — the white title stays
     legible thanks to its text-shadow, and the golden-hour photo reads
     brighter and warmer. */
  background: linear-gradient(
      to bottom,
      rgba(31, 42, 51, 0.28),
      rgba(31, 42, 51, 0.46)
    ),
    url("../images/church-golden-hour-centered.jpg") center 30% / cover no-repeat;
}

.page-banner.is-ym .container {
  /* Title stays centered in the page width; the church-centered photo puts the
     building directly behind it. Only a downward shift so the church + steeple
     stay visible above and the text rests over the darker lawn. */
  transform: translateY(clamp(85px, 12vh, 135px));
  /* Sit above the fade-into-content overlay (added on the schedule page) */
  position: relative;
  z-index: 2;
}

/* Headings inside the single-column prose article (used by the invitation
   letter). The About page has no prose headings, so these are additive. */
.page-prose .prose-heading {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 26px;
}

/* Quick-facts strip — scannable summary of the letter's key details */
.ym-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 0 0 44px;
}

.ym-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 16px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Lift + deepen the shadow on hover for a touch of interactivity */
.ym-fact:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(31, 42, 51, 0.1);
  border-color: rgba(191, 154, 78, 0.4);
}

/* Uniform icon slot: every card's icon/emblem occupies the same 42px height,
   so the labels and the black values line up horizontally across all cards. */
.ym-fact i {
  font-size: 1.6rem;
  color: var(--gold);
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

/* Church-logo emblem used in place of an icon (e.g. Opening Service card).
   Same 42px slot height as the glyph icons so its label/value stay aligned. */
.ym-fact .ym-fact-logo {
  display: block;
  width: auto;
  height: 42px;
  margin: 0 auto 8px;
}

.ym-fact-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.ym-fact-value {
  font-family: var(--sans);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
}

/* Contact panel — the four contacts from the letter, as a gold-edged card */
.contact-panel {
  margin: 8px 0 40px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: clamp(24px, 3.5vw, 34px);
  box-shadow: var(--shadow-sm);
}

.contact-panel h3 {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin: 0 0 24px;
  text-align: center;
}

.contact-grid {
  display: grid;
  /* Content-width columns centered as a group, so the block is centered in the
     card while each contact's name/phone stays left-aligned. */
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 30px clamp(48px, 7vw, 96px);
}

@media (max-width: 600px) {
  .contact-grid { grid-template-columns: auto; }
  /* Single-column stack: keep each couple together
     (Gaylen → Karen Holden, then Lyle → Suzanne Gillespie). */
  .contact-grid .contact-item:nth-child(1) { order: 1; } /* Brother Gaylen Holden */
  .contact-grid .contact-item:nth-child(3) { order: 2; } /* Sister Karen Holden */
  .contact-grid .contact-item:nth-child(2) { order: 3; } /* Brother Lyle Gillespie */
  .contact-grid .contact-item:nth-child(4) { order: 4; } /* Sister Suzanne Gillespie */
}

.contact-name {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 1.08rem;
}

.contact-phone {
  display: inline-block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 1rem;
  text-decoration: none;
}

.contact-phone:hover { color: var(--gold-dark); }

.contact-phone i {
  color: var(--gold);
  margin-right: 9px;
}

.contact-type {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin-left: 4px;
}

/* Signature block at the close of the letter */
.page-prose .prose-signature {
  text-align: left;
  margin-top: 4px;
}

.prose-signature .sig-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 10px;
}

/* =======================================================================
   Youth Meeting Schedule (yms) — day tabs + agenda + info tabs
   Reuses .page-banner.is-ym for the hero. The tabbed schedule and info
   sections below are self-contained components in the redesign language
   (cream/white cards, gold accents, the prose-eyebrow rule).
   ======================================================================= */

/* ---- Daily schedule section ---- */
.yms-schedule {
  background: #f5f2eb;
  /* Reduced top padding so the schedule (the page's primary content) begins
     soon after the hero. */
  padding: clamp(36px, 4.5vh, 60px) 0 clamp(48px, 6vh, 80px);
}

/* This is the page's most important section, so give its label more presence:
   a slightly larger heading, a wider/thicker gold rule, and more air before
   the day tabs. */
.yms-schedule .prose-eyebrow {
  font-size: 0.95rem;
  margin-bottom: 42px;
}
.yms-schedule .prose-eyebrow::after {
  width: 92px;
  height: 3px;
}

/* Center the section eyebrow + its gold rule over the tabbed content */
.yms-schedule .prose-eyebrow,
.yms-info .prose-eyebrow {
  text-align: center;
}
.yms-schedule .prose-eyebrow::after,
.yms-info .prose-eyebrow::after {
  margin-left: auto;
  margin-right: auto;
}

/* Day tab nav — a centered row of pill buttons (weekday over date) */
.yms-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 36px;
}

.yms-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 132px;
  padding: 14px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--sans);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.yms-tab:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.yms-tab-day {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.yms-tab-date {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.yms-tab.active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(191, 154, 78, 0.3);
}

.yms-tab.active .yms-tab-day,
.yms-tab.active .yms-tab-date {
  color: var(--white);
}

/* Agenda — a single white card; each row is activity + time */
.yms-pane {
  display: none;
}

.yms-pane.active {
  display: block;
  animation: yms-fade 0.35s ease;
}

@keyframes yms-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The agenda is now a stack of individual event cards (not one list card),
   so the <ul> is just a transparent, gapped flex column. */
.yms-agenda {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 870px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Each event is its own card: gold left accent, icon pinned left, with the
   event name stacked above its time, centered in site colors. */
.yms-agenda li {
  position: relative;
  text-align: center;
  padding: 20px 56px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.yms-agenda li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.yms-act {
  display: block;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--ink);
}

.yms-time {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--gold-dark);
}

/* Muted-gold icon, vertically centered at the card's left edge */
.yms-ico {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4em;
  text-align: center;
  color: var(--gold);
  font-size: 1.2rem;
  opacity: 0.9;
}

/* ---- "Good to know" info section ---- */
.yms-info {
  background: var(--white);
  padding: clamp(56px, 7vh, 92px) 0 clamp(64px, 8vh, 100px);
}

.yms-info-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 34px;
}

.yms-info-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform 0.2s ease;
}

.yms-info-tab i {
  color: var(--gold);
  font-size: 0.95em;
  transition: color 0.2s ease;
}

.yms-info-tab:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.yms-info-tab.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

.yms-info-tab.active i {
  color: var(--white);
}

.yms-info-pane {
  display: none;
}

.yms-info-pane.active {
  display: block;
  animation: yms-fade 0.35s ease;
}

/* Info card — gold-edged like the contact panel on the invitation page */
.yms-info-card {
  /* Match the schedule card width for a consistent, structured column */
  max-width: 870px;
  margin: 0 auto;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 6px solid var(--gold);
  border-radius: 14px;
  padding: clamp(30px, 4vw, 48px);
  box-shadow: var(--shadow-md);
}

.yms-info-card h3 {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin: 0 0 22px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(191, 154, 78, 0.28);
}

.yms-info-card p {
  font-size: 1.08rem;
  line-height: 1.8;
  color: #2f3540;
  margin: 0 0 18px;
}

.yms-info-card p:last-child {
  margin-bottom: 0;
}

.yms-info-card p.yms-justify {
  text-align: justify;
  hyphens: auto;
}

.yms-info-card .yms-contact {
  font-weight: 700;
  color: var(--ink);
}

.yms-info-card .yms-email {
  color: var(--gold-dark);
  font-weight: 700;
}

.yms-info-card .btn {
  margin-top: 8px;
}

/* Gold-checkmark list inside an info card (e.g. Housing details) */
.yms-checklist {
  list-style: none;
  margin: 18px 0 4px;
  padding: 0;
  text-align: left;
}

.yms-checklist li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 15px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #2f3540;
}

.yms-checklist li:last-child {
  margin-bottom: 0;
}

.yms-check {
  flex: none;
  color: var(--gold);
  font-size: 0.95em;
}

/* Center an info-card lead line + CTA button (Band sign-up, registration) */
.yms-card-cta {
  text-align: center;
  margin-top: 22px;
}

.yms-card-cta .btn .fa-arrow-right {
  margin-left: 9px;
  font-size: 0.82em;
}

@media (max-width: 540px) {
  .yms-tab {
    min-width: 0;
    flex: 1 1 calc(50% - 12px);
  }
  .yms-info-tab {
    flex: 1 1 calc(50% - 12px);
    justify-content: center;
  }
}

/* =======================================================================
   ym2026 — page enhancements (hero spacing, divider, CTA, letter sections,
   contact tint, footer fade, watermark, scroll-reveal). All scoped to the
   ym page so the shared interior-page styles are untouched.
   ======================================================================= */

/* --- Hero: more air between the date and title + a stronger title halo --- */
.page-banner.is-ym .eyebrow {
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  /* Tight to the title so the date + name read as one event unit */
  margin-bottom: 10px;
  /* Brighter gold + a strong dark halo so the date separates from the warm
     sky behind the steeple (gold-on-orange is otherwise low-contrast). */
  color: #efcb79;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.55);
}

.page-banner.is-ym .banner-title {
  /* Smaller than the shared banner title so the steeple + church get more room */
  font-size: clamp(2.75rem, 7.6vw, 6.1rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* Pull the gold divider/cross up closer to the title (the shared flourish
   sits further down). */
.page-banner.is-ym .banner-flourish {
  margin-top: clamp(22px, 3.2vh, 42px);
}

/* --- Registration call-to-action (between the cards and the letter) ----- */
.ym-cta {
  margin: 48px 0 16px;
  /* Center the action buttons in a row; wrap on narrow screens */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.ym-cta .btn-gold i {
  margin-right: 8px;
  font-size: 0.9em;
}

.ym-cta .btn-outline-dark i {
  margin-right: 8px;
  font-size: 0.9em;
}

/* Lift + soft shadow on hover (transform/colour come from the base .btn) */
.ym-cta .btn:hover {
  box-shadow: 0 6px 15px rgba(31, 42, 51, 0.18);
}

/* Desktop: equal-width buttons (all grow from a shared basis, capped) so the
   CTAs match regardless of label length. HTML order (Online Registration,
   Schedule, Band) is kept on both desktop and mobile so the primary action
   leads everywhere. */
@media (min-width: 641px) {
  .ym-cta .btn {
    flex: 1 1 0;
    max-width: 320px;
    text-align: center;
  }
}

/* Mobile/narrow: once the two CTAs can no longer sit side by side, stack them
   as equal-width, full-width buttons with clear spacing between them. */
@media (max-width: 640px) {
  .ym-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .ym-cta .btn {
    width: 100%;
    text-align: center;
  }
}

.ym-cta-note {
  margin: 16px 0 0;
  font-size: 0.98rem;
  color: var(--muted);
}

/* --- Decorative divider (gold rules + Latin cross), like the hero flourish */
.prose-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 26px);
  margin: clamp(40px, 6vh, 64px) 0;
}

.prose-divider .rule {
  display: block;
  width: clamp(70px, 18vw, 170px);
  height: 3px;
  background: rgba(191, 154, 78, 0.55);
}

.prose-divider .rule:first-of-type {
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.prose-divider .rule:last-of-type {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.prose-divider .cross {
  position: relative;
  width: 15px;
  height: 28px;
  flex: none;
}

.prose-divider .cross::before,
.prose-divider .cross::after {
  content: "";
  position: absolute;
  background: var(--gold);
}

.prose-divider .cross::before {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
}

.prose-divider .cross::after {
  top: 28%;
  left: 0;
  width: 100%;
  height: 4px;
}

/* --- Letter section headings (break up the wall of text) ---------------- */
.page-prose .prose-subhead {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--ink);
  margin: 60px 0 16px;
}

.page-prose .prose-subhead::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: rgba(191, 154, 78, 0.5);
  margin-top: 12px;
}

/* --- Body copy: a touch more line-height on this page ------------------- */
body.ym .page-prose p {
  line-height: 1.9;
}

/* --- Contact panel: faint gold tint + slightly larger names ------------- */
body.ym .contact-panel {
  background: rgba(191, 154, 78, 0.05);
  /* More breathing room — taller + a touch wider */
  padding: clamp(34px, 4.5vw, 44px) clamp(32px, 5vw, 48px);
}

/* Names are the focal point of the card */
body.ym .contact-name {
  font-size: 1.2rem;
}

/* Darker phone numbers for easier reading against the tinted card */
body.ym .contact-phone {
  color: #2f3a43;
}

body.ym .page-prose {
  position: relative;
  overflow: hidden;
  /* Clean, premium ending: no fade band — just generous whitespace before the
     dark footer (whose faint top hairline acts as a subtle divider). */
  padding-bottom: clamp(80px, 9vh, 110px);
}

body.ym .page-prose .container {
  position: relative;
  z-index: 1;
  /* ~850–900px reads best for justified body copy (shorter line length). */
  max-width: 900px;
}

/* --- Soft fade from the cream content into the dark footer -------------- */
/* --- Scroll-reveal (progressive enhancement) ----------------------------
   The initial hidden state is applied ONLY after js adds `.ym-anim` to the
   body, so with JS disabled (or reduced-motion) everything stays visible. */
body.ym.ym-anim .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

body.ym.ym-anim .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.ym.ym-anim .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =======================================================================
   Youth Meeting SCHEDULE page (body.yms) — enhancements scoped to this page
   only, so the ym2026 invitation page's tuned hero/sections are untouched.
   ======================================================================= */

/* --- Hero: mirrors the body.ymrf hero treatment. body.yms is added to the
   body.ymrf hero selectors below (search "body.ymrf .page-banner.is-ym"), so the
   eyebrow / title / placement / flourish match the ymrf hero exactly. Only the
   fade-into-content overlay is defined here (schedule-page specific). ---- */

/* A taller, gentler feather so the hero resolves into the cream schedule
   section (#f5f2eb) almost imperceptibly — the lawn stays clear, and the
   transition's onset is no longer noticeable. */
body.yms .page-banner.is-ym::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 205px;
  background: linear-gradient(
    to bottom,
    rgba(245, 242, 235, 0) 0%,
    rgba(245, 242, 235, 0) 55%,
    rgba(245, 242, 235, 0.08) 74%,
    rgba(245, 242, 235, 0.34) 89%,
    rgba(245, 242, 235, 0.72) 97%,
    #f5f2eb 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* --- Decorative divider between the schedule and "Good to Know" -------- */
.yms-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 30px);
  margin: 0 auto clamp(40px, 5.5vh, 58px);
}

.yms-divider .rule {
  display: block;
  width: clamp(80px, 15vw, 184px);
  height: 4px;
  background: rgba(191, 154, 78, 0.85);
}
.yms-divider .rule:first-of-type {
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.yms-divider .rule:last-of-type {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.yms-divider .cross {
  position: relative;
  width: 17px;
  height: 32px;
  flex: none;
}
.yms-divider .cross::before,
.yms-divider .cross::after {
  content: "";
  position: absolute;
  background: var(--gold);
}
.yms-divider .cross::before {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
}
.yms-divider .cross::after {
  top: 28%;
  left: 0;
  width: 100%;
  height: 4px;
}

/* (Footer fade intentionally omitted — this page is content-driven and the
   dark footer's own top edge provides enough separation.) */

/* =======================================================================
   contactus — interior contact page. Reuses the shared interior banner,
   page-prose, and ym-facts card grid; adds only contact-specific tweaks.
   ======================================================================= */

/* Hero: reuse the Youth Meeting Schedule hero treatment — the church-centered
   golden-hour photo (via .is-ym) with the title block dropped low into the lawn
   and a soft feather down into the cream content section. */

/* ── Hero photo: overlay removed ───────────────────────────────────────────
   These pages drop the dark scrim entirely and show the church-centered
   golden-hour photo on its own ::before layer, lightly graded to calm the
   warm/red cast. The white title/subtitle stay legible via their text-shadows.

   The ORIGINAL dark-overlay hero is preserved (commented out) in the
   "ORIGINAL OVERLAY — revert" block directly below, AND it still lives intact
   in the shared `.page-banner.is-ym` rule (used by ym2026/yms). To go back to
   the dark overlay for a page, remove that page's class from the two rules
   below and uncomment it in the revert block.

   ym2026/yms/ymrf get the photo treatment ONLY (overlay removed + grade); their
   own tuned title/layout (eyebrow date, "Schedule" subline, positioning) is left
   intact — they are deliberately NOT added to the layout rules further down.
   `body.ym` covers both ym2026 and yms (yms also carries the `ym` class). */
body.contact .page-banner.is-ym,
body.books .page-banner.is-ym,
body.textalerts .page-banner.is-ym,
body.textfaq .page-banner.is-ym,
body.streaming .page-banner.is-ym,
body.streamingdetails .page-banner.is-ym,
body.ym .page-banner.is-ym,
body.ymrf .page-banner.is-ym,
body.ymbf .page-banner.is-ym,
body.prayer .page-banner.is-ym {
  background: none;
}

body.contact .page-banner.is-ym::before,
body.books .page-banner.is-ym::before,
body.textalerts .page-banner.is-ym::before,
body.textfaq .page-banner.is-ym::before,
body.streaming .page-banner.is-ym::before,
body.streamingdetails .page-banner.is-ym::before,
body.ym .page-banner.is-ym::before,
body.ymrf .page-banner.is-ym::before,
body.ymbf .page-banner.is-ym::before,
body.prayer .page-banner.is-ym::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/church-golden-hour-centered.jpg") center 30% / cover no-repeat;
  /* Soften the strong orange/red of the sky toward a calmer gold */
  filter: saturate(0.78) brightness(1.03);
}

/* ── ORIGINAL OVERLAY — revert ─────────────────────────────────────────────
   The dark-scrim hero these pages used before the overlay was removed. To
   restore it for a page: remove that page from the two "overlay removed" rules
   above, then uncomment its selector(s) below.

body.contact .page-banner.is-ym,
body.books .page-banner.is-ym,
body.textalerts .page-banner.is-ym,
body.textfaq .page-banner.is-ym,
body.streaming .page-banner.is-ym,
body.streamingdetails .page-banner.is-ym,
body.ym .page-banner.is-ym,
body.ymrf .page-banner.is-ym {
  background: linear-gradient(
      to bottom,
      rgba(31, 42, 51, 0.28),
      rgba(31, 42, 51, 0.46)
    ),
    url("../images/church-golden-hour-centered.jpg") center 30% / cover no-repeat;
}
body.contact .page-banner.is-ym::before,
body.books .page-banner.is-ym::before,
body.textalerts .page-banner.is-ym::before,
body.textfaq .page-banner.is-ym::before,
body.streaming .page-banner.is-ym::before,
body.streamingdetails .page-banner.is-ym::before,
body.ym .page-banner.is-ym::before,
body.ymrf .page-banner.is-ym::before {
  display: none;
}
   ──────────────────────────────────────────────────────────────────────── */

body.contact .page-banner.is-ym .container,
body.books .page-banner.is-ym .container,
body.textalerts .page-banner.is-ym .container,
body.textfaq .page-banner.is-ym .container,
body.streaming .page-banner.is-ym .container,
body.streamingdetails .page-banner.is-ym .container,
body.prayer .page-banner.is-ym .container {
  transform: translateY(clamp(120px, 15vh, 180px));
}

/* Main title — keep the serif white, ~10% larger than the shared is-ym title,
   with a stronger halo so it stays readable against the golden-hour sky.
   Mobile floor ~3.1rem. */
body.contact .page-banner.is-ym .banner-title,
body.books .page-banner.is-ym .banner-title,
body.textalerts .page-banner.is-ym .banner-title,
body.textfaq .page-banner.is-ym .banner-title,
body.streaming .page-banner.is-ym .banner-title,
body.streamingdetails .page-banner.is-ym .banner-title,
body.prayer .page-banner.is-ym .banner-title {
  font-size: clamp(3.1rem, 8.2vw, 6.7rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 8px 34px rgba(0, 0, 0, 0.32);
}

/* Welcoming subtitle directly beneath the title — clean sans, light weight,
   white at 90% opacity, slight tracking. ~25px desktop / ~1.15rem mobile. */
body.contact .banner-subtitle,
body.books .banner-subtitle,
body.textalerts .banner-subtitle,
body.textfaq .banner-subtitle,
body.streaming .banner-subtitle,
body.streamingdetails .banner-subtitle,
body.prayer .banner-subtitle {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  letter-spacing: 0.75px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* Subtitle → divider spacing (20–24px), plus a soft golden-hour glow on the
   flourish. drop-shadow (not box-shadow) so the glow follows the clipped
   tapered rules + cross rather than their bounding boxes. */
body.contact .page-banner.is-ym .banner-flourish,
body.books .page-banner.is-ym .banner-flourish,
body.textalerts .page-banner.is-ym .banner-flourish,
body.textfaq .page-banner.is-ym .banner-flourish,
body.streaming .page-banner.is-ym .banner-flourish,
body.streamingdetails .page-banner.is-ym .banner-flourish,
body.prayer .page-banner.is-ym .banner-flourish {
  margin-top: 22px;
  filter: drop-shadow(0 0 7px rgba(191, 154, 78, 0.5));
}

/* Divider: ~15% wider and slightly softened for a gentler appearance */
body.contact .page-banner.is-ym .banner-flourish .rule,
body.books .page-banner.is-ym .banner-flourish .rule,
body.textalerts .page-banner.is-ym .banner-flourish .rule,
body.textfaq .page-banner.is-ym .banner-flourish .rule,
body.streaming .page-banner.is-ym .banner-flourish .rule,
body.streamingdetails .page-banner.is-ym .banner-flourish .rule,
body.prayer .page-banner.is-ym .banner-flourish .rule {
  width: clamp(92px, 17vw, 242px);
  background: rgba(191, 154, 78, 0.82);
}

body.contact .page-banner.is-ym .banner-flourish .cross::before,
body.contact .page-banner.is-ym .banner-flourish .cross::after,
body.books .page-banner.is-ym .banner-flourish .cross::before,
body.books .page-banner.is-ym .banner-flourish .cross::after,
body.textalerts .page-banner.is-ym .banner-flourish .cross::before,
body.textalerts .page-banner.is-ym .banner-flourish .cross::after,
body.textfaq .page-banner.is-ym .banner-flourish .cross::before,
body.textfaq .page-banner.is-ym .banner-flourish .cross::after,
body.streaming .page-banner.is-ym .banner-flourish .cross::before,
body.streaming .page-banner.is-ym .banner-flourish .cross::after,
body.streamingdetails .page-banner.is-ym .banner-flourish .cross::before,
body.streamingdetails .page-banner.is-ym .banner-flourish .cross::after,
body.prayer .page-banner.is-ym .banner-flourish .cross::before,
body.prayer .page-banner.is-ym .banner-flourish .cross::after {
  background: rgba(191, 154, 78, 0.82);
}

/* Gentle feather so the hero resolves into the cream content (#f5f2eb) almost
   imperceptibly — matches the yms page. */
body.contact .page-banner.is-ym::after,
body.books .page-banner.is-ym::after,
body.textalerts .page-banner.is-ym::after,
body.textfaq .page-banner.is-ym::after,
body.streaming .page-banner.is-ym::after,
body.streamingdetails .page-banner.is-ym::after,
body.prayer .page-banner.is-ym::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 205px;
  background: linear-gradient(
    to bottom,
    rgba(245, 242, 235, 0) 0%,
    rgba(245, 242, 235, 0) 55%,
    rgba(245, 242, 235, 0.08) 74%,
    rgba(245, 242, 235, 0.34) 89%,
    rgba(245, 242, 235, 0.72) 97%,
    #f5f2eb 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Slightly smaller than the shared ym-fact-value so the email address sits on
   one line within its card, and all three values stay visually consistent. */
body.contact .ym-fact-value {
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Directions / visit card — centered, gold-edged, in the family of cards */
.contact-directions {
  margin: 4px auto 0;
  max-width: 560px;
  text-align: center;
  background: rgba(191, 154, 78, 0.05);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 12px;
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow-sm);
}

.contact-directions h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  color: var(--ink);
  margin: 0 0 12px;
}

/* Override the justified body copy from .page-prose p so the single line
   of card text is centered with the rest of the card. */
.contact-directions p {
  margin: 0 0 22px;
  color: var(--muted);
  text-align: center;
}

.contact-directions .btn-gold i {
  margin-right: 9px;
}

/* Lift + soft shadow on hover (transform/colour come from the base .btn) */
.contact-directions .btn-gold:hover {
  box-shadow: 0 6px 15px rgba(31, 42, 51, 0.18);
}

/* ====================================================================== */
/* Text & Phone Alerts page                                               */
/* Reuses the interior banner, page-prose, ym-facts strip, and the gold-  */
/* edged card (.contact-directions). Adds only the two-button action row   */
/* and a softer fact value (descriptive sentence rather than a datum).     */
/* ====================================================================== */

/* A touch wider than the default 900px prose column so the paragraphs and the
   full-width sign-up card breathe more horizontally and wrap less. */
body.textalerts .page-prose .container {
  max-width: 1040px;
}

/* Extra breathing room before the dark footer so the last section doesn't
   crowd it. */
body.textalerts .page-prose {
  padding-bottom: clamp(120px, 15vh, 190px);
}

/* Inline text link inside the prose (e.g. the "Sign Up Here!" reference) —
   the global `a` resets colour/underline, so make it clearly a link: gold,
   underlined, darkening on hover. */
.page-prose .prose-link {
  color: var(--gold-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.page-prose .prose-link:hover {
  color: var(--gold);
}

/* The first subhead follows the page eyebrow directly — pull it up so the
   eyebrow reads as its kicker instead of leaving the default 60px gap. */
.page-prose .prose-eyebrow + .prose-subhead {
  margin-top: 18px;
}

/* Extra breathing room between the Sign-Up card and the section that follows,
   so the CTA and the informational content read as distinct blocks. */
.alerts-cta + .prose-subhead {
  margin-top: clamp(3.5rem, 6vw, 5rem);
}

/* The three "ways we reach you" cards hold a short sentence, not a short
   datum — relax the heavy value styling so it reads as supporting copy.
   Roomier gap + interior padding + larger icons than the default ym-facts
   strip; auto-fit grid keeps the three cards equal height. */
.alerts-facts {
  margin-top: 4px;
  gap: 22px;
}

.alerts-facts .ym-fact {
  padding: 32px 22px;
}

.alerts-facts .ym-fact i {
  font-size: 2.2rem;
  height: 52px;
}

.alerts-facts .ym-fact-value {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}

/* --- Sign-up CTA: the primary action of the page ----------------------- */
/* Widened, with a larger heading and more breathing room than the shared
   .contact-directions card so it clearly reads as the page's main call. */
/* Span the full prose column so the card lines up flush with the body
   paragraphs above and below it. Generous vertical padding so it reads as the
   page's primary action. */
.alerts-cta {
  max-width: none;
  margin: 40px 0 8px;
  padding: clamp(42px, 6vw, 64px) clamp(34px, 5vw, 52px);
}

.alerts-cta h3 {
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  margin-bottom: 16px;
}

.alerts-cta > p {
  margin-bottom: 34px;
}

/* Sign-up + F.A.Q. sit side by side, wrapping to stacked on narrow cards. */
.alerts-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.alerts-cta .btn i {
  margin-right: 9px;
}

/* Sign Up is the primary action — larger and heavier than the F.A.Q. button,
   which stays a quieter outline. */
.alerts-actions .btn-gold {
  font-size: 1rem;
  padding: 18px 40px;
}

.alerts-actions .btn-outline-dark {
  padding: 14px 28px;
}

.alerts-actions .btn-gold:hover {
  box-shadow: 0 6px 15px rgba(31, 42, 51, 0.18);
}

/* Reassurance line beneath the buttons — quiet, gold-keyed, centered.
   Scoped to .alerts-cta so it out-specifies .contact-directions p (which
   would otherwise strip the auto side-margins and the top gap). */
.alerts-cta .alerts-trust {
  margin: 34px auto 0;
  max-width: 440px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

.alerts-trust i {
  color: var(--gold);
  margin-right: 6px;
}

/* Mobile: at phone widths the auto-fit strip falls to two columns, leaving the
   lone Email card at half width. Pin Text + Phone side by side and let Email
   span the full column so it matches the body paragraphs' width. */
@media (max-width: 540px) {
  .alerts-facts {
    grid-template-columns: 1fr 1fr;
  }
  .alerts-facts .ym-fact:last-child {
    grid-column: 1 / -1;
  }
}

/* Very small screens: a single full-width column reads better than two
   cramped ones (Email already spans full width via the rule above). */
@media (max-width: 360px) {
  .alerts-facts {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================== */
/* Text & Phone Alerts — FAQ page                                         */
/* Reuses the interior banner (is-ym), page-prose, and the gold-edged CTA  */
/* card (.contact-directions / .alerts-cta). Adds a native <details>       */
/* accordion styled in the same cream/gold card family — no JavaScript.    */
/* ====================================================================== */

/* --- Hero: the Contact Us treatment, dropped a little lower -------------- */
/* Soften the centre of the golden-hour scrim (~10% lighter) while keeping the
   edges darker for contrast, so more of the church + steeple read through. */
body.textfaq .page-banner.is-ym {
  background: radial-gradient(
      ellipse 120% 95% at center 42%,
      rgba(31, 42, 51, 0.14) 0%,
      rgba(31, 42, 51, 0.2) 48%,
      rgba(31, 42, 51, 0.4) 82%,
      rgba(31, 42, 51, 0.52) 100%
    ),
    url("../images/church-golden-hour-centered.jpg") center 30% / cover no-repeat;
}

/* Drop the whole title group lower than the Contact hero (~18px more than the
   prior tuning) so it rests in the open lawn, clear of the steeple. */
body.textfaq .page-banner.is-ym .container {
  transform: translateY(clamp(186px, 19.5vh, 250px));
  position: relative;
  z-index: 2;
}

/* White serif title with a strong halo. ~6% smaller than the Contact hero so
   more of the church architecture stays visible behind it. */
body.textfaq .page-banner.is-ym .banner-title {
  font-size: clamp(2.9rem, 7.7vw, 6.3rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 8px 34px rgba(0, 0, 0, 0.32);
}

/* Subtitle: a touch smaller than Contact's, with more space above it so the
   title clearly leads. */
body.textfaq .banner-subtitle {
  margin: clamp(26px, 3.4vh, 40px) 0 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: 0.75px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* Flourish: gold glow, same as the Contact hero. */
body.textfaq .page-banner.is-ym .banner-flourish {
  margin-top: 22px;
  filter: drop-shadow(0 0 7px rgba(191, 154, 78, 0.5));
}

body.textfaq .page-banner.is-ym .banner-flourish .rule {
  width: clamp(92px, 17vw, 242px);
  background: rgba(191, 154, 78, 0.82);
}

body.textfaq .page-banner.is-ym .banner-flourish .cross::before,
body.textfaq .page-banner.is-ym .banner-flourish .cross::after {
  background: rgba(191, 154, 78, 0.82);
}

/* Gentle feather so the hero resolves into the cream content (#f5f2eb). */
body.textfaq .page-banner.is-ym::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 205px;
  background: linear-gradient(
    to bottom,
    rgba(245, 242, 235, 0) 0%,
    rgba(245, 242, 235, 0) 55%,
    rgba(245, 242, 235, 0.08) 74%,
    rgba(245, 242, 235, 0.34) 89%,
    rgba(245, 242, 235, 0.72) 97%,
    #f5f2eb 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* --- Content spacing ---------------------------------------------------- */
/* Match the Text Alerts column width so the two sibling pages line up. A touch
   more top padding above the eyebrow, and a roomier base before the footer. */
body.textfaq .page-prose .container {
  max-width: 1040px;
}

body.textfaq .page-prose {
  padding-top: clamp(118px, 11vh, 154px);
  padding-bottom: clamp(150px, 17vh, 220px);
}

/* Pull the intro paragraph up under the eyebrow (the eyebrow reads as its
   kicker), let it read left-aligned, and give it more space below before the
   accordion begins. */
body.textfaq .page-prose .prose-eyebrow {
  margin-bottom: 18px;
}

body.textfaq .page-prose > .container > p:first-of-type {
  text-align: left;
  margin-bottom: 48px;
}

/* --- Accordion ---------------------------------------------------------- */
/* A little more space between cards so each question reads as its own card
   rather than one continuous block. */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 34px;
}

/* Each question is a card in the cream/gold family, with a gold left edge
   that brightens when the item is open. */
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid rgba(191, 154, 78, 0.4);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Hover feedback — lift 2px with a deeper shadow, matching the interactions
   used elsewhere on the site. */
.faq-item:hover {
  box-shadow: 0 8px 20px rgba(31, 42, 51, 0.12);
  transform: translateY(-2px);
}

/* Open state — brighter full gold left border + a light cream tint so the
   active question clearly separates from the cards around it. */
.faq-item[open] {
  background: rgba(191, 154, 78, 0.07);
  border-left-color: var(--gold);
  box-shadow: 0 6px 15px rgba(31, 42, 51, 0.1);
}

.faq-item[open]:hover {
  box-shadow: 0 9px 22px rgba(31, 42, 51, 0.14);
}

/* The clickable question row. Strip the native disclosure marker so only our
   own +/− icon shows. */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  padding: clamp(18px, 2.4vw, 24px) clamp(20px, 3vw, 30px);
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--ink);
  list-style: none;
  transition: color 0.2s ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  color: var(--gold-dark);
}

.faq-item[open] .faq-question {
  color: var(--gold-dark);
}

/* The +/− toggle icon. Plus shows when closed, minus when open — a more
   natural accordion affordance than an X. The wrapper holds both, stacked. */
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  color: var(--gold);
  transition: color 0.2s ease, transform 0.25s ease;
}

.faq-question:hover .faq-icon,
.faq-item[open] .faq-icon {
  color: var(--gold-dark);
}

.faq-icon .faq-icon-plus,
.faq-icon .faq-icon-minus {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

/* Closed: show plus, hide minus (minus pre-rotated so it eases in on open). */
.faq-icon .faq-icon-minus {
  opacity: 0;
  transform: rotate(-90deg);
}

.faq-item[open] .faq-icon .faq-icon-plus {
  opacity: 0;
  transform: rotate(90deg);
}

.faq-item[open] .faq-icon .faq-icon-minus {
  opacity: 1;
  transform: rotate(0deg);
}

/* Answer body — a hairline rule separates it from the question above, with a
   touch more line-height for easy reading. */
.faq-answer {
  padding: 0 clamp(20px, 3vw, 30px) clamp(20px, 2.6vw, 26px);
  border-top: 1px solid var(--line);
  padding-top: clamp(16px, 2vw, 22px);
}

.faq-answer p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--muted);
  text-align: left;
  hyphens: none;
}

/* --- "Still Have Questions?" support prompt ----------------------------- */
/* A quieter, centered block between the accordion and the sign-up card —
   another path to help before asking visitors to register. */
.faq-support {
  margin: clamp(3.5rem, 5.5vw, 4.75rem) 0 20px;
  text-align: center;
}

.faq-support-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink);
  margin: 0 0 10px;
}

.faq-support p {
  margin: 0 auto 22px;
  max-width: 460px;
  color: var(--muted);
  text-align: center;
}

/* A touch larger + wider than the default outline button so it reads as an
   intentional action without competing with the gold sign-up CTA below. */
.faq-support .btn-outline-dark {
  padding: 15px 36px;
  font-size: 0.98rem;
}

.faq-support .btn-outline-dark i {
  margin-right: 9px;
}

/* --- Sign-up CTA card --------------------------------------------------- */
body.textfaq .alerts-cta {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  margin-bottom: 80px;
}

/* Strengthen the trust line — slightly larger + higher contrast than the
   Text Alerts default. */
body.textfaq .alerts-cta .alerts-trust {
  font-size: 1rem;
  color: var(--ink);
}

/* ====================================================================== */
/* Books page — featured book card                                        */
/* A portrait + text card in the same family as the give / contact cards: */
/* white surface, soft hairline border, gold top accent, gentle shadow.   */
/* ====================================================================== */
.book-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin: 8px auto 0;
  max-width: 760px;
  min-height: 360px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-sm);
}

.book-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  /* Leave the right portion of the card to the portrait */
  max-width: 56%;
  min-width: 0;
}

/* Free-standing cut-out portrait of the author. Anchored to the lower-right and
   sized to the card height, bleeding a touch past the right edge. A two-axis
   mask feathers the inner (left) and bottom edges so he emerges from the card
   rather than sitting in a hard rectangle. The right edge runs off-card (clipped
   by overflow:hidden), so it needs no fade. */
.book-figure {
  position: absolute;
  right: -14px;
  bottom: 0;
  height: 94%;
  width: auto;
  pointer-events: none;
  user-select: none;
  /* No inner-edge fade — only a slight feather along the bottom edge */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 5%);
  mask-image: linear-gradient(to top, transparent 0%, #000 5%);
}

/* Small uppercase kicker above the title, matching the prose eyebrow voice */
.book-kicker {
  display: block;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 10px;
}

.book-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 6px;
}

/* Gold rules + Latin cross flourish beneath the title (replaces the byline).
   Left-aligned under the left-aligned desktop title; centered on mobile. */
.book-flourish {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(12px, 1.8vw, 18px);
  margin: 14px 0 20px;
}

.book-flourish .rule {
  display: block;
  width: clamp(46px, 11vw, 92px);
  height: 2px;
  background: rgba(191, 154, 78, 0.55);
}

.book-flourish .rule:first-of-type {
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.book-flourish .rule:last-of-type {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.book-flourish .cross {
  position: relative;
  width: 13px;
  height: 24px;
  flex: none;
}

.book-flourish .cross::before,
.book-flourish .cross::after {
  content: "";
  position: absolute;
  background: var(--gold);
}

.book-flourish .cross::before {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
}

.book-flourish .cross::after {
  top: 28%;
  left: 0;
  width: 100%;
  height: 3px;
}

/* Override the justified .page-prose p so the card copy reads left-aligned.
   Disable inherited auto-hyphenation so long words (e.g. "spiritual") stay
   whole instead of breaking mid-word. */
.page-prose .book-desc {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--muted);
  text-align: left;
  -webkit-hyphens: none;
  hyphens: none;
  margin: 0 0 24px;
}

.book-card .btn-gold i {
  margin-right: 9px;
}

.book-card .btn-gold:hover {
  box-shadow: 0 6px 15px rgba(31, 42, 51, 0.18);
}

/* On narrow screens, keep the portrait beside the text (desktop feel) but pair
   it with the TITLE BLOCK only — both are short, so their heights match — and
   let the longer description + button run full width below. A 2-column grid
   does this; `display:contents` on .book-body lets its children be placed
   directly into the grid. The portrait is bottom-anchored because the cut-out's
   lower edge is a flat crop across his chest, which must sit on the card floor
   (not float mid-card) to read as "rising out of the card." */
@media (max-width: 600px) {
  .book-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "head figure"
      "desc desc"
      "btn  btn";
    align-items: start;
    column-gap: clamp(10px, 3vw, 20px);
    row-gap: 2px;
    min-height: 0;
  }

  .book-body {
    display: contents;
  }

  /* Page intro paragraph: justified (flush both edges), but with a smaller
     phone font so more words fit per line — that leaves justify less slack to
     distribute, keeping the word gaps tight. Hyphenation stays off so long
     words (e.g. "spiritual") aren't split mid-word. */
  body.books .page-prose .container > p {
    text-align: justify;
    -webkit-hyphens: none;
    hyphens: none;
    font-size: 1.02rem;
    line-height: 1.7;
  }

  .book-head {
    grid-area: head;
    align-self: center;
    text-align: center;
  }

  .book-kicker::after {
    margin-left: auto;
    margin-right: auto;
  }

  /* Center the flourish under the centered title on mobile */
  .book-flourish {
    justify-content: center;
    margin: 12px 0 0;
  }

  .page-prose .book-desc {
    grid-area: desc;
    text-align: justify;
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 10px 0 22px;
  }

  .book-card .btn-gold {
    grid-area: btn;
    justify-self: center;
  }

  .book-figure {
    grid-area: figure;
    align-self: end;
    position: static;
    width: clamp(135px, 40vw, 185px);
    height: auto;
    margin-right: -6px;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 7%);
    mask-image: linear-gradient(to top, transparent 0%, #000 7%);
  }
}

/* ====================================================================== */
/* Live Streaming page                                                    */
/* Reuses the Contact Us hero (is-ym + body.streaming), page-prose, the    */
/* gold-edged CTA card (.contact-directions / .alerts-cta), the ym-facts   */
/* strip for service times, and the native <details> FAQ accordion.       */
/* Adds only the service-times grid tuning below.                          */
/* ====================================================================== */

/* Match the Text Alerts / FAQ column width so the sibling Media pages line
   up, with a roomier base before the dark footer. Streaming Details shares the
   same width so its action card mirrors the Streaming page's card exactly. */
body.streaming .page-prose .container,
body.streamingdetails .page-prose .container {
  max-width: 1040px;
}

body.streaming .page-prose,
body.streamingdetails .page-prose {
  padding-bottom: clamp(120px, 15vh, 190px);
}

/* Extra breathing room after the lifted CTA card before the next subhead,
   matching the Text Alerts rhythm. */
body.streaming .alerts-cta + .prose-subhead,
body.streamingdetails .alerts-cta + .prose-subhead {
  margin-top: clamp(3.5rem, 6vw, 5rem);
}

/* Service-times strip: four short data cards. Roomier padding and a larger
   icon than the default ym-facts strip; the time reads as the key datum. */
.streaming-facts {
  margin-top: 4px;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.streaming-facts .ym-fact {
  padding: 28px 20px;
}

.streaming-facts .ym-fact i {
  font-size: 1.9rem;
  height: 46px;
}

.streaming-facts .ym-fact-value {
  color: var(--gold-dark);
  font-weight: 700;
}

/* Phones: four cards fall to a tidy two-column grid rather than a lone card
   stranded at half width. */
@media (max-width: 560px) {
  .streaming-facts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 360px) {
  .streaming-facts {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================== */
/* Streaming Details — refinement pass                                     */
/* Scoped tweaks: lighter hero scrim, roomier section separation, numbered  */
/* access steps, and full-width button stacking on mobile. The action card  */
/* itself inherits the shared .alerts-cta styling to match the Streaming    */
/* page's card.                                                             */
/* ====================================================================== */

/* Hero: lift the scrim ~8% so more of the golden-hour sky reads through.
   The white serif title keeps its halo, so legibility holds. */
body.streamingdetails .page-banner.is-ym {
  background: linear-gradient(
      to bottom,
      rgba(31, 42, 51, 0.2),
      rgba(31, 42, 51, 0.38)
    ),
    url("../images/church-golden-hour-centered.jpg") center 30% / cover no-repeat;
}

/* Body copy: left-aligned with hyphenation off — keeps an even rag and avoids
   the mid-word breaks that justify + auto-hyphenation can introduce. */
body.streamingdetails .page-prose p {
  text-align: left;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Section separation: a little more air above each titled section so the page
   reads as distinct, scannable blocks (the eyebrow stays tight to its first
   subhead, acting as its kicker). */
body.streamingdetails .page-prose .prose-subhead {
  margin-top: clamp(3.75rem, 6vw, 5.25rem);
}
body.streamingdetails .page-prose .prose-eyebrow + .prose-subhead {
  margin-top: 18px;
}

/* Action card, buttons, and trust line intentionally inherit the default
   .alerts-cta / .alerts-actions styling so this card mirrors the "Watch the
   Live Stream" card on the Streaming page exactly (heading size, padding,
   shadow, gold-primary buttons, and trust-line size). */

/* Tablet & mobile: stack the two buttons full-width. The Streaming page's
   button labels are short enough to wrap cleanly, but these labels ("Register
   for a Password") are long, so an explicit full-width stack avoids overflow. */
@media (max-width: 768px) {
  body.streamingdetails .alerts-actions {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  body.streamingdetails .alerts-actions .btn {
    width: 100%;
  }
}

/* Numbered access steps — the original wording, presented as a clear sequence
   with gold numbered badges. */
.stream-steps {
  list-style: none;
  counter-reset: step;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.stream-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  align-items: start;
  font-size: 1.18rem;
  line-height: 1.85;
  color: #2f3540;
  text-align: left;
}

.stream-steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
}

/* Closing contact block: a touch more line spacing for a polished hierarchy.
   Re-center it — the page's left-aligned body-copy rule above also matches this
   paragraph, so restore the centered alignment the support block expects. */
body.streamingdetails .faq-support p {
  line-height: 2;
  text-align: center;
}

/* Phones: a slightly smaller badge keeps the step text from wrapping early. */
@media (max-width: 600px) {
  .stream-steps li {
    grid-template-columns: 38px 1fr;
    gap: 16px;
    font-size: 1.08rem;
  }
  .stream-steps li::before {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
}

/* =======================================================================
   ymrf — General Youth Convention Registration Form.
   Reuses the shared interior hero (.page-banner.is-ym) with the contact-family
   treatment, then adds a centered white form card in the Streaming Details
   family (gold-accented sections, subtle-bordered tables, CAC gold buttons).
   ======================================================================= */

/* ---- Hero (mirror the contact/streaming interior-hero treatment) --------
   body.yms (Youth Meeting Schedule) and body.ym:not(.yms) (ym2026 invitation)
   share this exact treatment. */
body.ymrf .page-banner.is-ym .container,
body.yms .page-banner.is-ym .container,
body.ym:not(.yms) .page-banner.is-ym .container {
  transform: translateY(clamp(120px, 15vh, 180px));
}

/* Gold eyebrow above the title — smaller + wider tracking than the ym2026
   event date, so it reads as a quiet label over the photo. */
body.ymrf .page-banner.is-ym .eyebrow,
body.yms .page-banner.is-ym .eyebrow,
body.ym:not(.yms) .page-banner.is-ym .eyebrow {
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: #efcb79;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.55);
}

body.ymrf .page-banner.is-ym .banner-title,
body.yms .page-banner.is-ym .banner-title,
body.ym:not(.yms) .page-banner.is-ym .banner-title {
  font-size: clamp(3.1rem, 8.2vw, 6.7rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 8px 34px rgba(0, 0, 0, 0.32);
}

body.ymrf .banner-subtitle {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

body.ymrf .page-banner.is-ym .banner-flourish,
body.yms .page-banner.is-ym .banner-flourish,
body.ym:not(.yms) .page-banner.is-ym .banner-flourish {
  /* Subtitle removed — sit the cross/rules close beneath the title. */
  margin-top: 16px;
  filter: drop-shadow(0 0 7px rgba(191, 154, 78, 0.5));
}

body.ymrf .page-banner.is-ym .banner-flourish .rule,
body.yms .page-banner.is-ym .banner-flourish .rule,
body.ym:not(.yms) .page-banner.is-ym .banner-flourish .rule {
  width: clamp(92px, 17vw, 242px);
  background: rgba(191, 154, 78, 0.82);
}

body.ymrf .page-banner.is-ym .banner-flourish .cross::before,
body.ymrf .page-banner.is-ym .banner-flourish .cross::after,
body.yms .page-banner.is-ym .banner-flourish .cross::before,
body.yms .page-banner.is-ym .banner-flourish .cross::after,
body.ym:not(.yms) .page-banner.is-ym .banner-flourish .cross::before,
body.ym:not(.yms) .page-banner.is-ym .banner-flourish .cross::after {
  background: rgba(191, 154, 78, 0.82);
}

/* Soft feather from the hero into the cream content (matches the other
   interior pages). */
body.ymrf .page-banner.is-ym::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 205px;
  background: linear-gradient(
    to bottom,
    rgba(245, 242, 235, 0) 0%,
    rgba(245, 242, 235, 0) 55%,
    rgba(245, 242, 235, 0.08) 74%,
    rgba(245, 242, 235, 0.34) 89%,
    rgba(245, 242, 235, 0.72) 97%,
    #f5f2eb 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ---- Layout: wider column so the 1000px card has breathing room --------- */
.ymrf-prose .container {
  max-width: 1048px;
}

/* Scoped under .ymrf-prose so it outweighs the justified `.page-prose p` rule. */
.ymrf-prose .ymrf-intro {
  text-align: center;
  color: var(--muted);
  font-size: 1.08rem;
  margin: 0 0 36px;
}

.ymrf-intro strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---- Form card ---------------------------------------------------------- */
.ymrf-card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: clamp(28px, 4vw, 52px);
}

.ymrf-section {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0; /* let fieldset children shrink on small screens */
}

.ymrf-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: clamp(34px, 4vw, 46px) 0;
}

/* Section label — gold, uppercase, with a short rule (matches prose-eyebrow). */
.ymrf-section-label {
  display: block;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin: 0 0 6px;
  padding: 0;
}

.ymrf-help {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.98rem;
  text-align: left;
}

/* Desktop-only forced line break inside a helper line (e.g. the workers help
   text). Hidden on mobile so the text reflows naturally to the column width. */
.ymrf-br-desktop {
  display: inline;
}

/* Mobile-only forced line break (e.g. the modal's empty Emergency Contacts
   prompt). Hidden on desktop; the max-width:760px block turns it back on. */
.ymrf-br-mobile {
  display: none;
}

/* Section header row: label/help on the left, the Add button on the right. */
.ymrf-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.ymrf-section-head .ymrf-section-label {
  margin-bottom: 6px;
}

.ymrf-section-head .ymrf-help {
  margin-bottom: 0;
}

.ymrf-add {
  flex: none;
  white-space: nowrap;
  /* Uniform width across all three section "Add" buttons, sized to the longest
     label ("Add Youth Member"); shorter labels (e.g. "Add Volunteer") match. */
  min-width: 215px;
  text-align: center;
  font-size: 0.82rem;
  padding: 11px 20px;
}

.ymrf-add i {
  margin-right: 7px;
}

/* ---- Mobile quick-add FAB ----------------------------------------------- */
/* Hidden on desktop; the max-width:760px block turns it into a fixed FAB. */
.ymrf-fab {
  display: none;
}

/* Dim overlay behind the open quick-add flyout (mobile only) — same wash and
   fade as the modals. Sits just below the FAB (.ymrf-fab is z-index 1000) so
   the toggle and menu items stay bright and tappable above the dim. */
.ymrf-fab-overlay {
  display: none;
}

.ymrf-fab-toggle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(31, 42, 51, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.ymrf-fab-toggle:hover {
  background: var(--gold-dark);
}

.ymrf-fab-toggle i {
  transition: transform 0.2s ease;
}

.ymrf-fab.is-open .ymrf-fab-toggle i {
  transform: rotate(45deg);
}

/* Flyout menu — sits above the toggle, right-aligned. */
.ymrf-fab-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}

.ymrf-fab-menu[hidden] {
  display: none;
}

.ymrf-fab-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(31, 42, 51, 0.22);
  white-space: nowrap;
}

.ymrf-fab-item i {
  color: var(--white);
  width: 18px;
  text-align: center;
}

.ymrf-fab-item:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
}

/* ---- Clear Form confirmation modal -------------------------------------- */
.ymrf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(31, 42, 51, 0.55);
  animation: ymrfModalFade 0.18s ease;
}

.ymrf-modal-overlay[hidden] {
  display: none;
}

.ymrf-modal {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: clamp(28px, 4vw, 40px);
  text-align: center;
  animation: ymrfModalPop 0.2s ease;
}

.ymrf-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
  font-size: 1.5rem;
}

.ymrf-modal-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  color: var(--ink);
  margin: 0 0 10px;
}

.ymrf-modal-msg {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 26px;
}

.ymrf-modal-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ymrf-modal-actions .btn {
  min-width: 130px;
}

/* Destructive confirm button — red fill to signal the form will be wiped. */
.ymrf-modal-confirm {
  background: #c0392b;
  color: var(--white);
  border-color: #c0392b;
}

.ymrf-modal-confirm:hover {
  background: #a5281c;
  border-color: #a5281c;
  transform: translateY(-2px);
}

.ymrf-modal-confirm i {
  margin-right: 8px;
}

@keyframes ymrfModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ymrfModalPop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ymrf-modal-overlay,
  .ymrf-modal {
    animation: none;
  }
}

/* ---- Food Allergies request modal (yms.html) --------------------------- */
/* The .ymrf-modal-overlay above centers a short confirmation card; the food
   allergy form is tall, so this overlay aligns to the top and scrolls. The form
   itself reuses #ymcfForm / #ymcfSuccess so it inherits all the Quick Contact
   styling (email validation, char counter, success fade) with no extra rules. */
.yms-fa-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(16px, 5vh, 48px);
  background: rgba(31, 42, 51, 0.55);
  animation: ymrfModalFade 0.18s ease;
}

.yms-fa-overlay[hidden] {
  display: none;
}

.yms-fa-panel {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: auto 0;            /* vertically center when the form is short enough */
  animation: ymrfModalPop 0.2s ease;
}

/* Sit the reused cards flush in the modal (their page-level top margins are for
   the standalone ym2026 layout). */
.yms-fa-panel #ymcfForm.ymrf-card,
.yms-fa-panel #ymcfSuccess {
  margin-top: 0;
}

/* Round close button, pinned to the top-right of the panel. */
.yms-fa-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.yms-fa-close:hover {
  color: var(--ink);
  border-color: var(--gold);
}

.yms-fa-close:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(191, 154, 78, 0.16);
}

/* Lock page scroll behind the modal. */
body.yms-fa-lock {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .yms-fa-overlay,
  .yms-fa-panel {
    animation: none;
  }
}

/* ---- Add / Edit Youth Member modal -------------------------------------- */
/* Tall, top-aligned scrolling modal (mirrors the Food Allergy modal). The card
   reuses the form's white/gold language; gender + age are the same custom
   dropdowns used elsewhere on the page. */
.ymrf-youth-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(16px, 5vh, 48px);
  background: rgba(31, 42, 51, 0.55);
  animation: ymrfModalFade 0.18s ease;
}

.ymrf-youth-overlay[hidden] {
  display: none;
}

.ymrf-youth-panel {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: auto 0; /* vertically center when short enough */
  animation: ymrfModalPop 0.2s ease;
}

.ymrf-youth-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: clamp(26px, 4vw, 40px);
}

/* Round close button, pinned to the top-right of the panel. */
.ymrf-youth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ymrf-youth-close:hover {
  color: var(--ink);
  border-color: var(--gold);
}

.ymrf-youth-close:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(191, 154, 78, 0.16);
}

.ymrf-youth-head {
  text-align: center;
  margin-bottom: 18px;
  padding: 0 18px;
}

.ymrf-youth-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 1.95rem);
  color: var(--ink);
  margin: 0 0 8px;
}

.ymrf-youth-subtitle {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.ymrf-youth-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* A labelled block inside the modal (Youth Member Information / Emergency
   Contacts). */
.ymrf-modal-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ymrf-modal-section-label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* The modal's Emergency Contacts help line sits right under its label. */
.ymrf-modal-section .ymrf-help {
  margin: -6px 0 0;
}

/* Non-<label> field label (used for the custom gender/age dropdowns). Matches
   the look of a real .ymrf-field label. */
.ymrf-field-label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 8px;
}

.ymrf-youth-foot {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.ymrf-youth-foot .btn {
  min-width: 140px;
}

.ymrf-youth-foot .btn i {
  margin-right: 8px;
}

/* Lock page scroll behind the modal. */
body.ymrf-youth-lock {
  overflow: hidden;
}

/* ---- Emergency-contact blocks ------------------------------------------- */
.ymrf-ec {
  background: rgba(191, 154, 78, 0.05);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px 18px;
}

.ymrf-ec + .ymrf-ec {
  margin-top: 14px;
}

.ymrf-ec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ymrf-ec-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}

/* Slimmer Remove button for the contact header. */
.ymrf-ec-remove {
  font-size: 0.78rem;
  padding: 6px 11px;
}

.ymrf-ec-add {
  align-self: flex-start;
  font-size: 0.85rem;
  padding: 11px 20px;
}

.ymrf-ec-add i {
  margin-right: 7px;
}

/* Dashed, gold-tinted "add something here" empty state. Shared by the modal's
   Emergency Contacts list and the Youth Members / Youth Leaders / Volunteers
   sections on the form (each shown until its first entry is added). */
.ymrf-ec-empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(191, 154, 78, 0.04);
}

/* On the form these prompts sit inside .page-prose, whose `.page-prose p` rule
   (larger, justified, ink) would otherwise override the .ymrf-empty look. Two
   classes give us the specificity to keep them matching the modal's EC prompt:
   centered, small, and muted. */
.ymrf-empty.ymrf-ec-empty {
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---- Remove modal supporting line --------------------------------------- */
.ymrf-modal-subtext {
  margin: -16px 0 26px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #a5281c;
}

/* ---- Toast notification -------------------------------------------------- */
.ymrf-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 2200;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: min(92vw, 440px);
  padding: 14px 22px;
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(31, 42, 51, 0.32);
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ymrf-toast[hidden] {
  display: none;
}

.ymrf-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ymrf-toast-icon {
  color: var(--gold);
  font-size: 1.15rem;
}

.ymrf-toast-msg {
  font-family: var(--sans);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Youth table name cell — render as plain, readable text. */
.ymrf-youth-name {
  font-weight: 600;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .ymrf-youth-overlay,
  .ymrf-youth-panel {
    animation: none;
  }
  .ymrf-toast {
    transition: opacity 0.01s linear;
  }
}

@media (max-width: 600px) {
  .ymrf-youth-card {
    padding: 26px 18px 22px;
  }

  .ymrf-youth-head {
    padding: 0 8px;
    margin-bottom: 20px;
  }

  /* Footer buttons stack and fill the width on small screens. */
  .ymrf-youth-foot {
    flex-direction: column-reverse;
  }

  .ymrf-youth-foot .btn {
    width: 100%;
  }

  .ymrf-toast {
    bottom: 18px;
  }
}

/* ---- Home announcement overlay ----------------------------------------- */
.announce-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(31, 42, 51, 0.55);
  animation: ymrfModalFade 0.2s ease;
}

.announce-overlay[hidden] {
  display: none;
}

.announce-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--white);
  border: 4px solid var(--gold);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  animation: ymrfModalPop 0.22s ease;
}

.announce-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 10px;
}

.announce-subtitle {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  margin: 0 0 26px;
}

.announce-btn {
  margin-top: 4px;
}

.announce-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.announce-close:hover {
  background: rgba(191, 154, 78, 0.22);
  color: var(--gold-dark);
}

/* Never show any ring/outline around the close button. */
.announce-close:focus,
.announce-close:focus-visible {
  outline: none;
}

/* Lock background scroll while the announcement is open. */
body.announce-open {
  overflow: hidden;
}

/* Hero focus mode: while the announcement overlay is open, hide the entire
   hero card (eyebrow + title + flourish + welcome button) so only the modal
   shows over the photo — mirrors the ym2026 banner. It disappears instantly on
   open and fades back in when the overlay is closed. */
.hero .hero-card {
  transition: opacity 0.45s ease; /* drives the fade-IN on close */
}

body.announce-hero-min .hero .hero-card {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none; /* instant hide on open */
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-card {
    transition: none;
  }
}

@media (max-width: 768px) {
  .announce-card {
    padding: 32px 22px;
  }

  .announce-subtitle {
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .announce-overlay,
  .announce-card {
    animation: none;
  }
}

/* Image-only announcement card (ym2026 I-65 badge): the graphic is the whole
   message, so the card just frames it. Reserve a top strip so the close button
   never overlaps the artwork. */
.announce-card-image {
  max-width: 680px;
  padding: 60px 16px 36px;
}

.announce-card-image .announce-close {
  top: 8px;
  right: 8px;
}

.announce-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 600px) {
  .announce-card-image {
    max-width: 94vw;
    padding: 52px 12px 28px;
  }
}

/* Banner focus mode (ym2026): hide the eyebrow + title + flourish while the
   overlay is open, fading them back in on close — mirrors the home hero. Only
   ym2026 loads the script that toggles body.announce-hero-min, so this is
   page-isolated. */
.page-banner.is-ym .eyebrow,
.page-banner.is-ym .banner-title,
.page-banner.is-ym .banner-flourish {
  transition: opacity 0.45s ease; /* drives the fade-IN on close */
}

body.announce-hero-min .page-banner.is-ym .eyebrow,
body.announce-hero-min .page-banner.is-ym .banner-title,
body.announce-hero-min .page-banner.is-ym .banner-flourish {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none; /* instant hide on open */
}

@media (prefers-reduced-motion: reduce) {
  .page-banner.is-ym .eyebrow,
  .page-banner.is-ym .banner-title,
  .page-banner.is-ym .banner-flourish {
    transition: none;
  }
}

/* ---- Fields ------------------------------------------------------------- */
.ymrf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.ymrf-field {
  display: flex;
  flex-direction: column;
}

.ymrf-field label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 8px;
}

/* Red required asterisk — across all labels and table headers in the form. */
.ymrf-prose .req {
  color: #c0392b;
  margin-left: 2px;
}

.ymrf-field-inline {
  max-width: 360px;
}

/* Shared control look for top-level inputs (assembly, pastor, adults). */
.ymrf-field input {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ymrf-field input::placeholder {
  color: #9aa4ac;
}

.ymrf-field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(191, 154, 78, 0.18);
}

.ymrf-field input.invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

/* Message textarea (Quick Contact form) — match the input control look. */
.ymrf-field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 15px;
  resize: vertical;
  min-height: 120px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ymrf-field textarea::placeholder {
  color: #9aa4ac;
}

.ymrf-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(191, 154, 78, 0.18);
}

.ymrf-field textarea.invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

/* Inline validation message. */
.ymrf-error {
  color: #c0392b;
  font-size: 0.86rem;
  font-weight: 500;
  margin: 7px 0 0;
  min-height: 0;
}

.ymrf-error:empty {
  display: none;
}

.ymrf-error-block {
  margin-top: 12px;
}

/* ---- Tables ------------------------------------------------------------- */
.ymrf-table-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.ymrf-table {
  width: 100%;
  border-collapse: collapse;
}

.ymrf-table thead th {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  background: #faf8f3;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.ymrf-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.ymrf-table tbody tr:last-child td {
  border-bottom: 0;
}

.ymrf-table tbody tr {
  transition: background-color 0.15s ease;
}

.ymrf-table tbody tr:hover {
  background: rgba(191, 154, 78, 0.05);
}

.ymrf-col-actions {
  width: 1%;
  white-space: nowrap;
}

/* In-cell controls. Text inputs read as plain text until focused; selects
   keep a visible control affordance (matching the mockup). */
.ymrf-input {
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--ink);
  width: 100%;
  border-radius: 7px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ymrf-input-text {
  border: 1px solid transparent;
  background: transparent;
  padding: 9px 10px;
}

.ymrf-input-text:hover {
  border-color: var(--line);
}

.ymrf-input-text:focus {
  outline: none;
  background: var(--white);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(191, 154, 78, 0.18);
}

.ymrf-input-text::placeholder {
  color: #9aa4ac;
}

/* Custom dropdown (gender / age) — a site-styled replacement for the native
   <select>, whose open option list can't be themed (the OS draws it). The
   closed trigger mirrors the previous select look; the open menu uses the same
   white/gold card language as the rest of the form. */
.ymrf-dd {
  position: relative;
  width: 100%;
}

.ymrf-table-youth .ymrf-dd {
  min-width: 120px;
}

.ymrf-dd-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--ink);
  text-align: left;
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 32px 9px 12px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6b74' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ymrf-dd-trigger:focus,
.ymrf-dd.is-open .ymrf-dd-trigger {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(191, 154, 78, 0.18);
}

/* Required-field error state for the in-cell youth controls (gender / name /
   age) — a red border, matching the other required fields. */
.ymrf-dd-trigger.invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

.ymrf-input-text.invalid {
  background: var(--white);
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

.ymrf-dd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ymrf-dd-label.is-placeholder {
  color: #9aa4ac;
}

/* The open list. position:fixed (placed via JS) so it escapes the table
   wrapper's overflow clipping. */
.ymrf-dd-menu {
  position: fixed;
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 130px;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}

.ymrf-dd-menu[hidden] {
  display: none;
}

.ymrf-dd-option {
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 0.98rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.ymrf-dd-option:hover,
.ymrf-dd-option:focus {
  outline: none;
  background: rgba(191, 154, 78, 0.1);
}

.ymrf-dd-option[aria-selected="true"] {
  background: rgba(191, 154, 78, 0.16);
  color: var(--gold-dark);
  font-weight: 600;
}

/* Slim, on-brand scrollbar for the longer age list. */
.ymrf-dd-menu::-webkit-scrollbar {
  width: 8px;
}
.ymrf-dd-menu::-webkit-scrollbar-thumb {
  background: rgba(191, 154, 78, 0.4);
  border-radius: 8px;
}

/* Row action buttons (Edit / Remove). */
/* The flex lives on the inner wrapper, not the <td>, so the cell keeps its
   table-cell display and its bottom border stays continuous across the row. */
.ymrf-actions-wrap {
  display: flex;
  gap: 8px;
}

.ymrf-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ymrf-edit:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
  background: rgba(191, 154, 78, 0.08);
}

.ymrf-remove {
  color: #c0392b;
  border-color: rgba(192, 57, 43, 0.4);
}

.ymrf-remove:hover {
  background: rgba(192, 57, 43, 0.08);
  border-color: #c0392b;
}

/* Empty-state line shown beneath an empty table. */
.ymrf-empty {
  margin: 0;
  padding: 18px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---- Total youth counter ------------------------------------------------ */
.ymrf-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 16px 20px;
  background: rgba(191, 154, 78, 0.06);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.ymrf-total-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--ink);
}

.ymrf-total-label i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(191, 154, 78, 0.16);
  color: var(--gold-dark);
}

.ymrf-total-value {
  min-width: 72px;
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gold-dark);
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 8px 14px;
}

/* ---- Submission area ---------------------------------------------------- */
.ymrf-submit-area {
  margin-top: clamp(34px, 4vw, 46px);
  text-align: center;
}

/* Validation summary — appears above the buttons on a failed submit, listing
   exactly what still needs completing. */
.ymrf-summary {
  text-align: left;
  background: rgba(192, 57, 43, 0.06);
  border: 1px solid rgba(192, 57, 43, 0.35);
  border-left: 4px solid #c0392b;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 24px;
}

.ymrf-summary[hidden] {
  display: none;
}

.ymrf-summary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}

.ymrf-summary-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-weight: 700;
  color: #a5281c;
}

.ymrf-summary ul {
  margin: 0;
  padding-left: 38px;
  color: #7a2018;
}

.ymrf-summary li {
  margin: 4px 0;
}

.ymrf-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.ymrf-submit,
.ymrf-clear {
  font-size: 0.95rem;
  padding: 15px 34px;
}

.ymrf-submit i,
.ymrf-clear i {
  margin-right: 9px;
}

.ymrf-submit.is-loading {
  opacity: 0.85;
  cursor: progress;
}

/* Scoped under .ymrf-prose so it outweighs the justified `.page-prose p` rule. */
.ymrf-prose .ymrf-trust {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
}

.ymrf-trust i {
  color: var(--gold-dark);
  margin-right: 7px;
}

/* Quick Contact form (ym2026): a narrower, more focused card than the wide
   registration/band forms, with more separation from the intro above and a
   slightly stronger shadow so it lifts off the page background. */
#ymcfForm.ymrf-card {
  max-width: 780px;
  margin-top: 48px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

/* Keep the success card the same width as the (now wider) form card, and give
   it the same breathing room above so it isn't cramped under the intro text. */
#ymcfSuccess {
  max-width: 780px;
  margin-top: 48px;
}

/* Default (desktop): show the desktop wording; the mobile-only variant with its
   own line breaks is revealed in the ≤760px media query below. */
#ymcfSuccess .ymcf-msg-mobile { display: none; }

/* Success card action buttons (Youth Meeting Schedule + Close). */
#ymcfSuccess .ymcf-success-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* The form isn't in .ymrf-prose, so the required-asterisks need their own red. */
#ymcfForm .req {
  color: #c0392b;
  margin-left: 2px;
}

/* Quick Contact form (ym2026) sits in .page-prose (not .ymrf-prose), so the
   trust line needs its own centering + padding. Capped + auto-centered so it
   reads as balanced (not left-heavy), especially on mobile. */
#ymcfForm .ymrf-trust {
  max-width: 460px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
  padding: 10px 16px 2px;
}

/* ---- Quick Contact (ym2026) refinements — scoped to #ymcfForm only ------- */

/* Title sits at the top of the card, so drop the shared .page-prose subhead's
   60px top margin (which was leaving a big gap above it). */
#ymcfForm .prose-subhead { margin-top: 0; }

/* Tighter vertical rhythm than the shared registration/band defaults. */
#ymcfForm .ymbf-stack { gap: 18px; }
#ymcfForm .ymrf-field label { margin-bottom: 6px; }
#ymcfForm .ymrf-field textarea { min-height: 104px; }
#ymcfForm .ymrf-submit-area { margin-top: clamp(26px, 3.2vw, 38px); }

/* "* Required fields" note directly above the first row of fields. */
#ymcfForm .ymcf-required-note {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Message helper text + live character counter row. */
#ymcfForm .ymcf-field-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
}
#ymcfForm .ymcf-help {
  color: var(--muted);
  font-size: 0.82rem;
}
#ymcfForm .ymcf-charcount {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Enhanced focus ring (4px, on-brand gold) across the standard fields. The
   email's is-valid/is-invalid colours have higher specificity, so a validated
   email keeps its green/red ring even while focused. */
#ymcfForm .ymrf-field input:focus,
#ymcfForm .ymrf-field textarea:focus,
#ymcfForm .ymrf-dd-trigger:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(191, 154, 78, 0.16);
}

/* Dropdown polish: capped height (so it can't overwhelm the page / cover the
   buttons), roomier options, lighter shadow, soft open animation. The menu is
   also positioned to prefer opening upward — see position() in the JS. */
#ymcfForm .ymrf-dd-menu {
  max-height: 320px;                    /* fits all 5 topics — no scrolling */
  box-shadow: 0 6px 18px rgba(31, 42, 51, 0.12);
  -webkit-overflow-scrolling: touch;   /* momentum scrolling on iOS */
}
#ymcfForm .ymrf-dd-option {
  padding: 12px 18px;
}
/* Make the selected topic clearly obvious (soft gold, darker gold text). */
#ymcfForm .ymrf-dd-option[aria-selected="true"] {
  background: rgba(191, 154, 78, 0.22);
  color: var(--gold-dark);
  font-weight: 600;
}
#ymcfForm .ymrf-dd.is-open .ymrf-dd-menu {
  animation: ymcfDdIn 0.14s ease;
}
@keyframes ymcfDdIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #ymcfForm .ymrf-dd.is-open .ymrf-dd-menu { animation: none; }
}

/* Keep the secondary "Clear" action narrower so Send Message stays dominant. */
#ymcfForm .ymrf-clear {
  flex: 0 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---- Email live validation (green/valid, red/invalid) + status icon ------- */
#ymcfForm .ymcf-input-wrap {
  position: relative;
}
#ymcfForm .ymcf-input-wrap input {
  width: 100%;
}
/* Room for the status icon on the right; transition tuned to 250ms. */
#ymcfForm #email {
  padding-right: 42px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
#ymcfForm #email.is-valid {
  border-color: #3a9d5d;                       /* soft green */
  box-shadow: 0 0 0 3px rgba(58, 157, 93, 0.16);
}
#ymcfForm #email.is-invalid {
  border-color: #d9544d;                       /* soft red */
  box-shadow: 0 0 0 3px rgba(217, 84, 77, 0.16);
}
#ymcfForm .ymcf-valid-icon,
#ymcfForm .ymcf-invalid-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  font-size: 1rem;
  pointer-events: none;
}
#ymcfForm .ymcf-valid-icon { color: #3a9d5d; }
#ymcfForm .ymcf-invalid-icon { color: #d9544d; }
#ymcfForm #email.is-valid ~ .ymcf-valid-icon { opacity: 1; visibility: visible; }
#ymcfForm #email.is-invalid ~ .ymcf-invalid-icon { opacity: 1; visibility: visible; }

/* Fade validation error messages in (no abrupt pop). */
#ymcfForm .ymrf-error:not(:empty) {
  animation: ymcfErrIn 0.25s ease;
}
@keyframes ymcfErrIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #ymcfForm .ymrf-error:not(:empty) { animation: none; }
  #ymcfForm .ymcf-valid-icon,
  #ymcfForm .ymcf-invalid-icon { transition: none; }
}

/* Disabled submit while the form is incomplete/invalid. */
#ymcfForm .ymrf-submit:disabled,
#ymcfForm .ymrf-submit:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Comfortable side padding on small screens (premium feel, not cramped). */
@media (max-width: 760px) {
  #ymcfForm.ymrf-card { padding: clamp(24px, 5vw, 32px); }

  /* Don't auto-hyphenate the success message on mobile (inherited from
     .page-prose p) — keep whole words intact. */
  #ymcfSuccess h2,
  #ymcfSuccess p {
    -webkit-hyphens: none;
    hyphens: none;
  }

  /* Widen the success card on mobile (stays centered via margin auto). */
  #ymcfSuccess {
    width: calc(100% - 32px);
    max-width: 500px;
  }

  /* Mobile success message uses its own line breaks. */
  #ymcfSuccess .ymcf-msg-desktop { display: none; }
  #ymcfSuccess .ymcf-msg-mobile { display: block; }

  /* Stack the success buttons full-width on mobile for easier tapping. */
  #ymcfSuccess .ymcf-success-actions { flex-direction: column; }
  #ymcfSuccess .ymcf-success-actions .btn { width: 100%; }
}

/* Success transition: fade the form out, fade the success card in (#9). */
#ymcfForm.ymcf-fade-out {
  opacity: 0;
  transition: opacity 0.25s ease;
}
#ymcfSuccess.ymcf-fade-in {
  animation: ymcfFadeIn 0.32s ease both;
}
@keyframes ymcfFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #ymcfForm.ymcf-fade-out { transition: none; }
  #ymcfSuccess.ymcf-fade-in { animation: none; }
}

/* ---- Success card ------------------------------------------------------- */
.ymrf-success {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: clamp(40px, 6vw, 64px) clamp(28px, 4vw, 52px);
}

.ymrf-success-icon {
  font-size: 3.4rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 18px;
}

.ymrf-success h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  color: var(--ink);
  margin: 0 0 16px;
}

.ymrf-success p {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0 0 28px;
  text-align: center;
}

.ymrf-success .btn-gold i {
  margin-right: 9px;
}

.ymrf-success .btn-gold:hover {
  box-shadow: 0 6px 15px rgba(31, 42, 51, 0.18);
}

/* ====================================================================== */
/* ymrf — responsive: stack fields, convert tables to stacked cards, make  */
/* the action buttons full width.                                          */
/* ====================================================================== */
@media (max-width: 760px) {
  .ymrf-grid-2 {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Let the workers helper text reflow instead of breaking mid-sentence. */
  .ymrf-br-desktop {
    display: none;
  }

  /* Force the empty Emergency Contacts prompt onto two lines on mobile. */
  .ymrf-br-mobile {
    display: inline;
  }

  .ymrf-field-inline {
    max-width: none;
  }

  /* Section header stacks; the Add button spans full width. */
  .ymrf-section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  /* Per-section Add buttons stay on mobile (full-width), alongside the FAB. */
  .ymrf-add {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Floating quick-add FAB: fixed bottom-right, fades in once scrolled to the
     form (the .is-visible class is toggled in ymrf-form.js). */
  .ymrf-fab {
    display: block;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .ymrf-fab.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Dim overlay behind the open flyout — fixed full-screen, just under the FAB. */
  .ymrf-fab-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(31, 42, 51, 0.55);
    animation: ymrfModalFade 0.18s ease;
  }

  .ymrf-fab-overlay[hidden] {
    display: none;
  }

  /* Tables become stacked cards. Each row is a bordered card; each cell shows
     its column name via the data-label set in ymrf-form.js. */
  .ymrf-table-wrap {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .ymrf-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ymrf-table,
  .ymrf-table tbody,
  .ymrf-table tr,
  .ymrf-table td {
    display: block;
    width: 100%;
  }

  .ymrf-table tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px 14px 12px;
    margin-bottom: 14px;
    background: var(--white);
  }

  .ymrf-table tbody tr:hover {
    background: var(--white);
  }

  .ymrf-table tbody td {
    border-bottom: 1px solid #f1ece1;
    padding: 12px 0;
  }

  .ymrf-table tbody tr td:last-child {
    border-bottom: 0;
  }

  /* Label each stacked cell with its column name. */
  .ymrf-table tbody td::before {
    content: attr(data-label);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 7px;
  }

  .ymrf-dd,
  .ymrf-table-youth .ymrf-dd {
    width: 100%;
    min-width: 0;
  }

  /* Text inputs get a visible border on mobile (no hover to hint at them). */
  .ymrf-input-text {
    border-color: var(--line);
    background: var(--white);
    padding: 12px 13px;
  }

  /* Action buttons fill the card width within the stacked card. */
  .ymrf-actions-wrap {
    gap: 10px;
  }

  .ymrf-row-btn {
    flex: 1;
    justify-content: center;
    padding: 11px 13px;
  }

  /* Submit + Clear stack full width. */
  .ymrf-actions {
    flex-direction: column;
  }

  .ymrf-submit,
  .ymrf-clear {
    width: 100%;
  }
}

/* ====================================================================== */
/* Prayer List page                                                       */
/* Reuses the interior banner (is-ym, via body.prayer above), page-prose, */
/* and the gold-edged card family (.contact-directions). Adds the verse   */
/* line and a centered PDF download card.                                 */
/* ====================================================================== */

/* Scripture line beneath the intro — centered, serif, in the gold key. */
.page-prose .prayer-verse {
  margin: 28px auto 8px;
  max-width: 640px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.6;
  color: var(--ink);
}

.page-prose .prayer-verse .verse-ref {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* Download card — centered, gold-edged, in the family of cards
   (mirrors .contact-directions). */
.prayer-download {
  margin: 44px auto 0;
  max-width: 560px;
  text-align: center;
  background: rgba(191, 154, 78, 0.05);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 12px;
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow-sm);
}

.prayer-download-icon {
  font-size: clamp(2.4rem, 5vw, 3rem);
  color: var(--gold);
  margin-bottom: 14px;
}

.prayer-download h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  color: var(--ink);
  margin: 0 0 12px;
}

/* Override the justified body copy from .page-prose p so the card text is
   centered with the rest of the card. */
.prayer-download p {
  margin: 0 0 22px;
  color: var(--muted);
  text-align: center;
}

.prayer-download .btn-gold i {
  margin-right: 9px;
}

.prayer-download .btn-gold:hover {
  box-shadow: 0 6px 15px rgba(31, 42, 51, 0.18);
}

/* Force the download-card caption onto two lines in mobile view only. */
.prayer-mobile-br {
  display: none;
}

@media (max-width: 768px) {
  .prayer-mobile-br {
    display: inline;
  }
}

/* =======================================================================
   ymbf — Youth Meeting Band Sign-up Form. Reuses the shared .ymrf-* form
   design system (card, fields, dropdown, summary, modal, success). Adds the
   body.ymbf hero (mirrors body.ymrf), a stacked field layout, and a themed
   checkbox group for the "what part do you play" question.
   ======================================================================= */

/* ---- Hero (mirror body.ymrf) -------------------------------------------- */
body.ymbf .page-banner.is-ym .container {
  transform: translateY(clamp(120px, 15vh, 180px));
}

body.ymbf .page-banner.is-ym .eyebrow {
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: #efcb79;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.55);
}

body.ymbf .page-banner.is-ym .banner-title {
  font-size: clamp(3.1rem, 8.2vw, 6.7rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 8px 34px rgba(0, 0, 0, 0.32);
}

body.ymbf .banner-subtitle {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

body.ymbf .page-banner.is-ym .banner-flourish {
  margin-top: 22px;
  filter: drop-shadow(0 0 7px rgba(191, 154, 78, 0.5));
}

body.ymbf .page-banner.is-ym .banner-flourish .rule {
  width: clamp(92px, 17vw, 242px);
  background: rgba(191, 154, 78, 0.82);
}

body.ymbf .page-banner.is-ym .banner-flourish .cross::before,
body.ymbf .page-banner.is-ym .banner-flourish .cross::after {
  background: rgba(191, 154, 78, 0.82);
}

body.ymbf .page-banner.is-ym::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 205px;
  background: linear-gradient(
    to bottom,
    rgba(245, 242, 235, 0) 0%,
    rgba(245, 242, 235, 0) 55%,
    rgba(245, 242, 235, 0.08) 74%,
    rgba(245, 242, 235, 0.34) 89%,
    rgba(245, 242, 235, 0.72) 97%,
    #f5f2eb 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ---- Stacked single-column field layout --------------------------------- */
.ymbf-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---- Checkbox group ("what part do you play") --------------------------- */
.ymrf-group-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 10px;
}

.ymrf-label-note {
  font-weight: 400;
  color: var(--muted);
}

.ymrf-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ymrf-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.98rem;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Override the generic .ymrf-field input styling for the checkbox itself. */
.ymrf-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  flex: none;
  accent-color: var(--gold);
  cursor: pointer;
}

.ymrf-check:hover {
  border-color: var(--gold);
}

.ymrf-check:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(191, 154, 78, 0.18);
}

.ymrf-check:has(input:checked) {
  border-color: var(--gold);
  background: rgba(191, 154, 78, 0.1);
  color: var(--gold-dark);
  font-weight: 600;
}

/* Invalid state — red pill borders when nothing is selected on submit. */
.ymrf-checks.invalid .ymrf-check {
  border-color: #c0392b;
}

@media (max-width: 760px) {
  .ymrf-check {
    flex: 1 1 calc(50% - 12px);
    justify-content: center;
  }
}

/* ymbf hero — on mobile, lift the date/title/cross block higher in the banner. */
@media (max-width: 760px) {
  body.ymbf .page-banner.is-ym .container {
    transform: translateY(clamp(55px, 10vh, 95px));
  }
}

/* ymrf hero — on mobile, sit the date/title/cross block a touch lower than ymbf. */
@media (max-width: 760px) {
  body.ymrf .page-banner.is-ym .container {
    transform: translateY(clamp(80px, 12vh, 120px));
  }
}

/* ym2026 hero — mirrors the ymrf hero, but nudged up slightly on mobile only. */
@media (max-width: 760px) {
  body.ym:not(.yms) .page-banner.is-ym .container {
    transform: translateY(clamp(60px, 10vh, 100px));
  }
}

/* yms hero — mirrors the ymrf hero, but nudged up slightly on mobile only. */
@media (max-width: 760px) {
  body.yms .page-banner.is-ym .container {
    transform: translateY(clamp(60px, 10vh, 100px));
  }
}