/* Witomaniaki: wspólne style (tokeny, baza, nawigacja, przyciski, stopka).
   Motyw przewodni: skala radiowa. Szkło skali (jasne), beton obudowy (ciemny),
   czerwona igła, ciepłe światło wyświetlaczy. */

@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-400i.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-500.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-600.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-700.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-cond-600.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-cond-700.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-cond-800.woff) format("woff");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-cond-900.woff) format("woff");font-weight:900;font-style:normal;font-display:swap}

:root{
  --beton:#20262a; --beton-2:#2a3135; --beton-3:#384146; --beton-4:#566067;
  --szklo:#dde7de; --szklo-2:#cbd8cd; --szklo-3:#b6c6b9;
  --tusz:#11201a; --tusz-2:#3b4c43;
  --tekst:#e9f0eb; --tekst-2:#a6b5ad;
  --igla:#ec3b3b; --igla-jasna:#ff8179; --lampa:#ffc95c; --led:#5be39a;

  --czcionka:"Barlow",system-ui,"Segoe UI",Arial,sans-serif;
  --naglowkowa:"Barlow Condensed","Barlow","Arial Narrow",Arial,sans-serif;
  --r:6px;
  --maks:1200px;
  --margines:clamp(16px,4vw,32px);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--beton);color:var(--tekst);font:400 1.0625rem/1.58 var(--czcionka);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:.18em}
a:hover{text-decoration-color:currentColor}
button{font:inherit;color:inherit}
::selection{background:var(--lampa);color:var(--tusz)}
:focus-visible{outline:2px solid var(--lampa);outline-offset:3px;border-radius:2px}
.pasmo--szklo :focus-visible,.szklo :focus-visible{outline-color:var(--tusz)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pomin{position:absolute;left:12px;top:-60px;z-index:100;background:var(--lampa);color:var(--tusz);padding:10px 14px;border-radius:var(--r);font-weight:600}
.pomin:focus{top:10px}
.kontener{width:min(100% - 2 * var(--margines),var(--maks));margin-inline:auto}
.ik{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- diody ---------- */
.dioda{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--beton-4);flex:none;vertical-align:middle}
.dioda--ok{background:var(--led);box-shadow:0 0 .7em var(--led)}
.dioda--uwaga{background:var(--lampa);box-shadow:0 0 .7em var(--lampa)}
.dioda--blad{background:var(--igla);box-shadow:0 0 .7em var(--igla)}
.dioda--miga{animation:miganie 1.4s ease-in-out infinite}
@keyframes miganie{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.dioda--miga{animation:none}}

/* ---------- przyciski ---------- */
.przycisk{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.78em 1.25em;border-radius:var(--r);
  font:600 1rem/1.1 var(--czcionka);border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background-color .15s,color .15s,border-color .15s,transform .06s}
.przycisk:active{transform:translateY(1px)}
.przycisk--glowny{background:var(--szklo);color:var(--tusz)}
.przycisk--glowny:hover{background:#fff}
.przycisk--kontur{border-color:var(--beton-4);color:var(--tekst);background:transparent}
.przycisk--kontur:hover{border-color:var(--tekst-2);background:color-mix(in srgb,var(--tekst) 6%,transparent)}
.przycisk--ciemny{background:var(--tusz);color:var(--szklo)}
.przycisk--ciemny:hover{background:#000}
.przycisk--kontur-ciemny{border-color:color-mix(in srgb,var(--tusz) 45%,transparent);color:var(--tusz)}
.przycisk--kontur-ciemny:hover{border-color:var(--tusz);background:color-mix(in srgb,var(--tusz) 6%,transparent)}
.przycisk--maly{padding:.55em .95em;font-size:.95rem}

/* ---------- nawigacja ---------- */
.nawigacja{position:sticky;top:0;z-index:50;background:var(--beton);background:color-mix(in srgb,var(--beton) 90%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--beton-3)}
.nawigacja__wnetrze{display:flex;align-items:center;gap:clamp(16px,3vw,36px);min-height:64px}
.logo{display:inline-flex;align-items:center;gap:11px;color:var(--szklo);text-decoration:none;
  font:800 1.55rem/1 var(--naglowkowa);text-transform:uppercase;letter-spacing:.03em}
.logo__znak{width:30px;height:30px;color:var(--szklo)}
.nawigacja__menu{display:flex;gap:2px;margin-right:auto}
.nawigacja__link{position:relative;padding:22px 14px;color:var(--tekst-2);text-decoration:none;font-weight:600;transition:color .15s}
.nawigacja__link:hover{color:var(--tekst)}
.nawigacja__link::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;background:var(--igla);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease-out}
.nawigacja__link:hover::after{transform:scaleX(.25)}
body[data-strona="start"] .nawigacja__link[data-link="start"],
body[data-strona="pz"] .nawigacja__link[data-link="pz"],
body[data-strona="kontakt"] .nawigacja__link[data-link="kontakt"]{color:var(--tekst)}
body[data-strona="start"] .nawigacja__link[data-link="start"]::after,
body[data-strona="pz"] .nawigacja__link[data-link="pz"]::after,
body[data-strona="kontakt"] .nawigacja__link[data-link="kontakt"]::after{transform:scaleX(1)}
.nawigacja__konto{display:flex;align-items:center;gap:8px}
.nawigacja__przelacznik{display:none;margin-left:auto;background:transparent;border:1px solid var(--beton-4);border-radius:var(--r);
  width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer}
.nawigacja__przelacznik .ik{width:22px;height:22px}
@media (max-width:820px){
  .nawigacja__przelacznik{display:inline-flex}
  .nawigacja__menu,.nawigacja__konto{display:none;width:100%}
  .nawigacja__wnetrze{flex-wrap:wrap;padding-block:11px}
  .nawigacja--otwarta .nawigacja__menu{display:flex;flex-direction:column;order:3;margin:0}
  .nawigacja--otwarta .nawigacja__konto{display:flex;order:4;padding-bottom:12px}
  .nawigacja__link{padding:14px 4px;border-top:1px solid var(--beton-3)}
  .nawigacja__link::after{left:4px;right:auto;width:44px;bottom:8px}
}

/* ---------- pasma strony ---------- */
.pasmo{position:relative;padding-block:clamp(56px,9vw,120px)}
.pasmo--szklo{background:var(--szklo);color:var(--tusz)}
.pasmo--beton{background:var(--beton);color:var(--tekst)}
.pasmo--beton-2{background:var(--beton-2);color:var(--tekst)}
.podzialka{height:16px;color:var(--tusz);opacity:.45;
  background:
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 60px) left bottom/100% 16px no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 12px) left bottom/100% 7px no-repeat}
.podzialka--jasna{color:var(--tekst)}

