/*
 * Styly kontaktního formuláře (Contact Form 7) na stránce Kontakt.
 * Načítá se podmíněně jen na této stránce (functions.php, is_page).
 *
 * Jak funguje „plovoucí label":
 * Každé pole formuláře je v obalu <div class="mz-pole"> a label stojí AŽ ZA
 * polem (viz šablona formuláře v administraci CF7). Label je absolutně
 * napozicovaný PŘES pole, takže na první pohled vypadá jako placeholder.
 * Jakmile uživatel do pole klikne (:focus-within) nebo něco napíše
 * (:has(:not(:placeholder-shown)) — pole má nastavený skutečný placeholder,
 * který ale barvíme jako průhledný), label se s animací zmenší a vyjede
 * nahoru na horní hranu rámečku (bílá „destička" překryje linku rámečku).
 *
 * ⚠️ Nutné podmínky, bez kterých se labely rozbijí:
 *  - ve functions.php je vypnutý CF7 autop (filtr wpcf7_autop_or_not) —
 *    jinak CF7 obalí obsah do <p> a vloží <br />, label spadne pod pole;
 *  - při úpravě polí v adminu CF7 zachovat obaly .mz-pole a atributy
 *    id:/placeholder u polí.
 */

/* Celý formulář jako karta: bílé pozadí, jemný teplý rámeček a měkký stín,
   aby se zvedl z bílé stránky (stejný duch jako produktové karty). */
.wpcf7 {
	background: var(--wp--preset--color--bila);
	border: 1px solid #f5e9e6;
	border-radius: 16px;
	padding: 22px 20px 20px;
	box-shadow: 0 10px 28px rgba(176, 75, 71, 0.07);
}

/* Obal jednoho pole — kotva pro absolutní pozici labelu. Mezera dole dělá
   vertikální rytmus formuláře. */
.wpcf7 .mz-pole {
	position: relative;
	margin-bottom: 16px;
}

/* Wrapper, do kterého CF7 balí input (span) — roztáhnout na blok, aby pole
   zabralo celou šířku karty. */
.wpcf7 .mz-pole .wpcf7-form-control-wrap {
	display: block;
}

/* Samotná pole: bílá výplň, teplý rámeček, kompaktní výška. */
.wpcf7 .mz-pole input.wpcf7-form-control,
.wpcf7 .mz-pole textarea.wpcf7-form-control {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--bila);
	border: 1px solid #ecdcd8;
	border-radius: 12px;
	padding: 10px 14px;
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--antracit);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Najetí myší: rámeček lehce zkorálovatí — pole „ožije" před kliknutím. */
.wpcf7 .mz-pole .wpcf7-form-control:hover {
	border-color: var(--wp--preset--color--koralova);
}

/* Fokus: korálový rámeček + měkká záře v barvě palety (color-mix vyrobí
   průhlednou korálovou, ať nemusíme mít rgba hodnotu natvrdo). */
.wpcf7 .mz-pole .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--koralova);
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--wp--preset--color--koralova) 18%, transparent);
}

/* Nativní placeholder skrýváme — jeho roli hraje plovoucí label. Atribut
   placeholder ale pole MÍT MUSÍ, jinak by nefungoval selektor
   :placeholder-shown (poznáváme podle něj prázdné/vyplněné pole). */
.wpcf7 .mz-pole .wpcf7-form-control::placeholder {
	color: transparent;
}

/* Zpráva (textarea): nižší výchozí výška, zvětšovat jde jen svisle. */
.wpcf7 .mz-pole--textarea textarea.wpcf7-form-control {
	height: 110px;
	resize: vertical;
}

/* Label v klidovém stavu: leží přes pole na pozici textu, šedý jako
   placeholdery jinde na webu. pointer-events: none → klik projde do pole. */
