/* Shared nav bar component styles. Loaded by every page alongside nav.js.
   Single source of truth for nav markup/behavior — do not fork per page. */
.nav-outer{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:center; padding:18px 0;}
.nav{ display:flex; align-items:center; gap:36px; background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); will-change:backdrop-filter; border:1px solid var(--border); padding:10px 12px 10px 22px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,0.06);}
.nav-brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14.5px; letter-spacing:-0.01em;}
.nav-links{ display:flex; gap:26px; font-size:12.5px; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-secondary);}
.nav-links a{ text-align:center;}
.nav-links a.active{ color:var(--ink);}
.nav .btn-primary{ padding:9px 18px; font-size:13px; justify-content:center;}
.lang-toggle{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:0.04em; border:1px solid var(--border-strong); background:transparent; color:var(--ink); border-radius:999px; padding:7px 14px; cursor:pointer; transition:transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;}
.lang-toggle:active{ transform:scale(.97);}
.btn,.nav-toggle{ -webkit-tap-highlight-color:transparent;}
.nav-toggle:active{ transform:scale(.97);}
.nav-toggle{ display:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--border-strong); background:transparent; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); padding:0; transition:transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;}
.nav-toggle svg{ width:16px; height:16px; overflow:visible;}
.nav-toggle-line{ transform-box:view-box; transform-origin:center; transition:transform var(--duration-standard) var(--ease-out), opacity var(--duration-fast) ease;}
.nav-toggle[aria-expanded="true"] .nav-toggle-line-top{ transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-line-middle{ opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-line-bottom{ transform:translateY(-5px) rotate(-45deg);}
.nav-mobile-menu{ position:fixed; top:74px; left:16px; right:16px; z-index:49; background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:10px; box-shadow:0 20px 50px rgba(0,0,0,0.14); display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.98); transform-origin:top center; transition:transform var(--duration-standard) var(--ease-out), opacity var(--duration-fast) ease, visibility 0s linear var(--duration-standard);}
.nav-mobile-menu.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); transition-delay:0s;}
.nav-mobile-menu a:not(.btn){ padding:13px 14px; border-radius:10px; font-size:13px; letter-spacing:0.03em; color:var(--ink); font-weight:500;}
.nav-mobile-menu .btn-primary{ margin-top:6px; justify-content:center; padding:12px 14px;}
@media (max-width:820px){ .nav-links{ display:none;} .nav .btn-primary{ display:none;} .nav .lang-toggle{ display:none;} .nav-toggle{ display:flex;} }
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{ color:var(--ink);} .nav-mobile-menu a:hover{ background:var(--bg-subtle);} .lang-toggle:hover{ background:var(--bg-subtle); border-color:var(--ink);} }
@media (prefers-reduced-motion: reduce){ .nav-mobile-menu{ transform:none; transition:opacity var(--duration-fast) ease, visibility 0s linear var(--duration-fast);} .nav-mobile-menu.open{ transform:none;} .nav-toggle-line{ transition:none;} }