/* ============================================================
   IMB — LIQUID GLASS THEME LAYER
   Loads AFTER style.css / home.css and re-skins the site.
   Light glass by default; mock-style dark via prefers-color-scheme.
   ============================================================ */

:root {
  --g-ink: #2D2040;
  --g-ink-dim: rgba(45,32,64,.68);
  --g-page: #F3EFF9;
  --g-glass: rgba(255,255,255,.55);
  --g-border: rgba(59,31,110,.14);
  --g-inset: rgba(255,255,255,.85);
  --g-shadow: 0 18px 44px rgba(59,31,110,.14);
  --g-rule: rgba(59,31,110,.22);
  --g-hover: rgba(59,31,110,.07);
  --g-active: rgba(59,31,110,.10);
  --g-gold: #C8900A;
  --g-gold-bright: #E8B54A;
  --g-blob-a: #CBB7EC;
  --g-blob-b: #F2DCA8;
  --g-amb-1: rgba(122,82,190,.20);
  --g-amb-2: rgba(200,144,10,.10);
  --g-amb-3: rgba(90,52,145,.16);
  --g-radius: 22px;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Remap legacy brand tokens for legibility on the dark ambient bg */
    --purple: #C9B6EF;
    --purple-mid: #B9A3E3;
    --purple-light: rgba(255,255,255,.10);
    --g-ink: #F2EEF8;
    --g-ink-dim: rgba(242,238,248,.72);
    --g-page: #150a2e;
    --g-glass: rgba(255,255,255,.07);
    --g-border: rgba(255,255,255,.18);
    --g-inset: rgba(255,255,255,.22);
    --g-shadow: 0 20px 50px rgba(5,0,20,.45);
    --g-rule: rgba(255,255,255,.25);
    --g-hover: rgba(255,255,255,.09);
    --g-active: rgba(255,255,255,.13);
    --g-gold: #E8B54A;
    --g-blob-a: #4a2080;
    --g-blob-b: #7a5200;
    --g-amb-1: rgba(90,52,145,.55);
    --g-amb-2: rgba(200,144,10,.22);
    --g-amb-3: rgba(59,31,110,.65);
  }
}

/* ── AMBIENT BACKGROUND ─────────────────────────────────── */
html {
  background: var(--g-page);
}
body {
  color: var(--g-ink);
  background:
    radial-gradient(900px 700px at 12% -10%, var(--g-amb-1), transparent 65%),
    radial-gradient(1100px 800px at 95% 15%, var(--g-amb-2), transparent 60%),
    radial-gradient(800px 900px at 50% 110%, var(--g-amb-3), transparent 65%),
    var(--g-page);
  background-attachment: fixed;
}
body::before, body::after {
  content: "";
  position: fixed; z-index: -1; border-radius: 50%;
  filter: blur(90px); opacity: .45; pointer-events: none;
  animation: g-drift 26s ease-in-out infinite alternate;
}
body::before { width: 520px; height: 520px; left: -140px; top: 18%; background: var(--g-blob-a); }
body::after  { width: 420px; height: 420px; right: -120px; top: 46%; background: var(--g-blob-b); animation-delay: -9s; }
@keyframes g-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(60px,-50px,0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }

/* Homepage sheet-music backdrop is replaced by the ambient bg */
.sheet-music-bg { display: none; }

/* ── GLASS SURFACE PRIMITIVE ────────────────────────────── */
.site-header,
.stats-bar .stat,
.prog-card-new,
.program-card,
.prog-section-head,
.director-card,
.resource-card,
.info-card,
.involve-card,
.donate-card,
.calendar-shell,
.event-hero-card {
  background: var(--g-glass);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-inset);
}

