/* ============================================================
   UCR — Unity of Raleigh
   Components: Header · Nav · Hero · Buttons · Cards · Forms · Footer
   ============================================================ */

/* ── Utility Bar ───────────────────────────────────────────── */
.utility-bar {
  flex: 0 0 var(--header-utility-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
}

.utility-bar__link {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-slate-light);
  transition: color var(--transition-fast);
  text-transform: uppercase;
}

.utility-bar__link:hover {
  color: var(--color-gold-light);
}

.utility-bar__socials {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.utility-bar__socials a {
  color: var(--color-slate-light);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
}

.utility-bar__socials a:hover {
  color: var(--color-gold-light);
}

.utility-bar__socials svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ── Site Header / Main Nav ────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-indigo);
  box-shadow: 0 2px 20px rgba(20, 29, 53, 0.3);
  transition: background-color var(--transition-base);
}

.site-header.scrolled {
  background-color: var(--color-indigo-dark);
  box-shadow: 0 2px 24px rgba(20, 29, 53, 0.5);
}

/* Logo + right-column wrapper */
.header-inner {
  display: flex;
  align-items: stretch;
  height: var(--header-total);
}

.header-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding-right: var(--space-6);
  margin-right: var(--space-2);
}

.site-logo img {
  height: 96px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* ── TEMPORARY: summer raffle ticket ─────────────────────────
   Added 2026-07-30 for the Dawg Daze fundraiser; due out around the end of
   August. To remove it completely, search the project for "nav-raffle" — this
   block, one <li> in each of the 14 page files, and
   images/site/raffle-ticket-header.webp.

   Hidden at 1024px rather than a rounder number because that is exactly where
   .nav-links stops being a horizontal row and becomes a dropdown panel. Left
   visible, the ticket would appear as a stray image stacked among the text
   links in that menu.
   ------------------------------------------------------------------ */
.nav-raffle {
  display: flex;
  align-items: center;
  /* Pairs with `.nav-links li:last-child { margin-left: auto }` further down,
     which pushes Donate Now to the right edge. With only that one auto margin,
     every bit of leftover row space piles up between the ticket and Donate, and
     the ticket ends up shoved against Contact. A second auto margin makes
     flexbox split that space equally, centring the ticket between the two. */
  margin-left: auto;
}

.nav-raffle a {
  display: block;
  line-height: 0;              /* kills the inline-descender gap under the image */
  padding: 0;
  border-bottom: none;
}

/* Every nav link gets a translucent white pill on hover from `.nav-links a:hover`
   further down. On a transparent cut-out that reads as a grey box appearing
   behind the ticket, so it is switched off here and only the ticket itself
   moves.
   The selector needs `.nav-links` in front: `.nav-raffle a:hover` alone has the
   same specificity as the rule it is fighting, and that one is written later in
   the file, so it would win. */
.nav-links .nav-raffle a,
.nav-links .nav-raffle a:hover,
.nav-links .nav-raffle a:focus-visible { background: none; }

/* Losing the hover pill also loses the only visible focus cue for keyboard
   users, so give it back explicitly. The outline sits on the <a>, which is not
   rotated, so it stays a tidy upright rectangle. */
.nav-links .nav-raffle a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Tilted for a bit of "pinned-up notice" character. Done in CSS rather than
   baked into the file: the asset stays square-on and reusable, the angle is one
   number to change, and nothing is re-encoded.
   At 10deg a 100x56 image sweeps a 108x73 box, clearing the 88px nav row with
   about 8px to spare top and bottom. */
.nav-raffle img {
  height: 56px;
  width: auto;
  display: block;
  transform: rotate(10deg);
  transform-origin: center;
  transition: transform var(--transition-base);
}

/* The rotation MUST be repeated here. `transform` is one property, so a hover
   rule listing only translate/scale replaces the whole thing and the ticket
   snaps upright the moment the pointer touches it.
   translateY first so the lift is straight up on screen; listing it after
   rotate would move it along the tilted axis instead. */
.nav-raffle a:hover img,
.nav-raffle a:focus-visible img { transform: translateY(-3px) rotate(10deg) scale(1.04); }

@media (max-width: 1024px) { .nav-raffle { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nav-raffle img { transition: none; }
  .nav-raffle a:hover img,
  .nav-raffle a:focus-visible img { transform: none; }
}

.main-nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-logo__text {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  max-width: 200px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
}

.nav-links a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-links a.nav-cta {
  background-color: var(--color-gold);
  color: var(--color-indigo-dark);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-weight: 600;
  margin-left: var(--space-2);
}

.nav-links a.nav-cta:hover {
  background-color: var(--color-gold-light);
  color: var(--color-indigo-dark);
}

/* Hamburger toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.08);
  transition: background var(--transition-fast);
}

.nav-toggle:hover {
  background: rgba(255,255,255,0.16);
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-white);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
@media (max-width: 1024px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--color-indigo-dark);
    padding: var(--space-4);
    box-shadow: 0 8px 24px rgba(20, 29, 53, 0.4);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    border-radius: var(--radius-md);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .nav-links a.nav-cta {
    margin: var(--space-3) 0 0;
    text-align: center;
    border-bottom: none;
  }

  .nav-links li:last-child {
    margin-left: 0;
  }

  .nav-links a.nav-donate {
    margin: var(--space-2) 0 0;
    text-align: center;
    border-bottom: none;
    background: #fff;
    color: var(--color-indigo-dark) !important;
  }

  .nav-toggle {
    display: flex;
  }

  .utility-bar {
    display: none;
  }
}

/* ── Hero Section ──────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-total);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.hero.loaded .hero__bg {}

.hero__overlay {
  position: absolute;
  inset: 0;
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-20);
  max-width: none;
}

.hero__frost {
  background: rgba(18, 26, 48, 0.25);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 2.25rem 2.5rem 2rem;
  margin-top: 350px;
  zoom: 0.7;
  width: max-content;
  max-width: calc(100vw - 3rem);
}

.hero__frost .btn-lg {
  font-size: var(--text-2xl);
  padding: var(--space-3) var(--space-6);
}

.hero__frost .hero__actions {
  gap: var(--space-2);
}

/* ── Visually hidden ───────────────────────────────────────── */
/* Present for search engines and screen readers, absent on screen. Used where
   artwork already carries the heading — see the VIV banner below. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Quiet link ────────────────────────────────────────────── */
/* A link that does not announce itself. Used on the six names in the
   "Get Involved — Who's Who" card on new-here.html: six gold underlined links
   stacked in a small sidebar box read as visual noise, so by request the
   changing cursor is the only hover cue.

   The focus ring is deliberately NOT suppressed. Hover is a mouse-only signal,
   so without a visible focus state a keyboard user would have no way to see
   where they are — and it never shows during ordinary mouse use, so it costs
   nothing visually. Do not "tidy" it away.

   Safe because these links are a shortcut, not the only route: the card's
   "Get Involved" button below them is the discoverable path. */
.quiet-link {
  color: inherit;
  text-decoration: none;
}

.quiet-link:hover,
.quiet-link:active {
  color: inherit;
  text-decoration: none;
}

.quiet-link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* One row of the "Get Involved — Who's Who" card. The whole rectangle is the
   link, not just the name, so the hit area matches what the eye reads as one
   unit — and it is a far easier target on a phone than a line of text.

   It is an <a> wrapping an <h4> and a <p>, which is valid HTML5: an anchor may
   contain flow content as long as nothing inside is itself interactive. Do not
   put a button or another link in here.

   Still deliberately quiet — no hover background or border change. The card's
   intro copy tells people the names are clickable, which is what carries
   discoverability instead. */
.who-row {
  display: block;
  border-radius: 6px;
  border: 1px solid #d1c9b8;
  background: #fff;
  padding: 0.55rem 0.75rem;
}

/* The VIV intro paragraph is longer than the narrow container was sized for and
   was breaking into seven lines. Widened for this block only — .container--narrow
   is 760px and is used on eight other pages, so the token stays put.

   960px rather than the full 1200px on purpose: centred text gets harder to read
   as it widens, because the eye has to travel further back to find the start of
   each line. This is about 85 characters a line, which is at the comfortable
   limit for a short intro block and would be too wide for long-form prose. */
[data-section="about-viv"] .container--narrow {
  max-width: 960px;
}

/* ── VIV tribute (the quarterly honoree write-up) ───────────
   An article, not a card. At ~600 words the .content-split used elsewhere on
   the page left the image column almost entirely empty, so the photo floats
   instead and the opening paragraphs wrap around it.

   `flow-root` contains the float. Without it the photo escapes the section
   whenever it is taller than the text beside it, and lands on whatever
   follows. */
.viv-tribute {
  display: flow-root;
}

.viv-tribute__photo {
  float: right;
  width: min(300px, 42%);
  margin: 0 0 var(--space-6) var(--space-8);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.viv-tribute__photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* The closing line is the emotional beat of the piece — let it sit apart
   rather than running on as another body paragraph. */
.viv-tribute__closing {
  margin-top: var(--space-8);
  font-style: italic;
}

/* Signoff. Matches the Letter of Appreciation treatment on community.html so
   the site's two signed pieces read the same — those rules are scoped to
   `.letter` and cannot be reused directly.

   `clear: right` is defensive: with eight paragraphs the float is long since
   cleared, but if this write-up is ever replaced by a shorter one the signature
   would otherwise tuck in beside the photo, which reads as a caption. */
.viv-tribute__signoff {
  clear: right;
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
}

.viv-tribute__signature {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-indigo);
  margin-bottom: 0;
}

/* Below this width a 42% float leaves a text column too narrow to read —
   roughly four words a line. Full width and centred instead. */
@media (max-width: 700px) {
  .viv-tribute__photo {
    float: none;
    width: 100%;
    max-width: 360px;
    margin: 0 auto var(--space-6);
  }
}

/* ── Designed banner hero (VIV) ────────────────────────────── */
/* For a hero image that sets its own type. No frost card and no darkening
   scrim — both exist to make white text readable over a photograph, and there
   is no overlaid text here to make readable.

   The image is full-bleed and scales with the viewport. `max-height` stops it
   growing absurdly tall on a wide monitor (1536x1024 across 1920px would be
   1280px of banner); `object-position` biases the resulting crop upward so the
   artwork's own wording stays inside the frame. Below ~930px wide the natural
   height falls under the cap and the whole banner shows, uncropped. */
.page-hero-banner {
  background: var(--color-cream);
}

.page-hero-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  object-position: center 42%;
}

.page-hero__frost {
  display: inline-block;
  background: rgba(18, 26, 48, 0.25);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 1.75rem 2.25rem;
  zoom: 0.7;
  width: max-content;
  max-width: calc(100vw - 3rem);
  margin-top: 180px;
}

.hero__frost h1 br,
.page-hero__frost h1 br {
  display: none;
}

.hero__frost h1,
.hero__frost p,
.page-hero__frost h1,
.page-hero__frost p {
  white-space: normal;
  max-width: none !important;
}

.hero__content .hero__frost p {
  font-size: 1.6rem;
  margin-bottom: var(--space-6) !important;
}

.hero__content .eyebrow {
  color: var(--color-gold-light);
  font-size: var(--text-2xl);
}

.hero__content h1 {
  color: var(--color-white);
  margin-bottom: var(--space-6);
}

.hero__content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-lg);
  line-height: 1.8;
  margin-bottom: var(--space-8);
}

