/*
 * Campo di testo (Input.jsx dell'oracolo). Non esiste un blocco WordPress
 * generico per un campo di testo con wrapper/etichetta/prefix/suffix come
 * il componente React — qui si stila l'elemento nativo ovunque compaia
 * (ricerca, form commenti, campi WooCommerce classici e a blocchi), non si
 * ricostruisce la struttura del componente. Dimensione, sfondo, bordo,
 * raggio, tipografia e stato focus sono lo stesso linguaggio visivo
 * dell'oracolo; non esprimibile in theme.json (nessun elemento "input" nello
 * schema di styles.elements).
 */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="date"],
textarea,
select,
.wp-block-search__input,
.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-select select {
	height: var(--wp--custom--control--md);
	padding: 0 var(--wp--custom--input-padding-x);
	background: var(--wp--custom--surface-card);
	color: var(--wp--custom--text-strong);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	border: var(--wp--custom--border-width--thin) solid var(--wp--custom--border-default);
	border-radius: var(--wp--custom--radius--md);
	transition:
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--out),
		box-shadow var(--wp--custom--dur--fast) var(--wp--custom--ease--out);
}

textarea {
	height: auto;
	min-height: calc(var(--wp--custom--control--lg) * 2);
	padding-top: calc(var(--wp--custom--input-padding-x) * 0.7);
	padding-bottom: calc(var(--wp--custom--input-padding-x) * 0.7);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.wp-block-search__input:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus,
.wc-block-components-select select:focus {
	border-color: var(--wp--custom--focus-ring);
	box-shadow: var(--wp--custom--ring-focus);
	outline: none;
}

/* Errore — bordo rosso, come nell'oracolo (borderColor: var(--danger) quando error).
   Solo segnali ESPLICITI di validazione già avvenuta — MAI il semplice
   :invalid nativo: un campo required vuoto è :invalid già al primo
   caricamento, prima che l'utente tocchi qualunque cosa (verificato: il
   campo di ricerca nativo di WordPress ha required e diventava rosso a
   riposo). aria-invalid/le classi sotto le mette solo la validazione dopo
   un tentativo di invio. */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
.has-error input,
.has-error textarea,
.woocommerce-invalid input {
	border-color: var(--wp--preset--color--danger);
}

::placeholder {
	color: var(--wp--custom--text-muted);
	opacity: 1;
}

/* Etichetta — stessa tipografia dell'oracolo, scoperta ai soli contesti di
   campo (non tutte le <label> del sito). */
.wp-block-search__label,
.comment-form label,
.wc-block-components-text-input label,
.wc-block-components-textarea label,
form.woocommerce-form label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--fw--semibold);
	color: var(--wp--custom--text-strong);
}