/* ==========================================================================
   Brico Ecommerce — Accessibilita' (WCAG 2.1 AA)
   --------------------------------------------------------------------------
   Caricato su TUTTE le pagine e per ULTIMO, cosi' vince sulle regole di
   Astra per ordine di cascata invece che a colpi di `!important`.
   Fa eccezione un solo punto, segnalato dov'e'.

   Ogni regola qui sotto corrisponde a un problema MISURATO sul sito
   vero con axe-core 4.10 l'11/09/2026, non a una lista teorica.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. CONTRASTO (WCAG 1.4.3, minimo 4,5:1 per il testo normale)

   Misurato sulla pagina di categoria:
     #858D99 su bianco = 3,35:1  -> 24 elementi (.ast-woo-product-category)
     #777777 su bianco = 4,48:1  ->  2 elementi (briciole di pane)

   Il secondo e' sotto la soglia per un pelo, ed e' il caso peggiore:
   "quasi conforme" non esiste, e un grigio che sembra a posto sul
   monitor dello sviluppatore non lo e' su uno schermo al sole del
   bancone.

   La correzione sta nella variabile, non nelle singole regole:
   --brico-color-text-muted passa da #6B7280 (4,83:1, poco margine su
   testo piccolo) a #5E6675 = 5,78:1. Resta visibilmente "spento"
   rispetto al testo pieno, che era il motivo per cui esisteva.
   -------------------------------------------------------------------- */
:root {
	--brico-color-text-muted: #5E6675;   /* 5,78:1 su bianco */
}

/* Astra colora le briciole di pane con selettori piu' specifici dei
   nostri: qui le raggiungiamo per nome. Se in futuro Astra cambia
   classi, il contrasto va rimisurato — non dato per acquisito. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a,
.ast-breadcrumbs-wrapper a {
	color: var(--brico-color-text-muted);
}

/* --------------------------------------------------------------------
   1-bis. L'OPACITA' E' UN BUCO NEL CONTRASTO, E NON SI VEDE

   Il caso peggiore della giornata, e l'ha trovato lo strumento, non il
   ragionamento. Dopo aver portato --brico-color-text-muted da #6B7280
   a #5E6675, l'etichetta di categoria e' **peggiorata**: da 3,35:1 a
   **2,53:1**. Il colore era giusto — il calcolato diceva
   `rgb(94,102,117)`, cioe' esattamente #5E6675 — ma Astra applica a
   quell'elemento

       .woocommerce-js ul.products li.product .ast-woo-product-category
       { opacity: 0.6 }

   e l'opacita' mescola il testo col bianco DOPO che il colore e' stato
   deciso: #5E6675 al 60% su bianco diventa #9EA3AC. Piu' si scurisce
   il colore, piu' si guadagna poco, perche' il 40% di bianco resta li'.

   Da cui la regola, che vale oltre questo elemento: **il contrasto non
   si legge nella dichiarazione `color`, si legge a schermo.** Un
   `opacity` su un antenato qualsiasi lo azzoppa in silenzio, e nessuna
   rilettura del CSS lo mostra.

   Specificita': Astra sta a (0,4,2). Aggiungendo `span` arriviamo a
   (0,4,3) e vinciamo senza `!important` — che qui sarebbe la scorciatoia
   sbagliata, perche' nasconderebbe il conflitto invece di risolverlo.
   -------------------------------------------------------------------- */
.woocommerce ul.products li.product span.ast-woo-product-category,
.woocommerce-js ul.products li.product span.ast-woo-product-category,
.woocommerce-page ul.products li.product span.ast-woo-product-category {
	opacity: 1;
	color: var(--brico-color-text-muted);
	font-size: max(0.75rem, 12px);
	line-height: 1.5;
}

/* L'ambra del brand e' 1,66:1 su bianco: NON puo' mai portare testo su
   fondo chiaro. Su fondo pieno con testo scuro invece e' 10,6:1, che e'
   il modo in cui e' gia' usata nei badge. Questa regola serve a non
   perdere la cognizione fra sei mesi. */
.brico-badge-lowstock,
.woocommerce ul.products li.product .brico-badge-lowstock {
	background: var(--brico-color-accent);
	color: var(--brico-color-dark);   /* 10,6:1 */
}

