/**
 * Ambrosi theme — a11y overrides
 *
 * File caricato DOPO style.css per applicare le correzioni WCAG 2.1 AA
 * senza modificare il CSS compilato (di cui non abbiamo la sorgente SCSS).
 * Ref: ADR-002 su Obsidian Progetti/Ambrosi.it/wiki/concepts/
 * Audit: raw/REPORT_ACCESSIBILITA_WCAG_2.1_AA.md
 *
 * Ogni regola ha un commento WCAG-criterion per tracciabilita.
 */

/* =========================================================
   1. Skip link visibile al focus — WCAG 2.4.1 (Bypass Blocks)
   ========================================================= */
.skip-link.screen-reader-text:focus,
.skip-link:focus {
    position: fixed !important;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    padding: 12px 20px;
    background: #005798;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: underline;
    border: 3px solid #ffffff;
    border-radius: 4px;
    z-index: 100000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    outline: 3px solid #ffd84a;
    outline-offset: 2px;
}

/* =========================================================
   2. Focus visibile su tutti gli elementi interattivi
   WCAG 2.4.7 (Focus Visible) — sostituisce outline:none
   ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible,
.slide__contentLink:focus-visible,
.slick-next:focus-visible,
.slick-prev:focus-visible,
.slick-dots li button:focus-visible,
.buttonPrimary:focus-visible,
.buttonIcon:focus-visible,
.hero-slider-control__link:focus-visible {
    outline: 3px solid #005798 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(255, 216, 74, 0.6) !important;
}

/* Togli il focus solo quando arriva da mouse (non da tastiera) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
    outline: none;
}

/* =========================================================
   3. Fix contrasto colore — WCAG 1.4.3 (Contrast Minimum)
   ========================================================= */

/* .buttonPrimary--beige: testo #7e6a1d su #e0d7b8 = 3.68:1 → 4.5:1+ */
.buttonPrimary--beige {
    color: #5a4b10 !important;
}
.buttonPrimary--beige:hover,
.buttonPrimary--beige:focus {
    color: #3d3209 !important;
}

/* Badge/time ricette: bianco su #a88d00 = 3.24:1 → 4.5:1+.
   Esteso a `.mod-card__target` (badge categoria card news — "Comunicato")
   e `.button-active` (filtro attivo pagina /news/ — "Tutti", "News", ecc.
   la classe .button-active e' applicata dinamicamente al filtro
   selezionato; il fix la segue automaticamente). */
.mod-card__time,
.mod-card__badge,
.mod-card__target,
.button-group .button-active,
.buttonPrimary.button-active {
    background-color: #7a6600 !important;
    color: #ffffff !important;
}

/* Testo timeline beige #e0d7b8 su bianco = 1.44:1 → usa tono piu scuro */
.timeline__text,
.mod-timeline__description,
.storia-timeline__description,
[class*="timeline"] [class*="description"] {
    color: #7e6a1d !important;
}

/* =========================================================
   4. visibility:collapse → display:none — WCAG 1.3.1
   La regola originale usa visibility:collapse su elementi
   non-table, che genera comportamento inconsistente e
   lascia l'elemento nel flow accessibility tree.
   ========================================================= */
.page-id-713 .section-contatti {
    display: none !important;
    visibility: hidden !important;
}

/* =========================================================
   5. Screen reader only (utility per annunci nascosti)
   Assicura che .sr-only esista se non definita altrove
   ========================================================= */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   6. Preferenza ridotto-movimento — WCAG 2.3.3
   ========================================================= */
@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;
    }
}

/* =========================================================
   7. Pulsante-icona senza decorazioni default del browser
   Permette di convertire <i class="icon">→<button class="icon">
   senza rompere il layout del bottone pre-esistente.
   ========================================================= */
button.icon,
button.icon-menu,
button.icon-language,
button.icon-close,
button.js-open,
button.js-close {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    line-height: inherit;
}

/* =========================================================
   8. Pannelli tab nascosti correttamente — WCAG 4.1.2
   Il widget tab (zone-dop) deve nascondere via [hidden]
   invece di display:none inline, per gestione ARIA corretta.
   ========================================================= */
