/* =============================================================================
   IOSEC — design system
   Podľa kapitoly 11 strategického dokumentu.

   Smer: tichá technická serióznosť. Presnosť namiesto efektov.
   Cieľ nie je vyzerať ako startup — cieľ je vyzerať ako firma, ktorej štátna
   inštitúcia aj banka zveria audit, a zároveň nie ako web z roku 2019.

   Pravidlá, ktoré nemeniť:
     · jeden akcent — značková červená --brand (#BE2229). Je to farba loga
       a zároveň jediná akcentová farba rozhrania: tlačidlá, odkazy, eyebrow,
       zameranie. Druhou farbou nie je ďalší odtieň, ale --ink.
     · PRÁVE PRETO --crit nesmie byť použitá nikde inde než na skutočné
       riziko. Keby sa objavila aj v rozhraní, prestala by byť rozoznateľná —
       na stránke plnej značkovej červenej si červeného varovania nikto
       nevšimne. Rizikový štítok preto nesie tmavú výplň, nie červenú.
     · amber VÝHRADNE pre termíny a lehoty
     · informácia nikdy nesmie byť nesená len farbou
   ============================================================================= */

/* ---------- písma: hostované lokálne, nie z Google Fonts -------------------
   Načítanie z fonts.gstatic.com odošle IP adresu návštevníka do USA bez jeho
   súhlasu — LG München I, 3 O 17493/20 (2022). Pri firme, ktorá predáva služby
   zodpovednej osoby, je to zbytočná expozícia a otázka, ktorú položí klient.
   Lokálne hostovanie zároveň umožní prísnu CSP bez výnimiek.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-variable.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/fonts/public-sans-variable.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

/* ---------- tokeny -------------------------------------------------------- */

:root {
  /* farby */
  --ink: #14181A;
  --ink-2: #4B5457;
  --ink-3: #6A7376;
  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F2F4F4;
  --line: #E3E6E7;
  --line-2: #CDD3D4;

  /* Značková červená z loga. Jediný akcent rozhrania — pozri hlavičku. */
  --brand: #BE2229;
  --brand-deep: #96181E;
  --brand-soft: #FBE9EA;
  --on-brand: #FFFFFF;

  /* Tmavý pás — hero, horná lišta, záverečné CTA. Jeden podklad, jedny
     tokeny; tri rôzne zápisy tej istej tmavej sa už raz rozišli. */
  --band: #14181A;
  --on-band: #F2F4F4;
  --on-band-2: #B7C0C2;
  --on-band-3: #7E888B;
  --brand-on-band: #E8646B;   /* značková červená zosvetlená na tmavé */

  --amber: #8A5405;           /* VÝHRADNE termíny a lehoty */
  --amber-soft: #FBF1DF;
  --crit: #94272B;            /* VÝHRADNE skutočné riziko — nikde inde */
  --crit-soft: #F6E3E3;
  --good: #24593F;            /* súlad, splnené */
  --good-soft: #E4F0E9;

  /* odstupy — 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* tvar — žiadne veľké zaoblenia, pôsobia hravo */
  --r-control: 2px;
  --r-box: 2px;

  --shadow: 0 1px 2px rgba(20,24,26,.06), 0 10px 28px -14px rgba(20,24,26,.22);
  --wrap: 1200px;
}

/* ---------- základ -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; }

a { color: var(--brand-deep); text-underline-offset: 2px; }
a:hover { color: var(--brand); }

/* Viditeľný stav zamerania na KAŽDOM interaktívnom prvku — obrys, nie len farba. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--on-brand); padding: 10px 16px;
}
.skip:focus { left: var(--s2); top: var(--s2); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- typografia ---------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.05; }
h2 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.12; margin-bottom: var(--s3); }
h3 { font-family: 'Public Sans', sans-serif; font-weight: 650; font-size: 20px; line-height: 1.3; }
h4 { font-family: 'Public Sans', sans-serif; font-weight: 650; font-size: 17px; line-height: 1.3; }

/* Šírka odseku max 68 znakov — bloky cez celú šírku sú hlavná príčina
   nízkej čitateľnosti uvedenej vo SWOT (W2). */
p { margin: 0 0 var(--s4); max-width: 68ch; }