.wpcf7 .mz-pole > label {
	position: absolute;
	left: 15px;
	top: 11px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--seda);
	pointer-events: none;
	transition: top 0.18s ease, left 0.18s ease, font-size 0.18s ease,
		color 0.18s ease;
}

/* Vysunutý stav labelu: při fokusu NEBO když je pole vyplněné. Label se
   zmenší a vyjede na horní linku rámečku; bílé pozadí s paddingem linku
   „přeruší", takže text neleží přes čáru. */
.wpcf7 .mz-pole:focus-within > label,
.wpcf7 .mz-pole:has(.wpcf7-form-control:not(:placeholder-shown)) > label {
	top: -8px;
	left: 11px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	padding: 0 5px;
	border-radius: 7px;
	background: var(--wp--preset--color--bila);
}

/* Samostatně pro automaticky předvyplněná pole prohlížečem (autofill) —
   nesmí být ve výčtu výše: prohlížeč bez podpory :-webkit-autofill by kvůli
   neznámému selektoru zahodil celé pravidlo. */
.wpcf7 .mz-pole:has(.wpcf7-form-control:-webkit-autofill) > label {
	top: -8px;
	left: 11px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	padding: 0 5px;
	border-radius: 7px;
	background: var(--wp--preset--color--bila);
}

/* Při fokusu je vysunutý label korálový (ladí s rámečkem pole). */
.wpcf7 .mz-pole:focus-within > label {
	color: var(--wp--preset--color--koralova-tmava);
}

/* Validace: nevyplněné povinné pole dostane od CF7 třídu wpcf7-not-valid —
   rámeček zčervená a pod polem se ukáže krátká hláška (not-valid-tip). */
.wpcf7 .mz-pole .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--wp--preset--color--koralova-tmava);
}

.wpcf7 .mz-pole .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--wp--preset--color--koralova-tmava);
}

/* Odesílací tlačítko: korálová pilulka jako CTA tlačítka webu (theme.json),
   na hover ztmavne a lehce se zvedne — stejná konvence jako karty. CF7 není
   blok, styly z theme.json nedědí, proto je tu opakujeme. */
.wpcf7 .wpcf7-submit {
	display: inline-block;
	border: none;
	cursor: pointer;
	background: var(--wp--preset--color--koralova-syta);
	color: var(--wp--preset--color--bila);
	border-radius: 24px;
	padding: 9px 24px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	transition: background-color 0.18s ease, transform 0.18s ease,
		box-shadow 0.18s ease;
}

.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus {
	background: var(--wp--preset--color--koralova-tmava);
	transform: translateY(-1px);
	box-shadow: 0 5px 14px
		color-mix(in srgb, var(--wp--preset--color--koralova-syta) 35%, transparent);
	outline: none;
}

/* Hláška po odeslání (CF7 ji vkládá pod formulář): zaoblený box v barvách
   palety — úspěch mátový, chyba/nevalidní formulář krémová s korálovým textem. */
.wpcf7 form .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 10px 14px;
	border: none;
	border-radius: 12px;
	font-size: 13px;
	background: var(--wp--preset--color--kremova);
	color: var(--wp--preset--color--koralova-tmava);
}

.wpcf7 form.sent .wpcf7-response-output {
	background: var(--wp--preset--color--mata-svetla);
	color: var(--wp--preset--color--mata-tmava);
}

/* Mobil: menší vnitřní okraje karty a tlačítko přes celou šířku. */
@media (max-width: 600px) {
	.wpcf7 {
		padding: 18px 14px 16px;
	}

	.wpcf7 .wpcf7-submit {
		display: block;
		width: 100%;
	}
}

/* Uživatelé s vypnutými animacemi (systémové nastavení) — bez přechodů,
   label skáče rovnou na místo. */
@media (prefers-reduced-motion: reduce) {
	.wpcf7 .mz-pole > label,
	.wpcf7 .mz-pole .wpcf7-form-control,
	.wpcf7 .wpcf7-submit {
		transition: none;
	}
}