/* ══════════════════════════════════════════════════════════════════════════
   Roadmap - modaly (hlasovanie / nový nápad)

   Mobil je len prepočet z tokenov - Figma frame modalu v návrhu NIE JE.

   Vzhľad polí, tlačidla a súhlasného textu NIE JE tu - dedí sa zo zdieľanej
   form-karty `.zn-formcard*` (components.css, Figma „Container" 795:35652),
   tej istej, na ktorej stojí kontaktný formulár. Tu je len obal modalu:
   prekrytie, dialóg, hlavička a prepínač dôležitosti (ten vo Figme nie je -
   kontaktný formulár ho nemá - preto je postavený z theme tokenov).

   Figma frame modalu NEDODANÝ (v návrhu nie je) - rozmery a spacing preto
   z tokenov, nie odhadom z obrázka.
   ══════════════════════════════════════════════════════════════════════════ */

/* `:not([hidden])` je NUTNÉ, nie kozmetika - rovnaký vzor ako video modal
   v hero-level2. Autorské `display: flex` prebíja UA pravidlo
   `[hidden] { display: none }` (téma globálne `[hidden]` pravidlo NEMÁ, každý
   komponent si ho dopĺňa sám - viď precedens v case-studies.css). Bez tohto
   je modal viditeľný hneď po načítaní stránky a `el.hidden = true` z JS ho
   nezavrie, takže aj zatváracie tlačidlo vyzerá nefunkčne. */
.zn-rmmodal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.zn-rmmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 48, 71, 0.6);            /* --color-text @60 % */
}

/* `.zn-formcard` dodáva pozadie, padding, radius a gap; tu len rozmer a scroll
   (dlhý formulár na nízkom displeji sa musí dať odrolovať vnútri dialógu). */
.zn-rmmodal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 580px;                            /* rovnaká šírka ako kontaktná form-karta */
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
}

/* ── Rozostupy v modale (Milan 2026-09-09) ──
   ⚠️ VŠETKO scopované na `.zn-rmmodal`, NIE na `.zn-formcard`: tá má `gap: 8`
   z Figmy („Frame 15882" 795:35676) a drží na nej kontaktný formulár, ktorý je
   odsúhlasený - globálna zmena by ho rozhodila.

   ⚠️ KASKÁDA: `components.css` sa načítava PO blokových CSS, takže jednotriedne
   `.zn-rmmodal__dialog` by proti `.zn-formcard` prehralo (rovnaká špecificita,
   neskorší súbor vyhráva). Preto dvojtriedny `.zn-rmmodal__dialog.zn-formcard`.

   Obal stavu bol regresia z dvojstavového modalu: keď sa formulár, súhlasný
   text a hláška zabalili do `<div data-zn-state="form">`, prestal medzi ne
   platiť `gap` karty a zlepili sa na 0 (vidno na screenshote od Milana).
   `:not([hidden])` je tu POVINNÉ - bez neho by autorské `display: flex`
   prebilo UA pravidlo `[hidden] { display: none }` a formulár by ostal
   viditeľný aj pod poďakovaním. */
.zn-rmmodal__dialog.zn-formcard { gap: var(--space-4); }              /* 16 */
.zn-rmmodal [data-zn-state="form"]:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                                                /* 16 */
}
.zn-rmmodal .zn-formcard__fallback { gap: var(--space-3); }           /* 12 medzi poľami */

.zn-rmmodal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.zn-rmmodal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);
  line-height: 1.2;
  color: var(--color-text);
}

.zn-rmmodal__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
}
.zn-rmmodal__close:hover { background: var(--color-border); }

/* Telo detail modalu = celý popis nápadu. Odstavce sú z `wpautop`, preto sa
   rieši rozostup medzi nimi, nie jeden `<p>`. Na karte je popis Size/Small 14
   (`.zn-rm__text`), tu Size/Medium 16 - v modale to už nie je náhľad, ale
   samotný obsah. Figma pre modal spec nemá, hodnoty sú z theme tokenov. */
