/* ==========================================================================
   FORM — Contact Form 7 (README, sezione 6)

   ⚠️ Anche questo file è volutamente NON layerizzato, per lo stesso motivo di
   blocks.css: il CSS di Contact Form 7 non sta in un @layer, e il CSS non
   layerizzato batte qualunque @layer a prescindere dalla specificità.
   L'enqueue dichiara `contact-form-7` come dipendenza (include/forms.php), così
   queste regole escono dopo le sue.

   Obiettivo dichiarato: il form non deve sembrare un pezzo di un altro sito.
   Nessun valore scritto a mano — bordi, raggi, spaziature e colori vengono
   tutti dalle stesse variabili del resto del tema.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Struttura
   -------------------------------------------------------------------------- */

.wpcf7 {
	--field-border: var(--color-tertiary, #c9c4b4);
	--field-bg: var(--color-base, #fff);
}

.wpcf7-form > p,
.cf7-field {
	margin-block: 0 var(--space-s, 1rem);
}

/*
 * Griglia dei campi affiancati.
 * `auto-fit` + `minmax` invece di una media query: i campi si affiancano quando
 * c'è spazio e vanno a capo da soli quando non ce n'è, senza breakpoint da
 * mantenere e senza JavaScript (README, sezioni 6 e 9).
 */
.cf7-grid {
	display: grid;
	gap: 0 var(--space-s, 1rem);
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.cf7-field label {
	display: block;
	margin-block-end: var(--space-3xs, 0.25rem);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

/* Marcatore dei campi obbligatori: l'asterisco è decorativo, l'informazione
   vera sta nell'attributo `required` che CF7 mette sul campo. */
.cf7-field .required {
	color: var(--form-error, #b3261e);
	margin-inline-start: 0.15em;
}

.cf7-hint {
	display: block;
	margin-block-start: var(--space-3xs, 0.25rem);
	font-size: var(--wp--preset--font-size--xs);
	color: color-mix(in srgb, var(--color-contrast, currentColor) 60%, transparent);
}


/* --------------------------------------------------------------------------
   Campi
   -------------------------------------------------------------------------- */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: var(--space-2xs, 0.5rem) var(--space-xs, 0.75rem);
	background-color: var(--field-bg);
	color: var(--color-contrast, #16181d);
	border: 1px solid var(--field-border);
	border-radius: var(--btn-radius-sm, 0.25rem);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--s);
	transition:
		border-color var(--transition-fast, 0.15s) var(--easing, ease),
		box-shadow var(--transition-fast, 0.15s) var(--easing, ease);
}

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

.wpcf7-form :is(input, select, textarea):focus-visible {
	border-color: var(--color-primary, #3b725a);
	/* box-shadow e non outline: segue il raggio del campo e non viene tagliato
	   dai contenitori con overflow nascosto. */
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #3b725a) 25%, transparent);
	outline: none;
}

.wpcf7-form :is(input, select, textarea)::placeholder {
	color: color-mix(in srgb, var(--color-contrast, currentColor) 45%, transparent);
}

/* Il selettore nativo mantiene la freccia del sistema operativo: sostituirla
   con un'icona custom costerebbe markup in più e toglierebbe familiarità. */
.wpcf7-form select {
	cursor: pointer;
}


/* --------------------------------------------------------------------------
   Caricamento allegati
   -------------------------------------------------------------------------- */

.wpcf7-form input[type="file"] {
	width: 100%;
	padding: var(--space-2xs, 0.5rem);
	border: 1px dashed var(--field-border);
	border-radius: var(--btn-radius-sm, 0.25rem);
	font-size: var(--wp--preset--font-size--xs);
	cursor: pointer;
}

.wpcf7-form input[type="file"]::file-selector-button {
	margin-inline-end: var(--space-xs, 0.75rem);
	padding: var(--space-3xs, 0.25rem) var(--space-xs, 0.75rem);
	background-color: transparent;
	color: var(--btn-accent, currentColor);
	border: 1px solid var(--btn-accent, currentColor);
	border-radius: var(--btn-radius-sm, 0.25rem);
	font: inherit;
	cursor: pointer;
}


/* --------------------------------------------------------------------------
   Consenso privacy e caselle di spunta
   -------------------------------------------------------------------------- */

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item,
.wpcf7-form .wpcf7-radio .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7-form .wpcf7-list-item-label,
.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	align-items: start;
	gap: var(--space-2xs, 0.5rem);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	cursor: pointer;
}

.wpcf7-form :is(.wpcf7-acceptance, .wpcf7-checkbox, .wpcf7-radio) input {
	/* Area di tocco adeguata e allineamento con la prima riga di testo. */
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-block-start: 0.15em;
	accent-color: var(--color-primary, #3b725a);
	cursor: pointer;
}


/* --------------------------------------------------------------------------
   Pulsante di invio
   -------------------------------------------------------------------------- */

.wpcf7-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--btn-pad-block, 1rem) var(--btn-pad-inline, 2rem);
	background-color: var(--btn-bg);
	color: var(--btn-text);
	border: 1px solid var(--btn-border);
	border-radius: var(--btn-radius, 0.5rem);
	font-size: var(--btn-font-size, 1rem);
	line-height: 1.2;
	cursor: pointer;
	transition:
		background-color var(--transition-fast, 0.15s) var(--easing, ease),
		border-color var(--transition-fast, 0.15s) var(--easing, ease),
		color var(--transition-fast, 0.15s) var(--easing, ease),
		transform var(--transition-fast, 0.15s) var(--easing, ease);
}

.wpcf7-form .wpcf7-submit:hover {
	background-color: var(--btn-bg-hover);
	border-color: var(--btn-border-hover);
	color: var(--btn-text-hover);
}

.wpcf7-form .wpcf7-submit:focus-visible {
	background-color: var(--btn-bg-focus);
	outline: 2px solid var(--btn-border-focus);
	outline-offset: 3px;
}

.wpcf7-form .wpcf7-submit:active {
	background-color: var(--btn-bg-active);
	transform: scale(0.98);
}

.wpcf7-form .wpcf7-submit:disabled {
	background-color: var(--btn-bg-disabled);
	border-color: var(--btn-bg-disabled);
	color: var(--btn-text-disabled);
	cursor: not-allowed;
	transform: none;
}


/* --------------------------------------------------------------------------
   Stati di errore

   CF7 aggiunge `.wpcf7-not-valid` al campo e inserisce dopo di esso un
   `.wpcf7-not-valid-tip` con il messaggio. Il campo riceve anche
   `aria-invalid="true"` e `aria-describedby`, quindi l'informazione arriva
   agli screen reader: il colore è un rinforzo, non l'unico canale.
   -------------------------------------------------------------------------- */

.wpcf7-form .wpcf7-not-valid {
	border-color: var(--form-error, #b3261e);
}

.wpcf7-form .wpcf7-not-valid:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-error, #b3261e) 25%, transparent);
}

.wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	margin-block-start: var(--space-3xs, 0.25rem);
	color: var(--form-error, #b3261e);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}


/* --------------------------------------------------------------------------
   Messaggio di risposta

   CF7 mette sul <form> una classe di stato (`sent`, `invalid`, `failed`,
   `spam`, `unaccepted`, `aborted`) e stampa il testo in
   `.wpcf7-response-output`. Il riquadro è neutro di default e prende colore
   solo in base allo stato.
   -------------------------------------------------------------------------- */

.wpcf7-form .wpcf7-response-output {
	margin: var(--space-m, 1.5rem) 0 0;
	padding: var(--space-xs, 0.75rem) var(--space-s, 1rem);
	border: 1px solid currentColor;
	border-radius: var(--btn-radius-sm, 0.25rem);
	font-size: var(--wp--preset--font-size--s);
}

.wpcf7-form.sent .wpcf7-response-output {
	color: var(--form-success, #2e6b3f);
	background-color: color-mix(in srgb, var(--form-success, #2e6b3f) 8%, transparent);
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
	color: var(--form-error, #b3261e);
	background-color: color-mix(in srgb, var(--form-error, #b3261e) 8%, transparent);
}


/* --------------------------------------------------------------------------
   Indicatore di invio in corso
   -------------------------------------------------------------------------- */

.wpcf7-spinner {
	background-color: color-mix(in srgb, var(--color-contrast, currentColor) 25%, transparent);
}


/* --------------------------------------------------------------------------
   Campo esca antispam

   NON `display: none`: i bot più curati riconoscono quel caso e saltano il
   campo. Va tolto dal flusso visivo restando tecnicamente presente.
   Per tastiera e screen reader è già escluso da `tabindex="-1"` e
   `aria-hidden` nel markup, quindi nessuno lo incontra per sbaglio.
   -------------------------------------------------------------------------- */

.lmcpro-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Movimento ridotto
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wpcf7-form :is(input, select, textarea, .wpcf7-submit) {
		transition-duration: 0.01ms;
	}
	.wpcf7-form .wpcf7-submit:active {
		transform: none;
	}
}