.lede { font-size: clamp(17px, 1.7vw, 19px); color: var(--ink-2); max-width: 62ch; }

.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 var(--s3); font-weight: 500;
}

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* Monospace pri právnych referenciách nie je ozdoba — zvyšuje presnosť čítania. */
.paragraf { font-family: 'IBM Plex Mono', monospace; font-size: .92em; }

/* ---------- tlačidlá ------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: 600 16px/1.2 'Public Sans', sans-serif;
  padding: 14px 24px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-deep); color: var(--on-brand); }

/* Sekundárne CTA má VŽDY inú vizuálnu váhu — dve tlačidlá rovnakej váhy
   vedľa seba znižujú konverziu oboch. */
.btn-secondary { background: transparent; color: var(--brand-deep); border-color: var(--brand); }
.btn-secondary:hover { background: var(--brand-soft); }

.btn-sm { padding: 9px 16px; font-size: 14.5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- hlavička ------------------------------------------------------ */

.utility {
  background: var(--band); color: var(--on-band-2);
  font-size: 12.5px;
}
.utility .wrap { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.utility a { color: var(--on-band-2); text-decoration: none; }
.utility a:hover { color: var(--on-band); }
.utility .lang { display: flex; gap: var(--s3); }
.utility .lang [aria-current='true'] { color: var(--on-band); font-weight: 600; }
.utility .tool { color: var(--brand-on-band); font-weight: 600; }
/* Hranica 760 px je zámerne zhodná s .mobilebar: horná lišta končí presne
   tam, kde spodná začína, takže telefón nezmizne zo žiadnej šírky.
   Pri 860 px tu vznikalo pásmo 761–860 px bez telefónu v oboch lištách. */
@media (max-width: 760px) { .utility { display: none; } }

header.site {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
header.site .bar { display: flex; align-items: center; gap: var(--s5); height: 72px; }

/* Logo je obrázok (/images/iosec.svg), nie text — typografické pravidlá sem
   preto nepatria. Zostáva len to, čo sa týka odkazu a jeho miesta v lište:
   flex drží logo v pevnej šírke, aby ho navigácia nestláčala. */
.logo { text-decoration: none; flex: 0 0 auto; }
/* Výška určuje mierku, šírka sa dopočíta z pomeru vo viewBoxe. */
.logo img { display: block; height: 28px; width: auto; }

nav.main { display: flex; align-items: center; gap: var(--s5); flex: 1; font-size: 14.5px; }
/* Šípka mega menu je TU, nie v texte odkazu.
   Text odkazu musí byť na každej stránke rovnaký — landing pages panel nemajú
   a položka „Riešenia" tam vedie rovno na /ponuka. Afordancia rozbaľovania
   preto patrí do štýlu, nie do obsahu. Stráži to kontrola 4u. */
#megaToggle::after { content: ' \25BE'; }

nav.main a { color: var(--ink-2); text-decoration: none; padding: 6px 0; }
nav.main a:hover { color: var(--ink); }
/* Komerčná priorita je vizuálne zvýraznená — ale aj textom, nie len farbou. */
nav.main a.highlight { color: var(--brand-deep); font-weight: 650; }
@media (max-width: 1080px) { nav.main { display: none; } }

.burger {
  display: none; margin-left: auto; background: none; border: 0;
  padding: var(--s2); cursor: pointer; color: var(--ink);
}
@media (max-width: 1080px) { .burger { display: block; } }

/* C1 — tlačidlo v hlavičke sa na mobile skrýva. Vedie na to isté miesto ako
   „Konzultácia" v spodnej lište, ktorá je od 760 px nižšie vždy viditeľná,
   a v 390 px lište sa jeho text lámal na dva riadky (129 × 55 px v 72 px pruhu).
   Hranica je zámerne tá istá, pri ktorej sa spodná lišta zapína — inak by
   vzniklo pásmo bez tlačidla v oboch. */
@media (max-width: 760px) { header.site .bar > a.btn { display: none; } }

/* C2 — dotykový terč ☰. Ikona ostáva rovnaká, rastie len plocha okolo nej.
   Je to jediný ovládací prvok navigácie na mobile; 28 × 32 px bolo pod
   odporúčaním 44 × 44 px. */
.burger {
  min-width: 44px; min-height: 44px;
  display: none; align-items: center; justify-content: center;
}
@media (max-width: 1080px) { .burger { display: flex; } }

/* B2 — prepínač jazykov v menu pod ☰. Horná lišta .utility je pod 760 px
   skrytá celá a jazyky sa inak na mobile nedali prepnúť.

   Zobrazuje sa LEN vtedy, keď existuje viac než jedna verzia stránky:
   :has(a + a) znamená „aspoň dva odkazy vedľa seba". Jazykové verzie filtruje
   {{ if exists }} v šablóne, takže na stránke len po slovensky je odkaz jeden
   a blok sa nevykreslí. Keby prehliadač :has() nepoznal, blok zostane skrytý —
   zlyhá teda smerom k ničomu, nie k prepínaču s jediným jazykom. */
.jazyky-mobil { display: none; }
.jazyky-mobil .popis {
  font-size: 12.5px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .08em;
}
/* Selektor musí niesť nav.main, inak ho prebije `nav.main a { padding: 6px 0 }`
   vyššie — má dva typové selektory, teda vyššiu špecifickosť, a poradie
   v súbore s tým nič neurobí. Terč je potom 36 px namiesto 44. */
nav.main .jazyky-mobil a { padding: 10px 12px; min-width: 44px; text-align: center; }
.jazyky-mobil a[aria-current='true'] { color: var(--ink); font-weight: 650; }
@media (max-width: 760px) {
  .jazyky-mobil:has(a + a) {
    display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
    margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line);
  }
}

/* mega menu */
.mega {
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* Rozcestník k celej ponuke zastrešuje obidva stĺpce služieb, preto stojí
   nad mriežkou samostatne. Ako položka jedného zo stĺpcov by tvrdil, že
   patrí len k nemu. */
.mega .mega-top { padding: var(--s5) 0 0; font-size: 14px; }
.mega .mega-top a { color: var(--ink-2); text-decoration: none; }
.mega .mega-top a:hover { color: var(--brand); }

.mega .cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6);
  padding: var(--s6) 0;
}
/* Stĺpce mega menu a pätky sú v osnove stránky sekcie, nie štvrtá úroveň:
   nad nimi nie je žiadny h3, takže h4 tvoril skok h2 → h4 na 45 stránkach.
   Tag je preto h2 a celý vzhľad drží toto pravidlo — vrátane line-height,
   ktorý dovtedy prichádzal zo základného h4 (1.3); h2 má 1.12. */
.mega h2 {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600;
  line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--s3);
}
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mega ul a { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.mega ul a:hover { color: var(--brand); }

/* Štvrtý stĺpec nie je zoznam odkazov, ale konverzný blok. Návštevník, ktorý
   otvorí menu a nevie si vybrať, je presne ten, ktorého treba zachytiť. */
.mega .tool-card {
  background: var(--brand-soft); border: 1px solid var(--brand);
  border-radius: var(--r-box); padding: var(--s5);
}
.mega .tool-card p { font-size: 14px; color: var(--ink-2); margin-bottom: var(--s4); }

/* ---------- sekcie -------------------------------------------------------- */

section { padding: var(--s8) 0; border-top: 1px solid var(--line); }
/* Zámerný pás. Rytmus stránky nesie málo takých plôch, nie striedanie
   každej sekcie — preto sa trieda vyžiada, nie je predvoleným stavom.
   Trieda, ktorú nahradila, nastavovala --surface — lenže --surface aj
   --paper sú biele, takže tvrdila niečo, čo nerobila. */
section.band-soft { background: var(--surface-2); }
section.first { border-top: none; }

/* Predvolená hlavička je SVETLÁ. Odkazy aj sekundárne tlačidlo v nej
   zámerne dedia globálne pravidlá (--brand-deep, --brand-soft pri hoveri) —
   na bielom sú správne a vlastné pravidlo by len vytvorilo druhé miesto,
   kde tú istú hodnotu udržiavať. */
.hero {
  background: var(--paper);
  border-top: none;
  border-bottom: 1px solid var(--line);
  padding: var(--s7) 0 var(--s8);
}
.hero h1 { max-width: 19ch; margin-bottom: var(--s5); color: var(--ink); }
.hero .eyebrow { color: var(--brand); }
.hero .lede { margin-bottom: var(--s6); color: var(--ink-2); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s5); }
.hero .trust {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--ink-3); margin: 0; max-width: none;
}
/* Sekcia hneď za hlavičkou má vlastnú hornú linku — bez tohto by sa
   zdvojila so spodnou linkou hera na 2 px. */
