/**
 * Edutours Forms — styling for the custom form framework.
 *
 * Uses the theme.json color presets (--wp--preset--color--*) with sane
 * fallbacks so this works before the final design tokens land.
 */

.edutours-form {
	width: 100%;
}

.edutours-form__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: #fff;
	border-radius: 12px;
	padding: 32px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.edutours-form__thank-you {
	background: #f7f7f7;
	border-radius: 12px;
	padding: 48px 32px;
	text-align: center;
	font-size: 1.125rem;
	color: var(--wp--preset--color--contrast, #1a2b4a);
}

.edutours-form__thank-you :first-child {
	margin-top: 0;
}

.edutours-form__thank-you :last-child {
	margin-bottom: 0;
}

.edutours-form__error {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 0.95rem;
}

.edutours-form__error[hidden] {
	display: none;
}

.edutours-form__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.edutours-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	grid-column: 1 / -1;
}

/* E-mail + telefon share one row (mockup form grammar). Any other pair opts
 * in per-field with `half: true` in the config (e.g. the rail's „Počet žáků"
 * + „Počet učitelů" row — the pages that show only one keep it full-width). */
.edutours-form__field--email,
.edutours-form__field--tel,
.edutours-form__field--half {
	grid-column: auto;
}

/* Mockup forms are placeholder-labelled: labels stay in the DOM for
 * screen readers/autofill but are visually hidden (ADR-017's visible-label
 * decision reversed by Vik 2026-08-05 — mockup is canon). */
.edutours-form__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.edutours-form__required {
	color: var(--wp--preset--color--accent, #f28c28);
	margin-left: 2px;
}

.edutours-form__input,
.edutours-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 16px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
	color: var(--wp--preset--color--contrast, #1a2b4a);
	transition: border-color 150ms ease;
}

.edutours-form__input:focus,
.edutours-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent, #f28c28);
}

/* Select fields (item 10a) — reset the native appearance, add a ▾ affordance
 * and mockup border/color so it reads consistently with the text inputs. */
select.edutours-form__input {
	appearance: none;
	padding-right: 40px;
	color: var(--wp--preset--color--muted, #6f8395);
	border-color: rgba(28, 49, 68, 0.18);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236F8395' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 10px 6px;
	cursor: pointer;
}

.edutours-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast, #1a2b4a);
	cursor: pointer;
}

.edutours-form__consent input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

.edutours-form__consent a {
	color: var(--wp--preset--color--accent, #f28c28);
}

/* Passive consent (item 10b) — static line under the submit button, used
 * instead of the checkbox above when a config sets `consent_note`. */
.edutours-form__consent-note {
	margin: 0;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted, #6f8395);
}

.edutours-form__consent-note a {
	color: inherit;
	text-decoration: underline;
}

.edutours-form__submit {
	width: 100%;
	padding: 14px 28px;
	border: none;
	border-radius: 10px;
	background: var(--wp--preset--color--accent, #f28c28);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 150ms ease;
}

.edutours-form__submit:hover {
	opacity: 0.9;
}

.edutours-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Turnstile runs in invisible mode sitewide (issue #33 / Vik 2026-08-11) —
 * the holder renders no visible content, so it must not reserve height. */
.edutours-form__turnstile {
	min-height: 0;
}

/* Contexts that already provide the card chrome (sticky rail, kontakt card,
 * modal) — don't double-box the form inside them. The CTA-band column is
 * NOT one of these: the homepage form is the only white card on that orange
 * band (item 10), so main.css §22 gives it its own mockup-exact dimensions
 * instead of stripping the card away here. */
.edt-enquiry-card .edutours-form__form,
.edt-kontakt__form .edutours-form__form,
.edt-modal__card .edutours-form__form {
	background: transparent;
	box-shadow: none;
	padding: 0;
	border-radius: 0;
}

/* Honeypot: visually hidden but present in the DOM/tab order-safe way.
 * Off-screen (not display:none, which some bots skip) + not tabbable. */
.edutours-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Shared ≤768 breakpoint (main.css / mobile.css canon) — paired fields
 * (email+tel) get cramped in a 2-col grid on phones; stack everything at
 * this width. The CTA-band form's name+email pairing (main.css §22) has its
 * own mobile override there instead, so the two rules stay in one
 * cascade/file and don't fight over load order. */
@media (max-width: 768px) {
	.edutours-form__fields {
		grid-template-columns: 1fr;
	}

	.edutours-form__field--email,
	.edutours-form__field--tel,
	.edutours-form__field--half {
		grid-column: 1 / -1;
	}
}