/* help-clanok.css — vzhľad rozkliknutého návodu v nápovede (/help/<slug>), 12. 10. 2026

   Prečo to existuje: indexy /help a /blog dostali 8. 10. (#2351) hlavičku s logom, pätičku
   a písma landingu z `web-zaklad.css`, ale 16 návodov v `public/help/` ostalo v pôvodnom
   svetlom štýle bez loga. Peter 12. 10.: „vyzerá zle, neprofesionálne, nespadá to do nášho
   layoutu, logo chýba". Tento súbor nesie VŠETKO, čo sa v návodoch opakovalo ako inline
   `<style>` v každom z 16 súborov (kópia sa rozchádzala: päť rôznych oranžových pre `.warn`).
   Hlavičku, pätičku, tokeny a písma berie zo `web-zaklad.css`; tu je len obsah článku.

   Farba: limetková sa používa len tam, kde niečo znamená (odkaz, okraj poznámky, číslo kroku),
   nie na každý nadpis. Triedy majú predponu `hc-` len pri nových prvkoch; pôvodné triedy tela
   návodu (`tip`, `warn`, `day`, `step`…) ostávajú, aby sa text návodov nemusel prepisovať. */

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--wz-bg); color: var(--wz-ink); font: 400 16.5px/1.7 var(--wz-sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
main { flex: 1 0 auto; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--wz-lime); outline-offset: 2px; }

.hc-wrap { max-width: 760px; margin: 0 auto; padding: 56px 20px 80px; overflow-wrap: break-word; }

/* ── späť do nápovedy ── */
.hc-wrap .hc-spat { margin: 0 0 28px; font: 500 13px/1 var(--wz-mono); letter-spacing: .04em; }
.hc-wrap .hc-spat a { color: var(--wz-ink2); text-decoration: none; display: inline-block; padding: 10px 0; }
.hc-wrap .hc-spat a:hover { color: var(--wz-lime); }
.hc-wrap .hc-spat-dole { margin: 56px 0 0; padding-top: 24px; border-top: 1px solid var(--wz-line); }

/* ── nadpisy a text ── */
.hc-wrap h1 { margin: 0 0 12px; font: 700 clamp(30px, 4.6vw, 44px)/1.1 var(--wz-disp);
  letter-spacing: -.03em; text-wrap: balance; color: var(--wz-ink); }
.hc-wrap h2 { margin: 48px 0 0; font: 700 clamp(22px, 3vw, 26px)/1.2 var(--wz-disp);
  letter-spacing: -.02em; color: var(--wz-ink); }
.hc-wrap h3 { margin: 28px 0 0; font: 600 17.5px/1.4 var(--wz-sans); color: var(--wz-ink); }
.hc-wrap p { margin: 14px 0 0; color: var(--wz-ink2); }
.hc-wrap strong { color: var(--wz-ink); font-weight: 600; }
.hc-wrap .meta { margin: 0 0 36px; font: 500 12.5px/1.6 var(--wz-mono); letter-spacing: .02em; color: var(--wz-mute); }
.hc-wrap ol, .hc-wrap ul { margin: 14px 0 0; padding-left: 22px; color: var(--wz-ink2); }
.hc-wrap ol li, .hc-wrap ul li { margin-bottom: 8px; }
.hc-wrap ol li::marker { color: var(--wz-lime); font-weight: 600; }
.hc-wrap a { color: var(--wz-lime); text-decoration: underline; text-decoration-color: rgba(200,240,96,.4);
  text-underline-offset: 3px; }
.hc-wrap a:hover { text-decoration-color: var(--wz-lime); }
.hc-wrap code { background: var(--wz-panel2); border: 1px solid var(--wz-line); color: var(--wz-ink);
  padding: 1px 6px; border-radius: 5px; font: 500 13px/1.5 var(--wz-mono); overflow-wrap: anywhere; }

