/* ─────────────────────────────────────────────────────────────────────────
   chrome.css — the ONE source of truth for site chrome (header, dropdowns,
   mobile drawer, footer skin).

   Every page still carries its own legacy chrome <style> block; this file is
   linked LAST in <head>, so equal-specificity rules here win by source order.
   That is the entire migration strategy: markup stays where it is (the header
   block is byte-identical on 25 of 27 pages), footers keep their per-page,
   silo-tuned link sets, and ONLY the skin is centralized. Restyling the site
   again = editing this file, nothing else.

   Tokens are duplicated here (not var(--…) from page styles) because a few
   pages define no :root tokens; chrome must not depend on the page it lands on.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --ch-dk: #080c16; --ch-dk2: #0e1420; --ch-dk3: #131b2e;
  --ch-db1: #1c2a42; --ch-db2: #243350;
  --ch-text: #edf1f9; --ch-t2: #7f96be; --ch-t3: #3f5278;
  --ch-or: #F97316; --ch-or2: #e86209;
  --ch-orglow: rgba(249,115,22,.22); --ch-ordim: rgba(249,115,22,.09);
  --ch-gold: #f5b840; --ch-green: #34d399;
}

/* ── Header ── */
html header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,12,22,.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ch-db1);
  box-shadow: none; /* legacy pages set one — kill it explicitly */
}
html .nav-menu > li > a {
  color: var(--ch-t2); font-weight: 600;
}
html .nav-menu > li > a:hover { background: rgba(255,255,255,.05); color: var(--ch-text); }
html .dropdown-toggle { color: var(--ch-t2); font-weight: 600; }
html .dropdown:hover > .dropdown-toggle,
html .dropdown.open > .dropdown-toggle { background: rgba(255,255,255,.05); color: var(--ch-text); }

html .dropdown-menu-inner {
  background: var(--ch-dk3);
  border: 1px solid var(--ch-db2);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
html .dropdown-menu li a { color: var(--ch-text); font-weight: 600; }
html .dropdown-menu li a:hover { background: rgba(255,255,255,.05); color: var(--ch-text); }
html .dropdown-menu .divider { background: var(--ch-db1); }
html .dropdown-menu .menu-label {
  font-family: 'JetBrains Mono', monospace;
  color: var(--ch-t3); font-weight: 600; letter-spacing: .14em;
}

/* ── Auth buttons ── */
html .nav-signin { color: var(--ch-t2); font-weight: 600; }
html .nav-signin:hover { background: rgba(255,255,255,.05); color: var(--ch-text); }
/* The signup button carries an inline navy background on legacy pages —
   an inline style only loses to !important. */
html #nav-btn-signup { background: var(--ch-or) !important; }
html #nav-btn-signup:hover { background: var(--ch-or2) !important; box-shadow: 0 4px 16px var(--ch-orglow); }
html .nav-dashboard { background: var(--ch-or); font-weight: 700; box-shadow: none; }
html .nav-dashboard:hover { background: var(--ch-or2) !important; box-shadow: 0 4px 16px var(--ch-orglow); }
html .nav-pricing { color: var(--ch-gold) !important; }
html .nav-pricing:hover { background: rgba(255,255,255,.06) !important; color: var(--ch-gold) !important; }
html .nav-cta-pricing { background: var(--ch-or); font-weight: 700; }
html .nav-cta-pricing:hover { background: var(--ch-or2) !important; box-shadow: 0 4px 16px var(--ch-orglow); }

/* ── Hamburger ── */
html .nav-hamburger:hover { background: rgba(255,255,255,.06); }
html .nav-hamburger span { background: var(--ch-text); }

/* ── Mobile drawer ── */
html .mobile-nav-overlay { background: rgba(0,0,0,.55); }
html .mobile-nav {
  background: var(--ch-dk);
  border-left: 1px solid var(--ch-db1);
  box-shadow: -8px 0 48px rgba(0,0,0,.5);
}
html .mobile-nav-header { border-bottom: 1px solid var(--ch-db1); }
html .mobile-nav-close { color: var(--ch-t2); }
html .mobile-nav-close:hover { background: rgba(255,255,255,.06); }
html .mobile-nav-label {
  font-family: 'JetBrains Mono', monospace;
  color: var(--ch-t3); font-weight: 600; letter-spacing: .14em;
}
html .mobile-nav-links a { color: var(--ch-text); font-weight: 600; }
html .mobile-nav-links a:hover { background: rgba(255,255,255,.05); color: var(--ch-text); }
html .mobile-nav-links a.active { background: var(--ch-ordim); color: var(--ch-or); }
html .mobile-nav-links .m-pricing { color: var(--ch-gold) !important; }
html .mobile-nav-divider { background: var(--ch-db1); }
html .mobile-btn-signin { color: var(--ch-t2); border: 1px solid var(--ch-db2); font-weight: 600; }
html .mobile-btn-signin:hover { background: rgba(255,255,255,.05); }
html .mobile-btn-signup { background: var(--ch-or); font-weight: 700; }
html .mobile-btn-signup:hover { background: var(--ch-or2); }
html .mobile-btn-dashboard { background: var(--ch-or); font-weight: 700; }
html .mobile-btn-dashboard:hover { background: var(--ch-or2); }

/* ── Footer skin (markup + link sets stay per-page: they carry the silo's
      internal-link graph and MUST NOT be unified) ── */
html footer {
  background: var(--ch-dk2);
  border-top: 1px solid var(--ch-db1);
  color: var(--ch-t2);
}
html .footer-brand p { color: var(--ch-t2); }
html .footer-brand .footer-logo { color: var(--ch-text); }
html .footer-badge {
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.25);
  color: var(--ch-green);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px;
}
html .footer-col h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; color: var(--ch-t2);
  letter-spacing: .14em;
}
html .footer-col ul li a { color: var(--ch-t2); }
html .footer-col ul li a:hover { color: var(--ch-text); }
html .footer-bottom { border-top: 1px solid var(--ch-db1); }
html .footer-bottom p { color: var(--ch-t2); }
html .footer-bottom a { color: var(--ch-t2); }
html .footer-bottom a:hover { color: var(--ch-text); }
html .footer-hub { color: var(--ch-t2) !important; }
html .footer-hub:hover { color: var(--ch-or) !important; }

/* Legacy .footer-content/.footer-section variants (index.css era) */
html .footer-section h4 { color: var(--ch-text); }
html .footer-section a { color: var(--ch-t2); }
html .footer-section a:hover { color: var(--ch-text); }