.zn-rmmodal__body {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.zn-rmmodal__body > :first-child { margin-top: 0; }
.zn-rmmodal__body > :last-child { margin-bottom: 0; }
.zn-rmmodal__body p { margin: 0 0 var(--space-2); }
.zn-rmmodal__body:empty { display: none; }

/* ── Nápad, za ktorý sa hlasuje (názov + celý popis) ──
   Svetlý panel oddeľuje „o čom hlasujem" od polí formulára pod ním. Figma pre
   tento modal spec NEMÁ (v návrhu nie je), takže farba aj rozmery sú z theme
   tokenov: pozadie je to isté `--color-bg-medium` ako podklad celej roadmapy
   a radius rovnaký ako na karte nápadu. */
.zn-rmmodal__subject {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-sm);              /* Radius/Small 8, ako karta */
  background: var(--color-bg-medium);
}

/* Zvýraznenie názvu = typografia karty nápadu (`.zn-rm__title`, Size/H6 20
   Sans Medium v `--color-text`), nie nový štýl. Proti okolitému 16px
   sekundárnemu textu vystúpi veľkosťou, váhou aj farbou. */
.zn-rmmodal__subject-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);            /* Sans Medium 550 */
  font-size: var(--text-2xl);                   /* Size/H6 20 */
  line-height: 1.4;
  color: var(--color-text);                     /* Scheme A/Text #023047 */
}
.zn-rmmodal__subject-title:empty { display: none; }
/* Ručná karta z repeatera popis nemá - panel sa vtedy scvrkne na samotný
   názov, `gap` nesmie nechať prázdne miesto. */
.zn-rmmodal__subject .zn-rmmodal__body:empty { display: none; }

/* ── Dôležitosť 1-3 ── */

.zn-rmform__priority {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

/* `<legend>` prehliadač vyberie z flex toku, takže `gap` fieldsetu sa medzi ňu
   a prepínače NEUPLATNÍ - odstup musí dať margin, inak sedia natesno. */
.zn-rmform__priority-legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);                   /* Size/Small 14, ako label prílohy */
  line-height: 1.5;
  color: var(--color-text);
}

.zn-rmform__priority-item {
  cursor: pointer;
}
/* Natívny radio skrytý, ale klikateľný cez label a dosiahnuteľný klávesnicou
   (nie display:none - to by ho vyradilo z tab poradia). */
.zn-rmform__priority-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.zn-rmform__priority-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-text);
}
.zn-rmform__priority-item input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-black);
}
.zn-rmform__priority-item input:focus-visible + span {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* ── Druhý stav modalu: poďakovanie ──
   `:not([hidden])` je NUTNÉ z rovnakého dôvodu ako pri samotnom modale vyššie:
   autorské `display: flex` by prebilo UA pravidlo `[hidden] { display: none }`
   a poďakovanie by bolo vidieť hneď po otvorení, ešte pred odoslaním.
   Figma pre tento stav spec nemá - ikona aj farby sú prevzaté zo stĺpca
   „Zrealizované" v roadmape, rozmery z theme tokenov. */
.zn-rmmodal__done:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  text-align: center;
}

/* Tie isté Status/Sucess tokeny, aké má `.zn-rm__col--ico-success`. */
.zn-rmmodal__done-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  --zn-ico-main: var(--color-success-dark);
  --zn-ico-soft: var(--color-success-light);
}

.zn-rmmodal__done-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);                   /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-text);
}

.zn-rmmodal__done-close { min-width: 160px; }

/* ── Chybné pole ──
   Označuje ho `aria-invalid="true"`, ktorý JS nasadí pri neúspešnej validácii -
   jeden atribút nesie význam pre čítačku aj hák pre CSS, takže sa nemôžu
   rozísť (vlastná trieda by sa rozísť mohla).

   ⚠️ ŠPECIFICITA: pole štýluje `.zn-formcard__fallback input[type="email"]`
   z components.css = (0,2,1), a ten súbor sa načítava PO blokových CSS. Preto
   dve triedy + atribút = (0,3,0), inak by sa override nechytil.

   Farby sú tokeny - orámovanie ani podklad nenesú text, takže sa na ne
   nevzťahuje AA limit, ktorý inak `--color-error` na text nespĺňa (viď
   poznámka pri hláške nižšie). */
.zn-rmmodal .zn-formcard__fallback [aria-invalid="true"] {
  border-color: var(--color-error);
  background: var(--color-error-light);
}