/* ── tabuľky: na počítači plná šírka stĺpca, na telefóne sa posúvajú vnútri (stránka sa nerozšíri) ── */
.hc-wrap table { display: table; width: 100%; border-collapse: collapse; margin: 18px 0 0; font-size: 14.5px; }
.hc-wrap th, .hc-wrap td { padding: 10px 14px; border-bottom: 1px solid var(--wz-line2); text-align: left;
  vertical-align: top; color: var(--wz-ink2); }
.hc-wrap th { background: var(--wz-panel); color: var(--wz-ink); font-weight: 600; }
.hc-wrap td.num { text-align: right; font-family: var(--wz-mono); white-space: nowrap; }

/* ── poznámky ── */
.tip, .warn { margin: 22px 0 0; padding: 14px 18px; border-radius: 0 10px 10px 0; border-left: 3px solid var(--wz-lime);
  background: rgba(200,240,96,.07); }
.warn { border-left-color: #f5b800; background: rgba(245,184,0,.09); }
.tip > :first-child, .warn > :first-child { margin-top: 0; }
.tip ul, .warn ul { margin-top: 8px; }

/* ── dni plánu a kroky ── */
.day { margin: 22px 0 0; padding: 18px 22px; background: var(--wz-panel); border: 1px solid var(--wz-line);
  border-left: 3px solid var(--wz-lime); border-radius: 12px; }
.day h3 { margin-top: 0; }
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start;
  margin: 14px 0 0; padding: 14px 18px; background: var(--wz-panel); border: 1px solid var(--wz-line); border-radius: 10px; }
.step-num { font: 700 18px/1.4 var(--wz-disp); color: var(--wz-lime); }
.step-time { font: 500 12px/1.9 var(--wz-mono); color: var(--wz-mute); white-space: nowrap; }

/* ── kontrolný zoznam ── */
.hc-wrap .checklist { list-style: none; padding-left: 0; }
.hc-wrap .checklist li { padding-left: 30px; position: relative; }
.hc-wrap .checklist li::before { content: "☐"; position: absolute; left: 0; font-size: 18px; color: var(--wz-lime); }

/* ── dlaždice: oprávnenia, banky ── */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 0; }
.bank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 18px 0 0; }
.hc-wrap .perm, .hc-wrap .bank { padding: 12px 16px; background: var(--wz-panel); border: 1px solid var(--wz-line); border-radius: 10px;
  font-size: 14px; color: var(--wz-ink2); }
.hc-wrap .perm { font-size: 13.5px; }
.hc-wrap .bank strong { color: var(--wz-lime); }

/* ── alias, termín, odkaz na zdroj ── */
.hc-wrap .alias-box { margin: 18px 0 0; padding: 16px 20px; background: var(--wz-panel2); border: 1px solid var(--wz-line2);
  border-radius: 10px; color: var(--wz-lime); font: 500 14px/1.6 var(--wz-mono); overflow-wrap: anywhere; }
.deadline-box { margin: 28px 0 0; padding: 20px 24px; border-radius: 12px; background: var(--wz-grad); color: #11150a; }
.deadline-box h3 { margin: 0 0 8px; color: #11150a; }
.deadline-box p, .deadline-box li, .deadline-box strong { color: #11150a; }
.hc-wrap .deadline-box a { color: #11150a; text-decoration-color: rgba(17,21,10,.5); }
.hc-wrap .ref { font-size: 12.5px; color: var(--wz-mute); }
.hc-wrap .ref a { color: var(--wz-ink2); }
.hc-wrap .hc-kod-blok { margin: 18px 0 0; padding: 16px; background: var(--wz-panel2); border: 1px solid var(--wz-line);
  border-radius: 10px; font: 500 13px/1.6 var(--wz-mono); text-align: center; color: var(--wz-ink); overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .hc-wrap table { display: block; max-width: 100%; overflow-x: auto; }
  .hc-wrap { padding: 36px 20px 56px; }
  .day { padding: 16px 18px; }
  .step { grid-template-columns: 28px minmax(0, 1fr); }
  .step-time { grid-column: 2; }
}