.hero + section { border-top: none; }

/* Tmavý pás sa VYŽIADA. Patrí stránkam, ktoré niečo ponúkajú — domovská,
   služba, odvetvie, rozcestník Academy — nie článkom, kurzom, profilom
   a chybovej stránke. Značková červená sa do plochy nerozlieva: sýty
   akcent cez celú hlavičku by z dokumentu urobil reklamný panel, kým
   tmavý pás nesie kontrast bez toho, aby kričal. */
.hero--band { background: var(--band); border-bottom: none; }
.hero--band h1 { color: var(--on-band); }
.hero--band .eyebrow { color: var(--brand-on-band); }
.hero--band .lede { color: var(--on-band-2); }
.hero--band .trust { color: var(--on-band-3); }
/* Odkaz v texte — predvolená --brand-deep je na tmavom nečitateľná. */
.hero--band a:not(.btn) { color: var(--brand-on-band); }
/* Sekundárne CTA na páse: priehľadné s bielym orámovaním. Predvolený
   svetlý hover (--brand-soft) by tu dal bledoružovú plochu pod bielym
   textom, preto sa prekrýva aj on. */
.hero--band .btn-secondary {
  background: transparent; color: var(--on-band);
  border-color: rgba(255,255,255,.38);
}
.hero--band .btn-secondary:hover { background: rgba(255,255,255,.10); color: #FFFFFF; }

/* ---------- mriežky a karty ----------------------------------------------- */

.grid { display: grid; gap: var(--s5); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-box); padding: var(--s5);
}
/* Tieň iba pri hoveri — karty v pokoji tieň nemajú, inak sa hierarchia sploští. */
a.card { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s; }
a.card:hover { box-shadow: var(--shadow); }
.card h3 { margin-bottom: var(--s2); }
/* Karta v zozname článkov stojí priamo pod h1, takže jej nadpis je h2 — nie h3
   ako v kartách, nad ktorými sekciu uvádza h2. Vzhľad je zhodný s h3. */
