/* WSPOLNY NAGLOWEK — style. Jedno zrodlo prawdy dla wszystkich podstron.
   Zmienne motywu bierzemy ze strony, ale kazda ma wartosc zapasowa, zeby
   naglowek wygladal poprawnie takze na podstronach z wlasna paleta. */
.nav{
  --nv-bg:var(--nav-bg, rgba(34,37,31,.94));
  --nv-solid:var(--nav-solid, #22251f);
  --nv-line:var(--line, rgba(127,171,107,.32));
  --nv-ink:var(--ink, #f3f1eb);
  --nv-soft:var(--soft, #ddead4);
  --nv-muted:var(--muted, #b7c2af);
  --nv-accent:var(--green-deep, #ddead4);
  --nv-action:var(--action, #385a2c);
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:nowrap;
  padding:12px 22px; background:var(--nv-bg); border-bottom:1px solid var(--nv-line);
  backdrop-filter:blur(10px); transition:background .4s ease;
  font-family:"DejaVu Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
:root[data-theme="light"] .nav{
  --nv-bg:var(--nav-bg, rgba(250,246,236,.94));
  --nv-solid:var(--nav-solid, #faf6ec);
  --nv-line:var(--line, #d8dfd1);
  --nv-ink:var(--ink, #26221a);
  --nv-soft:var(--soft, #4d5149);
  --nv-muted:var(--muted, #6d6658);
  --nv-accent:var(--green-deep, #385a2c);
}
.nav .brand{ display:flex; align-items:center; gap:10px; white-space:nowrap; font-weight:700; font-size:15px; cursor:pointer; color:var(--nv-ink); text-decoration:none; }
.nav .brand img{ width:36px; height:36px; flex:0 0 auto; border-radius:8px; display:block; }
.nav-right{ display:flex; align-items:center; gap:8px 18px; flex-wrap:nowrap; }
.nav-links{ display:flex; gap:6px; flex-wrap:nowrap; }
.nav-links a{ text-decoration:none; color:var(--nv-soft); font-size:14px; font-weight:600; padding:6px 11px; border-radius:8px; white-space:nowrap; transition:all .18s; }
.nav-links a:hover{ color:var(--nv-accent); background:rgba(95,140,66,.1); }
.nav-links a.here{ color:#fff; background:var(--nv-action); }
/* Rozdzielacz: kotwice strony glownej | osobne podstrony */
.nav-sep{ align-self:center; width:1px; height:18px; background:var(--nv-line); margin:0 4px; }
.lang-switch{ display:flex; gap:3px; padding-left:8px; border-left:1px solid var(--nv-line); }
.lang-btn{ background:none; border:1px solid transparent; color:var(--nv-muted); font:inherit; font-size:12.5px; font-weight:800; padding:5px 8px; border-radius:7px; cursor:pointer; transition:all .15s; }
.lang-btn:hover{ color:var(--nv-accent); }
.lang-btn.active{ color:#fff; background:var(--nv-action); }
.theme-toggle{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin-left:8px; padding-left:8px; border-left:1px solid var(--nv-line); background:none; border-top:none; border-right:none; border-bottom:none; color:var(--nv-muted); cursor:pointer; transition:color .15s; }
.theme-toggle:hover{ color:var(--nv-accent); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .ic-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .ic-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .ic-moon{ display:block; }
/* Burger: na desktopie ukryty, na waskim ekranie zastepuje rozwiniete menu.
   Powod — 10 pozycji + 5 jezykow nie miesci sie w jednym rzedzie. */
.nav-toggle{ display:none; align-items:center; justify-content:center; width:38px; height:38px;
  background:none; border:1px solid var(--nv-line); border-radius:9px; color:var(--nv-soft); cursor:pointer; padding:0; }
.nav-toggle:hover{ color:var(--nv-accent); border-color:var(--nv-accent); }
.nav-toggle svg{ width:20px; height:20px; }
.nav-toggle .ic-close{ display:none; }
.nav.open .nav-toggle .ic-burger{ display:none; }
.nav.open .nav-toggle .ic-close{ display:block; }

/* 10 pozycji + 5 jezykow + motyw potrzebuje ~1340 px. Zeby na 13-14"
   laptopie pasek nie rozjechal sie na dwa rzedy (logo skakalo do drugiego),
   miedzy 1200 a 1400 px zbijamy odstepy, a nizej wchodzi burger. */
@media(max-width:1600px){
  .nav{ padding:11px 14px; gap:8px 8px; }
  .nav-right{ gap:6px 8px; }
  .nav-links{ gap:2px; }
  .nav-links a{ padding:6px 7px; font-size:13px; }
  .nav-sep{ margin:0 2px; }
  .lang-switch{ padding-left:6px; gap:2px; }
  .lang-btn{ padding:5px 6px; font-size:12px; }
  .theme-toggle{ margin-left:6px; padding-left:6px; }
  .nav .brand{ font-size:14.5px; }
  .nav .brand img{ width:32px; height:32px; }
}

@media(max-width:1200px){
  .nav{ flex-wrap:nowrap; padding:10px 14px; }
  .nav-right{ flex-wrap:wrap; }
  .nav-toggle{ display:flex; }
  /* .nav ma position:fixed — jest wiec kontekstem dla panelu absolute */
  .nav-right{ display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:10px 14px 14px; background:var(--nv-solid);
    border-bottom:1px solid var(--nv-line); max-height:calc(100svh - 100%); overflow-y:auto; }
  .nav.open .nav-right{ display:flex; }
  /* panel jest nieprzezroczysty, wiec i pasek przy otwartym menu — inaczej widac szew */
  .nav.open{ background:var(--nv-solid); }
  .nav-links{ flex-direction:column; gap:2px; }
  .nav-links a{ padding:11px 12px; font-size:15px; border-radius:9px; }
  .nav-sep{ width:100%; height:1px; margin:6px 0; }
  .lang-switch{ border-left:none; padding-left:0; margin-top:8px; padding-top:10px;
    border-top:1px solid var(--nv-line); justify-content:center; }
  .lang-btn{ padding:8px 12px; font-size:13.5px; }
  .theme-toggle{ width:auto; height:auto; margin-left:0; padding:10px 12px 0;
    border-left:none; border-top:1px solid var(--nv-line); margin-top:8px; justify-content:center; }
  .nav .brand span{ font-size:14px; }
}

/* Ten sam tryb burgera, ale wlaczany pomiarem z nav.js: gdy pozycje menu
   nie miesza sie w pasku (np. po przelaczeniu na gruzinski), naglowek
   dostaje klase .collapsed niezaleznie od szerokosci okna. */

.nav.collapsed{ flex-wrap:nowrap; padding:10px 14px; }
.nav.collapsed .nav-right{ flex-wrap:wrap; }
.nav.collapsed .nav-toggle{ display:flex; }
  /* .nav ma position:fixed — jest wiec kontekstem dla panelu absolute */
.nav.collapsed .nav-right{ display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:10px 14px 14px; background:var(--nv-solid);
    border-bottom:1px solid var(--nv-line); max-height:calc(100svh - 100%); overflow-y:auto; }
.nav.collapsed.open .nav-right{ display:flex; }
  /* panel jest nieprzezroczysty, wiec i pasek przy otwartym menu — inaczej widac szew */
.nav.collapsed.open{ background:var(--nv-solid); }
.nav.collapsed .nav-links{ flex-direction:column; gap:2px; }
.nav.collapsed .nav-links a{ padding:11px 12px; font-size:15px; border-radius:9px; }
.nav.collapsed .nav-sep{ width:100%; height:1px; margin:6px 0; }
.nav.collapsed .lang-switch{ border-left:none; padding-left:0; margin-top:8px; padding-top:10px;
    border-top:1px solid var(--nv-line); justify-content:center; }
.nav.collapsed .lang-btn{ padding:8px 12px; font-size:13.5px; }
.nav.collapsed .theme-toggle{ width:auto; height:auto; margin-left:0; padding:10px 12px 0;
    border-left:none; border-top:1px solid var(--nv-line); margin-top:8px; justify-content:center; }
.nav.collapsed .brand span{ font-size:14px; }