/*
 * Formuláre na stránke — Contact Form 7 s naším markupom.
 *
 * Polia samotné (`.egrant-field*`) štýluje `assets/app/_modal.scss`; sú to
 * globálne selektory, nie zanorené pod modal, takže platia aj tu a formulár
 * na stránke sa s modalom nemôže rozísť. Tento súbor rieši len to, čo je na
 * stránke iné: mriežku riadkov, súhlas a tlačidlo.
 *
 * ── Odmerané na ráme `1280 Kontakt` (snímka 09-11 13-18-47) ───────────────
 *
 *   stĺpec formulára   **480** (obsahový stĺpec 1024, dva rovnaké stĺpce
 *                      s medzerou **64**: 480 + 64 + 480 = 1024)
 *                      🔴 Do 2026-09-15 tu stálo 476 + 72 + 476. Meranie zo
 *                      snímky dalo 481,97 a 481,77 (dvakrát nezávisle,
 *                      kalibrované na pätičkovej karte s presnosťou 0,1),
 *                      takže 476 nesedelo — a Lukáš potom odčítal z Figmy
 *                      presné 480 / 64. Medzera je `spacing|110`, teda
 *                      hodnota zo škály, nie literál.
 *   pole               vonkajšia výška **48**, rám 2, radius 8 — sedí s tým,
 *                      čo `_modal.scss` už má
 *   rozteč riadkov     93,3 — pri poli 48, popise 12,8/1,25 = 16 a medzere
 *                      popis→pole 10 z toho vychádza medzera riadkov **20**
 *   súhlas             **19,2 × 19,2**, rám 2 `#5E5E5E`, radius **8**, medzera
 *                      po label 12, label **11,2** (preset `nano`)
 *   tlačidlo           **celá šírka stĺpca**, výška 40
 */

.egrant-form__row {
	display: flex;
	/*
	 * 20 medzi dvojicou polí — zadané z Figmy (Lukáš, 2026-09-15) a
	 * **potvrdené tým istým zdrojom 2026-09-15 po druhýkrát**.
	 *
	 * Meranie zo snímky dávalo 16,9 (polovice po 232,5 proti 228), ale pri
	 * rozdiele 3 px je táto metóda na hranici presnosti — a agent, ktorý to
	 * meral, to sám označil za neisté. Platí Figma.
	 *
	 * Netreba to merať tretíkrát.
	 */
	gap: var(--wp--preset--spacing--50);
}

.egrant-form__row > .egrant-field {
	flex: 1 1 0;
	min-width: 0;
}

/*
 * Rozostup medzi riadkami formulára je **20**.
 *
 * ⚠️ Pole vnútri dvojice ho mať nesmie. Keď ho malo, pripočítal sa k marginu
 * samotného riadku a rozteč vyšla **114 namiesto 94** — odmerané v prehliadači,
 * na jednoduchých riadkoch pritom 94 sedelo, takže to bolo vidieť len pri
 * dvojiciach.
 */
.egrant-form .egrant-field,
.egrant-form .egrant-form__row {
	margin-block-end: var(--wp--preset--spacing--50); /* 20px */
}

.egrant-form .egrant-form__row > .egrant-field {
	margin-block-end: 0;
}

/*
 * Súhlas: skutočný `<input type="checkbox">` zostáva v DOM a fokusovateľný —
 * bez neho by to čítačka neohlásila ako zaškrtávacie pole. Krúžok kreslí
 * `::before` na CF7 obale položky, lebo `[acceptance]` vlastný `<span>` na
 * ozdobu nepustí; vizuálne skrytý input drží stav.
 */
.egrant-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.egrant-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30); /* 12 po label */
	cursor: pointer;
}

/* Krúžok a popis sú **zvisle na stred** (Lukáš, 2026-09-15), nie na hornú
   hranu — popis je jednoriadkový na desktope a dvojriadkový na mobile. */
.egrant-form .wpcf7-acceptance label {
	align-items: center;
}