/* ── NAV — full-width squared glass bar ─────────────────── */
.site-header {
  border-left: none; border-right: none; border-top: none;
  border-bottom: 1px solid var(--g-border);
  border-radius: 0;
}
.nav-logo-text { color: var(--g-ink); }
.nav-links a {
  color: var(--g-ink-dim);
  border-radius: 999px;
  transition: all .25s ease;
}
.nav-links a:hover,
.nav-links a.active,
.nav-links a.nav-active {
  color: var(--g-ink);
  background: var(--g-hover);
}
.nav-links a.nav-active {
  background: var(--g-active);
  box-shadow: inset 0 1px 0 var(--g-inset);
}
.nav-toggle span { background: var(--g-ink); }
.nav-toggle:hover { background: var(--g-hover); }
@media (max-width: 900px) {
  .nav-links.open {
    background: var(--g-page);
    border: 1px solid var(--g-border);
  }
}

/* ── BUTTONS — glowing gold pills, glass ghosts ─────────── */
.btn { border-radius: 999px; }
.btn-gold, .nav-give-now {
  background: linear-gradient(180deg, rgba(232,181,74,.95), rgba(200,144,10,.95)) !important;
  color: #241303 !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 22px rgba(200,144,10,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-gold:hover, .nav-give-now:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 28px rgba(200,144,10,.45);
}
.btn-outline-white, .btn-outline-dark, .btn-primary {
  background: var(--g-glass);
  color: var(--g-ink);
  border: 1px solid var(--g-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 var(--g-inset);
}
.btn-outline-white:hover, .btn-outline-dark:hover, .btn-primary:hover {
  background: var(--g-active);
  color: var(--g-ink);
  border-color: var(--g-border);
}

/* ── HOMEPAGE HERO — open on ambient ────────────────────── */
.hero-bg, .hero-overlay, .hero-placeholder-img { display: none; }
.hero { min-height: auto; padding: 110px 0 60px; }
.hero-headline, .hero-org-name { color: var(--g-ink); }
.hero-headline em { color: var(--g-gold); }
.hero-sub { color: var(--g-ink-dim); }
.hero-label { color: var(--g-ink-dim); }
.hero-scroll-hint { display: none; }

/* Generic page heroes / section headers on interior pages — open, no purple slab */
.page-hero, .event-hero { background: transparent; }
.page-hero { padding: 56px 0 16px; }
.page-hero p { margin-top: 10px; }
.page-hero + .section-pad, .page-hero + section.section-pad { padding-top: 12px; }
.donate-hero { padding: 40px 0 32px; }
.page-hero h1, .event-hero h1 { color: var(--g-ink); }
.page-hero p { color: var(--g-ink-dim); }
.page-hero .section-eyebrow { color: var(--g-gold); }
.bg-purple { background: transparent; color: var(--g-ink); }
.bg-purple h2, .bg-purple .stat-number { color: var(--g-ink); }
.bg-purple p { color: var(--g-ink-dim); }

/* ── SECTION BACKGROUNDS → transparent, ambient shows ───── */
.bg-off-white, .bg-white, .bg-cream, .bg-gold-light,
.prog-section-alt, section.section-pad { background: transparent; }
/* Open theme: no colored slabs to separate, so stacked 96px pads feel disconnected */
section.section-pad { padding: 48px 0; }

/* ── STATS BAR → glass pills ────────────────────────────── */
.stats-bar { background: transparent; padding: 24px 0 56px; }
.stats-bar .stat {
  border-radius: var(--g-radius);
  border-right-width: 1px;
  padding: 26px 20px;
}
.hero-stat-number, .stat-number { color: var(--g-gold); }
.stat-label { color: var(--g-ink-dim); }

/* ── CARDS ──────────────────────────────────────────────── */
.prog-card-new, .program-card, .prog-section-head,
.director-card, .resource-card, .info-card, .involve-card, .donate-card {
  border-radius: var(--g-radius);
  overflow: hidden;
}
.prog-card-new:hover, .program-card:hover {
  box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-inset);
}
.prog-section-head { box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-inset); }
.prog-section-head-body { background: transparent; }

/* Program header tints — translucent glass tints (placeholder
   until real card backgrounds are chosen) */
