/* header.css — apex homepage top-bar, ported into the detector app shell.
   PRESENTATIONAL. Ported from D:\Resolve Research\website\index.html
   (<header class="bar"> + mobile drawer) and remapped from the apex CSS
   token names to the app's tokens.css variables:
     apex        → app
     --accent    → --gold
     --accent-ink→ --on-gold
     --text      → --text-primary
     --text-2    → --text-secondary
     --text-3    → --text-tertiary
     --line      → --border
     --line-soft → --border
     --surface   → --bg-raised
     --surface-2 → --bg-inset
     --bg        → --bg-page
     --r         → --radius-card
     --r-sm      → --radius-button
     --mono      → --font-mono

   NAMESPACE NOTE: the app's shell.css / shell.js already own `.hamburger`,
   `.mobile-drawer`, `.drawer-backdrop`, `.drawer-panel`, `.drawer-close`
   and id="mobile-drawer" for the DETECTOR sidebar drawer. To avoid duplicate
   ids + double-wiring that would break the existing drawer, the apex mega-menu
   drawer + its trigger are namespaced here: `.bar-burger`, `.apex-drawer`,
   `.apex-drawer-backdrop`, `.apex-drawer-panel`, `.apex-drawer-close`, and
   `data-apexdrawer-open` / `data-apexdrawer-close` hooks. */

/* ─── top bar ───────────────────────────────────────────────────
   COLLISION RESET: base.css defines a `.bar` SCORE-BAR
   (height:5px; border-radius:4px; background:var(--bg-inset);
    overflow:hidden; margin-bottom:5px) that also matches
   <header class="bar">. Scope to header.bar (element+class) AND
   explicitly neutralize every property the score-bar sets, or the
   header collapses to a 5px invisible strip. */
header.bar {
  height: auto;
  overflow: visible;
  border-radius: 0;
  margin: 0;
  /* header layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-page) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
}

header.bar .bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
header.bar .brand { display: flex; align-items: center; text-decoration: none; }
header.bar .brand-logo {
  height: 40px; width: auto; display: block;
  transition: transform .15s ease, filter .15s ease;
}
header.bar .brand:hover .brand-logo { transform: scale(1.03); filter: brightness(1.05); }

/* theme toggle sits inline right of the logo — override theme.css's
   fixed top-right floating default. */
header.bar .bar-left .theme-toggle { position: static; }

/* ─── nav ────────────────────────────────────────────────────── */
header.bar .nav { display: flex; gap: 4px; align-items: center; }
header.bar .nav-item { position: relative; }
header.bar .nav-btn {
  display: flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14px; color: var(--text-secondary);
  background: none; border: 0; cursor: pointer;
  padding: 9px 13px; border-radius: var(--radius-button);
  transition: color .15s, background .15s;
}
header.bar .nav-btn:hover,
header.bar .nav-item.open .nav-btn { color: var(--text-primary); background: var(--bg-raised); }
header.bar .nav-btn i { font-size: 13px; opacity: .6; transition: transform .18s; }
header.bar .nav-item.open .nav-btn i { transform: rotate(180deg); }

header.bar .nav-item.current > .nav-btn { color: var(--gold); }
header.bar .nav-item.current > .nav-btn:hover { color: var(--gold); background: var(--bg-raised); }

/* account link (replaces apex's log in / sign up controls) */
header.bar .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14px; color: var(--text-secondary);
  padding: 9px 13px; border-radius: var(--radius-button);
  transition: color .15s, background .15s;
}
header.bar .nav-link:hover { color: var(--text-primary); background: var(--bg-raised); }
header.bar .nav-divider {
  width: 1px; height: 20px; background: var(--border); margin: 0 8px;
}

/* ─── pricing pill (bar-left) — deepdive wrapper parity ──────────
   Ported from C:\DeepDive\wrapper\index.html inline <style> (.pricing-pill),
   apex token names remapped to app tokens. */