.hero__content p:has(+ .hero__service-time) {
  margin-bottom: 0;
}

.hero__service-time {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .hero { min-height: 85vh; }
  .hero__content { max-width: 100%; padding-block: var(--space-16); }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { text-align: center; justify-content: center; }
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-7, 1.75rem);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.4;
}

/* Primary — Gold fill */
.btn-primary {
  background-color: var(--color-gold);
  color: var(--color-indigo-dark);
  border-color: var(--color-gold);
}

.btn-primary:hover {
  background-color: var(--color-gold-light);
  border-color: var(--color-gold-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201, 149, 42, 0.4);
}

/* Secondary — white outline on dark bg */
.btn-secondary {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
  transform: translateY(-1px);
}

/* Frosted-glass variant for hero action buttons */
.hero__actions .btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

.hero__actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Outline — indigo outline on light bg */
.btn-outline {
  background-color: transparent;
  color: var(--color-indigo);
  border-color: var(--color-indigo);
}

.btn-outline:hover {
  background-color: var(--color-indigo);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Ghost — minimal */
.btn-ghost {
  background-color: transparent;
  color: var(--color-gold);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.btn-ghost:hover {
  color: var(--color-gold-dark);
  gap: var(--space-3);
}

/* Sizes */
.btn-sm {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
}

.btn-lg {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-8);
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border: 1px solid var(--color-border);
}

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

.card__img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.card__body {
  padding: var(--space-6);
}

.card__icon {
  width: 52px;
  height: 52px;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 1.5rem;
  color: var(--color-indigo);
}

.card__icon svg {
  display: block;
  flex-shrink: 0;
}

.card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-indigo);
  margin-bottom: var(--space-3);
}

