/* web-zaklad.css — spoločný základ verejných stránok v jazyku landingu (8. 10. 2026)

   Prečo to existuje: kritik landingu (8. 10.) ukázal na blog a nápovedu ako na
   dve stránky, ktoré vyzerajú, akoby patrili inej firme. Mali iné písmo (DM Sans
   z Google Fonts), nemali hlavičku s navigáciou a nápoveda bola celá svetlá.
   Hlavička, pätička, písma a tlačidlá sú preto tu, na jednom mieste, a berú ich
   `blog.html` aj `help.html`. Tokeny sú zámerne s predponou `--wz-`: stránky majú
   vlastné `:root` (blog `--bg`, `--accent`…) a spoločný súbor sa s nimi nesmie
   biť. Všetky triedy majú predponu `wz-` z toho istého dôvodu.

   Hodnoty (farby, písma, rozmery hlavičky) sú prevzaté z `public/landing.html`,
   nie nanovo vymyslené. Keď sa landing zmení, mení sa aj toto. Landing má svoje
   pravidlá vložené do stránky (je generovaný), preto sa k tomuto súboru neviaže. */

/* Latin aj latin-ext: bez latin-ext by chýbali č š ž ť ď ľ ň ŕ ĺ. */
@font-face{font-family:"Bricolage";font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/bric-lat.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Bricolage";font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/bric-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/inst-lat.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Instrument";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/inst-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"PlexMono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/plex-lat.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"PlexMono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/plex-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}

