/**
 * Kutri Forms — front-end form styling.
 *
 * Scope: EVERY selector starts with `.kf-` (RUCSS safelist `/^\.kf-/`, plan §14).
 * The kutri-tt25 theme already styles base inputs/buttons; this file adds only
 * the form-specific structure, the a11y focus ring (invariant 12), target sizes
 * (invariant 13), the honeypot (§11) and validation/status states. Kept light.
 *
 * Design tokens: consumes the kutri-tt25 theme custom properties from
 * assets/css/kutri-tokens.css with hard fallbacks so the form is never unstyled.
 * Tokens used: --color-petrooli, --color-keskisininen-a11y, --color-varoitus,
 * --color-bg-pinkki, --color-laivasto, --color-vaaleaturkoosi, --text-primary,
 * --text-secondary, --text-inverse, --space-1..--space-6, --radius,
 * --border-1/2/3, --touch-min, --font-family.
 *
 * JS hook classes (toggled by assets/kf-submit.js / kf-logic.js — do NOT restyle
 * their base meaning elsewhere):
 *   .kf-invalid   — added to a .kf-field whose control failed validation.
 *   [hidden]      — conditional visibility (invariant 6); belt-and-suspenders rule below.
 * The error summary (.kf-error-summary) and status region (.kf-status) receive
 * programmatic focus via tabindex="-1"; they get a subtle but visible focus ring.
 *
 * Mobile-first. Comments English; customer-facing strings live in templates.
 */

/* ---- Layout ------------------------------------------------------------- */

.kf-wrap {
	max-width: 640px;
	margin: 0 auto var(--space-6, 2rem);
}

.kf-form {
	font-family: var(--font-family, system-ui, -apple-system, sans-serif);
}

.kf-field {
	margin-bottom: var(--space-5, 1.5rem);
}

/* Conditionally hidden fields: the `hidden` attribute does the a11y work; this
 * !important guards against theme CSS forcing display on divs (invariant 6). */
.kf-field[hidden] {
	display: none !important;
}

/* ---- Labels ------------------------------------------------------------- */

.kf-field label {
	display: block;
	margin-bottom: var(--space-2, 0.5rem);
	font-weight: 600;
}

/* Required asterisk — visual only; meaning is explained once at form top (inv. 4). */
.kf-required {
	color: var(--color-varoitus, #b32d2e);
}

/* ---- Text-like inputs --------------------------------------------------- */

.kf-field input[type="text"],
.kf-field input[type="email"],
.kf-field textarea,
.kf-field select {
	width: 100%;
	min-height: 44px; /* invariant 13: ≥24px always, comfortable 44px on every size */
	padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
	border: var(--border-1, 1px) solid var(--text-secondary, #23485c);
	border-radius: var(--radius, 6px);
	font-size: 1rem; /* ≥16px avoids iOS zoom-on-focus */
	font-family: inherit;
	box-sizing: border-box;
}

.kf-field textarea {
	resize: vertical;
	min-height: 120px;
}

/* select full width like the other inputs (rule above covers it) */

/* ---- Radio / checkbox groups ------------------------------------------- */

.kf-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.kf-form legend {
	padding: 0;
	margin-bottom: var(--space-2, 0.5rem);
	font-weight: 600;
}

/* Each option is <div class="kf-choice"><input><label for></label></div> — the
 * label is a SIBLING of the control, so the .kf-choice div is the flex row that
 * puts the box and its text on one line (and builds the touch target). */
.kf-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2, 0.5rem);
	margin-bottom: var(--space-2, 0.5rem);
	min-height: 24px; /* invariant 13 baseline */
}

/* Undo the block-label defaults inside a choice row (they stack the text under
 * the box); 24px line-height top-aligns single-line text with the 24px control. */
.kf-field--radio .kf-choice label,
.kf-field--checkbox .kf-choice label {
	display: inline-block;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 24px;
	cursor: pointer;
}

.kf-field--radio input[type="radio"],
.kf-field--checkbox input[type="checkbox"] {
	width: 24px;  /* invariant 13: ≥24×24 */
	height: 24px;
	flex: 0 0 auto;
	margin: 0;
	cursor: pointer;
}

/* ---- Hints -------------------------------------------------------------- */