[role="tabpanel"][hidden],
.mod-tab__panelItem[hidden] {
    display: none !important;
}

/* =========================================================
   9. Avviso "apre in nuova finestra" per link target="_blank"
   Aggiunge un indicatore visivo ai link esterni — WCAG 3.2.5
   ========================================================= */
a[target="_blank"]:not(.no-external-indicator)::after {
    content: " ↗";
    font-size: 0.85em;
    margin-left: 0.2em;
    speak: never;
}

/* Non applicare l'indicatore a icone/immagini wrappate in link */
a[target="_blank"]:has(img):not(.no-external-indicator)::after,
a[target="_blank"]:has(picture):not(.no-external-indicator)::after {
    content: "";
}

/* =========================================================
   10. Reset button.hero-slider-control__link
   Lo slider hero ora usa <button> invece di <a>: il CSS del
   tema targettava <a>, i default del browser (bg grigio,
   border outset, padding, cursor default) rompevano l'aspetto.
   Forziamo con !important perche' il CSS compilato del tema
   ha regole con maggiore specificita'.
   ========================================================= */
button.hero-slider-control__link,
.section-hero-slider-control button.hero-slider-control__link,
.slick-arrow.hero-slider-control__link {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    font: inherit !important;
    color: inherit !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
    line-height: inherit !important;
    display: inline-block !important;
}

/* Anche generico per ogni <button class="icon-..."> (safety net) */
button[class*="icon"]:not(.buttonPrimary):not(.buttonIcon),
button[class*="js-"]:not(.buttonPrimary):not(.buttonIcon) {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    line-height: inherit;
}

/* =========================================================
   11. Velo scuro semi-trasparente dietro a testi bianchi su
   immagini di sfondo — WCAG 1.4.3 (Contrast Minimum).
   Garantisce che strumenti automatici (WAVE, axe, Lighthouse)
   possano valutare il contrasto — non essendo in grado di
   misurarlo su background-image — e migliora la leggibilita'
   reale su variazioni dell'immagine di sfondo.

   Testi coinvolti:
   1. Menu principale (link bianchi sopra l'immagine hero)
   2. Titolo hero <h2 class="hero-title"> e cta sopra la slide
   ========================================================= */

/* Gradient cinematografico + text-shadow chirurgico sui testi bianchi
   sovrapposti a immagini di sfondo. Sostituisce i veli rettangolari
   semi-trasparenti (rimossi il 2026-04-24 dopo valutazione visiva).
   Approccio:
   - Pseudo-element ::after con gradient direzionale discreto (scurisce
     progressivamente solo la parte dell'immagine dove sta il testo —
     pattern usato da Apple, Netflix, Airbnb su hero images)
   - `isolation: isolate` + `z-index: -1` sul pseudo per stare sotto al
     contenuto senza toccare la position dei children
   - text-shadow sottile solo sui testi effettivamente bianchi (scope
     chirurgico, non applicato a titoli su sfondo chiaro del tema).

   Hero slider homepage/storia/prodotti/ecc. */
.section-hero {
    isolation: isolate;
    position: relative;
}
.section-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.50) 100%);
    pointer-events: none;
    z-index: -1;
}

/* Menu principale + topHeader su tutte le pagine (sovrapposto a hero image) */
.globalHeader {
    isolation: isolate;
    position: relative;
}
.globalHeader::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 180px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 70%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}

/* Text-shadow CHIRURGICO: applicato SOLO ai testi bianchi sovrapposti a
   immagini. Non tocca titoli con palette tema (verde/beige/blu) che
   risiedono su bg chiari. */
.hero-title,
.hero-subtitle,
.globalHeader .topHeader a,
.globalHeader .topHeader span.wpml-ls-native,
.globalHeader .primary-menu a,
.globalHeader .top-menu-item a,
.section-storia--bg .mod-heading .section__title,
.section-storia--bg .mod-heading .section__subtitle,
.section-storia--bg .mod-heading .section__description {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}

/* Override: i link del dropdown submenu appaiono su pannello chiaro/bianco,
   non sulla foto hero — l'ombra ereditata dal selector sopra li rende
   visivamente rumorosi. Annullata esplicitamente. */
