/* ============================================================
   WSPOLNY PASEK NAWIGACJI I STOPKA - jeden wyglad na calym serwisie
   Utworzony 2026-08-26 (@cto).

   Powod: serwis stoi na trzech arkuszach (styl.css, wbudowany styl
   sklep.html, blog/styles.css). Kazdy mial wlasny pasek - inne logo,
   inny rozmiar linkow, inny przycisk. Pasek "skakal" przy przechodzeniu
   miedzy zakladkami.

   Ten plik jest JEDYNYM zrodlem wygladu paska. Podpinany PO arkuszu
   strony, wiec wygrywa z jej wlasnymi regulami.
   Nie uzywa zmiennych stron - ma wlasne, zeby wygladac tak samo
   niezaleznie od tego, jaki arkusz stoi obok.
   ============================================================ */

.nav{
  --n-paper:#FFFFFF;
  --n-ink:#1A1714;
  --n-muted:#625F5F;
  --n-accent:#E8621A;
  --n-accent-ink:#C24E12;
  --n-line:rgba(0,0,0,.07);
  --n-shell:1180px;
  --n-gutter:clamp(20px,5vw,56px);
  --n-display:'Montserrat','Segoe UI',Arial,sans-serif;
  --n-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--n-line);
}

.nav .nav-in{
  max-width:var(--n-shell); margin:0 auto; padding:0 var(--n-gutter);
  height:72px; display:flex; align-items:center; justify-content:space-between; gap:28px;
}

/* logo */
.nav .logo{
  font-family:var(--n-display); font-weight:800; font-size:19px; letter-spacing:-.03em;
  text-decoration:none; color:var(--n-ink); white-space:nowrap;
}
.nav .logo span{color:var(--n-accent)}

/* zakladki */
.nav .nav-links{
  display:flex; align-items:center; gap:20px; row-gap:8px; flex-wrap:wrap;
  list-style:none; margin:0; padding:0; flex:0 1 auto; justify-content:flex-start;
}
.nav .nav-links li{display:block; margin:0}
.nav .nav-links a{
  font-family:var(--n-sans); font-size:14.5px; font-weight:500; line-height:1.4;
  color:var(--n-muted); text-decoration:none; transition:color .18s;
}
.nav .nav-links a:hover{color:var(--n-ink)}

/* biezaca strona */
.nav .nav-links a[aria-current="page"]{color:var(--n-ink); font-weight:700}
.nav .nav-links a[aria-current="page"]::after{
  content:''; display:block; height:2px; margin-top:3px;
  background:var(--n-accent); border-radius:2px;
}

/* przycisk po prawej */
.nav .nav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--n-sans); font-size:14px; font-weight:600; line-height:1.2;
  padding:11px 22px; border:0; border-radius:6px;
  background:var(--n-accent-ink); color:#fff; text-decoration:none;
  white-space:nowrap; transition:background .2s;
}
.nav .nav-cta:hover{background:var(--n-ink); color:#fff}

/* hamburger */
.nav .nav-toggle{
  display:none; background:none; border:1px solid rgba(0,0,0,.10); border-radius:6px;
  width:44px; height:44px; align-items:center; justify-content:center;
  cursor:pointer; color:var(--n-ink);
}
.nav .nav-toggle span{display:block; width:18px; height:2px; background:currentColor; position:relative}
.nav .nav-toggle span::before,.nav .nav-toggle span::after{
  content:''; position:absolute; left:0; width:18px; height:2px; background:currentColor;
}
.nav .nav-toggle span::before{top:-6px}
.nav .nav-toggle span::after{top:6px}

.nav a:focus-visible,.nav button:focus-visible{
  outline:3px solid var(--n-accent-ink); outline-offset:3px; border-radius:4px;
}

/* --- telefon i waskie ekrany --- */
@media (max-width:1020px){
  .nav .nav-toggle{display:flex}
  .nav .nav-links{
    position:absolute; top:72px; left:0; right:0; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--n-paper); border-bottom:1px solid var(--n-line);
    padding:6px var(--n-gutter) 16px; box-shadow:0 14px 30px rgba(0,0,0,.10);
  }
  body.nav-open .nav .nav-links{display:flex}
  .nav .nav-links a{
    display:block; padding:14px 0; font-size:16px; color:var(--n-ink);
    border-bottom:1px solid rgba(0,0,0,.05);
  }
  .nav .nav-links a[aria-current="page"]::after{display:none}
  .nav .nav-links li:last-child a{border-bottom:0}
}
@media (max-width:520px){
  .nav .nav-in{gap:12px}
  .nav .nav-cta{display:none}
}

/* ============================================================
   WSPOLNA STOPKA (dodana 2026-08-26)
   Ten sam powod co przy pasku: serwis mial trzy rozne stopki -
   ciemna na stronach glownych, jasna w sklepie, szara na blogu.
   Wzorzec: stopka ze styl.css. Wlasne zmienne, zeby wygladala
   tak samo niezaleznie od arkusza strony.
   ============================================================ */

footer{
  --f-dark:#1A1714;
  --f-accent:#E8621A;
  --f-shell:1180px;
  --f-gutter:clamp(20px,5vw,56px);
  --f-display:'Montserrat','Segoe UI',Arial,sans-serif;
  --f-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  background:var(--f-dark); color:rgba(255,255,255,.6);
  padding:clamp(44px,5.5vw,68px) 0; margin:0; border:0;
  font-family:var(--f-sans); font-size:14px; line-height:1.7;
}
footer .foot-in{
  max-width:var(--f-shell); margin:0 auto; padding:0 var(--f-gutter);
  display:flex; flex-wrap:wrap; gap:24px 48px;
  justify-content:space-between; align-items:flex-start;
}
footer a{color:rgba(255,255,255,.6); text-decoration:none; border-bottom:1px solid transparent; font-weight:400}
footer a:hover{color:#fff; border-color:rgba(255,255,255,.4)}
footer .foot-links{display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; margin:0; padding:0}
footer .foot-links li{margin:0}
footer .foot-brand{
  font-family:var(--f-display); font-weight:800; font-size:18px; letter-spacing:-.03em;
  color:#fff; margin-bottom:10px; display:block;
}
footer .foot-brand span{color:var(--f-accent)}
footer .foot-bottom{
  max-width:var(--f-shell); margin:clamp(30px,3.6vw,44px) auto 0;
  padding:22px var(--f-gutter) 0; border-top:1px solid rgba(255,255,255,.12);
  font-size:13px; color:rgba(255,255,255,.58);
}
footer a:focus-visible{outline:3px solid var(--f-accent); outline-offset:3px; border-radius:3px}