/* =============================================================================
   FNZ Forms – default stylesheet
   Mobile-first · WP CSS variables · accessible · browser-native validation
   ============================================================================= */

/* ─── Custom properties ─────────────────────────────────────────────────────
   Tutte le variabili sono scoped sulla form.
   Dove esistono, si agganciamo alle var WP (preset di theme.json); altrimenti
   usiamo valori di fallback ragionevoli.
   ─────────────────────────────────────────────────────────────────────────── */

.fnz-form {
	/* Colori */
	--fnz-clr-text:         var(--wp--preset--color--foreground,  currentColor);
	--fnz-clr-border:       var(--wp--custom--border-color,       #c4c4c4);
	--fnz-clr-accent:       var(--wp--preset--color--accent,     #0073aa);
	--fnz-clr-bg:           var(--wp--preset--color--base,  #fff);
	--fnz-clr-error:        #c0392b;
	--fnz-clr-ok:           #1e6b3c;
	--fnz-clr-error-bg:     #fff5f5;
	--fnz-clr-error-border: #f5c6cb;
	--fnz-clr-ok-bg:        #f0faf4;
	--fnz-clr-ok-border:    #b7dfbf;

	/* Spaziatura */
	--fnz-gap:    var(--wp--preset--spacing--50, 1.5rem);
	--fnz-gap-xs: var(--wp--preset--spacing--20, 0.375rem);
	--fnz-px:     1.2rem;
	--fnz-py:     1rem;

	/* Geometria */
	--fnz-radius: 2.4rem;
	--fnz-border-w:  1px;

	/* Tipografia */
	--fnz-fz:       var(--wp--preset--font-size--medium, 1rem);
	--fnz-fz-label: var(--wp--preset--font-size--small,  0.875rem);
	--fnz-fw-label: 500;
}

/* ─── Layout form ────────────────────────────────────────────────────────── */

.fnz-form {
	display: flex;
	flex-direction: column;
	gap: var(--fnz-gap);
}

/* ─── Gruppi campo ───────────────────────────────────────────────────────────
   Il markup mette <input> prima di <label> per sfruttare i selettori fratello
   CSS (input:user-invalid + label, input:focus + label, ecc.).
   Con column-reverse la label appare visivamente sopra l'input.
   ─────────────────────────────────────────────────────────────────────────── */

.fnz-form .form-group {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--fnz-gap-xs);
}

/* ─── Label ──────────────────────────────────────────────────────────────── */

.fnz-form .form-group > label {
	font-size: var(--fnz-fz-label);
	font-weight: var(--fnz-fw-label);
	color: var(--fnz-clr-text);
	line-height: 1.3;
	transition: color 0.12s ease;
	padding-left: var(--fnz-px);
}

/* Indicatore campo obbligatorio */
.fnz-form .form-group input[required] + label::after,
.fnz-form .form-group textarea[required] + label::after,
.fnz-form .form-group select[required] + label::after {
	content: " *";
	color: var(--fnz-clr-error);
	aria-hidden: true;
}

/* Evidenzia label quando il campo ha il focus */
.fnz-form .form-group:focus-within > label {
	color: var(--fnz-clr-accent);
}

/* ─── Input, textarea, select – stili base ───────────────────────────────── */

.fnz-form .form-group input:not([type="checkbox"]):not([type="radio"]),
.fnz-form .form-group textarea,
.fnz-form .form-group select {
	font-size: var(--fnz-fz);
	font-family: inherit;
	line-height: 1.5;
	color: var(--fnz-clr-text);
	background-color: var(--fnz-clr-bg);
	border: var(--fnz-border-w) solid var(--fnz-clr-border);
	border-radius: var(--fnz-radius);
	padding: var(--fnz-py) var(--fnz-px);
	width: auto;
	min-width: 0;
	appearance: none;
	transition: border-color 0.12s ease, outline-color 0.12s ease;
}

/* ─── Focus ──────────────────────────────────────────────────────────────── */

.fnz-form .form-group input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.fnz-form .form-group textarea:focus-visible,
.fnz-form .form-group select:focus-visible {
	outline: 2px solid var(--fnz-clr-accent);
	outline-offset: 2px;
	border-color: var(--fnz-clr-accent);
}

/* ─── Textarea ───────────────────────────────────────────────────────────── */

.fnz-form .form-group textarea {
	resize: vertical;
	min-height: 9rem;
}

/* ─── Select – freccia personalizzata ────────────────────────────────────── */

.fnz-form .form-group select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23767676' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--fnz-px) center;
	padding-right: calc(var(--fnz-px) * 2 + 0.75rem);
}

/* ─── Stato errore (browser-native, niente JS) ───────────────────────────────
   :user-invalid scatta solo dopo che l'utente ha interagito con il campo,
   evitando errori su campi ancora non toccati (stato "pristine").
   Supporto: Chrome 119+, Firefox 88+, Safari 16.5+.
   ─────────────────────────────────────────────────────────────────────────── */

.fnz-form .form-group input:user-invalid,
.fnz-form .form-group textarea:user-invalid,
.fnz-form .form-group select:user-invalid {
	border-color: var(--fnz-clr-error);
}

/* Label fratello diventa rossa */
.fnz-form .form-group input:user-invalid + label,
.fnz-form .form-group textarea:user-invalid + label,
.fnz-form .form-group select:user-invalid + label {
	color: var(--fnz-clr-error);
}

/* Outline focus quando il campo è invalido */
.fnz-form .form-group:focus-within input:user-invalid,
.fnz-form .form-group:focus-within textarea:user-invalid,
.fnz-form .form-group:focus-within select:user-invalid {
	outline-color: var(--fnz-clr-error);
	border-color: var(--fnz-clr-error);
}

/* Sovrascrive il focus-within accent sulla label quando il campo è invalido */
.fnz-form .form-group:focus-within input:user-invalid + label,
.fnz-form .form-group:focus-within textarea:user-invalid + label,
.fnz-form .form-group:focus-within select:user-invalid + label {
	color: var(--fnz-clr-error);
}

/* ─── Boolean (checkbox singolo) ─────────────────────────────────────────── */

.fnz-form .form-group--boolean {
	flex-direction: column;      /* la label è già wrapping, niente column-reverse */
}

.fnz-form .form-group--boolean > label {
	display: flex;
	align-items: flex-start;
	gap: var(--fnz-gap-xs);
	cursor: pointer;
	font-size: var(--fnz-fz);
	font-weight: normal;
	line-height: 1.5;
}

.fnz-form .form-group--boolean input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.1875rem;       /* allineamento ottico con la prima riga di testo */
	accent-color: var(--fnz-clr-accent);
	cursor: pointer;
}

