/* nav.css - JEDNO zrodlo prawdy dla gornego menu VEES.
   Reguly scoped pod #nav (wysoka specyficznosc: id) i ladowane jako OSTATNI arkusz
   na kazdej stronie, wiec NADPISUJA rozjechany CSS inline kazdej podstrony.
   Efekt: pasek menu jest pixel-identyczny niezaleznie od tego, na ktorej stronie jestes.
   Rubik (cube-toggle) celowo schowany z paska - nie nalezy do menu. Tylko zwykly dywiz. */

/* Pinujemy renderowanie fontu na #nav (dziedziczy do logo/linkow/przycisku),
   bo body kazdej podstrony ma rozne letter-spacing i font-feature-settings,
   co przesuwalo i inaczej rysowalo tekst menu. Wartosci jak na index.html (wzorzec). */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:padding .35s ease,background .35s ease;padding:18px 0;letter-spacing:-.005em;font-feature-settings:"cv05","ss01","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#nav.scrolled{background:rgba(8,18,37,.75);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);box-shadow:0 1px 0 var(--line);padding:12px 0}

#nav .nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(1100px,92vw);margin:0 auto}
#nav .nav-inner>.logo{justify-self:start}
#nav .nav-inner>.nav-links{justify-self:center}
#nav .nav-inner>.nav-cta{justify-self:end}

#nav .logo{font-family:var(--font-ui);font-weight:800;font-size:1.45rem;letter-spacing:-.03em;display:flex;align-items:center;gap:.55rem;margin:0}
#nav .logo .emark{width:26px;height:26px;flex:0 0 auto;display:block}
/* dot: pinujemy animacje OFF - index ma dotBreath (pulsuje), podstrony nie.
   Bez tego zrzut zalezy od fazy animacji i pasek nie jest pixel-identyczny. */
#nav .logo .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--azure),var(--gold));box-shadow:0 0 0 4px rgba(61,184,255,.15),0 0 18px rgba(61,184,255,.6);animation:none !important;will-change:auto;filter:none;opacity:1}
#nav .logo b{color:var(--azure)}

#nav .nav-links{display:flex;gap:15px;align-items:center;position:static;inset:auto;background:none;flex-direction:row;justify-content:center;transform:none;box-shadow:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
#nav .nav-links a{font-weight:500;font-size:.95rem;color:var(--muted);position:relative;transition:color .35s ease;padding:4px 2px;text-decoration:none}
#nav .nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--azure),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
#nav .nav-links a:hover,#nav .nav-links a:focus-visible,#nav .nav-links a.here{color:var(--ink)}
#nav .nav-links a:hover::after,#nav .nav-links a:focus-visible::after,#nav .nav-links a.here::after{transform:scaleX(1)}

#nav .nav-cta{display:flex;gap:14px;align-items:center}
#nav .nav-cta .btn{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--azure),#1f8fe0);color:#04121f;padding:13px 26px;border-radius:999px;font-weight:700;font-family:var(--font-ui);font-size:.95rem;letter-spacing:-.01em;border:1px solid transparent;cursor:pointer;box-shadow:0 10px 30px -12px rgba(61,184,255,.65);animation:none !important;transform:none}
/* index daje przyciskowi btnGlow (animacja) + ::before shimmer (sweep).
   Podstrony nie maja tego -> zrzut zalezy od fazy. Pinujemy OFF dla identycznosci. */
#nav .nav-cta .btn::before{display:none !important;content:none}
/* Stan aktywny NIE zmienia wygladu przycisku - pasek menu pixel-identyczny na kazdej stronie.
   Te same wartosci co bazowy #nav .nav-cta .btn (zero obwodki/ringa). */
#nav .nav-cta .btn[aria-current]{box-shadow:0 10px 30px -12px rgba(61,184,255,.65);border:1px solid transparent}

#nav .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
#nav .burger span{width:26px;height:2.5px;background:var(--ink);border-radius:2px}

/* Rubik / cube-toggle NIE jest czescia menu - chowamy z paska dla identycznosci */
#nav .cube-toggle-wrap,#nav .cube-toggle,#nav .scn-cta{display:none !important}

@media(max-width:920px){
  /* mobile: nav-links to fixed drawer (poza gridem) → nav-inner musi być flex, inaczej nav-cta ląduje w środkowej kolumnie grida (burger na środku, Scenariusze przy logo). Fix: flex space-between. */
  #nav .nav-inner{display:flex !important;justify-content:space-between !important;align-items:center;grid-template-columns:none !important}
  #nav .nav-inner>.nav-cta{justify-self:auto;margin-left:auto}
  #nav .nav-links{position:fixed;inset:0 0 0 35%;background:rgba(11,24,48,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex-direction:column;justify-content:center;gap:28px;transform:translateX(100%);transition:transform .4s ease;box-shadow:var(--shadow);padding:40px}
  #nav .nav-links a{font-size:1.1rem}
  #nav .nav-links.open{transform:none}
  #nav .burger{display:flex}
  #nav .nav-cta .btn{padding:9px 16px;font-size:.85rem}
}