/*
 * LGN10 BRAND-CHROME-01 · home-top-tabs.css
 * Homepage (legion10.biz index) — top tabs → cyan product language (NOT gold pills).
 * Banner/plaque ghost2 low opacity. KEEP upper-left logo mark + LGN10 lettering.
 * Preview only — do not soft-ship live.
 *
 * Cyan lock: #6ee7ff / --cyan · gradient accents #3dd6f5
 * Gold #C5A15A may remain secondary on logo mark only if needed.
 * Tabs, active states, tab borders, banner accent lines = cyan.
 *
 * Load AFTER inline homepage styles (or as last homepage chrome sheet).
 * Does NOT touch Ground, dock, Circuit, Match Flow.
 */

/* --- Tokens (site cyan product language) --- */
html body{
  --lgn-home-cyan:#6ee7ff;
  --lgn-home-cyan-deep:#3dd6f5;
  --lgn-home-cyan-line:rgba(110,231,255,.42);
  --lgn-home-cyan-line-soft:rgba(110,231,255,.28);
  --lgn-home-paper:#EDE6D6;
  --lgn-home-ink:#080A0E;
  --lgn-home-gold:#C5A15A;                 /* secondary — mark only if needed */
  --lgn-home-fill:rgba(4,6,15,.28);       /* ghost2 plaque fill */
  --lgn-home-fill-soft:rgba(4,6,15,.24);
  --lgn-home-tab-fill:rgba(7,7,7,.30);
}

/* --- Top banner = ghost plaque (fill only; crisp text) + cyan accent line --- */
html body > header.top,
html body header.top{
  background:var(--lgn-home-fill)!important;
  border-bottom:1px solid var(--lgn-home-cyan-line-soft)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  opacity:1!important; /* do not ghost children */
}

/* Preserve / lock brand upper-left: mark + LGN10 lettering (cyan / white + cyan glow) */
html body header.top .brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-shrink:0!important;
  opacity:1!important;
  color:#eef8ff!important;
  font-family:Orbitron,Inter,system-ui,sans-serif!important;
  font-weight:800!important;
  letter-spacing:.12em!important;
  font-size:15px!important;
  filter:none!important;
  text-shadow:0 0 18px rgba(110,231,255,.35)!important;
}
html body header.top .brand .mark,
html body header.top .brand > .mark{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,rgba(110,231,255,.22),rgba(61,214,245,.14))!important;
  border:1px solid rgba(110,231,255,.55)!important;
  color:var(--lgn-home-cyan)!important;
  font-size:11px!important;
  letter-spacing:.06em!important;
  box-shadow:0 0 14px rgba(110,231,255,.28)!important;
  opacity:1!important;
  overflow:hidden!important;
}
html body header.top .brand .mark img,
html body header.top .brand img.mark{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
html body header.top .brand > span:not(.mark),
html body header.top .brand .word{
  opacity:1!important;
  color:#eef8ff!important;
  filter:none!important;
}

/* --- Nav row: cyan product tabs (active cyan fill/border/soft glow) --- */
html body header.top .nav-cta{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}

/* Section tabs → cyan-edge ghost pills (site cyan language — NOT gold) */
html body header.top .nav-cta > a.btn-ghost{
  min-height:36px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  font-weight:700!important;
  font-size:12px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  background:var(--lgn-home-tab-fill)!important;
  border:1px solid var(--lgn-home-cyan-line)!important;
  color:var(--lgn-home-cyan)!important;
  box-shadow:none!important;
  opacity:1!important;
}
html body header.top .nav-cta > a.btn-ghost:hover,
html body header.top .nav-cta > a.btn-ghost.is-active,
html body header.top .nav-cta > a.btn-ghost[aria-current="page"]{
  background:rgba(110,231,255,.18)!important;
  border-color:rgba(110,231,255,.72)!important;
  color:#eef8ff!important;
  transform:translateY(-1px);
  box-shadow:0 0 18px rgba(110,231,255,.28)!important;
}

/* Primary CTAs — cyan product loud; gold CTA class remapped to cyan chrome lock */
html body header.top .nav-cta > a.btn-gold{
  min-height:40px!important;
  border-radius:999px!important;
  letter-spacing:.04em!important;
  opacity:1!important;
  background:linear-gradient(135deg,var(--lgn-home-cyan-deep),var(--lgn-home-cyan))!important;
  color:#041018!important;
  border:1px solid rgba(110,231,255,.55)!important;
  box-shadow:0 0 20px rgba(110,231,255,.22)!important;
}
html body header.top .nav-cta > a.btn-cyan{
  min-height:40px!important;
  border-radius:999px!important;
  letter-spacing:.04em!important;
  opacity:1!important;
  background:linear-gradient(135deg,var(--lgn-home-cyan-deep),var(--lgn-home-cyan))!important;
  color:#041018!important;
  border:1px solid rgba(110,231,255,.55)!important;
  box-shadow:0 0 20px rgba(110,231,255,.22)!important;
}

/* Optional: if Dev adds a plaque wrapper around nav, ghost it like Work Mode + cyan line */
html body header.top .nav-plaque,
html body header.top .banner-plaque,
html body .home-top-plaque{
  background:var(--lgn-home-fill-soft)!important;
  border:1px solid var(--lgn-home-cyan-line-soft)!important;
  border-radius:14px!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}

/* Mobile: keep brand; hide-sm still applies from page */
@media (max-width:720px){
  html body header.top .brand{font-size:13px!important}
  html body header.top .brand .mark{width:30px!important;height:30px!important;min-width:30px!important}
}