/* Shared mobile bars (top slogan + bottom 3-link)
   Loaded on: index.html + all /pages/*.pages.html
   Goals:
   - Pixel-identical visuals to main page bars
   - Safe-area aware
   - Hide legacy .topbar/.bottombar when the shared bars are active
*/

:root {
  --mobile-top-bar-h: 0px;
  --mobile-bottom-bar-h: 0px;
}
/* === Suppress home page's native bars ONLY on mobile when shared bars are active === */
@media (max-width: 768px) {
  html.mb-bars-active header.tb.tb--stack { display: none !important; }   /* top */
  html.mb-bars-active .mobile-fixed-nav   { display: none !important; }   /* bottom */

  /* neutralize the home page's extra padding for its own bottom bar */
  html.mb-bars-active body { padding-bottom: var(--mobile-bottom-bar-h) !important; }
}

/* Remove initial body top padding on mobile so the top bar sits flush */
@media (max-width: 768px) {
  html.mb-bars-active body {
    padding-top: 0 !important;
  }
}

/* Home page added extra space for its own bottom bar; override it */
@media (max-width: 768px) {
  html.mb-bars-active body { padding-bottom: var(--mobile-bottom-bar-h) !important; }
}

/* Activate a flag when JS injects the bars */
html.mb-bars-active body { /* no-op hook; used for scoping overrides below */ }

/* ===== Top bar (sticky) — match home header look ===== */
.mb-topbar {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 6000; /* sits above page content */
  padding-top: env(safe-area-inset-top);
  background: rgba(0,0,0,.90);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.mb-topbar__inner {
  min-height: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 8px;
}

.mb-topbar__slogan {
  font-family: "Aileron", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
  text-align: center;
  /* Start reasonably; JS will auto-shrink further if needed */
  font-size: clamp(16px, 3.6vw, 32px);
  /* Keep it on a single line and avoid clipping */
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;  
  color: #fff;
}

/* ===== Bottom bar (fixed) — match home footer look ===== */
.mb-bottombar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 6000;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(0,0,0,.90);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
}

.mb-bottombar__item {
  appearance: none;
  background: transparent;
  border: 0;
  color: #fff;
  width: 33.3333%;
  min-height: auto;
  padding: 2px 8px;
  font-family: "Aileron", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  font-weight: 700;                 /* match home page footer weight */
  font-size: 0.95rem;               /* match home page footer size */
  letter-spacing: 0.02em;
  text-align: center;
}

.mb-bottombar__item:active { opacity: 0.8; }

.mb-bottombar {
  display: flex;
  gap: 0;
}

/* ===== Reserve space so content doesn't sit under bottom bar ===== */
body { padding-bottom: var(--mobile-bottom-bar-h); }

/* ===== Hidden state (only used during true FS on Capsules) ===== */
.mb-topbar.hidden,
.mb-bottombar.hidden {
  display: none !important;
}

/* ===== Suppress legacy bars when shared bars are active ===== */
html.mb-bars-active .topbar,
html.mb-bars-active .bottombar {
  display: none !important;
}

/* ===== Optional: embedded mode (Event Highlights) =====
   You asked to "only see the new topbar"; if an embedded mode exists that hid legacy .topbar,
   this keeps the new bars visible by default (no extra hide here).
   If, later, you want them hidden for ?embed=1, add:
   .is-embedded .mb-topbar, .is-embedded .mb-bottombar { display: none !important; }
*/