/* ══ IMB shared chrome — glass nav + open footer, matching index.html ══
   Load AFTER css/style.css. Scoped selectors so it wins over legacy .nav/.footer rules. */

.nav-wrap, footer.footer, .live-banner {
  --gold: #A06E06;
  --gold-bright: #E8B54A;
  --ink: #2D2040;
  --ink-dim: rgba(45,32,64,.68);
  --glass: rgba(255,255,255,.55);
  --glass-border: rgba(59,31,110,.14);
  --glass-inset: rgba(255,255,255,.85);
  --glass-shadow: 0 18px 44px rgba(59,31,110,.14);
  --rule: rgba(59,31,110,.22);
  --nav-hover: rgba(59,31,110,.07);
  --nav-active: rgba(59,31,110,.10);
  --give-ink: #241303;
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;
  font-family: var(--font-body);
}

/* ── Nav ── */
.nav-wrap { position: sticky; top: 0; left: 0; right: 0; z-index: 120; }
/* Uniform bar height on every page (child buttons vary ±1px between pages) */
.nav-wrap .nav-inner { min-height: 48px; }
.nav-wrap .nav {
  display: flex; align-items: center; gap: 22px;
  padding: 14px 28px; margin: 0; max-width: none; min-height: 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: none; border-bottom: 1px solid var(--glass-border);
  border-radius: 0;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inset);
  position: relative;
}
.nav-wrap .nav-inner { max-width: 1140px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 22px; }
.nav-wrap .nav-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 1.02rem; text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.nav-wrap .nav-logo img { width: 34px; height: 34px; object-fit: contain; }
.nav-wrap .nav-links {
  display: flex; flex-direction: row; list-style: none; gap: 4px;
  margin: 0 0 0 auto; padding: 0; align-items: center;
  position: static; background: none; border: none; box-shadow: none;
  width: auto; inset: auto;
}
.nav-wrap .nav-links li a { border: none; justify-content: flex-start; min-height: 0; }
.nav-wrap .nav-links a {
  color: var(--ink-dim); font-size: .85rem; font-weight: 500;
  padding: 8px 14px; border-radius: 999px; transition: all .25s ease;
  display: block; text-decoration: none;
}
.nav-wrap .nav-links a:hover { color: var(--ink); background: var(--nav-hover); }
.nav-wrap .nav-links a.nav-active {
  color: var(--ink);
  background: var(--nav-active);
  box-shadow: inset 0 1px 0 var(--glass-inset);
}
.nav-wrap .btn-give {
  background: linear-gradient(180deg, rgba(232,181,74,.95), rgba(200,144,10,.95));
  color: var(--give-ink) !important; font-weight: 700; font-size: .85rem;
  padding: 10px 22px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  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;
  white-space: nowrap; text-decoration: none; flex: 0 0 auto; width: auto;
}
.nav-wrap .btn-give:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 28px rgba(200,144,10,.45); }
.nav-wrap .nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 10px; border-radius: 8px;
}
.nav-wrap .nav-toggle span { width: 22px; height: 2px; background: var(--ink); display: block; }
/* Mid widths: compress links so they fit on one line before collapsing */
@media (max-width: 1300px) {
  .nav-wrap .nav-toggle { display: none; }
  .nav-wrap .nav-inner { gap: 12px; }
  .nav-wrap .nav-links { gap: 0; }
  .nav-wrap .nav-links a { padding: 8px 9px; font-size: .8rem; }
  .nav-wrap .btn-give { padding: 9px 16px; font-size: .8rem; }
}
@media (max-width: 1120px) {
  .nav-wrap .nav-logo span { display: none; }
}
@media (max-width: 960px) {
  .nav-wrap .nav { padding: 12px 16px; }
  .nav-wrap .nav-inner { gap: 10px; min-width: 0; }
  .nav-wrap .nav-logo { flex: 1 1 auto; min-width: 0; font-size: 1.18rem; gap: 12px; }
  .nav-wrap .nav-logo img { width: 42px; height: 42px; }
  .nav-wrap .nav-logo span { display: inline; white-space: nowrap; }
  .nav-wrap .btn-give { margin-left: auto; padding: 9px 16px; font-size: .8rem; flex: 0 0 auto; }
  .nav-wrap .nav-toggle { display: flex; flex: 0 0 auto; }
  .nav-wrap .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #F3EFF9;
    border-bottom: 1px solid var(--glass-border);
    padding: 6px 14px 14px;
  }
  .nav-wrap .nav-links li { border-bottom: 1px solid var(--glass-border); }
  .nav-wrap .nav-links li:last-child { border-bottom: none; }
  .nav-wrap .nav-links li a { font-size: 1.35rem; font-weight: 600; min-height: 72px; display: flex; align-items: center; text-align: left; padding: 20px 22px; border-radius: 10px; }
  .nav-wrap .nav-links li a.nav-active { box-shadow: none; }
  .nav-wrap .nav-toggle { padding: 18px; }
  .nav-wrap .nav-toggle span { width: 32px; height: 4px; }
  .nav-wrap .nav-links.open { display: flex; }
}
/* Narrow: full name won't fit — swap to "IMB" (never truncate/ellipsize) */
@media (max-width: 560px) {
  .nav-wrap .nav-logo span { font-size: 0; }
  .nav-wrap .nav-logo span::after { content: "IMB"; font-size: 1.18rem; }
}
@media (prefers-color-scheme: dark) and (max-width: 960px) {
  .nav-wrap .nav-links { background: #221838; border-bottom-color: rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
}

/* ── Mobile: CTA pills go full-width, stacked ── */
@media (max-width: 560px) {
  .hero-ctas, .inv-cta, .social-ctas, [data-about="links"] { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .hero-ctas > *, .inv-cta > *, .social-ctas > *, [data-about="links"] > * { width: 100%; text-align: center; }
}

/* ── Footer ── */
/* Anchor footer to viewport bottom on short pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > * { flex-shrink: 0; }
footer.footer { margin-top: auto; }
footer.footer {
  max-width: 1140px; margin: auto auto 0;
  padding: 56px 28px 36px; position: relative;
  background: none; color: var(--ink);
}
footer.footer::before {
  content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1px;
  background: linear-gradient(90deg, var(--rule), transparent 70%);
}
footer.footer .footer-top { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start; justify-content: space-between; }
footer.footer .footer-statement { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.7rem); margin: 0; }
footer.footer .footer-statement .fs-white { color: var(--ink); }
footer.footer .footer-statement .fs-gold { color: var(--gold); }
footer.footer .footer-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: flex-end; max-width: 520px; padding-top: 8px; }
footer.footer .footer-nav a { font-size: .8rem; color: var(--ink-dim); text-decoration: none; }
footer.footer .footer-nav a:hover { color: var(--ink); }
footer.footer .footer-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  border-top: 1px solid var(--rule); margin-top: 34px; padding-top: 18px;
  font-size: .75rem; color: var(--ink-dim);
}
footer.footer .footer-bottom p { margin: 0; font-size: .75rem; color: var(--ink-dim); }
footer.footer .footer-bottom a { color: var(--ink-dim); text-decoration: none; }
footer.footer .footer-bottom a:hover { color: var(--ink); }
@media (max-width: 900px) {
  footer.footer .footer-nav { justify-content: flex-start; }
}

/* ── Dark mode: light ink for chrome on dark ambient bg ── */
@media (prefers-color-scheme: dark) {
  .nav-wrap, footer.footer, .live-banner {
    --gold: #E8B54A;
    --ink: #F0EAF8;
    --ink-dim: rgba(240,234,248,.72);
    --glass: rgba(30,18,52,.55);
    --glass-border: rgba(255,255,255,.12);
    --glass-inset: rgba(255,255,255,.10);
    --glass-shadow: 0 18px 44px rgba(0,0,0,.4);
    --rule: rgba(255,255,255,.18);
    --nav-hover: rgba(255,255,255,.07);
    --nav-active: rgba(255,255,255,.10);
  }
  /* Deep-purple logo blends into the dark nav — render it as a translucent frosted-white mark */
  .nav-wrap .nav-logo img {
    filter: brightness(0) invert(1) opacity(.72) drop-shadow(0 0 6px rgba(255,255,255,.25));
  }
}

/* ── Page reveal fade (js/reveal.js) ── */
html.fade-wait body>:not(.nav-wrap,#live-banner,.page,script),html.fade-wait .page>:not(.nav-wrap,#live-banner,script){opacity:0}
html.fade-wait.fade-ready body>:not(.nav-wrap,#live-banner,.page,script),html.fade-wait.fade-ready .page>:not(.nav-wrap,#live-banner,script){opacity:1;transition:opacity 1s ease}

/* ── Live banner v2: gold glow, pinned above nav ── */
#live-banner{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;transform:none !important;z-index:2000;display:flex;align-items:center;gap:14px;min-height:60px;padding:0 14px 0 22px;border:none;border-radius:0;max-width:none;font-size:.98rem;font-weight:700;color:#2b1a00;background:#E8B54A}
#live-banner.hidden{display:none}
/* Glow + shimmer live on a layer BEHIND the content so the text never pulses */
#live-banner::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#E8B54A,#F6D584,#E8B54A);background-size:200% 100%;box-shadow:0 2px 16px rgba(232,181,74,.5);animation:imbBannerGlow 3.4s ease-in-out infinite}
#live-banner>*{position:relative;z-index:1}
@keyframes imbBannerGlow{0%,100%{box-shadow:0 2px 12px rgba(232,181,74,.4)}50%{box-shadow:0 6px 34px rgba(232,181,74,.95)}}
#live-banner .live-dot{width:11px;height:11px;border-radius:50%;background:#E53935;flex:0 0 auto;animation:imbBannerBlink 1.2s steps(2,start) infinite}
@keyframes imbBannerBlink{50%{opacity:.15}}
#live-banner .banner-track{flex:1 1 auto;min-width:0;display:flex;overflow:hidden}
#live-banner .banner-track.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
#live-banner .banner-msg{white-space:nowrap;flex:0 0 auto;padding-right:70px}
#live-banner .banner-track:not(.marquee) .banner-msg{padding-right:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
#live-banner .banner-track.marquee .banner-msg{animation:imbBannerScroll 16s linear infinite}
@keyframes imbBannerScroll{to{transform:translateX(-100%)}}
#live-banner a#banner-link{color:#2b1a00;font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;flex:0 0 auto}
#live-banner .banner-close{flex:0 0 auto;margin:0 6px 0 2px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.14);border:none;border-radius:50%;color:#2b1a00;font-size:.85rem;line-height:1;cursor:pointer;opacity:.85;padding:0}
#live-banner .banner-close:hover{opacity:1;background:rgba(0,0,0,.24)}
body.has-live-banner{padding-top:60px}
body.has-live-banner .nav-wrap{top:60px !important}
body.has-live-banner .prog-subnav{top:133px}
/* ── Live-now event: glow only on the date card ── */
.event-card.ev-live-now .ev-date-box{animation:imbCardGlow 2.8s ease-in-out infinite}
@keyframes imbCardGlow{0%,100%{box-shadow:0 0 0 1px rgba(232,181,74,.45),0 0 10px rgba(232,181,74,.3)}50%{box-shadow:0 0 0 2px rgba(232,181,74,.8),0 0 26px rgba(232,181,74,.6)}}
/* Livestream pill — uniform size with the other tags on every page */
.ev-live-link{font-size:.72rem !important;font-weight:700;padding:3px 10px;border-radius:100px;background:#FDE8E8;color:#C0392B;text-decoration:none}
.ev-live-link:hover{background:#C0392B;color:#fff}
#events-preview-list .ev-live-link,#full-events-list .ev-live-link{font-size:.68rem !important}
.ev-live-now .ev-live-link{background:#C0392B;color:#fff}
.ev-live-now .ev-live-link:hover{background:#a52f22}
@media (prefers-reduced-motion:reduce){#live-banner::before,#live-banner .live-dot,#live-banner .banner-msg,.event-card.ev-live-now .ev-date-box{animation:none}}