header.bar .pricing-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary);
  padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 999px;
  transition: color .15s, border-color .15s, background .15s;
}
header.bar .pricing-pill:hover { color: var(--gold); border-color: var(--gold); background: var(--bg-raised); }
header.bar .pricing-pill i { font-size: 13px; color: var(--text-tertiary); }
header.bar .pricing-pill:hover i { color: var(--gold); }

/* ─── center tool tabs (detector / deepdive / osint-with-hover) ──
   Ported from the deepdive wrapper inline <style> (.nav-center,
   .nav-btn-link, .nav-item-hover). Hover-open osint menu is pure CSS,
   mirroring the deepdive wrapper (its JS wires only `.nav > .nav-item`). */
header.bar .nav-center { display: flex; gap: 7px; align-items: center; }
header.bar .nav-btn-link {
  display: flex; align-items: center;
  font: inherit; font-size: 15px; color: var(--text-secondary);
  padding: 9px 12px; border-radius: var(--radius-button);
  text-decoration: none; cursor: pointer;
  transition: color .15s, background .15s;
}
header.bar .nav-btn-link:hover,
header.bar .nav-item-hover:hover .nav-btn-link {
  color: var(--text-primary); background: var(--bg-raised);
}
header.bar .nav-center .menu {
  left: 50%; right: auto;
  transform: translateX(-50%) translateY(-6px);
}
header.bar .nav-item-hover:hover > .menu,
header.bar .nav-item-hover:focus-within > .menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ─── dropdown menus ─────────────────────────────────────────── */
header.bar .menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 228px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 6px;
  border: 1px solid var(--border);   /* was a 60% black drop shadow */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 60;
}
header.bar .nav-item.open .menu { opacity: 1; visibility: visible; transform: translateY(0); }
header.bar .menu a.pga-sub { padding-left: 42px; font-size: 12.5px; opacity: .82; }
header.bar .menu a.pga-sub::before { content: '↳'; opacity: .5; margin-right: 6px; font-family: var(--font-mono); }
header.bar .menu a.pga-sub:hover { opacity: 1; }
header.bar .menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius-button);
  font-size: 14px; color: var(--text-secondary);
  transition: color .12s, background .12s;
}
header.bar .menu a:hover { color: var(--text-primary); background: var(--bg-inset); }
header.bar .menu a i { font-size: 15px; color: var(--text-tertiary); width: 16px; text-align: center; }
header.bar .menu a:hover i { color: var(--gold); }
header.bar .menu a.current { color: var(--gold); }
header.bar .menu a.current i { color: var(--gold); }
header.bar .menu .sep { height: 1px; background: var(--border); margin: 6px 4px; }
header.bar .menu .group-label {
  display: block;
  padding: 6px 11px 4px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-tertiary);
}

/* nested submenu flyouts (hockey / golf / futbol > club) — pure CSS hover */
header.bar .menu .has-sub { position: relative; }
header.bar .menu .has-sub > .sub-trigger {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius-button);
  font-size: 14px; color: var(--text-secondary); cursor: default;
  transition: color .12s, background .12s;
}
header.bar .menu .has-sub > .sub-trigger > i { font-size: 15px; color: var(--text-tertiary); width: 16px; text-align: center; }
header.bar .menu .has-sub > .sub-trigger > .sub-caret { margin-left: auto; width: auto; font-size: 12px; opacity: .7; }
header.bar .menu .has-sub:hover > .sub-trigger,
header.bar .menu .has-sub:focus-within > .sub-trigger { color: var(--text-primary); background: var(--bg-inset); }
header.bar .menu .has-sub:hover > .sub-trigger > i,
header.bar .menu .has-sub:focus-within > .sub-trigger > i { color: var(--gold); }
header.bar .menu .submenu {
  position: absolute; top: -7px; left: 100%;
  min-width: 148px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 6px;
  border: 1px solid var(--border);   /* was a 60% black drop shadow */
  opacity: 0; visibility: hidden; transform: translateX(-4px);
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 2;
}
header.bar .menu .has-sub:hover > .submenu,
header.bar .menu .has-sub:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateX(0); }
header.bar .menu .submenu .has-sub > .submenu { left: auto; right: 100%; transform: translateX(4px); }
header.bar .menu .submenu .has-sub:hover > .submenu,
header.bar .menu .submenu .has-sub:focus-within > .submenu { transform: translateX(0); }