.card h2 {
  font-family: 'Public Sans', sans-serif; font-weight: 650; font-size: 20px;
  line-height: 1.3; margin-bottom: var(--s2);
}
/* Tri stĺpce v páse „Osem rámcov, jeden partner" sú podsekcie toho h2, teda h3.
   Veľkosť zostáva 17 px ako pri pôvodnom h4 — zvyšok typografie je pri h3 a h4
   zhodný (Public Sans 650, riadok 1.3). */
.ramce h3 { font-size: 17px; }
.card p { font-size: 15px; color: var(--ink-2); margin-bottom: 0; }
.card .price {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ink-3);
  display: block; margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

/* dôkazový pás */
.proof {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-box); overflow: hidden;
}
.proof > div { padding: var(--s5); border-right: 1px solid var(--line); }
.proof > div:last-child { border-right: none; }
.proof b {
  display: block; font-family: 'Source Serif 4', serif; font-size: 32px;
  line-height: 1.05; font-weight: 500; font-variant-numeric: tabular-nums;
  margin-bottom: var(--s1);
}
.proof span { font-size: 13.5px; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 700px) {
  .proof > div { border-right: none; border-bottom: 1px solid var(--line); }
  .proof > div:last-child { border-bottom: none; }
}

/* Vysvetlivka pod dôkazovým pásom — hovorí, na čo sa čísla nad ňou vzťahujú.
   Bez nej by sa slovenské zákazky a skupinové číslo mohli čítať ako jeden rozsah. */
.proof-rozsah {
  margin-top: var(--s3); font-size: 13.5px; line-height: 1.5; color: var(--ink-3);
}

/* blok lehoty — VYHRADENÉ pre termíny, nie pre bežné upozornenia */
.deadline-box {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-box) var(--r-box) 0;
  padding: var(--s4) var(--s5);
}