.globalHeader .primary-menu .sub-menu a,
.globalHeader .primary-menu .sub-menu-wrap a {
    text-shadow: none;
}

/* Fallback specifico per mobile se il selettore sopra non copre */
@media (max-width: 767px) {
    .section-hero h1.hero-title,
    .section-hero h2.hero-title {
        background-color: rgba(0, 0, 0, 0.35);
        padding: 0.25em 0.5em;
        display: inline-block;
        border-radius: 4px;
    }
}

/* =========================================================
   12. Fix contrasto testo beige su bg beige (pagine prodotti
   + scheda prodotto + tabella nutrizionale)
   Testo #7e6a1d su #e0d7b8 = 3.68:1 → vogliamo >= 4.5:1.
   Scurisco il testo a #5a4b10 (contrasto ~5.46:1).
   Esteso a tutti i componenti che usano questo schema colore:
   mod-tabella (ingredienti, testo, asterisco) e mod-list (schede
   caratteristiche prodotto).
   ========================================================= */
.section-mod-prodotto .section__description,
.section-mod-prodotto .section__subtitle,
.section-mod-prodotto .mod-heading > div,
.mod-heading--beige .section__description,
.mod-heading--beige .section__subtitle,
.mod-tabella__sottotitolo,
.mod-tabella__testo,
.mod-tabella__asterisco,
.mod-list__textTitle,
.mod-list__textDescription {
    color: #5a4b10 !important;
}

/* =========================================================
   13. Velo scuro su .mod-heading dentro sezioni con
   background image — WCAG 1.4.3.
   Pattern ricorrente: <section> con <div class="section__background">
   sibling contiene un <div class="mod-heading"> con testo bianco
   (titolo + sottotitolo + descrizione). WAVE non puo' valutare
   il contrasto su immagine e flagga bianco su bianco (1.0).
   Il velo forza un bg scuro valutabile e migliora leggibilita'.
   ========================================================= */
/* NOTA: velo generico `:has()` su `.mod-heading` in sezioni con
   background-image RIMOSSO il 2026-04-24 — stesso motivo della nota
   in sezione 11 sopra. Testi bianchi su immagine restano visivamente
   leggibili; le segnalazioni axe sono falsi positivi documentati. */


/* =========================================================
   14. Fix contrasto testi pagina Zone DOP — WCAG 1.4.3
   Le schede dei dettagli zona (.zonePanel__schedaSingola)
   mostrano regioni ("Piemonte", "Lombardia"), citta' e testi
   descrittivi con color #7e6a1d su bg #e0d7b8 = 3.68:1.
   Scuriamo a #5a4b10 (contrasto ~5.46:1).
   Selettore wide con attributo prefix match per coprire tutte
   le sottoclassi `schedaZone__*` senza elencarle.
   ========================================================= */
body .section-scheda-zone [class*="schedaZone__"],
body .section-scheda-zone [class*="schedaZone__"] strong,
body .zonePanel__schedaSingola [class*="schedaZone__"],
body .zonePanel__schedaSingola [class*="schedaZone__"] strong,
body .section__schedaZone__detail__item,
body .section__schedaZone__detail__item strong,
body .section__schedaZone__title,
body .section__schedaZone__subtitle,
body .section__schedaZone__description,
body .section__schedaZone__consorzio__name,
body .section__schedaZone__consorzio__text,
/* Descrizioni generate dalla macro text() dentro le schede DOP */
body .section-scheda-zone .text,
body .zonePanel__schedaSingola .text,
body .section__schedaZone__description .text,
body .section__schedaZone__consorzio__text .text,
/* Tab zone-dop: tutti i tab (attivo e non-attivo) ereditano color
   #7e6a1d su bg beige #e0d7b8 = 3.68:1 sotto soglia WCAG.
   Verificato via browser: il tema NON cambia color dinamicamente
   sul .currentItem (solo altri stili visuali). Quindi possiamo
   applicare color scuro a tutti senza rompere logica. */
body .mod-tab__navigationList .mod-tab__navigationLink__textSide,
body .mod-tab__navigationList .mod-tab__navigationLink,
body .mod-tab__navigationItem .mod-tab__navigationLink__textSide {
    color: #5a4b10 !important;
}