.kf-hint {
	display: block;
	margin-top: var(--space-1, 0.25rem);
	color: var(--text-secondary, #23485c);
	font-size: 0.889rem;
}

/* ---- Focus ring (invariant 12) ----------------------------------------- */
/* Never remove focus without replacement: we ADD a ≥3px visible ring and never
 * set outline:none. High-contrast petrooli against the light theme surface. */

.kf-form input:focus-visible,
.kf-form textarea:focus-visible,
.kf-form select:focus-visible,
.kf-form button:focus-visible,
.kf-form a:focus-visible {
	outline: var(--border-3, 3px) solid var(--color-petrooli, #094f7c);
	outline-offset: 2px;
}

/* Programmatically-focused regions get a subtler-but-visible ring (they are not
 * keyboard-tabbable, only script-focused, so a lighter treatment is enough). */
.kf-error-summary:focus-visible {
	outline: var(--border-3, 3px) solid var(--color-keskisininen-a11y, #0078a5);
	outline-offset: 2px;
}

/* The result card is a script-focused (non-tabbable) region: a lighter 2px ring set
 * a little off the card is enough for keyboard/AT users without a heavy band that
 * fights the card. Mouse submit does not trigger :focus-visible, so sighted mouse
 * users never see it (invariant 12: always a visible replacement, never outline:none). */
.kf-status:focus-visible {
	outline: var(--border-2, 2px) solid var(--color-keskisininen-a11y, #0078a5);
	outline-offset: 4px;
}

/* ---- Validation states -------------------------------------------------- */

/* Inline per-field error text (invariant 9). Container is always rendered; empty
 * until JS/PHP fills it. */
.kf-error {
	display: block;
	margin-top: var(--space-1, 0.25rem);
	color: var(--color-varoitus, #b32d2e);
	font-weight: 600;
}

/* JS hook: .kf-invalid is toggled on the .kf-field by kf-submit.js. */
.kf-field.kf-invalid input,
.kf-field.kf-invalid textarea,
.kf-field.kf-invalid select {
	border-color: var(--color-varoitus, #b32d2e);
	border-width: var(--border-2, 2px);
}

/* Error summary at the top of the form (role="alert", tabindex="-1"). */
.kf-error-summary {
	margin-bottom: var(--space-5, 1.5rem);
	padding: var(--space-4, 1rem);
	border: var(--border-2, 2px) solid var(--color-varoitus, #b32d2e);
	border-radius: var(--radius, 6px);
	background: var(--color-bg-pinkki, #ffdeeb);
	color: var(--text-primary, #000);
}

.kf-error-summary a {
	color: var(--color-petrooli, #094f7c);
}

/* ---- Honeypot (§11) ----------------------------------------------------- */
/* Off-screen, NOT display:none — must stay in the accessibility/submit path so
 * bots fill it while assistive tech skips it (aria-hidden on the wrapper). */
.kf-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Reveal announcer -------------------------------------------------- */
/* aria-live region for conditional reveals (invariant 7). Visually hidden but
 * kept in the a11y tree (clip pattern, never display:none). */
.kf-reveal-announce {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Submit button ------------------------------------------------------ */

/* Matches the theme's .kc-btn--primary: flat petrooli fill, laivasto hover,
   6px radius, no shadow, no transform lift (DESIGN-RULES: no decorative
   shadows; emphasis via fill). */
.kf-submit {
	display: inline-block;
	min-height: 44px; /* invariant 13 */
	padding: var(--space-2, 0.5rem) var(--space-6, 2rem);
	background: var(--color-petrooli, #094f7c);
	color: var(--text-inverse, #fff);
	border: 0;
	border-radius: var(--radius, 6px);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--duration-fast, 150ms) var(--ease-standard, ease);
}

.kf-submit:hover,
.kf-submit:active {
	background: var(--color-laivasto, #002136);
}

.kf-submit:disabled {
	background: var(--text-secondary, #23485c);
	cursor: not-allowed;
}

/* ---- Result / confirmation card (invariant 10) ------------------------- */
/* role="status", tabindex="-1"; empty by default (no box). When filled it becomes
 * the RESULT card — the score/confirmation message lands here after submit, so it
 * is a flat --bg-success card with a full petrooli hairline (DESIGN-RULES:
 * flat token fills only — no gradients, no decorative shadows). */
.kf-status {
	margin-top: var(--space-5, 1.5rem);
	border-radius: var(--radius, 6px);
}

.kf-status:not(:empty) {
	padding: var(--space-5, 1.5rem);
	background: var(--color-vaaleaturkoosi, #b0f4ff); /* --bg-success, FLAT (gradients banned) */
	border: var(--border-1, 1px) solid var(--color-petrooli, #094f7c); /* full hairline; one-sided accents banned */
	color: var(--text-primary, #000);
	font-size: 1.0625rem;
	line-height: 1.55;
	animation: kf-status-in 0.3s ease-out both;
}

/* Tidy the message's own block spacing so a leading heading/paragraph sits flush. */
.kf-status:not(:empty) > :first-child { margin-top: 0; }
.kf-status:not(:empty) > :last-child { margin-bottom: 0; }
.kf-status:not(:empty) h1,
.kf-status:not(:empty) h2,
.kf-status:not(:empty) h3 {
	margin: 0 0 var(--space-2, 0.5rem);
	color: var(--color-laivasto, #002136);
	line-height: 1.25;
}
.kf-status:not(:empty) strong,
.kf-status:not(:empty) b { color: var(--color-laivasto, #002136); }

@keyframes kf-status-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---- Small screens (WP convention breakpoint) -------------------------- */

@media (max-width: 782px) {
	/* Full-width, comfortable tap target for the primary action. */
	.kf-submit {
		width: 100%;
		min-height: var(--touch-min, 44px);
	}

	/* Grow the clickable radio/checkbox row to a 44px touch area (invariant 13). */
	.kf-choice {
		min-height: var(--touch-min, 44px);
		align-items: center;
		padding: var(--space-1, 0.25rem) 0;
	}
}

/* ---- Reduced motion (a11y) --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kf-status:not(:empty) { animation: none; }
	.kf-submit { transition: none; }
	.kf-submit:hover,
}