.h-duzy{font:800 clamp(2.6rem,6.2vw,4.9rem)/.94 var(--naglowkowa);letter-spacing:-.004em}
.h-sredni{font:700 clamp(1.7rem,3.2vw,2.35rem)/1.05 var(--naglowkowa)}
.wstep{font-size:clamp(1.15rem,1.7vw,1.38rem);line-height:1.5;max-width:46ch}

/* ---------- wyświetlacz siedmiosegmentowy ---------- */
.siedem{display:block;width:auto;overflow:visible}
.siedem__duch{fill:currentColor;opacity:.09}
.siedem__swieci{fill:currentColor;opacity:0}
.siedem__swieci.on{opacity:1;filter:drop-shadow(0 0 5px color-mix(in srgb,currentColor 65%,transparent))}

/* ---------- stopka ---------- */
.stopka{background:var(--beton);border-top:1px solid var(--beton-3);color:var(--tekst-2);font-size:.95rem}
.stopka__skala{height:16px;color:var(--beton-4);
  background:
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 60px) left top/100% 16px no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 12px) left top/100% 7px no-repeat}
.stopka__wnetrze{display:grid;grid-template-columns:1.4fr 1fr;gap:32px 48px;padding-block:44px 36px}
.stopka__marka{font:800 1.9rem/1 var(--naglowkowa);text-transform:uppercase;color:var(--szklo);letter-spacing:.03em;margin-bottom:12px}
.stopka p{max-width:58ch}
.stopka p + p{margin-top:8px}
.stopka__linki{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.stopka__linki a{color:var(--tekst);text-decoration:none;padding-block:2px}
.stopka__linki a:hover{text-decoration:underline}
.stopka__dol{border-top:1px solid var(--beton-3);padding-block:16px;font-size:.88rem}
@media (max-width:720px){.stopka__wnetrze{grid-template-columns:1fr}}

/* rozwijane menu Project Zomboid */
.nawigacja__grupa{position:relative;display:flex;align-items:center}
.nawigacja__rozwin{display:inline-flex;align-items:center;justify-content:center;width:28px;height:36px;margin-left:-10px;padding:0;background:none;border:0;color:var(--tekst-2);cursor:pointer;border-radius:var(--r)}
.nawigacja__rozwin:hover{color:var(--tekst)}
.nawigacja__rozwin .ik{width:16px;height:16px;transition:transform .15s}
.nawigacja__rozwin[aria-expanded="true"] .ik{transform:rotate(180deg)}
.nawigacja__podmenu{display:none;position:absolute;top:100%;left:0;z-index:2;min-width:200px;padding:6px;background:var(--beton-2);border:1px solid var(--beton-4);border-radius:var(--r);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.nawigacja__podmenu a{display:block;white-space:nowrap;padding:11px 14px;color:var(--tekst-2);text-decoration:none;font-weight:600;border-radius:calc(var(--r) - 2px)}
.nawigacja__podmenu a:hover{background:var(--beton-3);color:var(--tekst)}
.nawigacja__podmenu a[aria-current="page"]{color:var(--tekst);background:var(--beton-3)}
.nawigacja__grupa:hover .nawigacja__podmenu,.nawigacja__grupa:focus-within .nawigacja__podmenu,.nawigacja__grupa--otwarta .nawigacja__podmenu{display:block}
@media (max-width:900px){
  .nawigacja__rozwin{display:none!important}
  .nawigacja__grupa{display:block}
  .nawigacja__podmenu,body[data-strona="pz"] .nawigacja__podmenu{display:block;position:static;min-width:0;margin:0;padding:0 0 8px 14px;background:none;border:0;border-radius:0;box-shadow:none}
  .nawigacja__podmenu a{padding:9px 4px;font-weight:500}
}