/*
 * Rozmery sú z exportovaného `Check-box.svg`, nie z oka:
 * `<rect width="17.2" height="17.2" rx="7" stroke-width="2">` a `stroke` beží
 * stredom cesty, takže vonkajší rozmer je 17,2 + 2 × 1 = **19,2** a vonkajší
 * radius 7 + 1 = **8**, teda token `radius--md`.
 *
 * ⚠️ **Nie je to kruh.** Postavil som to najprv na `border-radius: 50%` podľa
 * vlastného čítania rámu — pri 19,2 a rx 7 to tak vyzerá, ale kruh by mal
 * rx 9,6. Je to rovnaké zaoblenie ako v modale odberu, len menšie pole.
 *
 * Farba rámu je `#5E5E5E` (`neutral`), nie `#6B6B6B` ako polia — v SVG je
 * `stroke="#5E5E5E"`.
 */
.egrant-form .wpcf7-acceptance input[type="checkbox"] {
	flex-shrink: 0;
	appearance: none;
	margin: 0;
	width: 19.2px;
	height: 19.2px;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--neutral); /* #5E5E5E */
	border-radius: var(--wp--custom--radius--md); /* 8px */
	background: transparent;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--base, 0.2s ease),
		border-color var(--wp--custom--transition--base, 0.2s ease);
}

.egrant-form .wpcf7-acceptance input[type="checkbox"]:hover,
.egrant-form .wpcf7-acceptance input[type="checkbox"]:focus-visible {
	border-color: var(--wp--preset--color--ink);
}

/*
 * Zaškrtnutý stav je z exportu `State=Check.svg`:
 * `<rect fill="#141414" stroke="#141414">` a fajka
 * `<path stroke="#FCF7EB" stroke-width="2">`.
 *
 * ⚠️ **Fajka nie je biela.** `#FCF7EB` je teplá takmer-biela a token na ňu
 * v palete nie je (`surface` je `#FFFFFF`, `base` `#F5F3F1`), takže je to
 * literál. Modal odberu kreslí fajku cez `surface` — je to teda drobný rozdiel
 * medzi modalom a formulárom na stránke, nie preklep.
 *
 * ⚠️ Ten export má vonkajší rozmer **24**, nie 19,2 ako nezaškrtnutý
 * (`rect` 22 + 2 × 1). Držíme 19,2, lebo to je zadané pre desktop; 24 je
 * rozmer, ktorý má consent v modale odberu.
 *
 * Fajka ide ako `background-image`: `::before` na `appearance: none` inpute
 * je v Safari nespoľahlivé.
 */
.egrant-form .wpcf7-acceptance input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M1 5L5 9L13 1' stroke='%23FCF7EB' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 8px;
}

/*
 * Popis súhlasu je preset `tiny` (**14**) — a je 14 na desktope aj na mobile,
 * lebo `tiny` ako jediný z použitých presetov nemá v `styles.css` mobilný
 * override. Presne to bolo zadané.
 */
.egrant-form .wpcf7-list-item-label,
.egrant-form .egrant-form__consent-text {
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.4;
	color: var(--wp--preset--color--neutral);
}

/*
 * Odkaz v súhlase je **podčiarknutý, na hover sa podčiarknutie ruší**
 * (rozhodol Lukáš 2026-09-15).
 *
 * Rámy si v tom protirečia: `375 Kontakt` ho podčiarknutý **má** (ink celej
 * frázy sa spája do jedného behu 142,3…293,4), `1280 Kontakt` **nie**.
 * Pri rozpore medzi rámami berieme bohatšiu verziu, takže platí na oboch
 * šírkach.
 *
 * Má to aj dôvod mimo dizajnu: odkaz mal farbu okolitého textu (`#5E5E5E`)
 * a žiadne iné odlíšenie, takže sa nedal rozoznať od vety. Je to jediné
 * miesto vo formulári, kde sa dá kliknúť na niečo iné než na pole alebo
 * tlačidlo.
 *
 * `:focus-visible` ide s hoverom — klávesnica musí dostať tú istú spätnú
 * väzbu ako myš; obrys si `:focus-visible` rieši sám inde v téme.
 */
