/* =============================================================
   Bodholdt Speed Testing — shared site chrome.
   ONE header + footer for every surface: the landing (page-home),
   the React-mirror routes (map/carriers/leaderboards/should-i-switch/
   trips/account/…), the /about page, and the standalone legal shell.

   Loaded site-wide on Site 1 (bodholdt-app.php enqueues it) and inlined
   verbatim into the theme-less legal pages. Palette matches
   src/theme/colors.ts — no new hex introduced.

   The RobotoMono @font-face is injected separately (PHP, plugins_url-
   resolved) so the woff2 paths stay correct under any install layout —
   see bst_app_chrome_font_face_css() in includes/site-chrome.php.
   ============================================================= */

:root {
  --bst-chrome-bg: #0a0a0a;
  --bst-chrome-line: #1c1c1c;
  --bst-chrome-cyan: #00bcf2;
  --bst-chrome-text: #e0e0e0;
  --bst-chrome-muted: #a0a0a0;
  --bst-chrome-dim: #555555;
  --bst-chrome-mono: 'RobotoMono', 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --bst-chrome-max: 1180px;
}

/* When our chrome is present, hide the legacy Elementor/JetThemeCore
   header + footer templates entirely. We render our own instead. */
body.bst-has-chrome #jet-theme-core-header,
body.bst-has-chrome #jet-theme-core-footer {
  display: none !important;
}

/* ── Header ─────────────────────────────────────────────────── */
.bst-chrome {
  background: var(--bst-chrome-bg);
  border-bottom: 1px solid var(--bst-chrome-line);
  font-family: var(--bst-chrome-mono);
  position: relative;
  z-index: 50;
}
.bst-chrome__inner {
  max-width: var(--bst-chrome-max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 18px 28px;
  flex-wrap: wrap;
}

/* Brand — animated 4-bar LogoBars motif + wordmark, links home. */
.bst-chrome__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  border: 0;
  flex: 0 0 auto;
}
/* Real brand logo (WP custom logo). Transparent PNG, floats on the dark bar. */
.bst-chrome__logo {
  display: block;
  height: 28px;
  width: auto;
  flex: 0 0 auto;
}
/* Fallback animated bars motif — only rendered when no custom logo is set. */
.bst-chrome__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}
.bst-chrome__bars i {
  display: block;
  width: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--bst-chrome-cyan);
  transform-origin: bottom;
  animation: bst-chrome-bar 1.8s ease-in-out infinite;
}
.bst-chrome__bars i:nth-child(1) { height: 11px; opacity: 0.5;  animation-delay: 0s;   }
.bst-chrome__bars i:nth-child(2) { height: 18px; opacity: 0.7;  animation-delay: 0.2s; }
.bst-chrome__bars i:nth-child(3) { height: 22px; opacity: 0.9;  animation-delay: 0.4s; }
.bst-chrome__bars i:nth-child(4) { height: 15px; opacity: 0.65; animation-delay: 0.6s; }
@keyframes bst-chrome-bar {
  0%, 100% { transform: scaleY(1);    }
  50%      { transform: scaleY(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .bst-chrome__bars i { animation: none; }
}
.bst-chrome__wordmark {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--bst-chrome-text);
  white-space: nowrap;
  text-transform: uppercase;
}
.bst-chrome__wordmark b { color: var(--bst-chrome-text); font-weight: 700; }
.bst-chrome__wordmark span { color: var(--bst-chrome-cyan); font-weight: 700; }
.bst-chrome__brand:hover .bst-chrome__wordmark b { color: var(--bst-chrome-cyan); }

/* Primary nav */
.bst-chrome__nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: center;
}
.bst-chrome__nav a {
  color: var(--bst-chrome-muted);
  text-decoration: none;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.bst-chrome__nav a:hover,
.bst-chrome__nav a:focus-visible { color: var(--bst-chrome-cyan); }
.bst-chrome__nav a.is-active {
  color: var(--bst-chrome-cyan);
  border-bottom-color: var(--bst-chrome-cyan);
}

/* Account / login pill */
.bst-chrome__account {
  flex: 0 0 auto;
  color: var(--bst-chrome-cyan);
  text-decoration: none;
  border: 1px solid rgba(0, 188, 242, 0.55);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.bst-chrome__account:hover,
.bst-chrome__account:focus-visible { background: rgba(0, 188, 242, 0.12); }

.bst-chrome a:focus-visible,
.bst-chrome-footer a:focus-visible {
  outline: 2px solid var(--bst-chrome-cyan);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .bst-chrome__inner { gap: 12px 20px; }
  .bst-chrome__nav { justify-content: flex-start; gap: 18px; order: 3; flex-basis: 100%; }
  .bst-chrome__account { order: 2; }
}

/* ── Footer ─────────────────────────────────────────────────── */
.bst-chrome-footer {
  background: var(--bst-chrome-bg);
  border-top: 1px solid var(--bst-chrome-line);
  font-family: var(--bst-chrome-mono);
  color: var(--bst-chrome-dim);
}
.bst-chrome-footer__inner {
  max-width: var(--bst-chrome-max);
  margin: 0 auto;
  padding: 40px 24px 48px;
}
.bst-chrome-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 24px;
}
.bst-chrome-footer__links a {
  color: var(--bst-chrome-muted);
  text-decoration: none;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.bst-chrome-footer__links a:hover,
.bst-chrome-footer__links a:focus-visible { color: var(--bst-chrome-cyan); }
.bst-chrome-footer__note {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.7;
  color: #666;
  max-width: 760px;
}
.bst-chrome-footer__note a {
  color: #888;
  text-decoration: underline;
  text-underline-offset: 2px;
  border: 0;
}
.bst-chrome-footer__note a:hover { color: var(--bst-chrome-muted); }
.bst-chrome-footer__copy {
  margin: 18px 0 0;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--bst-chrome-dim);
}

/* ── Prose (used by /about and any long-form content route) ──── */
.bst-prose {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  font-family: var(--bst-chrome-mono);
  color: var(--bst-chrome-text);
  background: var(--bst-chrome-bg);
}
.bst-prose__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--bst-chrome-cyan);
  margin: 0 0 14px;
}
.bst-prose h1 {
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.15;
  color: var(--bst-chrome-text);
  margin: 0 0 8px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--bst-chrome-cyan);
  display: inline-block;
}
.bst-prose h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bst-chrome-cyan);
  margin: 40px 0 14px;
}
.bst-prose p {
  margin: 14px 0;
  font-size: 15px;
  line-height: 1.75;
  color: #cccccc;
}
.bst-prose strong { color: #ffffff; font-weight: 700; }
.bst-prose a { color: var(--bst-chrome-cyan); text-decoration: underline; text-underline-offset: 3px; }