.card__text {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.card__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.card__link:hover {
  color: var(--color-gold-dark);
  gap: var(--space-3);
}

/* Feature Card (icon-top, cream bg) */
.card--feature {
  background: var(--color-cream);
  border-color: var(--color-cream-dark);
}

/* Feature card with photographic header */
.card--feature-photo .card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 3px solid var(--color-gold);
}

.card--feature-photo .card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 45%,
    rgba(30, 42, 74, 0.42) 100%
  );
}

.card--feature-photo .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.card--feature-photo:hover .card__media img {
  transform: scale(1.06);
}

.card--feature-photo .card__title {
  margin-top: var(--space-1);
}

@media (prefers-reduced-motion: reduce) {
  .card--feature-photo .card__media img {
    transition: none;
  }

  .card--feature-photo:hover .card__media img {
    transform: none;
  }
}

/* Ministry Card */
.card--ministry {
  border-top: 4px solid var(--color-gold);
}

/* Leader Card */
.card--leader {
  text-align: center;
}

.card--leader .card__img {
  height: 240px;
  object-fit: cover;
  object-position: center top;
}

.card--leader .card__body {
  padding: var(--space-5);
}

[data-section="leadership"] .card--leader .card__body {
  text-align: left;
}

.card--leader .card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
  color: var(--color-text);
}

.card--leader .card__text {
  color: var(--color-text-muted);
}

.card--leader .card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-gold);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

/* ── Teaser / CTA Banner ───────────────────────────────────── */
.teaser {
  background: linear-gradient(135deg, var(--color-indigo) 0%, var(--color-indigo-mid) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.teaser__content h3,
.teaser__content h2 {
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.teaser__content p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 560px;
  margin-bottom: 0;
}

.teaser--gold {
  background: linear-gradient(135deg, var(--color-gold-dark) 0%, var(--color-gold) 100%);
}

.teaser--gold .teaser__content h2,
.teaser--gold .teaser__content h3 {
  color: var(--color-indigo-dark);
}

.teaser--gold .teaser__content p {
  color: var(--color-indigo-mid);
}

@media (max-width: 768px) {
  .teaser {
    flex-direction: column;
    padding: var(--space-8);
    text-align: center;
  }
  .teaser__content p { max-width: 100%; }
}

/* ── Event List ────────────────────────────────────────────── */
.event-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.event-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.event-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.event-item__date {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--color-indigo);
  color: var(--color-white);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.event-item__date .month {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: 2px;
}

.event-item__date .day {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-heading);
}

.event-item__body h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-indigo);
  margin-bottom: var(--space-1);
}

.event-item__body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
  line-height: 1.5;
}

/* ── Process / Steps ───────────────────────────────────────── */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: relative;
}

.steps::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-gold), var(--color-gold-light));
  opacity: 0.3;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  position: relative;
}

.step-item__num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-gold);
  color: var(--color-indigo-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--color-cream);
}

.step-item__content {
  padding-top: var(--space-2);
}

.step-item__content h4 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: var(--color-indigo);
}

.step-item__content p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb-bar {
  position: sticky;
  top: var(--header-total);
  z-index: 900;
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-indigo);
  font-weight: 600;
}

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

.breadcrumb__sep {
  color: var(--color-border);
}

.breadcrumb__current {
  color: var(--color-text-muted);
}

/* ── FAQ Accordion ─────────────────────────────────────────── */
.faq-toggle-all {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.faq-item.open {
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-indigo);
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  transition: background var(--transition-fast);
}

.faq-question:hover {
  background: var(--color-cream);
}

.faq-question .faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--color-cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), background var(--transition-base);
  font-style: normal;
  font-size: var(--text-xl);
  color: var(--color-gold);
  line-height: 1;
}

.faq-item.open .faq-question .faq-icon {
  transform: rotate(45deg);
  background: var(--color-gold);
  color: var(--color-white);
}

.faq-answer {
  display: none;
  padding: 0 var(--space-6) var(--space-5);
  background: var(--color-white);
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-answer p {
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 0;
}

/* ── Forms ─────────────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-indigo);
  margin-bottom: var(--space-2);
  letter-spacing: 0.02em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 149, 42, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-slate-light);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.7;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

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

/* ── Stat / Info Blocks ────────────────────────────────────── */
.info-block {
  text-align: center;
  padding: var(--space-6);
}

.info-block__number {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-2);
}