:root{
  --wz-bg:#0a0b07; --wz-panel:#13150e; --wz-panel2:#181b11;
  --wz-line:#282c1d; --wz-line2:#343a24;
  --wz-ink:#f4f6ea; --wz-ink2:#bcc0ab; --wz-mute:#868a73;
  --wz-lime:#c8f060; --wz-tyrkys:#60f0c8;
  --wz-grad:linear-gradient(102deg,var(--wz-lime) 0%,var(--wz-tyrkys) 100%);
  --wz-disp:"Bricolage",ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  --wz-sans:"Instrument",ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  --wz-mono:"PlexMono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}

.wz-sec{position:relative; max-width:1240px; margin:0 auto; padding:0 32px}

/* ── tlačidlá ─────────────────────────────────────────────────────────────── */
.wz-btn{border:0; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; font:600 15.5px/1 var(--wz-sans); padding:14px 24px; cursor:pointer;
  transition:transform .12s, background .15s}
.wz-btn:hover{transform:translateY(-1px)}
.wz-btn-1{background:var(--wz-grad); color:#11150a}
.wz-btn-2{background:transparent; color:#d5d9c5; border:1px solid var(--wz-line2)}
.wz-btn-2:hover{background:#171b10}

/* ── značka ───────────────────────────────────────────────────────────────── */
.wz-brand{display:flex; align-items:center; gap:7px; font:700 16px/1 var(--wz-disp);
  color:#e9ecdb; letter-spacing:-.02em; text-decoration:none}
.wz-brand .logo-img{display:block; height:28px; width:auto}
/* logo-hover: jemné zdvihnutie a žiara; bez pohybu pri prefers-reduced-motion */
.logo-img{transition:transform .2s ease,filter .2s ease}
a:hover>.logo-img,a:focus-visible>.logo-img{transform:translateY(-1px);filter:drop-shadow(0 2px 10px rgba(200,240,96,.38))}
a:hover>.logo-img[src*="svetle"],a:focus-visible>.logo-img[src*="svetle"]{filter:drop-shadow(0 2px 8px rgba(57,115,0,.3))}
@media (prefers-reduced-motion:reduce){.logo-img{transition:none}a:hover>.logo-img,a:focus-visible>.logo-img{transform:none}}
.wz-fgrid .wz-brand .logo-img{height:24px}

/* ── hlavička ─────────────────────────────────────────────────────────────── */
.wz-nav{position:sticky; top:0; z-index:50; background:rgba(10,11,7,.9);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--wz-line); font-family:var(--wz-sans)}
.wz-nav .wz-sec{display:flex; align-items:center; gap:30px; height:62px}
.wz-nav nav{display:flex; gap:26px; margin-left:14px}
.wz-nav nav a{font-size:14.5px; color:var(--wz-mute); text-decoration:none}
.wz-nav nav a:hover{color:var(--wz-ink2)}
.wz-nav nav a[aria-current]{color:var(--wz-ink)}
.wz-end{margin-left:auto; display:flex; align-items:center; gap:14px}
/* `:not(.wz-btn)` je nutné: bez neho by (0,2,1) prebilo farbu hlavného tlačidla
   a text v ňom by zosvetlel na svetlosivú na limetkovom prechode. */
.wz-end a:not(.wz-btn){font-size:14.5px; font-weight:500; color:var(--wz-ink2); text-decoration:none}
.wz-end a:not(.wz-btn):hover{color:var(--wz-ink)}
.wz-nav .wz-btn{padding:9px 16px; font-size:14px}

/* ── mobilná ponuka: <details>, funguje aj bez skriptu ───────────────────── */
.wz-mnav{display:none; position:relative}
.wz-mnav>summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  padding:15px 10px; margin:-15px -10px; border-radius:10px}  /* 40×44 px: dotyk na telefóne */
.wz-mnav>summary::-webkit-details-marker{display:none}
.wz-mnav>summary::marker{content:''}
.wz-mnav-ico{display:flex; flex-direction:column; gap:4px; width:20px}
.wz-mnav-ico i{display:block; height:2px; background:var(--wz-ink2); border-radius:2px;
  transition:transform .2s, opacity .2s}
.wz-mnav[open] .wz-mnav-ico i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.wz-mnav[open] .wz-mnav-ico i:nth-child(2){opacity:0}
.wz-mnav[open] .wz-mnav-ico i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* Pozadie je neprieľadné zámerne (rozmazanie vnoreného prvku v `.wz-nav` je neisté). */
.wz-mnav-panel{position:absolute; right:0; top:calc(100% + 14px); z-index:60;
  min-width:min(80vw,286px); display:flex; flex-direction:column; gap:2px; padding:10px;
  background:var(--wz-panel); border:1px solid var(--wz-line2); border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.wz-mnav-panel a:not(.wz-btn){font-size:16px; color:var(--wz-ink2); text-decoration:none;
  padding:11px 12px; border-radius:9px}
.wz-mnav-panel a:not(.wz-btn):hover{background:rgba(255,255,255,.06); color:var(--wz-ink)}
.wz-mnav-panel .wz-btn{margin-top:6px; padding:13px 16px; min-height:44px; justify-content:center; text-align:center}
@media (min-width:761px){ .wz-mnav-panel .wz-len-mobil{display:none} }
@media (prefers-reduced-motion:reduce){ .wz-mnav-ico i{transition:none} }

@media (max-width:1100px){
  .wz-nav nav{display:none}
  .wz-mnav{display:block}
}
@media (max-width:760px){
  .wz-sec{padding:0 20px}
  .wz-nav .wz-sec{gap:14px}
  .wz-end{display:none}
  /* Bez `.wz-end` zostáva ikona sama, tak ju odsunie vpravo ona (medzi 761 a 1100 px
     robí to isté `.wz-end` a ikona ide hneď za ním). */
  .wz-mnav{margin-left:auto}
}

/* ── pätička ──────────────────────────────────────────────────────────────── */
.wz-foot{border-top:1px solid var(--wz-line); padding:44px 0 56px; margin-top:auto;
  font-family:var(--wz-sans); color:var(--wz-mute)}
.wz-fgrid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:36px}
.wz-fgrid h4{margin:0 0 14px; font:500 9.5px/1 var(--wz-mono); letter-spacing:.17em;
  text-transform:uppercase; color:var(--wz-mute)}
.wz-fgrid a{display:block; padding:5px 0; font-size:14px; color:var(--wz-mute); text-decoration:none}
.wz-fgrid a:hover{color:var(--wz-ink2)}
.wz-fgrid a.wz-brand{padding:0; margin-bottom:14px; color:#e9ecdb}
.wz-fco{font-size:13.5px; line-height:1.7; color:var(--wz-mute)}
.wz-fbot{margin-top:40px; padding-top:22px; border-top:1px solid var(--wz-line);
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between}
.wz-fbot p{margin:0; font:500 11.5px/1.7 var(--wz-mono); letter-spacing:.03em; color:var(--wz-mute)}
.wz-fbot a{color:var(--wz-mute)}
@media (max-width:900px){ .wz-fgrid{grid-template-columns:1fr 1fr; gap:32px} .wz-fco{grid-column:1/-1} }
@media (max-width:480px){ .wz-fgrid{grid-template-columns:1fr} .wz-fgrid a{padding:9px 0} }

/* ── pomocné ──────────────────────────────────────────────────────────────── */
.wz-preskocit{position:absolute; left:-9999px; top:0; z-index:100; padding:10px 16px;
  background:var(--wz-lime); color:#0f1a00; border-radius:0 0 8px 0; font:700 13px/1 var(--wz-sans)}
.wz-preskocit:focus{left:0}
.wz-nav a:focus-visible,.wz-foot a:focus-visible,.wz-mnav>summary:focus-visible,
.wz-btn:focus-visible{outline:2px solid var(--wz-lime); outline-offset:2px}