/* odznak stavu — farba AJ text, nikdy len farba */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-box);
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
  white-space: nowrap; line-height: 1.7;
}
.b-good { background: var(--good-soft); color: var(--good); }
.b-amber { background: var(--amber-soft); color: var(--amber); }

/* Rizikový štítok má tmavú výplň, nie červenú. Značková červená je teraz
   akcentom celého rozhrania, takže červený štítok by v nej zanikol.
   Symbol je druhý nosič informácie popri farbe — bez neho by riziko
   odlišovala od ostatných štítkov iba farba výplne. */
.b-crit { background: var(--ink); color: #FFFFFF; }
.b-crit::before { content: '▲\00a0'; color: var(--brand-on-band); }

/* --ink-3 na --surface-2 dáva 4,40:1, teda pod hranicou pre bežný text.
   Pri 11 px sa to nedá obhájiť veľkosťou, preto --ink-2 (7,03:1). */
.b-mute { background: var(--surface-2); color: var(--ink-2); }

/* ---------- kalendár povinností ------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s5); border-left: 2px solid var(--line-2); }
.timeline li { position: relative; padding-bottom: var(--s5); }
.timeline li::before {
  content: ''; position: absolute; left: calc(-1 * var(--s5) - 7px); top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--paper);
}
.timeline li.is-amber::before { background: var(--amber); }
.timeline li.is-crit::before { background: var(--crit); }
.timeline .when {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.timeline .what { font-weight: 650; font-size: 16px; text-decoration: none; color: var(--ink); }
.timeline .what:hover { color: var(--brand); }

/* ---------- článok -------------------------------------------------------- */

.article { max-width: 68ch; }
.article h2 { margin-top: var(--s7); }
.article h3 { margin-top: var(--s6); margin-bottom: var(--s2); }
.article ul, .article ol { padding-left: var(--s5); }
.article li { margin-bottom: var(--s2); }
.article li::marker { color: var(--brand); }
.article blockquote {
  margin: var(--s5) 0; padding: var(--s4) var(--s5);
  border-left: 3px solid var(--brand); background: var(--brand-soft);
  border-radius: 0 var(--r-box) var(--r-box) 0;
}
.article blockquote p:last-child { margin-bottom: 0; }

.meta-autor {
  display: flex; gap: var(--s4); align-items: center;
  padding: var(--s5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-box);
}
.meta-autor img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.meta-autor .kto { font-weight: 650; }
.meta-autor .cert {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-3);
}

/* Pri právnom obsahu je zastaraný článok horší než žiadny. */
.overene {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
  color: var(--ink-3); border-top: 1px solid var(--line);
  padding-top: var(--s3); margin-top: var(--s5);
}

/* Zdroje sú surové adresy a tie nemajú kde zalomiť. Adresa PDF v Zbierke
   zákonov je 441 px široká a na 390 px roztiahla telo článku do strán —
   kontrola 4e to nechytila, lebo nový článok v jej zozname adries nebol.
   `anywhere` zalomí aj vnútri slova; je to jediné miesto, kde je to správne,
   pretože adresa slovo nie je. */
.article .zdroje a,
.overene a { overflow-wrap: anywhere; }

/* ---------- tabuľky ------------------------------------------------------- */

.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface); }
/* Rolovací kontajner tabuľky. Vyrába ho modifikátor obal_tabulky v layoute —
   v CSS sa vytvoriť nedá, pozri app/Modifiers/ObalTabulky.php.

   min-width: 560px nižšie je zámer: pod touto šírkou sú stĺpce nečitateľné.
   Chyba nikdy nebola v minime, ale v tom, že tabuľku nemal kto rolovať —
   a tak rolovalo telo stránky. Na desktope, kde je kontajner širší než 560 px,
   sa nič nedeje: overflow-x: auto sa prejaví, až keď je čo rolovať. */
.tabulka-obal { overflow-x: auto; }
.tabulka-obal:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; }
th {
  text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  font-weight: 600; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-2); vertical-align: bottom;
}
/* Bez zebra pruhov, len tenké deliace linky. */
td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------- formuláre ----------------------------------------------------- */