.info-block__label {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Quote / Pullquote ─────────────────────────────────────── */
.pullquote {
  position: relative;
  padding: var(--space-8) var(--space-10);
  background: var(--color-cream);
  border-radius: var(--radius-xl);
  border-left: 4px solid var(--color-gold);
}

.pullquote__text {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--color-indigo);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.pullquote__attribution {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .pullquote {
    padding: var(--space-6);
  }
  .pullquote__text {
    font-size: var(--text-xl);
  }
}

/* ── Letter ────────────────────────────────────────────────── */
/* A reproduced letter. Distinct from .pullquote because a letter runs to
   several paragraphs — body copy stays at reading size instead of the
   display size a pullquote uses, and it sits on white "paper". */
.letter {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border-left: 4px solid var(--color-gold);
  box-shadow: var(--shadow-sm);
  padding: var(--space-10);
}

.letter p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.8;
  margin-bottom: var(--space-5);
}

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

.letter .letter__salutation {
  color: var(--color-indigo);
  font-weight: 600;
}

.letter .letter__signoff {
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
}

.letter .letter__signature {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-indigo);
}

@media (max-width: 600px) {
  .letter {
    padding: var(--space-6);
  }
}

/* ── Watch / Media ─────────────────────────────────────────── */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── CORE outreach schedule ─────────────────────────────────────────────────
   The year is organised in two-month periods, each holding one or two projects.
   Every project card carries the same three labelled slots. The labels are part
   of the design, not scaffolding: they stay useful once real copy lands, and
   they tell a visitor what to look for at a glance. */

.outreach-period + .outreach-period { margin-top: var(--space-12); }

.outreach-period__title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  font-size: var(--text-xl);
  color: var(--color-indigo);
}

/* Rule that runs to the right of the period name, so the year reads as a
   sequence of bands rather than a stack of unrelated headings. */
.outreach-period__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* auto-fit rather than a fixed 2-up: November & December holds a single
   project, and it should fill the row instead of leaving a gap. */
.outreach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
}

.outreach-fields { margin: var(--space-4) 0 0; }

.outreach-fields dt {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}

.outreach-fields dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
}

/* Content still to come from the project leads. Deliberately visible rather
   than an empty gap, so nobody has to guess which slots are unfilled.
   Not scoped to the schedule: one search for "is-pending" should surface every
   unfinished slot on the page, wherever it sits. */
.is-pending {
  color: var(--color-text-muted);
  font-style: italic;
}

.outreach-note {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-gold);
  background: var(--color-cream);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* A one-off effort that sits between two scheduled periods rather than inside
   one. Full width on purpose: it is not a project card and should not line up
   with them, because it did not come from the outreach calendar at all. */
.outreach-feature {
  margin: var(--space-12) 0;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-gold);
  background: var(--color-cream);
}

.outreach-feature h3 {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--color-indigo);
}

.outreach-feature p { margin-bottom: var(--space-4); }

.outreach-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.outreach-feature__reading {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.outreach-feature__reading h4 {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}

.outreach-feature__reading ul {
  margin: 0;
  padding-left: var(--space-5);
}

.outreach-feature__reading li {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Shown by js/live-switch.js only while the Sunday service is actually
   streaming. Sits directly above the .video-embed it belongs to. */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-3);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full, 999px);
  background: #d92d20;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.live-badge[hidden] { display: none; }

.live-badge__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #fff;
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .live-badge__dot { animation: none; }
}

.media-card {
  background: var(--color-indigo);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.media-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
}

.media-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-card__play-btn {
  width: 56px;
  height: 56px;
  background: var(--color-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.media-card:hover .media-card__play-btn {
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(201, 149, 42, 0.6);
}

.media-card__play-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--color-indigo-dark);
  margin-left: 3px;
}

.media-card__body {
  padding: var(--space-3) var(--space-4);
}

.media-card__body h4 {
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.media-card__body p {
  color: var(--color-slate-light);
  font-size: var(--text-xs);
  margin-bottom: 0;
}

/* ── Platform Links ────────────────────────────────────────── */
.platform-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

.platform-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--transition-base);
}

.platform-link:hover {
  background: rgba(255,255,255,0.14);
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

.platform-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ── Site Footer ───────────────────────────────────────────── */
.site-footer {
  background-color: var(--color-indigo-dark);
  color: var(--color-white);
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

/* Logo and tagline share the first row; everything else spans full width. */
.footer-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: center;
}

.footer-brand > *:not(picture):not(.footer-brand__tagline) {
  grid-column: 1 / -1;
}

.footer-brand__logo {
  height: 72px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer-brand__tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
}

.footer-brand__address {
  font-size: var(--text-sm);
  color: var(--color-slate-light);
  line-height: 1.8;
  margin-top: var(--space-4);
}

.footer-brand__hours {
  font-size: var(--text-sm);
  color: var(--color-slate-light);
  line-height: 1.8;
  margin-top: var(--space-2);
}

.footer-brand__phone {
  margin-top: var(--space-2);
}

.footer-brand__phone a {
  font-size: var(--text-sm);
  color: var(--color-gold-light);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.footer-brand__phone a:hover {
  color: var(--color-white);
}

.footer-col h5 {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-slate-light);
  margin-bottom: var(--space-5);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col ul a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  transition: color var(--transition-fast);
}

.footer-col ul a:hover {
  color: var(--color-white);
}

.footer-col ul a.footer-link-gold {
  color: var(--color-gold-light);
}

.footer-col ul a.footer-link-gold:hover {
  color: var(--color-gold);
}

.footer-socials {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.footer-social-link {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: all var(--transition-base);
}

.footer-social-link:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-indigo-dark);
}

.footer-social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.footer-wellness-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  transition: all var(--transition-base);
  margin-top: var(--space-5);
}

.footer-wellness-link:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--color-gold);
  color: var(--color-white);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-bottom__copy {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
}

.footer-bottom__links {
  display: flex;
  gap: var(--space-6);
}

.footer-bottom__links a {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  transition: color var(--transition-fast);
}

.footer-bottom__links a:hover {
  color: rgba(255,255,255,0.8);
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ── Notification / Prayer Banner ──────────────────────────── */
.notice-bar {
  background: var(--color-gold);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}

.notice-bar p {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-indigo-dark);
  margin: 0;
}

