/* Mobilny pasek nawigacji — arkusz towarzyszacy mobile-nav.js.
 *
 * Osobny plik, a nie fragment style.css, z jednego powodu: trzy strony
 * kalkulatorow (calc_economic / calc_military / calc_crystal) maja WLASNY,
 * samodzielny CSS i w ogole nie ladują style.css. Skrypt wstawial im wiec
 * przycisk, ktorego nikt nie stylowal — na telefonie wygladal jak biala kreska
 * w rogu, a menu i tak sie nie rozwijalo. Wspolny arkusz daje jedno zrodlo
 * regul dla wszystkich pietnastu stron publicznych.
 *
 * Selektory sa celowo mocniejsze (`.nav.has-navtoggle .nav-links.open`) niz
 * lokalne `@media{.nav-links{display:none}}` na stronach kalkulatorow — inaczej
 * rozwiniete menu nadal by sie nie pokazalo.
 */

/* Przycisk istnieje tylko wtedy, gdy wstawil go skrypt. Bez JS klasa
   `has-navtoggle` nigdy nie powstaje i menu zostaje widoczne — nigdy niedostepne. */
.navbtn{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  padding:0;border:1px solid var(--line,#2A2E3E);border-radius:11px;
  background:var(--card,#181A24);color:var(--head,#EAEAF2);cursor:pointer;flex:0 0 auto}
.navbtn-bars{display:flex;flex-direction:column;gap:4px;width:18px}
.navbtn-bars i{display:block;height:2px;border-radius:2px;background:currentColor;transition:.18s}
.nav-open .navbtn{background:var(--primary,#7C6CF8);border-color:var(--primary,#7C6CF8);color:#fff}
.nav-open .navbtn-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .navbtn-bars i:nth-child(2){opacity:0}
.nav-open .navbtn-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:860px){
  .nav{padding:10px 16px;gap:10px;flex-wrap:wrap}
  .nav .brand .name{font-size:18px}
  .nav.has-navtoggle .navbtn{display:inline-flex;order:2}
  .nav.has-navtoggle .nav-links{display:none}
  .nav.has-navtoggle .nav-links.open{display:flex}
  .nav .nav-links{order:3;flex-basis:100%;width:100%;flex-direction:column;
    align-items:stretch;gap:4px;margin-top:4px;padding:8px 0 4px;
    border-top:1px solid var(--line,#2A2E3E)}
  /* 44 px to najmniejszy cel, w ktory da sie trafic kciukiem bez pudlowania */
  .nav .nav-links a{display:flex;align-items:center;min-height:44px;padding:0 12px;
    border-radius:10px}
  .nav .nav-links .btn{width:100%;justify-content:center;min-height:44px;font-size:14px}
  /* Przelacznik motywu to sama ikona bez tekstu — w pionowym menu wygladal jak
     zabladzone kolko obok nazwanych pozycji. Na mobile staje sie pelnowymiarowym
     wierszem z podpisem; podpis jest przy okazji etykieta dla czytnika ekranu. */
  .nav .nav-links .iconbtn{width:100%;height:auto;min-height:44px;border-radius:10px;
    justify-content:flex-start;gap:10px;padding:0 12px;font-weight:600;
    color:var(--body,#C4C6D2)}
  .nav .nav-links .iconbtn::after{content:"Light / dark";font-size:14px}
  /* Strony kalkulatorow trzymaja motyw i "Sign in" poza `.nav-links`, w `.nav-r`.
     Zostaja widoczne obok hamburgera — to dwa najczestsze klikniecia i nie ma
     powodu chowac ich za menu. */
  .nav .nav-r{order:1;gap:8px;margin-left:auto}
  .nav .nav-r .btn-sign{min-height:40px;display:inline-flex;align-items:center}
}