/* Errore su checkbox obbligatorio */
.fnz-form .form-group--boolean input[type="checkbox"]:user-invalid {
	outline: 2px solid var(--fnz-clr-error);
	outline-offset: 1px;
	border-radius: 2px;
}

/* ─── Gruppo radio ───────────────────────────────────────────────────────── */

.fnz-form .form-group--radio {
	flex-direction: column;
	gap: var(--fnz-gap-xs);
}

.fnz-form .form-group__legend {
	display: block;
	font-size: var(--fnz-fz-label);
	font-weight: var(--fnz-fw-label);
	color: var(--fnz-clr-text);
	line-height: 1.3;
	margin-block-end: calc(var(--fnz-gap-xs) * 0.5);
}

.fnz-form .form-group--radio > label {
	display: flex;
	align-items: center;
	gap: var(--fnz-gap-xs);
	cursor: pointer;
	font-size: var(--fnz-fz);
	font-weight: normal;
	line-height: 1.5;
	min-block-size: 2.25rem;     /* touch target minimo 44 × 44 px consigliato da WCAG */
}

.fnz-form .form-group--radio input[type="radio"] {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--fnz-clr-accent);
	cursor: pointer;
}

/* ─── Bottone submit ─────────────────────────────────────────────────────── */

.fnz-form .form-cta {
	font-family: inherit;
	font-size: var(--fnz-fz);
	font-weight: var(--fnz-fw-label);
	line-height: 1;
	color: var(--fnz-clr-bg);
	background-color: var(--fnz-clr-accent);
	border: var(--fnz-border-w) solid transparent;
	border-radius: var(--fnz-radius);
	padding: var(--fnz-py) calc(var(--fnz-px) * 2);
	cursor: pointer;
	align-self: flex-start;
	min-inline-size: 8rem;
	min-block-size: 2.5rem;      /* touch target */
	transition: opacity 0.12s ease;
}

.fnz-form .form-cta:hover {
	opacity: 0.85;
}

.fnz-form .form-cta:focus-visible {
	outline: 2px solid var(--fnz-clr-accent);
	outline-offset: 3px;
}

.fnz-form .form-cta:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ─── Messaggio di feedback (success / error) ────────────────────────────── */

.fnz-form .fnz-message {
	padding: var(--fnz-py) var(--fnz-px);
	border-radius: var(--fnz-radius);
	font-size: var(--fnz-fz-label);
	line-height: 1.5;
	border: var(--fnz-border-w) solid transparent;
}

.fnz-form .fnz-message[data-fnz-success="1"] {
	color: var(--fnz-clr-ok);
	background-color: var(--fnz-clr-ok-bg);
	border-color: var(--fnz-clr-ok-border);
}

.fnz-form .fnz-message[data-fnz-success="0"] {
	color: var(--fnz-clr-error);
	background-color: var(--fnz-clr-error-bg);
	border-color: var(--fnz-clr-error-border);
}