/* ==========================================================================
   ACCESSIBILITÀ GLOBALE – WCAG 2.2 livello AA
   Child theme WordPress + Elementor Pro
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKEN
   Definiti su `body` (non su :root) perché le variabili globali di Elementor
   (--e-global-color-*) sono dichiarate sulla classe .elementor-kit-N del body:
   su :root non sarebbero ancora disponibili e scatterebbe sempre il fallback.
   Verificare i contrasti dopo averli personalizzati:
   - --a11y-focus-color vs sfondo pagina      ≥ 3:1   (SC 1.4.11 / 2.4.13)
   - --a11y-on-accent  vs --a11y-accent       ≥ 4.5:1 (SC 1.4.3)
   -------------------------------------------------------------------------- */
:root {
	--a11y-header-offset: 0px; /* altezza header sticky, es. 90px (SC 2.4.11) */
}

body {
	--a11y-accent: var(--main-color, var(--e-global-color-primary, #005fcc));
	--a11y-on-accent: #ffffff;
	--a11y-focus-color: var(--a11y-accent);
	--a11y-focus-halo: #ffffff; /* secondo colore dell'indicatore (C40) */
	--a11y-focus-width: 3px;
	--a11y-focus-offset: 2px;
}

/* --------------------------------------------------------------------------
   1. SELEZIONE DEL TESTO (SC 1.4.3)
   ::-moz-selection non serve più: Firefox supporta ::selection dalla v62.
   -------------------------------------------------------------------------- */
::selection {
	color: var(--a11y-on-accent);
	background-color: var(--a11y-accent);
}

/* --------------------------------------------------------------------------
   2. INDICATORE DI FOCUS (SC 2.4.7 AA, 2.4.13 AAA – tecniche G195 + C40)
   - Solo :focus-visible: niente anello al click del mouse sui pulsanti.
   - Bicolore: alone chiaro (box-shadow) + anello colorato (outline),
     visibile sia su sfondi chiari sia scuri.
   - !important necessario: Elementor imposta outline:0 sui campi in focus.
     Previene il fallimento F78 (outline rimosso o reso invisibile).
   -------------------------------------------------------------------------- */
:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
	outline-offset: var(--a11y-focus-offset) !important;
	box-shadow: 0 0 0 var(--a11y-focus-offset) var(--a11y-focus-halo) !important;
}

/* Campi di testo: oltre all'anello cambia anche il bordo,
   così l'indicazione non è affidata solo al colore esterno (SC 1.4.1). */
.elementor-field-textual:focus-visible,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--a11y-focus-color) !important;
}

/* Modalità a contrasto elevato di Windows: box-shadow viene ignorato,
   si usa il colore di sistema per l'anello. */
@media (forced-colors: active) {
	:focus-visible {
		outline-color: Highlight !important;
	}
}

/* --------------------------------------------------------------------------
   3. CHECKBOX / RADIO: evidenzia l'etichetta dell'opzione in focus
   Markup Elementor: <span class="elementor-field-option"><input> <label>
   -------------------------------------------------------------------------- */
