/**
 * Pentole Agnelli – Accessibilità (child theme)
 * Regole WCAG 2.1 AA caricate DOPO il CSS del parent Goya, con specificità
 * sufficiente a sovrascriverlo. Veicolo: child theme.
 *
 * Copre: FR1 (focus visibile), FR2 (skip-link), supporto FR7 (thead carrello).
 * FR10 (contrasto) è lasciato come sezione da completare con i valori reali (vedi fondo).
 */

/* --- Utility: contenuto per soli screen reader (skip-link, etichette nascoste) --- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
	word-wrap: normal !important;
}

/* --- FR2: link "Salta al contenuto" (visibile solo al focus da tastiera) --- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	display: inline-block;
	padding: 12px 22px;
	background: #ffffff;
	color: #b8322d;
	border: 2px solid #b8322d;
	border-radius: 0 0 4px 0;
	font-weight: 700;
	text-decoration: underline;
	line-height: 1.2;
}
.skip-link:focus {
	left: 8px;
	top: 8px;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	margin: 0;
	overflow: visible;
	outline: 3px solid #b8322d;
	outline-offset: 2px;
}

/* il <main> riceve il focus via skip-link ma è focus programmatico: niente anello */
#main-content:focus {
	outline: none;
}

/* --- FR1: indicatore di focus visibile su tutti gli elementi interattivi ---
   Il parent rimuove l'outline (a{outline:0}, button:focus{outline:none},
   input/select/textarea:focus{outline:0}, .wc-block-components-button{outline:none!important}).
   Lo ripristiniamo SOLO per la navigazione da tastiera con :focus-visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible,
.et-close:focus-visible,
.menu-toggle:focus-visible,
.wc-block-components-button:focus-visible,
[role="tab"]:focus-visible,
.woof_container a:focus-visible {
	outline: 2px solid #b8322d !important;
	outline-offset: 2px !important;
	/* doppio anello: garantisce visibilità sia su fondo chiaro sia su fondo scuro */
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 0 0 6px rgba(184, 50, 45, 0.55) !important;
}

/* Fallback per browser che non supportano :focus-visible */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus,
	.button:focus,
	.menu-toggle:focus,
	[role="tab"]:focus {
		outline: 2px solid #b8322d !important;
		outline-offset: 2px !important;
	}
}

/* --- Supporto FR7: il <thead> aggiunto nell'override del carrello è solo
   semantico (per screen reader), senza impatto visivo sul layout esistente --- */
.woocommerce-cart-form__contents > thead th {
	padding: 0 !important;
	border: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
}

/* --- Sidebar shop: le widget ora sono <li> (WCAG 1.3.1), niente bullet/indent --- */
ul.shop-sidebar {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
ul.shop-sidebar > li.widget {
	list-style: none;
	margin-left: 0;
}

/* ============================================================================
 * FR10 – CONTRASTO COLORI (WCAG 1.4.3) — correzioni mirate da audit axe
 * Target: ≥ 4.5:1 testo normale, ≥ 3:1 testo grande/UI. Si applica la modifica
 * MINIMA per non alterare l'identità visiva. Aggiungere qui ogni coppia non
 * conforme rilevata (annotando colore originale → nuovo e il rapporto ottenuto).
 * ============================================================================ */

/* [1] Prezzo barrato (vecchio prezzo) nei listini/scheda prodotto.
   Era #8e8e8e su #fff = 3.27:1 → #666666 ≈ 5.0:1. Resta grigio/de-enfatizzato ma leggibile. */
.woocommerce del,
.woocommerce del .woocommerce-Price-amount,
.woocommerce del bdi,
.price del,
.price del .woocommerce-Price-amount,
.price del bdi {
	color: #666666 !important;
	opacity: 1 !important;
}

/* [2] Badge sconto "-30% di sconto" (.badge.onsale).
   Era #ef5c5c su #fff = 3.3:1 → #b8322d ≈ 5.9:1 (stesso rosso accessibile di focus/skip-link). */
.badge.onsale,
.badge.onsale span {
	color: #b8322d !important;
}

/* [3] Link "Svuota" (reset varianti). Era #777777 su #fff = 4.47:1 → #666666 ≈ 5.0:1. */
.reset_variations {
	color: #666666 !important;
}

/* [4] Disponibilità "Disponibile" (stock in-stock). Era #03a678 su #fff = 3.12:1 → #037a58 ≈ 5.3:1 (resta verde). */
.stock.in-stock,
p.stock.in-stock {
	color: #037a58 !important;
}

/* [5] Meta prodotto "COD:" (SKU) e "Categorie:" (posted_in). Era #848485 su #fff = 3.73:1 → #666666 ≈ 5.0:1. */
.sku_wrapper,
.sku_wrapper .sku,
.posted_in {
	color: #666666 !important;
}

/* [6] Bottoni "outlined" (testo rosso su bianco, es. "Continua gli acquisti").
   Era #d44743 = 4.39:1 → #c8403b ≈ 4.9:1. NB: interessa TUTTI i .button.outlined del sito
   (elemento brand) — vedere nota nel CHANGELOG / confermare il rosso preferito. */
a.button.outlined,
.button.outlined {
	color: #c8403b !important;
}

/* [7] Etichette dei form (label flottanti + "(facoltativo)"). Su bianco erano #7e7e7e (4.05:1)
   e sui campi a sfondo grigio #f2f2f2 erano #797979 (3.88:1). #666666 passa su entrambi
   (~5.7:1 su bianco, ~5.1:1 su #f2f2f2). */
.fl-label,
.optional {
	color: #666666 !important;
	opacity: 1 !important; /* Float Labels applica opacity ~0.6 "a riposo" → dilava il colore sotto soglia */
}
/* nel caso l'opacità sia sul wrapper (non sulla label): l'opacity di un genitore
   non è annullabile dal figlio, quindi la forziamo anche qui. */
.fl-wrap {
	opacity: 1 !important;
}

/* [8] WCAG 1.4.1 (uso del colore) — Carrello: il nome prodotto è un link dentro un blocco
   di testo e non è distinguibile se non per colore (2.64:1) → lo sottolineiamo. */
.woocommerce-cart-form .product-name a {
	text-decoration: underline;
}

/* [9] Pill quantità nel riepilogo ordine ("× 1"): testo bianco su grigio #7d7d7d = 4.11:1
   → scurisco lo sfondo a #666666 (bianco su #666666 ≈ 5.7:1), pill grigia ma leggibile. */
.product-name > .product-quantity {
	background-color: #666666 !important;
}