/*
  Canonical Honeylai site nav — single source of truth for nav STYLING.
  nav.html is the single source of truth for nav MARKUP (stamped by build_nav.py).
  This file is linked by every page (<link rel="stylesheet" href="/nav.css">) so nav
  never has to be hand-duplicated into each page's own <style> block again.

  Depends on design tokens defined in each page's own <style> block (:root /
  [data-theme="light"]): --brand, --brand-dim, --brand-hover, --navy, --navy2,
  --navy3, --text, --text2, --text3, --border-color, --tint, --elev-s, --elev-h,
  --head, --mono. If a page is missing one of these, the nav will silently fall
  back to inherited/initial values for that property on that page.

  Loadout (loadout-prototype.html) intentionally does NOT use this file — its nav
  CSS is scoped under #site-nav with --sn-* tokens so it can never collide with the
  workbench's own --brand etc. See the comment in loadout-prototype.html.
*/

nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap;
  padding:0 40px;height:64px;
  background:linear-gradient(180deg,var(--tint),transparent);
  border-bottom:1px solid var(--border-color);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  overflow:visible;
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;flex:1;justify-content:center;list-style:none;margin:0;padding:0;overflow:visible}
.nav-links li{flex-shrink:0;list-style:none}
.nav-grp-lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text3);opacity:.75;padding:0 6px 0 2px;align-self:center;white-space:nowrap;list-style:none}
.nav-sep{width:1px;height:20px;background:var(--border-color);margin:0 8px;align-self:center;list-style:none}
.nav-anchor{display:block;color:var(--text2);font-weight:600;padding:6px 9px;border-radius:6px;text-decoration:none;white-space:nowrap;font-size:10px;letter-spacing:.8px;text-transform:uppercase;background:none;border:none;transition:color .2s}
.nav-anchor:hover{color:var(--brand);background:var(--brand-dim)}
.nav-page{display:block;color:var(--text);font-weight:600;background:var(--tint);border:1px solid var(--border-color);padding:6px 12px;border-radius:999px;box-shadow:var(--elev-s);transition:all .2s;white-space:nowrap;text-decoration:none;font-size:10px;letter-spacing:.8px;text-transform:uppercase}
.nav-page:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.nav-page.current{background:var(--brand);color:#fff;border-color:var(--brand)}
.nav-more{position:relative;list-style:none}
.nav-more-btn{display:flex;align-items:center;gap:5px;font-family:var(--head);font-weight:700;font-size:12.5px;color:var(--text);background:var(--tint);border:1px solid var(--border-color);padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;box-shadow:var(--elev-s);transition:all .2s}
.nav-more-btn:hover{border-color:var(--brand);color:var(--brand)}
.nav-more-btn .caret{font-size:9px;transition:transform .2s}
.nav-more.open .nav-more-btn{border-color:var(--brand);color:var(--brand);background:var(--brand-dim)}
.nav-more.open .nav-more-btn .caret{transform:rotate(180deg)}
.nav-more-panel{position:absolute;top:calc(100% + 10px);right:0;min-width:210px;background:var(--navy2);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--elev-h);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s;z-index:1000}
.nav-more.open .nav-more-panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav-more-panel a{display:block;padding:9px 12px;border-radius:8px;font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap;color:var(--text);text-decoration:none;transition:all .15s}
.nav-more-panel a:hover{background:var(--brand-dim);color:var(--brand)}
.nav-more-panel a.current{background:var(--brand);color:#fff}
.nav-more-panel .mp-sep{height:1px;background:var(--border-color);margin:6px 4px}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.theme-toggle{background:var(--navy3);border:1px solid var(--border-color);color:var(--text);width:36px;height:36px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .2s}
.theme-toggle:hover{border-color:var(--brand);color:var(--brand)}
.nav-btn-discovery{background:var(--brand-dim);border:1px solid var(--brand);color:var(--brand);padding:8px 14px;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;text-decoration:none;transition:all .2s;display:inline-block;border-radius:8px}
.nav-btn-discovery:hover{background:var(--brand);color:#fff}
.nav-btn-ai{background:var(--brand-dim);border:1px solid var(--brand);color:var(--brand);padding:8px 16px;font-family:var(--head);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;text-decoration:none;transition:all .2s;display:inline-block;border-radius:8px}
.nav-btn-ai:hover{background:var(--brand);color:#fff}
.nav-right .nav-btn-discovery,.nav-right .nav-btn-ai{display:none!important}
#nav-toggle{display:none;background:none;border:1px solid var(--border-color);color:var(--brand);width:38px;height:38px;cursor:pointer;font-size:18px;align-items:center;justify-content:center;line-height:1;border-radius:8px}
#nav-hex{display:block;flex-shrink:0}
#mobile-nav{display:none;position:fixed;inset:56px 0 0 0;background:var(--navy);z-index:99;padding:16px 18px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch}
#mobile-nav.open{display:block}
#mobile-nav a{display:block;text-decoration:none;color:var(--text);font-size:20px;font-weight:700;letter-spacing:2px;text-transform:uppercase;transition:color .2s}
#mobile-nav a:hover{color:var(--brand)}
.mob-grp{font-family:var(--mono);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text3);margin:18px 0 6px;padding:0 4px}
.mob-page{display:block;padding:11px 14px!important;background:var(--tint);border:1px solid var(--border-color);border-radius:10px;margin-bottom:7px;font-weight:700;color:var(--text)!important;text-decoration:none;font-size:20px;letter-spacing:2px;text-transform:uppercase}
.mob-page.current{background:var(--brand);color:#fff!important;border-color:var(--brand)}
.mob-app{display:block;padding:11px 14px!important;background:var(--brand-dim);border:1px solid var(--brand);border-radius:10px;margin-bottom:7px;font-weight:800;color:var(--brand)!important;text-decoration:none;font-size:20px;letter-spacing:2px;text-transform:uppercase}

@media(max-width:1400px){.nav-grp-lbl{display:none}}
@media(max-width:1320px){.nav-anchor{padding:6px 7px;font-size:12px}}
@media(max-width:1260px){.nav-grp-lbl{display:none}.nav-sep{display:none}}
@media(max-width:1180px){.nav-links{display:none}#nav-toggle{display:flex}}
@media(min-width:1181px){#nav-toggle{display:none}#mobile-nav{display:none}}
@media(max-width:768px){nav{padding:0 16px;height:56px}.nav-logo span{font-size:16px}}
@media(max-width:680px){nav{padding:0 14px;height:56px}#nav-hex{width:26px!important;height:26px!important}}