@import url("site-tokens.css");
/* Shared header for pages outside the home page. It mirrors the home navigation;
   index.html keeps its own inline copy and stays the visual reference. Rules are
   scoped to .nav so page stylesheets keep their own links, buttons and headings. */
.nav{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in srgb,var(--color-bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);color:var(--color-text);font:16px/1.65 var(--font-ui);-webkit-font-smoothing:antialiased}
.nav *{box-sizing:border-box}
.nav a{text-decoration:none}
.nav :focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:2px}
.nav img,.nav svg{display:block;max-width:100%}
.nav .wrap{max-width:var(--bl-page);margin:0 auto;padding:0 var(--bl-gutter)}
.nav-inner{display:flex;align-items:center;gap:24px;height:64px}
.nav .brand{display:inline-flex;align-items:center;gap:9px;color:var(--color-text);font-weight:700;font-size:18px;letter-spacing:-.02em;flex:none}
.nav .brand img{width:24px;height:24px;flex:none}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:8px}
.nav-links a{color:var(--color-text-secondary);font-size:15px;min-height:var(--bl-control-height);display:flex;align-items:center;padding:8px 12px;border-radius:var(--bl-control);white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--color-text);background:var(--color-surface)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--bl-sans);height:var(--bl-control-height);padding:0 16px;border-radius:var(--bl-control);white-space:nowrap;border:1px solid var(--color-border-strong);background:transparent;color:var(--color-text);cursor:pointer;transition:background .15s ease,border-color .15s ease}
.nav .btn:hover,.nav .btn[aria-current]{background:var(--color-surface);border-color:var(--color-text-muted)}
.menu-toggle{display:none;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--bl-control);height:var(--bl-control-height);min-width:var(--bl-control-height);padding:9px 10px;color:var(--color-text);cursor:pointer}
@media (max-width:960px){
  .nav-links{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--color-bg);border-bottom:1px solid var(--color-border);padding:10px 20px 16px;margin:0;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 8px;border-bottom:1px solid var(--color-border)}
  .nav-links a:last-child{border-bottom:0}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:640px){.nav-actions .btn:not(.lang-btn){display:none}}


.nav .brand{min-height:var(--bl-control-height)}
@media (max-width:1120px){html[lang="en"] .nav-links{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bl-paper);border-bottom:1px solid var(--bl-border);padding:10px 20px 16px;margin:0;display:none}html[lang="en"] .nav-links.open{display:flex}html[lang="en"] .menu-toggle{display:inline-flex;align-items:center;justify-content:center}}
@media(prefers-reduced-motion:reduce){.nav *{transition:none!important}}