/* ── Chybová hláška ──
   Sedí POD súhlasným textom (posledná vec pred okrajom karty) a je to panel,
   nie riadok drobného textu - inak sa pri odoslaní prehliadne. Variant `is-ok`
   zanikol: úspech prepína modal do druhého stavu (poďakovanie), takže tento
   prvok nesie výhradne chyby.

   ⚠️ FARBA TEXTU NIE JE `--color-error`, a je to zámer: `#ef4738` má proti
   bielej kontrast 3,7:1 a proti `--color-error-light` 3,3:1 - obe POD AA 4,5:1
   pre bežný text. Téma tmavý variant („error-dark") nemá, preto literál
   s odmeranou hodnotou: `#c62828` dáva 5,6:1 na bielej a 5,0:1 na paneli.
   Tokeny sa použili tam, kde na kontraste nezáleží - pozadie a orámovanie. */
.zn-rmform__response {
  display: flex;
  /* `flex-start`, nie `center`: na úzkych šírkach sa hláška zalomí do dvoch
     riadkov a ikona má vtedy sedieť pri PRVOM riadku, nie v zvislom strede
     panelu. Odsadenie na optický stred riadku dáva `margin-top` nižšie. */
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-sm);              /* Radius/Small 8, ako ostatné panely */
  background: var(--color-error-light);
  box-shadow: inset 0 0 0 1px var(--color-error);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);            /* Sans Medium 550 - výraznejšie než okolie */
  font-size: var(--text-base);                  /* Size/Medium 16, nie drobných 14 */
  line-height: 1.5;
  color: #c62828;                               /* viď poznámka o kontraste vyššie */
}
/* Výkričník ako súčasť panelu - odlíši chybu od informácie na prvý pohľad
   bez toho, aby si CSS pýtalo ďalší SVG asset. */
.zn-rmform__response::before {
  content: '!';
  flex-shrink: 0;
  /* Bez tohto odsadenia sedí 20px krúžok na HORNEJ hrane 24px riadkového boxu
     panelu, teda vyššie než text - vidno to aj voľným okom.
     Odmerané na živom rendri (Season 550 / 16px / line-height 1.5): pol-
     prokladanie riadku 2px, baseline 16px pod hornou hranou textového boxu,
     cap-height 11,54 - optický stred prvého riadku je teda 2,23px pod hornou
     hranou obsahu panelu, kým stred krúžku bol na 0. Rovné 2px trafia aj
     cap-center aj stred em-boxu (1,75px) s presnosťou do 0,25px.
     ⚠️ ZÁMERNE LITERÁL, NIE `calc()` s `em`: tento pseudoprvok má VLASTNÝ
     `font-size: var(--text-sm)` (14px), takže `1.5em` je tu 21px, nie 24px
     riadku panelu - vzorec `calc((1.5em - 20px) / 2)` dá 0,5px a ikona ostane
     takmer tam, kde bola (overené meraním). Pri zmene `line-height` alebo
     `font-size` panelu, prípadne veľkosti krúžku, treba hodnotu premerať. */
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c62828;
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  line-height: 1;
}
/* `display: flex` vyššie by prebilo UA pravidlo `[hidden]`-typu - prázdny
   panel sa preto musí skrývať explicitne, inak by svietil prázdny červený
   obdĺžnik pri každom otvorení modalu. */
.zn-rmform__response:empty { display: none; }

/* ── Mobil ── */

@media (max-width: 767.98px) {
  /* `:not([hidden])` musí byť aj tu - základné pravidlo ho má, takže bez neho
     má tento selektor nižšiu špecificitu a padding/zarovnanie sa neprejaví. */
  .zn-rmmodal:not([hidden]) { padding: var(--space-2); align-items: flex-start; }
  .zn-rmmodal__dialog { max-height: calc(100vh - var(--space-4)); }
  .zn-rmmodal__title { font-size: var(--text-2xl); }
  /* Dôležitosť: legenda nad prepínačmi (na 360 px sa do riadku nezmestí). */
  .zn-rmform__priority { flex-wrap: wrap; }
  .zn-rmform__priority-legend { flex: 1 0 100%; }
  .zn-rmmodal__done-icon { width: 48px; height: 48px; }
  .zn-rmmodal__done-close { width: 100%; }
}