.prog-header-band       { background: linear-gradient(135deg, rgba(90,52,145,.45), rgba(90,52,145,.18)); }
.prog-header-orchestra  { background: linear-gradient(135deg, rgba(200,144,10,.38), rgba(200,144,10,.14)); }
.prog-header-vocal      { background: linear-gradient(135deg, rgba(128,26,110,.38), rgba(128,26,110,.14)); }
.prog-header-theater,
.prog-header-elementary { background: linear-gradient(135deg, rgba(26,80,128,.38), rgba(26,80,128,.14)); }
.prog-card-name-big, .prog-card-header-inner { color: var(--g-ink); }
.prog-card-ensembles { color: var(--g-ink-dim); }
.prog-card-header::after { color: rgba(255,255,255,.10); }

/* Event rows */
.event-row, .event-card, .event-card:first-child, .event-row:last-child {
  border-color: var(--g-rule);
}
.event-name { color: var(--g-ink); }
.event-sub, .event-time, .event-location { color: var(--g-ink-dim); }
a.event-card-link:hover { background: var(--g-hover); }

/* Sticky program subnav */
.prog-subnav {
  background: var(--g-glass);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--g-border);
  box-shadow: none;
}
.prog-subnav-link { color: var(--g-ink-dim); }
.prog-subnav-link:hover, .prog-subnav-link.active { color: var(--g-ink); }
.prog-subnav-link.active { border-bottom-color: var(--g-gold); }

/* ── TEXT COLOR MAPPING ─────────────────────────────────── */
h1, h2, h3, h4 { color: var(--g-ink); }
/* Emphasized words in display headings → gold (per mock) */
h1 em, h2 em, .section-title em, .footer-statement em { color: var(--g-gold); }
.section-eyebrow { color: var(--g-gold); }
p, .prog-section-sub, .prog-level-note { color: var(--g-ink-dim); }

/* Director contact cards — soft brand-gradient glass + distinguished gold monogram */
.director-card {
  background: linear-gradient(135deg, rgba(122,82,190,.16), rgba(200,144,10,.12)), var(--g-glass);
  border: 1px solid var(--g-border);
}
.director-card:hover { background: linear-gradient(135deg, rgba(122,82,190,.24), rgba(200,144,10,.18)), var(--g-glass); }
.director-avatar {
  background: radial-gradient(circle at 30% 25%, #533579, #32204E 75%);
  color: #F5C95E;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 12px rgba(232,181,74,.14), 0 0 0 1px rgba(232,181,74,.55), 0 0 14px rgba(232,181,74,.28);
}
.director-mail { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--g-ink-dim); }
.director-mail svg { width: 15px; height: 15px; opacity: .75; }
.director-card:hover .director-mail { color: var(--g-gold); }
.director-card:hover .director-mail svg { opacity: 1; }
.director-name { color: var(--g-ink); }
.director-role { color: var(--g-ink-dim); }

/* ── FOOTER — open, no dark slab ────────────────────────── */
.site-footer {
  background: transparent;
  color: var(--g-ink-dim);
  position: relative;
  margin-top: 40px;
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1px;
  background: linear-gradient(90deg, var(--g-rule), transparent 70%);
}
.site-footer .fs-white, .footer-brand-name { color: var(--g-ink); }
.site-footer .fs-gold { color: var(--g-gold); }
.footer-mission, .footer-contact li, .footer-col ul a, .footer-col-title { color: var(--g-ink-dim); }
.footer-col ul a:hover { color: var(--g-ink); }
.footer-social a {
  background: var(--g-glass);
  border: 1px solid var(--g-border);
}
.footer-social a:hover { background: var(--g-active); }
.footer-social a svg { fill: var(--g-ink); }
.footer-bottom { border-top: 1px solid var(--g-rule); }
.footer-bottom, .footer-bottom a { color: var(--g-ink-dim); }

/* ── MOBILE RHYTHM ──────────────────────────────────────── */
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  section.section-pad { padding: 34px 0; }
  .page-hero { padding: 36px 0 6px; }
  .page-hero p { font-size: .98rem; }
  body::before, body::after { display: none; }
}