.notice-bar a {
  text-decoration: underline;
  color: var(--color-indigo-dark);
}

/* ── Two-column content layout ─────────────────────────────── */
.content-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.content-split--reverse .content-split__media {
  order: -1;
}

.content-split__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.content-split__media img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

@media (max-width: 900px) {
  .content-split {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .content-split--reverse .content-split__media {
    order: 0;
  }
}

/* ── Belief / Value List ───────────────────────────────────── */
.belief-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.belief-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-gold);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.belief-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--color-gold-dark);
}

.belief-item__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-gold-dark);
  background: var(--color-cream);
  border: 1px solid var(--color-gold-light);
  border-radius: var(--radius-full);
}

.belief-item__content h4 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-indigo);
  margin-bottom: var(--space-2);
}

.belief-item__content p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

/* ── Map ───────────────────────────────────────────────────── */
.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: none;
}

/* ── Contact Info Block ────────────────────────────────────── */
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-info-item__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--color-gold);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-indigo-dark);
}

.contact-info-item__body h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-indigo);
  margin-bottom: var(--space-1);
}

.contact-info-item__body p,
.contact-info-item__body a {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: 0;
  transition: color var(--transition-fast);
}

.contact-info-item__body a:hover {
  color: var(--color-gold);
}

/* ── Scroll padding for fixed header ───────────────────────── */
[id] {
  scroll-margin-top: calc(var(--header-total) + var(--space-6));
}

/* ── Donate Now Nav Button ─────────────────────────────────── */
.nav-links li:last-child {
  margin-left: auto;
}

.nav-links a.nav-donate {
  background: #fff;
  color: var(--color-indigo-dark);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-full);
  padding: 0.34rem 1.05rem;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
  white-space: nowrap;
  text-decoration: none;
}

.nav-links a.nav-donate:hover,
.nav-links a.nav-donate:focus-visible {
  background: rgba(255, 255, 255, 0.88);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
  color: var(--color-indigo-dark);
  text-decoration: none;
}

/* ── Donate Modal ──────────────────────────────────────────── */
.donate-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

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

.donate-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.80);
  cursor: pointer;
  animation: modal-fade-in 0.25s ease;
}

.donate-modal__container {
  position: relative;
  width: min(520px, 100%);
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  animation: modal-slide-in 0.28s ease;
}

.donate-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  z-index: 10;
  background: rgba(0, 0, 0, 0.08);
  border: none;
  color: #333;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.donate-modal__close:hover,
.donate-modal__close:focus-visible {
  background: rgba(0, 0, 0, 0.18);
  outline: none;
}

.donate-modal__embed {
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

/* ── Donation form ── */
.donate-form {
  padding: 2rem 2rem 1.5rem;
}

.donate-form__header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.donate-form__rule {
  width: 40px;
  height: 3px;
  background: var(--color-gold);
  border-radius: 2px;
  margin: 0 auto 1.25rem;
}

.donate-form__header h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-indigo-dark);
  margin-bottom: 0.5rem;
}

.donate-form__header p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 0.35rem;
}

.donate-form__tax {
  font-size: 0.75rem !important;
  font-weight: 600;
  color: var(--color-gold) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.5rem !important;
}

.donate-form__presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.donate-amount-btn {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.65rem 0.5rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.donate-amount-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-indigo-dark);
}

.donate-amount-btn.active {
  background: var(--color-indigo-dark);
  border-color: var(--color-indigo-dark);
  color: #fff;
}

.donate-form__custom {
  margin-bottom: 1rem;
}

.donate-form__custom label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.donate-form__input-wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s;
}

.donate-form__input-wrap:focus-within {
  border-color: var(--color-gold);
}

.donate-form__currency {
  padding: 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-cream);
  align-self: stretch;
  display: flex;
  align-items: center;
  border-right: 2px solid var(--color-border);
}

.donate-form__input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.65rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background: #fff;
}

.donate-form__selected {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

.donate-form__selected strong {
  color: var(--color-indigo-dark);
  font-size: 1.05rem;
}

.donate-form__secure {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.75rem;
}

/* ── Donate: the three giving pathways ──────────────────────────────────────
   PayPal completes in the modal; Venmo and Zelle cannot. Zelle in particular
   has no web checkout at all -- it lives inside the donor's banking app -- so
   those two panes give the address and get out of the way, rather than
   pretending a button could finish the job. */

.donate-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 1.25rem 0 1.5rem;
  padding: 0.25rem;
  background: var(--color-cream);
  border-radius: var(--radius-full, 999px);
}

.donate-tab {
  flex: 1;
  min-width: 0;                 /* let the logos shrink instead of overflowing */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  padding: 0.5rem 0.5rem;
  border: none;
  border-radius: var(--radius-full, 999px);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: none;        /* PayPal's mark is an <a>, not a button */
  transition: background var(--transition-base), color var(--transition-base);
}

.donate-tab.active {
  background: var(--color-white);
  color: var(--color-indigo);
  box-shadow: var(--shadow-sm);
}

/* The tabs carry each brand's own mark. object-fit keeps the aspect ratio while
   the box shrinks, so the wide Venmo wordmark scales down on a narrow phone
   rather than bursting out of its pill. */
.donate-tab__logo {
  display: block;
  width: 100%;
  height: 17px;
  object-fit: contain;
}

/* Zelle publishes a "Z" glyph but no wordmark, so the name is set in type to
   sit level with the two real wordmarks either side of it. */
.donate-tab__zelle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #5f23cf;
  white-space: nowrap;
}

.donate-tab__zelle img {
  display: block;
  height: 15px;
  width: auto;
}

/* Colour is what marks the selected tab now that the labels are images -- the
   unselected marks desaturate, the way the muted text colour used to read. */
/* Full colour at all times. These are no longer tabs where one is "selected" —
   each mark is the choice itself, and a greyed-out logo reads as unavailable,
   which is precisely the wrong signal on a payment method that works. */
.donate-tab__logo,
.donate-tab__zelle {
  transition: transform var(--transition-base);
}