/* ─── focus rings ────────────────────────────────────────────── */
header.bar .nav-btn:focus-visible,
header.bar .nav-link:focus-visible,
header.bar .brand:focus-visible,
header.bar a:focus-visible,
.bar-burger:focus-visible,
.apex-drawer a:focus-visible,
.apex-drawer button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ─── mobile hamburger (namespaced .bar-burger — NOT the app's .hamburger) ─ */
.bar-burger {
  display: none; background: transparent; border: 0; color: var(--text-primary);
  width: 44px; height: 44px; cursor: pointer;
  align-items: center; justify-content: center;
  border-radius: var(--radius-button);
  transition: color .15s, background .15s;
}
.bar-burger:hover, .bar-burger:focus-visible { color: var(--gold); background: var(--bg-raised); }
.bar-burger i { font-size: 24px; }

/* ─── mobile drawer (namespaced .apex-drawer) ────────────────── */
.apex-drawer { position: fixed; inset: 0; z-index: 120; pointer-events: none; visibility: hidden; }
.apex-drawer[aria-hidden="false"] { pointer-events: auto; visibility: visible; }

.apex-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0; transition: opacity .25s;
}
.apex-drawer[aria-hidden="false"] .apex-drawer-backdrop { opacity: 1; }

.apex-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  background: var(--bg-page);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
  border-left: 1px solid var(--border);   /* was a 50% black drop shadow */
}
.apex-drawer[aria-hidden="false"] .apex-drawer-panel { transform: translateX(0); }

.apex-drawer .drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.apex-drawer .drawer-logo { height: 36px; width: auto; display: block; }
.apex-drawer-close {
  background: transparent; border: 0; color: var(--text-secondary);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--radius-button);
  transition: color .15s, background .15s;
}
.apex-drawer-close i { font-size: 22px; }
.apex-drawer-close:hover, .apex-drawer-close:focus-visible { color: var(--gold); background: var(--bg-raised); }

.apex-drawer .drawer-nav { flex: 1; padding: 4px 0; overflow-y: auto; }
.apex-drawer .drawer-section { padding: 6px 0; border-top: 1px solid var(--border); }
.apex-drawer .drawer-section:first-child { border-top: 0; }
.apex-drawer .drawer-section-label {
  display: block;
  padding: 10px 18px 4px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.apex-drawer .drawer-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; min-height: 48px;
  font-size: 15px; color: var(--text-secondary);
  text-decoration: none;
  transition: color .12s, background .12s;
}
.apex-drawer .drawer-link:hover, .apex-drawer .drawer-link:focus-visible { color: var(--gold); background: var(--bg-raised); }
.apex-drawer .drawer-link i { font-size: 18px; color: var(--text-tertiary); width: 20px; text-align: center; }
.apex-drawer .drawer-link:hover i, .apex-drawer .drawer-link:focus-visible i { color: var(--gold); }
.apex-drawer .drawer-link.pga-sub { padding-left: 42px; font-size: 13.5px; opacity: .82; }
.apex-drawer .drawer-link.pga-sub::before { content: '↳'; opacity: .5; margin-right: 6px; font-family: var(--font-mono); }
.apex-drawer .drawer-link.pga-sub:hover { opacity: 1; }

/* ─── responsive: collapse desktop nav → hamburger + drawer at ≤720px ─── */
@media (max-width: 720px) {
  header.bar { padding: 12px 18px; padding-left: 60px; } /* clear the app's fixed top-left .hamburger */
  header.bar .nav { display: none; }
  header.bar .nav-center { display: none; }
  header.bar .bar-left .pricing-pill { display: none; }
  .bar-burger { display: flex; }
}

/* tablet nav tightening (mirrors apex) */
@media (min-width: 721px) and (max-width: 1024px) {
  header.bar .nav { gap: 2px; }
  header.bar .nav-btn, header.bar .nav-link { padding: 11px 13px; }
}