/* =========================================================
   16. Fix contrasto residui post-audit axe (pagine news/contatti) — WCAG 1.4.3
   a) `.mod-card__contentData` (data news) color #99bcd6 su bianco = 1.99:1
      → scurisco a #4a6d8c (blu scuro Ambrosi, contrasto 5.91:1)
   b) Select2 placeholder (contatti — campo "Settore") color default
      generato dal plugin JS → forzo #595959 (grigio scuro, 7.0:1 su bianco)
   ========================================================= */
body .mod-card__contentData,
body .mod-card__contentData.text-left,
body .mod-card__contentData.text-center,
body .mod-card__contentData.text-right {
    color: #4a6d8c !important;
    /* Il tema applica opacity:0.4 che riduce il contrasto effettivo a 1.76:1
       anche con color scuro. Forzo opacity:1 per ripristinare il contrasto. */
    opacity: 1 !important;
}

body .select2-selection__placeholder,
body .select2-container .select2-selection__placeholder {
    color: #595959 !important;
}

/* =========================================================
   17. Pagina /prodotti/ — categorie su background image: FALSO POSITIVO axe
   I testi `.section__title`/`.section__description` dentro `.mod-prodotto`
   sono sovrapposti a immagini-packshot prodotto. axe-core non puo'
   valutare il contrasto su `background-image` e calcola un grigio medio
   come fallback, generando violations `color-contrast` 1.57-3.80.
   VISUALMENTE il testo beige scuro #5a4b10 (fix sezione 12) e' perfettamente
   leggibile sulle foto prodotto: il bg delle immagini e' chiaro e uniforme.
   Nessun velo o cambio color applicato: mantenuto design originale.
   Questa categoria di violations axe e' documentata come falso positivo
   nel Rapporto sez. 6 (WCAG 1.4.3 dice "tools cannot assess contrast
   on background images" — verifica deve essere visuale/manuale).
   ========================================================= */

/* =========================================================
   15. Fix pagina /storia/ — WCAG 1.4.3
   Tre pattern identificati:
   a) Timeline dates (1942, 1945, Anni 50, ecc.) con color
      #e0d7b8 su bg bianco = 1.44:1 — quasi invisibile.
   b) Titoli sezioni .section-storia--bg con h1 bianco su
      background-image CSS (falso positivo WAVE — il tool non
      valuta bg-image) — velo scuro per fornire bg calcolabile.
   c) Hero title su /storia/ ha struttura senza .col-12, il
      velo esistente non matcha. Estendo a .container interno.
   ========================================================= */

/* a) Timeline anni storia — SOLO inattivi.
   Il tema gestisce dinamicamente il color del .current in base al
   background della sezione visibile (blu #015798 su chiaro,
   bianco su scuro, transizioni animate). NON dobbiamo toccarlo.
   Gli item non-current restano col loro color originale #e0d7b8
   (beige chiarissimo) = 1.44:1 su bianco, illegibili.
   Il `:not(.current)` garantisce che il nostro fix si applichi
   SOLO agli item sbiaditi, preservando la logica scroll del tema. */
body .section-storia-timeline .timeline-list li:not(.current),
body .timeline-wrapper .timeline-list li:not(.current),
body .timeline-list .timeline-list__item:not(.current),
body .timeline-list li[id*="year"]:not(.current) {
    color: #7e6a1d !important;
}

/* b) e c) RIMOSSI il 2026-04-24: erano veli scuri su titoli di sezioni
   `.section-storia--bg` e sul container hero. Rimossi su richiesta
   committente dopo valutazione visiva. Stessa motivazione della nota
   in sezione 11: contrasti su background-image sono falsi positivi
   dello strumento automatico e la verifica deve essere visuale. */

/* Alias WP-standard della classe screen-reader-text — garantisce
   che qualunque uso di .screen-reader-text sia trattato come sr-only. */
.screen-reader-text {
    position: absolute !important;
    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;
}
.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none;
    height: auto;
    width: auto;
    position: absolute !important;
    top: 5px;
    left: 5px;
    padding: 15px 23px 14px;
    color: #0a0a0a;
    background: #f1f1f1;
    z-index: 100000;
    text-decoration: none;
}