.donate-tab:hover .donate-tab__logo,
.donate-tab:hover .donate-tab__zelle { transform: scale(1.05); }

.donate-tab:not(.active):hover .donate-tab__logo,
.donate-tab:not(.active):hover .donate-tab__zelle { opacity: 0.75; }

@media (max-width: 420px) {
  .donate-tab { padding: 0.5rem 0.35rem; }
  .donate-tab__logo { height: 14px; }
  .donate-tab__zelle { font-size: 0.85rem; gap: 0.22rem; }
  .donate-tab__zelle img { height: 13px; }
}

.donate-pane[hidden] { display: none; }

/* How often to give. Sits above the amounts because it changes what the
   amounts mean -- $50 once and $50 a month are very different decisions. */
.donate-freq {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1.15rem;
}

.donate-freq__btn {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 999px);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base),
              border-color var(--transition-base);
}

.donate-freq__btn:hover {
  border-color: var(--color-indigo);
  color: var(--color-indigo);
}

.donate-freq__btn.active {
  background: var(--color-indigo);
  border-color: var(--color-indigo);
  color: var(--color-white);
}

/* Shown when an interval has no billing plan behind it yet. Deliberately not
   styled as an error -- nothing has gone wrong, it just is not built. */
.donate-form__notice {
  padding: 0.85rem 0.9rem;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text);
}

.donate-form__notice a { color: var(--color-indigo); font-weight: 700; }

@media (max-width: 420px) {
  .donate-freq { flex-wrap: wrap; gap: 0.3rem; }
  .donate-freq__btn { flex: 1 1 45%; font-size: 0.72rem; }
}

.donate-pay__lead {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* The address is the whole point of these panes, so it gets the emphasis a
   payment field would. Monospace because it is something to be transcribed. */
.donate-pay__id {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
}

.donate-pay__value {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  color: var(--color-text);
  word-break: break-all;
}

.donate-pay__copy {
  flex-shrink: 0;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-indigo);
  border-radius: var(--radius-full, 999px);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-indigo);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

.donate-pay__copy:hover { background: var(--color-indigo); color: var(--color-white); }

.donate-pay__copy.is-copied {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}

.donate-pay__link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
  color: var(--color-indigo);
}

.donate-pay__hint,
.donate-pay__note {
  margin-top: 1rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Zelle's four steps are followed while the donor switches to a banking app, so
   they get real numerals and generous spacing rather than a dense paragraph. */
.donate-pay__steps {
  margin: 1.15rem 0 0;
  padding-left: 1.35rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}

.donate-pay__steps li { margin-bottom: 0.55rem; }
.donate-pay__steps li:last-child { margin-bottom: 0; }

/* The "Venmo coming soon" pane and its styles were removed 2026-08-04: PayPal's
   hosted donate page carries a Venmo button of its own, so Venmo giving works
   today and the notice had become untrue. */

.donate-form__error {
  text-align: center;
  font-size: 0.85rem;
  color: #dc2626;
  padding: 0.75rem;
  background: #fef2f2;
  border-radius: var(--radius-md);
  margin-top: 0.75rem;
}

.donate-form__error a {
  color: #dc2626;
  text-decoration: underline;
}

/* ── Success screen ── */
.donate-form__success {
  padding: 3rem 2rem;
  text-align: center;
}

.donate-form__success[hidden] { display: none; }

.donate-form__success-icon {
  font-size: 2.5rem;
  color: var(--color-gold);
  margin-bottom: 1rem;
}

.donate-form__success h2 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--color-indigo-dark);
  margin-bottom: 0.75rem;
}

.donate-form__success p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 340px;
  margin: 0 auto 1.5rem;
}

/* ── Carousel ───────────────────────────────────────────────── */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.carousel__viewport {
  overflow: hidden;
  width: 100%;
}

.carousel__track {
  display: flex;
  gap: var(--space-6);
  transition: transform var(--transition-slow);
  will-change: transform;
}

.carousel__track .media-card {
  flex: 0 0 calc((100% - 2 * var(--space-6)) / 3 * 0.75);
  min-width: 0;
}

.carousel__loading {
  padding: var(--space-12) var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.carousel__error {
  padding: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.section--indigo .carousel__loading,
.section--indigo .carousel__error,
.section--dark .carousel__loading,
.section--dark .carousel__error {
  color: rgba(255, 255, 255, 0.7);
}

.carousel__btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.carousel__btn svg {
  width: 24px;
  height: 24px;
}

.carousel__btn:hover {
  background: var(--color-gold-dark);
  transform: scale(1.08);
}

.carousel__btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

@media (max-width: 768px) {
  .carousel__track .media-card {
    flex: 0 0 calc((100% - var(--space-6)) / 2 * 0.75);
  }
}

@media (max-width: 480px) {
  .carousel__track .media-card {
    flex: 0 0 75%;
  }

  .carousel__btn {
    width: 40px;
    height: 40px;
  }
}

/* Portrait (9:16) card variant */
.media-card--portrait .media-card__thumb {
  aspect-ratio: 3 / 4;
}

/* Inline playing state */
.media-card__thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: none;
}

.media-card.is-playing {
  transform: none;
}

.media-card.is-playing .media-card__play,
.media-card.is-playing .media-card__thumb img {
  display: none;
}

.media-card.is-playing .media-card__thumb iframe {
  display: block;
  z-index: 2;
}

/* ── Social dashboard (social.html) ─────────────────────────── */

/* Filter chips: one row, scopes everything below */
.dash-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.dash-filters[hidden] {
  display: none;
}

/* Date-range row sits tight beneath the playlist row */
.dash-filters--range {
  margin-top: calc(-1 * var(--space-6));
}

.dash-chip {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.45rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.dash-chip:hover {
  border-color: var(--color-gold);
}

.dash-chip.is-active {
  background: var(--color-indigo);
  border-color: var(--color-indigo);
  color: var(--color-white);
}

/* KPI tiles */
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-4);
}