.field { margin-bottom: var(--s4); }
.field label {
  display: block; font: 650 13.5px/1.4 'Public Sans', sans-serif;
  color: var(--ink-2); margin-bottom: 5px;
}
.req { color: var(--crit); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px/1.4 'Public Sans', sans-serif; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-control); padding: 12px 13px;
}
.field input, .field select { height: 46px; }
.field select {
  appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236B7B7E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); outline: 2px solid rgba(190,34,41,.25); outline-offset: 0;
}
/* Chybová hláška hovorí, čo opraviť — nie „Neplatný vstup“. */
.field .err { display: none; font-size: 13px; color: var(--crit); margin-top: 5px; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--crit); }
.field.invalid .err { display: block; }

/* Potvrdzovacie políčko. Bez tohto pravidla by ho .field input roztiahlo
   na plnú šírku a 46 px výšky. */
.field.potvrdenie { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; }
.field.potvrdenie input[type="checkbox"] {
  width: 18px; height: 18px; min-height: 0; flex: 0 0 auto; margin-top: 2px; padding: 0;
  accent-color: var(--brand);
}
.field.potvrdenie label {
  flex: 1; margin: 0; font-weight: 400; line-height: 1.5; color: var(--ink-2);
}
.field.potvrdenie .err { flex-basis: 100%; margin-top: 0; }

/* Honeypot — skryté pole, ktoré vyplní len automat. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.formcard { background: var(--surface); border-radius: var(--r-box); padding: var(--s6); color: var(--ink); }

/* Ponuka vzoru politiky uchovávania — v článku aj pod popisom služby.
   Text na tomto podklade je --ink-2, nie --ink-3: na sivom je --ink-3
   pod hranicou kontrastu (pozri pravidlo v CLAUDE.md). */
.vzor-ponuka {
  max-width: 68ch; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-box) var(--r-box) 0;
  padding: var(--s5) var(--s6); margin-top: var(--s6);
}
.vzor-ponuka > h2 { margin-top: 0; }
.vzor-ponuka p { color: var(--ink-2); }
.vzor-ponuka .vzor-form { margin-top: var(--s5); }
.vzor-ponuka .formnote { font-size: 13.5px; color: var(--ink-2); }
.formnote { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0; }

.formmsg { border-radius: var(--r-box); padding: var(--s4) var(--s5); font-size: 15px; margin-top: var(--s4); }
.formmsg.ok { background: var(--good-soft); color: var(--good); border-left: 3px solid var(--good); }
.formmsg.bad { background: var(--crit-soft); color: var(--crit); border-left: 3px solid var(--crit); }

/* ---------- FAQ ----------------------------------------------------------- */

.faq { border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; background: var(--surface); max-width: 840px; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: var(--s4) var(--s5); font-weight: 650; font-size: 16.5px;
  list-style: none; display: flex; gap: var(--s3); align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; color: var(--brand); font-weight: 600; font-size: 19px; line-height: 1.25; flex-shrink: 0; }
.faq details[open] summary::before { content: '−'; }
.faq .a { padding: 0 var(--s5) var(--s4) 52px; }
.faq .a p { font-size: 15.5px; color: var(--ink-2); }

/* ---------- Academy ------------------------------------------------------- */

.kurz-karta {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-box); padding: var(--s5); display: flex; flex-direction: column;
}
/* Typ školenia je vidieť na prvý pohľad — termínovaný má amber pruh (má lehotu),
   trvalo dostupný neutrálny (lehotu nemá a nesmie ju predstierať). Značková
   červená sem nepatrí: vedľa jantárového pruhu by dvojica čítala ako stupnica
   závažnosti, hoci ide len o typ školenia. */
.kurz-karta.terminovany { border-left: 3px solid var(--amber); }
.kurz-karta.online_trvaly { border-left: 3px solid var(--line-2); }
.kurz-karta .typ {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2);
}
.kurz-karta h3 { margin-bottom: var(--s2); }
.kurz-karta p { font-size: 15px; color: var(--ink-2); }
.kurz-karta .spodok { margin-top: auto; padding-top: var(--s4); }