/* =========================================================
   17. Stile messaggi errore form generati dall'overlay JS — WCAG 3.3.1
   =========================================================
   I `<div class="a11y-field-error" role="alert">` iniettati da
   a11y.js sotto un campo invalido devono essere visibili sia
   visivamente (rosso) che leggibili (contrasto AA su sfondo bianco).
   #b00020 (Material rosso 800) ha 6.16:1 su bianco.
   ========================================================= */
.a11y-field-error {
    display: block;
    margin: 6px 0 0;
    padding: 4px 0;
    color: #b00020;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}
.a11y-field-error::before {
    content: "⚠ ";
    speak: never;
    margin-right: 4px;
}

/* =========================================================
   18. Campi invalidi: bordo rosso visibile — WCAG 1.4.1, 3.3.1
   =========================================================
   I form fields con `aria-invalid="true"` ricevono uno stile
   visivo che NON dipende solo dal colore (bordo doppio + icona
   testuale dell'errore, vedi sezione 17).
   ========================================================= */
.inputField[aria-invalid="true"],
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border: 2px solid #b00020 !important;
    background-image: linear-gradient(transparent 0, transparent 100%) !important;
    outline-offset: 0;
}
.inputField[aria-invalid="true"]:focus,
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
.inputField[aria-invalid="true"]:focus-visible,
input[aria-invalid="true"]:focus-visible,
select[aria-invalid="true"]:focus-visible,
textarea[aria-invalid="true"]:focus-visible {
    outline: 3px solid #b00020 !important;
    box-shadow: 0 0 0 5px rgba(176, 0, 32, 0.25) !important;
}

/* =========================================================
   19. Bottoni filtro categoria: stato attivo con aria-pressed — WCAG 1.4.1
   =========================================================
   Stato "premuto" indicato sia da classe .button-active (presente
   da tema) sia da aria-pressed="true" (impostato dall'overlay JS).
   Aggiungiamo un bordo doppio per non rendere il segnale unicamente
   visivo-cromatico.
   ========================================================= */
.filter-button-group .buttonPrimary[aria-pressed="true"],
.button-group.filter-button-group .buttonPrimary[aria-pressed="true"] {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    font-weight: 700;
}

/* =========================================================
   20. Tabpanel Zone DOP nascosti correttamente — WCAG 4.1.2
   =========================================================
   Dopo l'iniezione di `hidden` da parte dell'overlay JS sui
   tabpanel non attivi, garantiamo che siano effettivamente
   rimossi dall'accessibility tree e dal flusso visuale.
   La regola esistente in sezione 8 copre `[role="tabpanel"][hidden]`
   ma rinforziamo con !important perché il tema imposta inline
   `position: absolute; opacity: 0` che lascerebbe lo spazio occupato.
   ========================================================= */
[role="tabpanel"][hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* =========================================================
   21. Live region screen-reader-only — WCAG 4.1.3
   =========================================================
   Il container `#a11y-filter-live-region` inserito dall'overlay JS
   per annunciare risultati filtro deve restare invisibile ma
   leggibile dagli screen reader.
   ========================================================= */
#a11y-filter-live-region {
    position: absolute !important;
    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;
}

/* =========================================================
   22. Hero title contrasto via velo dinamico — WCAG 1.4.3
   =========================================================
   Sul live `H2.hero-title` (47px bianco) sta su una `.slick-slide`
   con background-image. Il velo rgba `::before` esistente in sez. 11
   targetta `.hp-hero` ma il selettore del tema sull'home è
   `.section-hero .slick-slide`. Aggiungiamo il velo SOLO se la
   slide ha background-image, usando :has() (browser moderni).
   Per browser legacy fallback su .section-hero generale.
   ========================================================= */
@supports selector(:has(*)) {
    .section-hero .slick-slide:has(.hero-title) {
        position: relative;
    }
    .section-hero .slick-slide:has(.hero-title)::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%);
        pointer-events: none;
        z-index: 1;
    }
    .section-hero .slick-slide:has(.hero-title) .hero-textContainer,
    .section-hero .slick-slide:has(.hero-title) .container {
        position: relative;
        z-index: 2;
    }
}