/* ==========================================================================
   Glass theme — the sunrise artwork as one fixed, site-wide background,
   with content on frosted-glass panels. Every page loads this after
   site.css and has <body class="glass">.

   The artwork is never darkened as a whole: the family walking toward the
   sunrise stays in full colour. Darkness is added only where text sits —
   behind the home hero's words, and behind every section after it.

   Contrast, measured against every pixel of the artwork:
   - Text on a 66% navy wash: white ≥ 6.4:1, cream ≥ 5.7:1 and light gold
     ≥ 4.8:1. Small grey text is NOT readable directly on the photo at any
     reasonable tint, so it only ever appears on glass.
   - Glass panels (45% navy + blur) on top of that: muted text ≥ 6.2:1.
   ========================================================================== */

body.glass {
  --glass-bg: rgba(15, 25, 46, 0.45);
  --glass-bg-strong: rgba(11, 20, 38, 0.72);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-blur: blur(16px) saturate(140%);
  --page-tint: rgba(7, 13, 26, 0.66);

  /* Light-theme tokens re-pointed for a dark, photographic page. */
  --ink-900: #f5f1e6;
  --ink-600: #c9d1df;
  --line: rgba(255, 255, 255, 0.16);
  --cream-50: rgba(255, 255, 255, 0.06);
  --cream-100: rgba(255, 255, 255, 0.1);
  --gold-700: #f1dd9f;

  color: var(--ink-900);
  background: #070d1a;
  color-scheme: dark;
}

/* Keep the footer at the bottom of short pages (404, donate) instead of
   floating halfway up the artwork. */
body.glass {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.glass > main {
  flex: 1 0 auto;
}

/* Fixed artwork, painted once behind everything. A pseudo-element is used
   instead of background-attachment: fixed, which iOS Safari ignores. It
   stops at the top of the player bar and is anchored to its bottom edge, so
   the family (bottom-centre of the artwork) is never hidden behind the bar. */
body.glass::before {
  content: '';
  position: fixed;
  inset: 0 0 var(--dock-h);
  z-index: -1;
  pointer-events: none;
  background: url('../img/hero-1920.jpg') 51% 100% / cover no-repeat;
}

@media (max-width: 760px) {
  body.glass::before {
    background-image: url('../img/hero-768.jpg');
  }
}

/* ---------- Darken behind content, not the artwork itself ---------- */
.glass main > :not(.hero) {
  background-color: var(--page-tint);
}

/* ---------- Let the artwork show through every band ---------- */
.glass .section,
.glass .section-alt,
.glass .section-dark,
.glass .stats-band,
.glass .app-band,
.glass .hero,
.glass .page-hero {
  background: transparent;
  border-color: transparent;
}

.glass .page-hero::before,
.glass .app-band::after {
  display: none;
}

/* ---------- Home hero: a full window onto the artwork ----------
   The hero fills the screen between header and player bar. The navy wash
   sits only behind the words (it ends 4rem below them) so the family walking
   toward the sunrise is seen in full colour underneath. */
.glass .hero {
  min-height: calc(100vh - var(--header-h) - var(--dock-h));
  min-height: calc(100svh - var(--header-h) - var(--dock-h));
  align-items: flex-start;
  padding-block: clamp(2.5rem, 7vh, 5rem) 0;
}

.glass .hero::before {
  display: none;
}

/* Soft edge where the darker page begins, so it doesn't cut a hard line
   across the family as the page scrolls up. */
.glass .hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3rem;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(7, 13, 26, 0), var(--page-tint));
}

.glass .hero-grid {
  position: relative;
  align-items: start;
}

.glass .hero-grid::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -100vh;
  bottom: -4rem;
  left: -100vw;
  right: -100vw;
  background: linear-gradient(
    to bottom,
    rgba(7, 13, 26, 0.72) 0,
    rgba(7, 13, 26, 0.66) calc(100% - 4rem),
    rgba(7, 13, 26, 0) 100%
  );
}

.glass .hero h1 {
  font-size: clamp(2.5rem, min(7vw, 8.5vh), 4.75rem);
}

.glass .hero .btn-ghost-light {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* On phones the player bar already shows what's on air, and the card would
   cover the family; the full line-up follows just below. */
@media (max-width: 760px) {
  .glass .hero .onair-card {
    display: none;
  }
}

.glass .page-hero {
  padding-bottom: 1rem;
}

/* ---------- Glass surfaces ---------- */
.glass .card,
.glass .lineup-item,
.glass .tz-note,
.glass .day-tabs,
.glass .schedule-list,
.glass .episode-list,
.glass .segmented,
.glass .search input,
.glass .chip,
.glass .post-nav a,
.glass .empty-state,
.glass .give-card,
.glass .onair-card,
.glass .listen-card,
.glass .prayer-panel,
.glass .stats,
.glass .callout,
.glass .principle,
.glass .questions li,
.glass .phone {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}

.glass .stats {
  padding: 1.75rem 1rem;
  border-radius: var(--radius-lg);
}

.glass .principle {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--radius-lg);
}

.glass .card-link:hover,
.glass .lineup-item.is-current {
  border-color: rgba(241, 221, 159, 0.55);
}

.glass .schedule-row.is-current {
  background: rgba(212, 160, 23, 0.16);
}

.glass .post-card.is-featured {
  background: var(--glass-bg-strong);
}

/* Header & footer: stronger glass so navigation always reads cleanly. */
.glass .site-header {
  background: var(--glass-bg-strong);
  border-bottom-color: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.glass .site-footer {
  background: rgba(7, 13, 26, 0.86);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.glass .player-dock {
  background: rgba(7, 13, 26, 0.82);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* ---------- Text that previously assumed a light page ---------- */
.glass .brand,
.glass .main-nav a[aria-current='page'],
.glass .main-nav a:hover,
.glass .statement,
.glass .mission-rotator,
.glass .stat-value,
.glass .schedule-time,
.glass .upnext-list time,
.glass .contact-card a.contact-value,
.glass .article-body blockquote,
.glass .formula-label {
  color: var(--ink-900);
}

.glass .main-nav a {
  color: var(--ink-600);
}

.glass .tag {
  color: var(--ink-900);
}

.glass .formula-icon {
  background: var(--glass-bg);
  color: var(--gold-400);
}

.glass .nav-toggle {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--ink-900);
}

.glass .btn-outline {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}

.glass .btn-outline:hover {
  background: var(--white);
  color: var(--navy-900);
}

.glass .day-tab[aria-selected='true'],
.glass .segmented button[aria-pressed='true'],
.glass .chip[aria-pressed='true'] {
  background: var(--gold-500);
  color: var(--navy-900);
}

.glass .skeleton {
  background: rgba(255, 255, 255, 0.12);
}

.glass :focus-visible {
  outline-color: var(--gold-400);
}

/* Mobile menu panel needs a solid surface to sit over page content. */
@media (max-width: 1180px) {
  .glass .main-nav {
    background: rgba(7, 13, 26, 0.96);
  }
}

/* ---------- Fallbacks ---------- */

/* Browsers without backdrop-filter get solid, still-readable panels. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.glass {
    --glass-bg: rgba(15, 25, 46, 0.86);
    --glass-bg-strong: rgba(11, 20, 38, 0.94);
  }
}

/* Visitors who ask for less transparency get solid panels. */
@media (prefers-reduced-transparency: reduce) {
  body.glass {
    --glass-bg: rgba(15, 25, 46, 0.92);
    --glass-bg-strong: rgba(11, 20, 38, 0.96);
    --glass-blur: none;
  }
}