/* --------------------------------------------------------------------
   2. MESSA A FUOCO SEMPRE VISIBILE (WCAG 2.4.7)

   shop.css lo faceva solo dentro .woocommerce. Ma con la tastiera si
   attraversa tutto: barra superiore, menu, footer, pulsanti di vista.
   Un contorno che sparisce a meta' pagina e' peggio di nessun
   contorno, perche' chi naviga perde il segno.

   `:focus-visible` e non `:focus`: cosi' il contorno appare a chi usa
   la tastiera e non a ogni clic del mouse.
   -------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--brico-color-secondary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Sui fondi rossi o blu pieni il contorno blu sparisce: li' e' bianco
   con un alone scuro, cosi' si vede su qualunque fondo. */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.single_add_to_cart_button:focus-visible,
.brico-badge-backorder:focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 6px rgba(23, 25, 28, 0.55);
}

/* --------------------------------------------------------------------
   3. SALTA AL CONTENUTO

   Astra ce l'ha gia'. Qui gli si da' solo un aspetto leggibile quando
   compare: un link di salto che appare come testo nudo sopra il logo
   fa dubitare che il sito sia rotto.
   -------------------------------------------------------------------- */
.skip-link:focus,
.skip-link:focus-visible {
	position: fixed !important;   /* unico !important: deve battere la
	                                 regola di nascondimento di Astra,
	                                 che e' li' apposta per nasconderlo */
	top: 0.6rem;
	left: 0.6rem;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 0.75rem 1.25rem;
	background: var(--brico-color-dark);
	color: #fff;
	font-weight: 700;
	border-radius: var(--brico-radius-sm);
	text-decoration: none;
}

/* --------------------------------------------------------------------
   4. DIMENSIONE DEI BERSAGLI (WCAG 2.5.8, minimo 24x24 CSS px)

   I pulsanti +/- della quantita' erano alti quanto il campo di testo,
   che su alcuni temi scende sotto i 24px. Su un telefono, con le mani
   sporche, in un magazzino: e' il caso d'uso vero di questo sito.

   `max(..., 44px)` per la stessa ragione del testo qui sopra: la
   radice di Astra e' 14,592px, quindi `2.75rem` da' 40px e non i 44
   che volevamo. Il `rem` scala, il `px` fa da pavimento.
   -------------------------------------------------------------------- */
.brico-qty-btn,
.brico-vista__btn {
	min-width: max(2.75rem, 44px);
	min-height: max(2.75rem, 44px);   /* 44px: la soglia comoda, non il minimo di 24 */
}

.woocommerce div.product form.cart .quantity input.qty {
	min-height: max(2.75rem, 44px);
}

/* --------------------------------------------------------------------
   5. MOVIMENTO RIDOTTO (WCAG 2.3.3)

   Le card si sollevano e l'immagine si ingrandisce al passaggio del
   mouse. Per chi soffre di disturbi vestibolari ventiquattro riquadri
   che si muovono sono un problema reale, e il sistema operativo lo
   dichiara gia': qui lo si ascolta.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.woocommerce ul.products li.product:hover {
		transform: none;
	}
	.woocommerce ul.products li.product:hover img {
		transform: none;
	}
}

/* --------------------------------------------------------------------
   6. TESTO RIDIMENSIONABILE (WCAG 1.4.4)

   ATTENZIONE AL `rem` SU QUESTO TEMA. Astra porta la radice a
   **14,592px**, non ai 16 di default: `0.75rem` qui vale 10,9px, non
   12. Scritto "0.75rem" e misurato a schermo, l'etichetta di categoria
   usciva ancora sotto la soglia di leggibilita' — un altro caso in cui
   la dichiarazione sembrava giusta e il risultato no.

   Da cui `max(0.75rem, 12px)`: scala insieme al resto se la radice
   cresce, ma non scende mai sotto i 12px. Sotto quella soglia la
   leggibilita' crolla per chiunque, non solo per chi ha problemi di
   vista, e un catalogo si legge a lungo.
   -------------------------------------------------------------------- */
.woocommerce ul.products li.product .brico-card-code {
	font-size: max(0.8125rem, 13px);
	line-height: 1.5;
}

/* Il titolo e' tagliato a due righe con `-webkit-line-clamp`. Il
   troncamento resta — su nomi da 60 caratteri e' necessario — ma il
   nome intero e' comunque raggiungibile: sta nel `title` del link e
   nell'`alt` del segnaposto, quindi chi usa uno screen reader lo sente
   per intero e chi ingrandisce i caratteri lo trova al passaggio del
   mouse. Nessuna informazione va persa, solo abbreviata a schermo. */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------
   7. La classe di servizio per i lettori di schermo.

   Astra la definisce, ma questo tema la usa in punti (codice articolo,
   regione degli annunci) che devono funzionare anche se un domani il
   tema padre cambia. Ridefinirla costa otto righe e toglie una
   dipendenza.
   -------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}