.egrant-form .wpcf7-list-item-label a,
.egrant-form .egrant-form__consent-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.egrant-form .wpcf7-list-item-label a:hover,
.egrant-form .wpcf7-list-item-label a:focus-visible,
.egrant-form .egrant-form__consent-text a:hover,
.egrant-form .egrant-form__consent-text a:focus-visible {
	text-decoration: none;
}

/*
 * „Správa" má v ráme **rovnakú výšku ako ostatné polia** (48), nie výšku
 * viacriadkového `textarea`. CF7 dáva `rows` a prehliadač z toho spraví
 * ~200 px, čo rám nemá ani na desktope, ani na 375.
 *
 * `resize: vertical` zostáva — text môže byť dlhý a zväčšiť si pole je
 * očakávané. Automatické rastenie má až demo booking, kde je zadané.
 *
 * ⚠️ `display: block` nie je kozmetika. Bez neho je `textarea` inline-block
 * a riadok pod ním si drží miesto na dotiahnutie písmen (descender strutu):
 * `.egrant-field` so „Správou" vyšlo **78,7** proti **74** ostatných riadkov,
 * čiže o 5 px viac — v ráme majú všetky riadky rovnakú výšku. Na `input`och
 * to vidieť nie je: Chrome ich účtuje po vlastnej účtovnici (ich baseline leží
 * vnútri poľa), takže strut pod ne nič nepridá.
 *
 * Blokom, nie `vertical-align: top`: ten by len prestal zarovnávať na účtovnicu
 * a riadkový box by zostal — výška by potom visela na `line-height` rodiča.
 * `display: block` riadkový box zruší úplne. Šírku ani rám to nemení,
 * `.egrant-field__input` má `width: 100%` a `box-sizing: border-box`.
 */
.egrant-form textarea.egrant-field__input {
	display: block;
	height: 48px;
	min-height: 48px;
	resize: vertical;
}

/* Tlačidlo drží celú šírku stĺpca — v ráme siaha od 676 po 1152. */
.egrant-form .egrant-form__submit {
	display: block;
	width: 100%;
	margin-block-start: var(--wp--preset--spacing--50); /* 20px */
}