.dash-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}

.dash-tile__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
  white-space: pre-line;
}

.dash-tile__value {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.1;
}

.dash-updated {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.dash-error {
  padding: var(--space-8);
  color: var(--color-text-muted);
  text-align: center;
}

/* Chart cards */
.dash-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

.dash-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.dash-card__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.dash-card__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

/* Bar chart: single series, one hue; thin bars, rounded data-end, square baseline */
.dash-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 420px;
  overflow-y: auto;
  padding-right: var(--space-2);
}

.dash-bar-row {
  display: grid;
  grid-template-columns: 220px 1fr 52px;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-sm);
}

.dash-bar-row:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.dash-bar-row__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.dash-bar-row__label:hover,
.dash-bar-row__label:focus-visible {
  color: var(--color-indigo);
  text-decoration: underline;
}

.dash-bar-row__track {
  display: block;
  min-width: 0;
}

.dash-bar-row__bar {
  display: block;
  height: 18px;
  background: var(--color-indigo-mid);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background var(--transition-fast);
}

.dash-bar-row:hover .dash-bar-row__bar,
.dash-bar-row:focus-visible .dash-bar-row__bar {
  background: var(--color-slate);
}

.dash-bar-row__value {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.dash-section-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Timeline SVG — fixed height to match the Views per Short bar chart's max-height */
.dash-timeline {
  height: 420px;
}

.dash-timeline svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dash-grid {
  stroke: var(--color-cream-dark);
  stroke-width: 1;
}

.dash-tick {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.dash-tick--y { text-anchor: end; }
.dash-tick--x { text-anchor: middle; }

.dash-dot {
  fill: var(--color-indigo-mid);
  stroke: var(--color-white);
  stroke-width: 2;
  transition: fill var(--transition-fast);
}

.dash-dot.is-hover {
  fill: var(--color-slate);
}

.dash-dot-hit {
  fill: transparent;
  cursor: pointer;
}

.dash-dot-hit:focus-visible {
  outline: none;
  fill: rgba(201, 149, 42, 0.15);
}

/* Tooltip: values lead, labels follow; textContent only */
.dash-tip {
  position: absolute;
  z-index: 300;
  max-width: 260px;
  background: var(--color-indigo-dark);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.45;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

.dash-tip__value {
  font-size: var(--text-sm);
  font-weight: 700;
}

.dash-tip__label {
  color: rgba(255, 255, 255, 0.75);
}

/* Table: the no-hover twin of the charts */
.dash-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.dash-table th,
.dash-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.dash-table tbody tr:last-child td { border-bottom: none; }

.dash-table th {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-cream);
  white-space: nowrap;
  user-select: none;
}

.dash-table th.is-sortable { cursor: pointer; }
.dash-table th.is-sortable:hover { color: var(--color-text); }
.dash-table th.sort-desc::before { content: '▾ '; }
.dash-table th.sort-asc::before  { content: '▴ '; }

/* Audience table: wrap header labels so the numeric columns stay narrow,
   leaving more width for the title column */
#dash-audience-table th {
  white-space: normal;
  line-height: 1.3;
  vertical-align: bottom;
}

/* Reserve room for the thumbnail column so the many wordy analytics columns
   don't squeeze it (and the image inside) below its intended size. The
   global `img { max-width: 100% }` reset caps the thumbnail at the cell's
   resolved width, so it also needs its own override here. */
#dash-audience-table th:first-child,
#dash-audience-table td:first-child {
  width: 48px;
  min-width: 48px;
}

#dash-audience-table .dash-table__thumb {
  max-width: none;
}

.dash-comments-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-indigo);
  cursor: pointer;
  white-space: nowrap;
}

.dash-comments-toggle:hover { color: var(--color-slate); }

.dash-comments-chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
}

.dash-comments-chevron.is-open {
  transform: rotate(45deg);
}

.dash-comments-row td {
  padding: var(--space-3) var(--space-4);
}

.dash-comments-panel {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-cream);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dash-comments-panel[hidden] {
  display: none;
}

