/*
 * richieste-it - focus e stati dei campi dei form (dalla 1.5.27).
 *
 * Accodato SEMPRE dopo il foglio del form, qualunque esso sia: default-form.css, il
 * template demo-*.css o il CSS personalizzato per-form (uploads/automa/richiesteform/
 * richiesteform<ID>.css, generato dal meta css-custom-code). Corregge tre difetti misurati
 * sui form della rete senza riscrivere il css-custom-code di nessun form:
 *
 * 1. Sugli input di testo il bordo non cambiava al focus: nel modello "Bulletproof"
 *    `.form-richieste.form-richieste input[type="text"]` (specificita' 0,3,1) batte
 *    `.form-richieste input:focus` (0,2,1), quindi --fr-border-focus era inerte.
 * 2. L'unico segnale di focus era `box-shadow: 0 0 0 3px rgba(<colore>,0.2)`: 1,21:1,
 *    sotto il 3:1 di WCAG 1.4.11 / 2.4.7. Chi naviga da tastiera non vede dove si trova.
 * 3. Checkbox spuntata e radio usavano esadecimali scritti a mano con !important, e
 *    --fr-accent-color era dichiarata ma non usata da nessuna regola.
 *
 * Nessun effetto a riposo: ogni regola e' sotto :focus, :focus-visible o :checked.
 */

/*
 * Colori derivati. Mescolare al 50% col nero in sRGB dimezza ogni canale: la luminanza
 * massima possibile e' quella di #808080, quindi il colore ottenuto ha almeno 3,95:1 sul
 * bianco (3,75:1 su #f8f9fa) PARTENDO DA QUALUNQUE COLORE. Senza color-mix si ripiega su
 * un colore scuro fisso per l'anello e sul colore del form per il bordo della spunta.
 */
.form-richieste {
	--fr-focus-ring: var(--fr-field-text-color, #1a1a1a);
	--fr-check-edge: var(--fr-accent-color, #0073aa);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.form-richieste {
		--fr-focus-ring: color-mix(in srgb, var(--fr-border-focus, #0073aa) 50%, #000);
		--fr-check-edge: color-mix(in srgb, var(--fr-accent-color, #0073aa) 50%, #000);
	}
}

/* 1. Bordo al focus legato a --fr-border-focus, con specificita' che batte 0,3,1. */
.form-richieste.form-richieste input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):focus,
.form-richieste.form-richieste select:focus,
.form-richieste.form-richieste textarea:focus {
	border-color: var(--fr-border-focus, #0073aa);
}

/*
 * 2. Anello di focus a due toni, solo quando il browser mostra il focus (tastiera, e
 *    per scelta del browser anche il clic in un campo di testo). Interno scuro, derivato
 *    da --fr-border-focus: si vede sugli sfondi chiari. Esterno bianco: si vede sugli
 *    sfondi scuri (form con --fr-bg-form scuro). outline sopravvive anche alla modalita'
 *    a contrasto forzato di Windows, che invece azzera box-shadow.
 */
.form-richieste.form-richieste input:focus-visible,
.form-richieste.form-richieste select:focus-visible,
.form-richieste.form-richieste textarea:focus-visible,
.form-richieste.form-richieste button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--fr-focus-ring);
}

/*
 * 3. Checkbox spuntata sulle variabili. Vince sulle regole del modello Bulletproof
 *    (`...:checked:not(#fr-x)` con !important, 1,3,1). Il riempimento resta il colore del
 *    form; il bordo e' la sua versione scura, che garantisce il 3:1 sugli sfondi chiari.
 *    Sulle checkbox native (appearance:auto) sfondo e bordo vengono ignorati dal browser.
 */
.form-richieste.form-richieste input[type="checkbox"]:checked:not(#fr-x) {
	background-color: var(--fr-accent-color, #0073aa) !important;
	border-color: var(--fr-check-edge) !important;
}

/* Filo bianco esterno: rende leggibile la spunta anche sugli sfondi scuri. Tolto al focus,
   dove comanda l'anello. */
.form-richieste.form-richieste input[type="checkbox"]:checked:not(#fr-x):not(:focus-visible) {
	box-shadow: 0 0 0 1px #fff;
}

.form-richieste.form-richieste input[type="radio"]:checked {
	accent-color: var(--fr-accent-color, auto) !important;
}