/*
 * Loader odosielania patrí **do tlačidla**, nie pod formulár (Lukáš, 2026-09-17).
 *
 * CF7 ho vkladá JS-om ako `<span class="wpcf7-spinner">` **za** tlačidlo
 * (`includes/js/index.js`: `.has-spinner` + `insertAdjacentHTML('afterend')`),
 * takže je to **súrodenec** `input[type="submit"]`, nie jeho dieťa. Obal, na
 * ktorý by sa dalo zavesiť `position: relative`, neexistuje: `[submit]` na
 * rozdiel od polí `.wpcf7-form-control-wrap` nedostáva a `<p>` okolo nie je,
 * lebo `wpcf7_autop` je vypnutý (`functions/Forms.php`). Obaja sú **priame
 * deti `<form>`**, takže kotvou musí byť formulár — odmerané, nie odhadnuté.
 *
 * ⚠️ V pokoji je spinner `visibility: hidden`, ale `display: inline-block`,
 * takže **miesto zaberá**: odmerané pred zmenou 24 × 24 s `margin: 0 24px` na
 * vlastnom riadku hneď pod tlačidlom (spinner `y` 991,5 = spodná hrana
 * tlačidla), čiže 29 px prázdna na konci formulára. `position: absolute` ho
 * z toku vyberie a to prázdno zmizne; v pokoji sa tým tlačidlo nehne.
 *
 * ── Odmerané na `/kontakt/` (1280) ────────────────────────────────────────
 *
 *   tlačidlo   480 × **38** = 10 + 18 + 10 — `padding` 10/20 a `line-height`
 *              18 (14,4 × 1,25) sú v `theme.json`, `styles.elements.button`
 *   loader     **16**, nie pluginových 24: vnútro riadku tlačidla je 18, takže
 *              16 doň sadne s 1 px na každej strane a na `padding` nesiahne.
 *              24 by bolo o 6 vyššie než celé vnútro tlačidla
 *   zľava      **20** = `padding-left` tlačidla, teda lícuje s jeho vnútornou
 *              hranou. Tlačidlo je `width: 100%`, takže jeho ľavá hrana je
 *              totožná s ľavou hranou formulára a 20 sa dá merať od formulára
 *   zdola      **11** = (38 − 16) / 2 — stred loadera v strede tlačidla
 *
 * Kotva zdola drží preto, že tlačidlo je posledný prvok v toku formulára
 * v každom stave, v ktorom je loader vidieť: `submitting` svoju hlášku skrýva
 * (`form.submitting .wpcf7-response-output { display: none }`).
 *
 * ⚠️ Farby sú **prehodené oproti CF7**, inak loader na tlačidle nevidno:
 * plugin kreslí tmavý kotúč `#23282D` so svetlou bodkou a ten na `ink`
 * (#141414) splýva — po zmiešaní s `opacity: 0.75` vyjde #1F2327. Kotúč preto
 * dostáva `surface` a bodka `ink`; je to tá istá kresba obrátená pre tmavý
 * podklad, nie nový vzhľad.
 *
 * `::before` sa musí prepočítať spolu s ním: jeho geometria stojí na 24 —
 * bodka 6 na 4/4 a `transform-origin` 8/8, čiže stred otáčania 4 + 8 = 12,
 * teda polovica z 24. Prepočet je 16/24: bodka 4 na 2,67/2,67 a origin 5,33,
 * čo dáva stred 8.
 */
.wpcf7-form.egrant-form {
	position: relative;
}

.egrant-form .wpcf7-spinner {
	position: absolute;
	inset-inline-start: 20px;
	inset-block-end: 11px;
	width: 16px;
	height: 16px;
	margin: 0;
	background-color: var(--wp--preset--color--surface); /* #FFFFFF */
}

.egrant-form .wpcf7-spinner::before {
	top: 2.67px;
	left: 2.67px;
	width: 4px;
	height: 4px;
	transform-origin: 5.33px 5.33px;
	background-color: var(--wp--preset--color--ink); /* #141414 */
}

/*
 * Stav po odoslaní. CF7 hlášku vypisuje do `.wpcf7-response-output` a dáva jej
 * vlastný rám aj margin — žltý pri validácii, zelený `#46B450` pri `sent`,
 * červený `#DC3232` pri `failed`. Nič z toho na tomto webe nie je, takže sa to
 * celé zhasína a hláška sa skladá z toho, čo web už má.
 *
 * 🔴 **Tri triedy, nie dve.** CF7 selektuje cez `.wpcf7 form
 * .wpcf7-response-output`, teda (0,2,1) — dve triedy plus typ. Predtým tu stálo
 * `.egrant-form .wpcf7-response-output` (0,2,0) a **neplatilo to ani deň**:
 * odmerané 2026-09-17 na `/kontakt/` mala hláška aj s týmto pravidlom
 * `border: 2px solid rgb(255, 185, 0)`, `margin: 28px 7px 14px` a
 * `padding: 2.8px 14px`. `.wpcf7-form.egrant-form` dá (0,3,0) a vyhrá počtom
 * tried; obe triedy sú na tom istom `<form>`, takže sa nemajú ako rozísť.
 */
.wpcf7-form.egrant-form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--tiny);
}