input[type="checkbox"]:focus-visible + label,
input[type="radio"]:focus-visible + label {
	background-color: var(--a11y-accent);
	color: var(--a11y-on-accent);
	padding: 2px 4px;
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   4. ASTERISCO DEI CAMPI OBBLIGATORI (SC 1.3.1)
   Elementor lo genera con ::after → alcuni screen reader leggono "asterisco".
   Il testo alternativo vuoto ("*" / "") lo nasconde alle tecnologie assistive:
   l'obbligatorietà è già comunicata da required + aria-required="true".
   Browser senza supporto ignorano la regola e mantengono l'asterisco originale.
   -------------------------------------------------------------------------- */
.elementor-form .elementor-mark-required .elementor-field-label::after {
	content: "*" / "";
}

/* Asterisco tolto dal placeholder (vedi a11y-elementor-forms.php, 2b):
   ridisegnato in alto a destra nel campo, invisibile agli screen reader.
   Doppia dichiarazione: i browser senza supporto al testo alternativo
   usano la prima. Regolare top/inset se il campo ha padding particolari. */
.elementor-field-group.a11y-required-placeholder {
	position: relative;
}

.elementor-field-group.a11y-required-placeholder::after {
	content: "*";
	content: "*" / "";
	position: absolute;
	top: 0.35em;
	inset-inline-end: calc(var(--column-gap, 10px) / 2 + 0.6em);
	color: var(--a11y-required-color, #c00000);
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

.a11y-required-note {
	margin: 0 0 1em;
	font-size: 0.875em;
}

/* --------------------------------------------------------------------------
   5. STATI DISABILITATI
   Gli elementi disabilitati sono esenti dal contrasto minimo (SC 1.4.3),
   ma restano nell'albero di accessibilità: non usare display:none.
   Un finto pulsante disabilitato solo via classe resta cliccabile:
   serve anche aria-disabled="true" (e la logica JS che lo blocca).
   -------------------------------------------------------------------------- */
:disabled,
[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   6. TESTO SOLO PER SCREEN READER + SKIP LINK (SC 2.4.1)
   Stesso pattern di WordPress core. Elementor usa .elementor-screen-only
   (già definita da Elementor): qui la allineiamo per coerenza.
   -------------------------------------------------------------------------- */
.screen-reader-text,
.elementor-screen-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus,
.a11y-skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	position: fixed !important;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: #ffffff;
	color: #000000;
	font-weight: 700;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. FOCUS NON OSCURATO DALL'HEADER STICKY (SC 2.4.11 AA – nuovo in 2.2)
   Impostare --a11y-header-offset all'altezza dell'header sticky Elementor.
   -------------------------------------------------------------------------- */
html {
	scroll-padding-top: var(--a11y-header-offset);
}

/* --------------------------------------------------------------------------
   8. LINK NEL TESTO (SC 1.4.1)
   I link nel corpo del testo non devono distinguersi solo per colore.
   -------------------------------------------------------------------------- */
.elementor-widget-text-editor a:not(.elementor-button),
.elementor-widget-theme-post-content a:not(.elementor-button) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   9. DIMENSIONE MINIMA DEI TARGET (SC 2.5.8 AA – nuovo in 2.2)
   Almeno 24×24 px per checkbox, radio e pulsanti icona.
   -------------------------------------------------------------------------- */
.elementor-field-option input[type="checkbox"],
.elementor-field-option input[type="radio"],
.elementor-field-type-acceptance input[type="checkbox"] {
	min-width: 24px;
	min-height: 24px;
}

.elementor-social-icon,
.dialog-close-button {
	min-width: 24px;
	min-height: 24px;
}

/* --------------------------------------------------------------------------
   10. RIDUZIONE DEL MOVIMENTO (SC 2.3.3 AAA, supporto a 2.2.2)
   Rispetta la preferenza di sistema; i widget con animazione d'ingresso
   (.elementor-invisible) restano comunque visibili.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.elementor-invisible {
		visibility: visible !important;
	}
}

/* --------------------------------------------------------------------------
   11. PULSANTE PAUSA DEI CAROSELLI (SC 2.2.2 – vedi a11y-carousel.js)
   Posizionato sopra le slide, in alto a destra (lontano da testi e pulsanti
   delle slide, che di solito stanno in basso o a sinistra). Personalizzabile con:
   --a11y-carousel-btn-bg, --a11y-carousel-btn-color, --a11y-carousel-btn-inset.
   Bianco su nero: contrasto 21:1 per l'icona (SC 1.4.11 richiede ≥ 3:1).
   -------------------------------------------------------------------------- */
.a11y-carousel-host {
	position: relative;
}

.a11y-carousel-toggle {
	position: absolute;
	z-index: 20;
	top: var(--a11y-carousel-btn-inset, 16px);
	right: var(--a11y-carousel-btn-inset, 16px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid var(--a11y-carousel-btn-color, #ffffff);
	border-radius: 50%;
	background: var(--a11y-carousel-btn-bg, rgba(0, 0, 0, 0.75));
	color: var(--a11y-carousel-btn-color, #ffffff);
	cursor: pointer;
	line-height: 0;
}

.a11y-carousel-toggle:hover {
	background: var(--a11y-carousel-btn-bg-hover, #000000);
}

@media (forced-colors: active) {
	.a11y-carousel-toggle {
		border-color: ButtonText;
		color: ButtonText;
		background: ButtonFace;
	}
}