.termin-riadok {
  display: grid; grid-template-columns: 150px 1fr auto; gap: var(--s4);
  align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.termin-riadok:last-child { border-bottom: none; }
.termin-riadok .datum { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600; }
@media (max-width: 640px) { .termin-riadok { grid-template-columns: 1fr; gap: var(--s2); } }

/* ---------- záverečné CTA ------------------------------------------------- */

.final { background: var(--band); color: var(--on-band); border-top: none; }
.final h2, .final h3 { color: var(--on-band); }
.final .lede { color: var(--on-band-2); }
.final .kontakt {
  font-family: 'IBM Plex Mono', monospace; font-size: 14px;
  color: var(--on-band-3); line-height: 1.9; margin-top: var(--s5);
}
.final .kontakt a { color: var(--on-band-2); }

/* ---------- pätička ------------------------------------------------------- */

footer.site {
  background: var(--surface); border-top: 1px solid var(--line);
  padding: var(--s7) 0 var(--s6); font-size: 14px; color: var(--ink-3);
}
footer.site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s6); }
footer.site h2 {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600;
  line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s3);
}
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer.site a { color: var(--ink-3); text-decoration: none; }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
/* C3 — dotykový terč odkazov v spodnom riadku. Výška riadka je 15 px,
   čo je pod hranicou 24 × 24 px podľa WCAG 2.5.8. Nie sú to odkazy vo vete,
   ale samostatné položky oddelené bodkou, takže výnimka pre text neplatí.
   Mení sa len odsadenie — text, farba ani poradie nie. */
@media (max-width: 760px) {
  footer.site .spodok a { display: inline-block; padding: 15px 6px; }
}
footer.site .spodok {
  margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
  font-size: 12.5px;
}

/* ---------- mobilná sticky lišta ------------------------------------------ */
/* B2B rozhodovatelia čítajú z mobilu — ale volajú z neho tiež. */

.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: var(--s2); padding: var(--s2);
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px rgba(20,24,26,.07);
}
.mobilebar .btn { flex: 1; padding: 12px 10px; font-size: 15px; }
@media (max-width: 760px) {
  .mobilebar { display: flex; }
  body { padding-bottom: 72px; }
}

/* ---------- miesta na doplnenie ------------------------------------------- */
/* Viditeľné šrafovanie. Nie je to poznámka pre vývojára — je to vec,
   bez ktorej stránka nemá ísť online. */

.todo {
  background: repeating-linear-gradient(135deg, var(--amber-soft), var(--amber-soft) 9px, #F2E2C8 9px, #F2E2C8 18px);
  border: 1px dashed var(--amber); border-radius: var(--r-box); padding: var(--s4) var(--s5);
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #6E4404; line-height: 1.55;
}
.todo b { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; }

/* ---------- tlač ---------------------------------------------------------- */

@media print {
  .utility, header.site, .mobilebar, .final form, .todo { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* ---------- štítok oblasti na karte článku -------------------------------- */

/* Oblasť stojí NAD nadpisom: čitateľ má vidieť, čoho sa článok týka, skôr než
   prečíta názov. Tmavá výplň je tu zámerne — je to jediný prvok karty, ktorý
   má plochu, takže sa nájde očami bez toho, aby prekričal nadpis.

   Značková červená by tu nefungovala: na webe je akcentom odkazov a tlačidiel,
   takže červená plocha na karte by sľubovala kliknutie, ktoré štítok nerobí
   (karta je celá jeden odkaz, vnorený <a> v HTML nie je platný). */
.b-oblast { background: var(--ink); color: #FFFFFF; }

.meta-karta {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s3); flex-wrap: wrap;
}
.datum-karta {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ink-3);
}

/* Popisok len pre čítačku obrazovky. Bez neho je štítok len farebná plocha
   s jedným slovom a nevidiaci čitateľ nemá ako vedieť, čo to slovo znamená. */
.vo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Pás oblastí nad zoznamom článkov. Štítok je tu ODKAZ, nie len značka —
   preto dostáva podčiarknutie pri hoveri; bez neho by sa nedalo rozoznať,
   že sa naň dá kliknúť, a farba sama to nepovie. */
.pas-oblasti { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }
a.b-oblast { text-decoration: none; }
a.b-oblast:hover { text-decoration: underline; }
.pocet-oblasti { opacity: .6; }