/*
 * Tvar hlášky je **akcentová linka**: 3 px zvislá linka zľava a 12 odsadenie
 * za ňou (Lukáš, 2026-09-17). Návrh hlášku nemá — je to rozhodnutá otázka 3 v `docs/14` —
 * a toto je jediný tvar vysadeného textu, ktorý web už používa: `spec-list`,
 * Integrácie a kontaktná osoba ho majú cez `--wp--custom--border--accent`,
 * karta v `card-grid` a zvislá linka pásu J cez rovnaké 3 px `ink`. Nepribúda
 * teda ani token, ani farba.
 *
 * Tých 12 je `spacing--30` — tá istá hodnota za linkou ako v páse J a v karte
 * mriežky, kde je odsadenie citátu za linkou tiež 12.
 *
 * `border-inline-start`, nie `border-left`: hláška je bežný text a preklad do
 * jazyka písaného sprava má linku prehodiť s ním. (Vzory vyššie majú
 * `border-left`, lebo im linka drží stĺpec rozloženia, nie čítanie.)
 *
 * Farbu drží stav: `sent` je `ink` ako bežný text, `failed` a `spam` `error` —
 * tá istá červená, akú majú rámy a hlášky chybných polí, takže úspech a zlyhanie
 * majú rovnakú gramatiku a líšia sa len farbou. `invalid` sem nepatrí, tá sa
 * nezobrazuje vôbec (nižšie).
 */