.dash-comment__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.dash-comment__author {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.dash-comment__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.dash-comment__text {
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: pre-wrap;
}

.dash-comment__likes {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.dash-th-sub {
  font-size: 0.75em;
  font-weight: 500;
}

.dash-title-date {
  font-size: 0.85em;
}

.dash-audience-pct {
  font-weight: 600;
  color: var(--color-text);
}

.dash-audience-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.dash-audience-winner {
  color: #278757;
}

.dash-table th.is-num,
.dash-table td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dash-table tbody tr:hover { background: var(--color-cream); }

.dash-table__thumb {
  width: 48px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.dash-pl-chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--color-cream-dark);
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-right: var(--space-1);
}

.dash-takeaway {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
  background: rgba(201, 149, 42, 0.12);
  border: 1px solid rgba(201, 149, 42, 0.35);
  color: var(--color-indigo-dark);
  white-space: nowrap;
}

.dash-takeaway--muted {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.dash-takeaway--amber {
  background: #ECAA55;
  border-color: #ECAA55;
  color: #2b1c00;
}

.dash-takeaway--olive {
  background: #97BE63;
  border-color: #97BE63;
  color: #17240b;
}

.dash-takeaway--forest {
  background: #1F6B4F;
  border-color: #1F6B4F;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .dash-tiles { grid-template-columns: repeat(3, 1fr); }
  .dash-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .dash-tiles { grid-template-columns: repeat(2, 1fr); }
  .dash-bar-row { grid-template-columns: 140px 1fr 48px; }
}

/* ===================================================================
   MOBILE PHONE OVERRIDES (max-width: 767px) — ADDITIVE, PHONE-ONLY
   Everything below is scoped to phones and must NOT affect tablet or
   desktop (>=768px). Do not merge these into the existing 768px blocks.
   =================================================================== */
@media (max-width: 767px) {
  /* Hero text card: undo the desktop-tuned fixed offset + zoom so the
     heading sits on the (portrait) mobile hero image instead of below it. */
  .hero__frost,
  .page-hero__frost {
    zoom: 1;
    margin-top: 0;
    width: auto;
    max-width: 100%;
    padding: 1.25rem 1.25rem;
  }

  /* Anchor the text card to the BOTTOM of the hero. Centring it (the desktop
     behaviour) parks it right where faces sit in a portrait crop, so the card
     covered the subject. Bottom-anchoring reserves the upper frame for the
     image and gives every hero a predictable "subject zone". */
  .hero,
  .page-hero { align-items: flex-end; }

  .hero__content,
  .page-hero__content {
    padding-block: var(--space-6) var(--space-8);
    width: 100%;
  }

  /* Reserve a fixed image band at the top of every hero that the text card can
     never intrude on. Padding-top (rather than a min-height) is what makes this
     robust: the band is guaranteed even when the card is tall or the phone is
     short, because the hero simply grows instead of the card riding up over the
     subject. The mobile images are composed so faces land inside this band.

     Every .page-hero carries a desktop-tuned INLINE padding-top, so !important
     is the only way to reach it from a stylesheet — same reason the mobile
     background-image swaps below need it. Confined to this phone query, so
     desktop and tablet keep their inline value. */
  .hero {
    min-height: 0;
    padding-top: calc(var(--header-total) + clamp(190px, 27vh, 280px)) !important;
  }
  .page-hero {
    min-height: 0;
    padding-top: calc(var(--header-total) + clamp(170px, 24vh, 250px)) !important;
  }

  /* The home hero card carries the most content on the site: eyebrow, two-line
     h1, four-line paragraph, service time and three stacked buttons. At the
     desktop-tuned type scale it grew to ~810px inside a ~926px frame, leaving
     no room for the image and burying the subject behind the card. These trims
     are phone-only and keep the hierarchy — they just stop the card eating the
     whole viewport. Scoped to the frost cards so other display-xl / eyebrow
     usages are untouched. */
  .hero__frost .btn-lg {
    font-size: var(--text-lg);
    padding: var(--space-3) var(--space-4);
  }

  .hero__frost .eyebrow { font-size: var(--text-base); }

  .hero__frost .display-xl,
  .page-hero__frost .display-xl { font-size: 2rem; }

  .hero__service-time {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
  }

  .hero__actions { gap: var(--space-2); }

  .hero__content { padding-block: var(--space-4) var(--space-6); }

  /* Comfortable touch target for the donate amount buttons. */
  .donate-amount-btn { min-height: 44px; }

  /* Swap in the portrait, phone-weight hero images. !important is required
     only to beat the per-page inline background-image, and lives solely
     inside this phone query so desktop/tablet are untouched.

     Each mobile file is composed as a top band (photo pinned to the top over a
     blurred extension of itself), so `center top` keeps the subject high no
     matter how tall the device is — anything surplus is trimmed off the
     bottom, which the text card covers anyway. */
  .hero__bg {
    background-image: url('../images/site/home-hero-mobile.webp') !important;
    background-position: center top !important;
  }
  .page-hero__bg { background-position: center top !important; }
  .page-hero__bg--new-here   { background-image: url('../images/site/new-here-hero-mobile.webp') !important; }
  .page-hero__bg--about      { background-image: url('../images/site/about-hero-mobile.webp') !important; }
  .page-hero__bg--community  { background-image: url('../images/site/community-hero-mobile.webp') !important; }
  .page-hero__bg--watch      { background-image: url('../images/site/watch-hero-mobile.webp') !important; }
  .page-hero__bg--prayer-care{ background-image: url('../images/site/prayer-care-hero-mobile.webp') !important; }
  .page-hero__bg--giving     { background-image: url('../images/site/placeholder-hero-mobile.webp') !important; }
  .page-hero__bg--contact    { background-image: url('../images/site/contact-hero-mobile.webp') !important; }
  .page-hero__bg--events     { background-image: url('../images/site/events-hero-mobile.webp') !important; }
  .page-hero__bg--volunteer  { background-image: url('../images/site/volunteer-hero-mobile.webp') !important; }
  .page-hero__bg--feedback   { background-image: url('../images/site/feedback-hero-mobile.webp') !important; }
  .page-hero__bg--interfaith { background-image: url('../images/site/interfaith-hero-mobile.webp') !important; }
}

/* Short landscape phones only. Scoped by max-height so it can never match
   a tablet in landscape (iPad landscape height is >= 768px). */
@media (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 100dvh; }
  .page-hero { min-height: 260px; }

  /* A narrow landscape phone (<=767px wide) also matches the portrait phone
     block above, where a tall image band is reserved at the top of the hero.
     That band would swallow a 375px-tall screen, so collapse it back to a
     small offset and re-centre the card. */
  .hero,
  .page-hero {
    padding-top: calc(var(--header-total) + var(--space-4)) !important;
    align-items: center;
  }

  .hero__frost,
  .page-hero__frost {
    zoom: 1;
    margin-top: var(--space-4);
    max-width: 100%;
  }
}

/* Sunday Message styles moved to css/sunday-message.css when the block became
   editor-managed. Only index.html loads that file. */

/* ── Podcast platform links ────────────────────────────────────
   "Listen in…" on the indigo podcast section. White pills rather than the
   translucent treatment used elsewhere on dark backgrounds: these carry brand
   marks in brand colours, and Spotify green or Apple purple on indigo is both
   hard to read and wrong to the eye. A white chip is how every podcast app
   presents these, so it is also the shape people already recognise. */
.podcast-listen {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.podcast-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}

.podcast-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-full, 999px);
  background: #fff;
  color: var(--color-indigo);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.podcast-links a:hover,
.podcast-links a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

/* Fixed box so the four marks sit on one optical line despite differing
   aspect ratios -- the Apple and iHeart glyphs are noticeably wider. */
.podcast-links img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .podcast-links { gap: var(--space-2); }
  .podcast-links a { font-size: 0.8rem; padding: 0.45rem 0.75rem; }
}