/* Stacktora — shared public-site nav styles.
   Single source of truth for the header used by index.html, about.html,
   docs.html, changelog.html, press.html, and roadmap.html. Edit this file,
   not any individual page's inline <style> block, to change the nav
   anywhere it appears. (The PHP pages — vault.php, profile.php, etc. — have
   their own equivalent copy inside lib/render.php, since they don't load
   this file; that's the other, already-consolidated half of the site.)
   Each page may still layer small, deliberate overrides in its own
   stylesheet after this file loads (e.g. an extra transition, a narrower
   gap at one breakpoint) — that's fine, just keep those minimal and
   comment why they're page-specific so they don't get treated as drift. */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; transition:background var(--speed) var(--ease),border-color var(--speed) var(--ease); border-bottom:1px solid transparent;}
.nav.scrolled{background:rgba(26,26,26,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border);}
.nav-inner{max-width:var(--max); margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:28px;}
.logo{display:inline-flex; align-items:center; gap:10px; flex-shrink:0;}
.logo-img{height:26px; width:auto; display:block;}
.nav-links{display:flex; align-items:center; gap:26px; margin-left:8px;}
.nav-sub{border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.nav-sub .nav-links{width:100%;box-sizing:border-box;padding:9px 24px;justify-content:center;margin-left:0;}
@media(max-width:860px){.nav-sub{display:none;}}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--muted); transition:color var(--speed) var(--ease);}
.nav-links a:hover{color:var(--text);}
.nav-more{position:relative;}
.nav-more-trigger{display:inline-flex; align-items:center; gap:4px; font-family:inherit; font-size:14.5px; font-weight:500; color:var(--muted); background:none; border:none; padding:0; cursor:pointer; transition:color var(--speed) var(--ease);}
.nav-more-trigger:hover{color:var(--text);}
.nav-more-trigger svg{width:13px; height:13px; transition:transform .2s var(--ease);}
.nav-more.open .nav-more-trigger{color:var(--text);}
.nav-more.open .nav-more-trigger svg{transform:rotate(180deg);}
.nav-more-panel{position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(-6px); min-width:150px; background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:0 20px 54px rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .18s var(--ease),transform .18s var(--ease); z-index:99;}
.nav-more.open .nav-more-panel{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.nav-more-panel a{display:block; padding:9px 12px; border-radius:8px; font-size:14px; font-weight:500; color:var(--text); text-decoration:none; transition:background var(--speed) var(--ease);}
.nav-more-panel a:hover{background:var(--surface);}
.nav-more-panel a.nav-vault-item,.nav-mobile a.nav-vault-item{background:var(--code-bg);border:1px solid var(--primary);color:var(--primary);}
.nav-more-panel a.cur{color:var(--primary);}
.nav-links a.cur{color:var(--text);}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:12px;}
.nav-signin{font-size:14.5px; font-weight:600; color:var(--muted);}
.nav-signin:hover{color:var(--text);}
.nav-burger{display:none; margin-left:auto; background:transparent; border:1px solid var(--border-strong); border-radius:8px; width:40px; height:40px; place-items:center; cursor:pointer; color:var(--text);}
.nav-burger svg{width:20px; height:20px;}
.nav-mobile{display:none; flex-direction:column; gap:3px; position:absolute; top:62px; left:14px; right:14px; background:var(--bg-2); border:1px solid var(--border); border-radius:14px; padding:10px; box-shadow:0 20px 54px rgba(0,0,0,.55); z-index:99;}
.nav-mobile.open{display:flex;}
.nav-mobile a{padding:12px 14px; border-radius:8px; color:var(--text); font-size:15px; font-weight:500;}
.nav-mobile a:hover{background:var(--surface);}
.nav-mobile .btn{justify-content:center; margin-top:4px;}
@media(max-width:860px){.nav-links{display:none;} .nav-cta{display:none;} .nav-burger{display:grid;}}