.wpcf7-form.egrant-form.sent .wpcf7-response-output,
.wpcf7-form.egrant-form.failed .wpcf7-response-output,
.wpcf7-form.egrant-form.spam .wpcf7-response-output {
	border-inline-start: var(--wp--custom--border--accent, 3px solid #141414);
	padding-inline-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wpcf7-form.egrant-form.sent .wpcf7-response-output {
	color: var(--wp--preset--color--ink);
}

/*
 * 🔴 Linku treba prefarbiť zvlášť. `--wp--custom--border--accent` je skratka
 * **aj s farbou** (`3px solid #141414`), takže samotné `color` ju nezmení
 * a pri zlyhaní by ostala čierna linka pri červenom texte.
 * `currentColor` ju zviaže s textom, nech sa farba stavu píše len raz.
 */
.wpcf7-form.egrant-form.failed .wpcf7-response-output,
.wpcf7-form.egrant-form.spam .wpcf7-response-output {
	color: var(--wp--preset--color--error);
	border-inline-start-color: currentColor;
}

/*
 * Súhrnná hláška validácie sa **nezobrazuje** (Lukáš, 2026-09-17): nie je
 * nadizajnovaná a chybu už nesú červené rámy polí a hlášky pod nimi.
 *
 * `display: none`, nie vizuálne skrytie: CF7 vypisuje `.wpcf7-response-output`
 * s `aria-hidden="true"` (`includes/contact-form.php:764`), takže je to čistá
 * dekorácia. Čítačke to isté hlásenie ide do samostatného
 * `.screen-reader-response` — `<p role="status" aria-live="polite"
 * aria-atomic="true">` s tým istým textom a `<ul>`, kde má každé chybné pole
 * položku, na ktorú ukazuje jeho `aria-describedby`. Ten blok skrýva vizuálne
 * plugin sám (1 × 1, `clip-path: inset(50%)`) a toto pravidlo sa ho nedotýka.
 * Odmerané po odoslaní prázdneho kontaktného formulára: 5 polí s
 * `aria-invalid="true"` a 5 položiek v tom `ul`.
 *
 * ⚠️ Tri triedy na formulári sú nutné. Proti CF7 (`.wpcf7 form
 * .wpcf7-response-output`, teda (0,2,1)) by stačili dve, ale so základom vyššie
 * — ktorý má tiež (0,3,0) — by vznikla **remíza** a rozhodovalo by poradie
 * v súbore. S `.wpcf7-form.egrant-form.invalid` je to (0,4,0) a poradie je
 * jedno.
 *
 * `unaccepted` je tá istá validácia pod iným názvom; CF7 ho vráti, keď formulár
 * nemá `acceptance_as_validation`. Oba naše ho majú, takže dnes príde `invalid`
 * aj pri nezaškrtnutom súhlase (odmerané: `class="… egrant-form invalid"`).
 *
 * `sent`, `failed` a `spam` zostávajú vidieť — pri nich nie je čo zvýrazniť pri
 * poli a bez hlášky by odoslanie neoznámilo nič.
 */
.wpcf7-form.egrant-form.invalid .wpcf7-response-output,
.wpcf7-form.egrant-form.unaccepted .wpcf7-response-output {
	display: none;
}

/*
 * Chybový stav poľa — rám `#E90000` a hláška **8 pod inputom, 11,2, v tej
 * istej farbe** (Lukáš z Figmy, 2026-09-15).
 *
 * Obal `.wpcf7-form-control-wrap` musí byť blokový: CF7 ho necháva inline,
 * takže hláška by sa vysadila **vedľa** poľa, nie pod neň, a `margin-block`
 * by na inline elemente nespravil nič.
 *
 * Tých 8 je margin na hláške, nie `gap` na `.egrant-field` — ten je 10 a drží
 * medzeru popis → pole.
 */
.egrant-form .wpcf7-form-control-wrap {
	display: block;
}

/*
 * ── Mobil ────────────────────────────────────────────────────────────────
 *
 * Zaškrtávací box súhlasu je na mobile **24 × 24** s medzerou **16** po text,
 * nie desktopových 19,2 a 12. Odmerané na ráme `375 Kontakt`: box
 * x 19,9…45,2 a y 403,7…427,9.
 *
 * Nie je to chyba jednej hodnoty pre obe šírky — desktop má 19,2 a 12 a tam
 * render **sedí**: súčet celého riadku súhlasu je v ráme 407,6 = 19,2 (box)
 * + 12 (medzera) + 376,3 (text). Sú to naozaj dve veľkosti podľa šírky.
 *
 * Má to aj dôvod mimo dizajnu: 19 px je na dotyk malý cieľ.
 */
@media (max-width: 900px) {
	.egrant-form .wpcf7-acceptance label {
		gap: var(--wp--preset--spacing--40); /* 16 */
	}

	.egrant-form .wpcf7-acceptance input[type="checkbox"] {
		width: 24px;
		height: 24px;
	}
}

.egrant-form .egrant-field__input.wpcf7-not-valid {
	border-color: var(--wp--preset--color--error);
}

.egrant-form .wpcf7-not-valid-tip {
	display: block;
	margin-block-start: var(--wp--preset--spacing--20); /* 8 */
	font-size: var(--wp--preset--font-size--nano); /* 11,2 */
	line-height: 1.25;
	color: var(--wp--preset--color--error);
}

/*
 * Dvojice idú pod seba pod **720**, nie pod 900.
 *
 * Ten istý `.egrant-form__row` nesie formulár na Kontakte (stĺpec 476)
 * aj v modale odberu (520). Modal je široký 650 a na jeho ráme sú Meno
 * a Priezvisko **vedľa seba**, takže zlom na 900 by ich rozhodil aj tam, kde
 * na ne miesto je. 720 je `sm` z `_breakpoints.scss` — v prototype práve ten
 * breakpoint lámal polia formulára.
 *
 * ⚠️ Selektor musí byť **rovnako špecifický ako ten nad ním**
 * (`.egrant-form .egrant-form__row > .egrant-field`, ktorý ruší spodný margin
 * v dvojici). Keď tu bol bez `.egrant-form`, mal (0,2,0) proti (0,3,0)
 * a prehral aj vnútri media query — odmerané na 375: dvojica mala výšku
 * 148 = 2 × 74, čiže medzeru **0**.
 */
@media (max-width: 720px) {
	.egrant-form__row {
		flex-direction: column;
		gap: 0;
	}

	.egrant-form .egrant-form__row > .egrant-field {
		margin-block-end: var(--wp--preset--spacing--50);
	}

	.egrant-form .egrant-form__row > .egrant-field:last-child {
		margin-block-end: 0;
	}
}