/* Versione asset: 2026-08-07 r12 (focus per modalità e chevron immobile)
   =========================================================
   WP Accessibility Fixer — miglioramenti frontend (Olio Sagra)
   CSS additivo: focus visibile, skip-link, sottomenu da tastiera.
   ========================================================= */

/* 1) Focus visibile coerente e ad alto contrasto (WCAG 2.4.7 / 1.4.11) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible {
    outline: 3px solid #0b5fff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff !important;
    border-radius: 2px;
}
/* Fallback per browser senza :focus-visible */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 2px solid #0b5fff;
}

/* Nei browser moderni il fallback non deve riattivare l'outline dopo un
 * click. Il focus da tastiera continua a usare la regola :focus-visible. */
@supports selector(:focus-visible) {
    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible),
    input:focus:not(:focus-visible),
    select:focus:not(:focus-visible),
    textarea:focus:not(:focus-visible),
    summary:focus:not(:focus-visible),
    [tabindex]:focus:not(:focus-visible),
    [role="button"]:focus:not(:focus-visible),
    [role="link"]:focus:not(:focus-visible),
    [role="menuitem"]:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }
}

/* Alcuni menu spostano il focus via script dopo il puntatore; in quel caso
 * Chromium può considerarlo :focus-visible. La modalità è rilevata dal JS e
 * la soppressione resta limitata alla navigazione, mai a form o contenuti. */
html.wkaf-pointer-modality header a:focus,
html.wkaf-pointer-modality header button:focus,
html.wkaf-pointer-modality [role="navigation"] a:focus,
html.wkaf-pointer-modality [role="navigation"] button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Il checkbox Ninja Forms e' trasparente: trasferisce il focus visivo sul box
 * disegnato dal label, senza cambiare il layout o il controllo nativo. */
#nf-field-5-wrap.checkbox-wrap.wkaf-checkbox-focus .nf-field-label label::after,
.nf-form-cont .checkbox-wrap.wkaf-checkbox-focus .nf-field-label label::after {
    outline-color: #0b5fff !important;
    outline-style: solid !important;
    outline-width: 3px !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px #ffffff !important;
}

@media (forced-colors: active) {
    #nf-field-5-wrap.checkbox-wrap.wkaf-checkbox-focus .nf-field-label label::after,
    .nf-form-cont .checkbox-wrap.wkaf-checkbox-focus .nf-field-label label::after {
        outline-color: Highlight !important;
        box-shadow: none !important;
        forced-color-adjust: auto;
    }
}

/* 2) Skip link reso visibile quando riceve il focus da tastiera */
.skip-link:focus,
.wkaf-skip-link:focus {
    position: fixed !important;
    left: 50% !important;
    top: 8px !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    background: #0b5fff !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: underline !important;
    z-index: 100000 !important;
    clip: auto !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
}

/* 3) Sottomenu apribili da tastiera (Tab) tramite :focus-within (WCAG 2.1.1) */
.menu-item-has-children:focus-within > .sub-menu,
.sub-nav-item:focus-within > .sub-menu,
.mega-menu-item:focus-within > .sub-menu,
li.menu-item:focus-within > ul,
li:focus-within > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* 4) Evidenzia l'hamburger quando focalizzato */
.hamburger:focus-visible,
#hamburger-menu .hamburger:focus-visible {
    outline: 3px solid #0b5fff !important;
    outline-offset: 3px !important;
}
.hamburger[role="button"] { cursor: pointer; }

/* 5) Pulsante disclosure separato per le voci con sottomenu */
#mega-menu-wrap > ul > li.has-submenu::after {
    display: none !important;
}

#mega-menu-wrap > ul > li.has-submenu > .wkaf-submenu-toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: -8px;
    box-sizing: border-box !important;
    min-width: 24px !important;
    width: 24px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    transform: translateY(-50%);
    z-index: 3;
}

#mega-menu-wrap > ul > li.has-submenu > .wkaf-submenu-toggle > span {
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) !important;
    transform-origin: center;
    transition: none !important;
    animation: none !important;
}

#mega-menu-wrap > ul > li.has-submenu > .wkaf-submenu-toggle[aria-expanded="true"] > span {
    transform: rotate(45deg) !important;
}

/*
 * 6) Desktop: il disclosure si sovrappone all'area della freccia originale
 * senza cambiare larghezze, float o posizione del menu del tema. In questo
 * modo le metriche restano identiche alla produzione.
 */
@media screen and (min-width: 1101px) {
    #mega-menu-wrap > ul > li.has-submenu > .wkaf-submenu-toggle {
        right: -8px;
        justify-content: center;
    }

    /* La freccia resta sempre rivolta in basso, anche a menu aperto. */
    #mega-menu-wrap > ul > li.has-submenu > .wkaf-submenu-toggle > span {
        transform: rotate(45deg) !important;
    }

    #mega-menu-wrap > ul > li.has-submenu > .wkaf-submenu-toggle[aria-expanded="true"] > span {
        transform: rotate(45deg) !important;
    }
}

/* 7) Utilità solo-screen-reader */
.wkaf-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* (Le correzioni di contrasto specifiche del sito vanno in wkaf_settings.custom_css) */

@media screen and (max-width: 1100px) {
    #masthead #site-navigation.main-nav #mega-menu-wrap > ul > li.has-submenu {
        position: static !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 58px;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    #masthead #site-navigation.main-nav #mega-menu-wrap > ul > li.has-submenu > a.menu-link {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-right: 58px !important;
    }

    #masthead #site-navigation.main-nav #mega-menu-wrap > ul > li.has-submenu > a.menu-link::before,
    #masthead #site-navigation.main-nav #mega-menu-wrap > ul > li.has-submenu > a.menu-link::after {
        display: none !important;
    }

    #masthead #site-navigation.main-nav #mega-menu-wrap > ul > li.has-submenu > .wkaf-submenu-toggle {
        position: static !important;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        min-width: 44px !important;
        width: 44px !important;
        height: 40px !important;
        color: inherit;
        transform: none !important;
        z-index: 12;
    }

    #masthead #site-navigation.main-nav #mega-menu-wrap > ul > li.has-submenu > .sub-nav {
        position: static !important;
        grid-column: 1 / -1;
    }

    /* Il pannello figlio sostituisce il livello principale, come nel tema. */
    #masthead #site-navigation.main-nav #mega-menu-wrap > ul.wkaf-submenu-level-open > li.has-submenu > .wkaf-submenu-toggle {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /*
     * Il generico :focus-within del tema non deve tenere aperto un pannello
     * dopo che il relativo disclosure e' tornato allo stato chiuso.
     */
    html body #masthead #site-navigation.main-nav #mega-menu-wrap #primary-menu > li.has-submenu:not(.wkaf-submenu-open) > .sub-nav > ul.sub-menu {
        height: 0 !important;
        left: -100% !important;
        opacity: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    html body #masthead #site-navigation.main-nav #mega-menu-wrap #primary-menu > li.has-submenu.wkaf-submenu-open > .sub-nav > ul.sub-menu {
        height: auto !important;
        left: 0 !important;
        opacity: 1 !important;
        overflow: visible !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
}

/*
 * CTA Sagra approvate: regole nel bundle versionato per evitare che la cache
 * minificata del tema continui a servire gli stati gialli precedenti.
 */
html body button.cancellafiltro {
    appearance: none !important;
    box-sizing: border-box !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 142px !important;
    height: 44px !important;
    min-width: 142px !important;
    min-height: 44px !important;
    margin: 15px auto 0 !important;
    padding: 0 8px !important;
    border: 2px solid #487629 !important;
    border-radius: 999px !important;
    background: #487629 !important;
    color: #fff !important;
    opacity: 1 !important;
    font-family: 'aller', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    text-transform: uppercase !important;
}

html body button.cancellafiltro span {
    padding: 0 !important;
    color: #fff !important;
    opacity: 1 !important;
}

html body button.cancellafiltro .cancellafiltro-icona {
    display: flex !important;
    align-items: center !important;
}

html body button.cancellafiltro img {
    display: block !important;
    width: 31px !important;
    height: 26px !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
}

html body button.cancellafiltro:hover,
html body button.cancellafiltro:focus-visible {
    border-color: #31511c !important;
    background: #31511c !important;
    color: #fff !important;
}

html body.page-id-5665060 .sf-level-0.sf-option-active > label,
html body.page-id-5665060 .sf-level-0 > .sf-input-radio:checked + label {
    border-color: #487629 !important;
    background-color: #487629 !important;
    color: #fff !important;
}

html body.page-id-5665038 input#nf-field-4:not(:disabled) {
    border-color: #487629 !important;
    background: #487629 !important;
    color: #fff !important;
}

html body.page-id-5665038 input#nf-field-4:not(:disabled):hover,
html body.page-id-5665038 input#nf-field-4:not(:disabled):focus-visible {
    border-color: #31511c !important;
    background: #31511c !important;
    color: #fff !important;
}

/*
 * Ricette con piu gruppi di ingredienti: ogni gruppo ha un'intestazione
 * separata dall'elenco, senza trasformarla in una voce puntata.
 */
.boxingredienti .ingredient-group-title {
    margin: 24px 0 5px !important;
    color: #3d220d !important;
    font-family: 'aller', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 21px !important;
    text-transform: none !important;
}

.boxingredienti .ingredient-group-title + ul {
    margin-top: 5px !important;
}

/*
 * Slider prodotti: Classico e le altre quattro schede condividono la stessa
 * tipografia del titolo e gli stessi stati della CTA.
 */
#slider-7-slide-11-layer-0,
#slider-7-slide-20-layer-0,
#slider-7-slide-21-layer-0,
#slider-7-slide-22-layer-0,
#slider-7-slide-23-layer-0 {
    font-family: 'santelia-rough-two', 'SantEliaRoughThr-Regular', cursive !important;
    font-weight: 400 !important;
}

#rev_slider_7_2 .bottonesliderhomeprod a {
    border-color: #487629 !important;
    background-color: #487629 !important;
    color: #fff !important;
}

#rev_slider_7_2 .bottonesliderhomeprod a:hover,
#rev_slider_7_2 .bottonesliderhomeprod a:focus-visible {
    border-color: #31511c !important;
    background-color: #31511c !important;
    color: #fff !important;
}

/*
 * Schede prodotto: usa la texture fornita sul fondo crema richiesto. Il
 * livello decorativo resta separato dai contenuti e non intercetta il mouse.
 */
html body.page-template-page-prodotti .fascia1prodottosingolo {
    background-color: #fffdf4 !important;
    background-image: none !important;
}

html body.page-template-page-prodotti .fascia1prodottosingolo::before {
    background-color: transparent !important;
    background-image: url('../images/product-header-texture-1920x1170-20260807.jpg') !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    opacity: 1 !important;
}

/* CTA finale presente in tutte le schede ricetta. */
html body.ricetta-template-default .fasciaaltrericettesotto .sagra-recipe-cta {
    border-color: #487629 !important;
    background-color: #487629 !important;
    color: #fff !important;
}

html body.ricetta-template-default .fasciaaltrericettesotto .sagra-recipe-cta:hover,
html body.ricetta-template-default .fasciaaltrericettesotto .sagra-recipe-cta:focus-visible {
    border-color: #31511c !important;
    background-color: #31511c !important;
    color: #fff !important;
}

/* Le CTA outline residue usano la stessa coppia cromatica di tutti i pulsanti. */
html body a.btn.btn-outline,
html body button.btn.btn-outline {
    border-color: #487629 !important;
    background-color: #487629 !important;
    color: #fff !important;
}

html body a.btn.btn-outline:hover,
html body a.btn.btn-outline:focus-visible,
html body button.btn.btn-outline:hover,
html body button.btn.btn-outline:focus-visible {
    border-color: #31511c !important;
    background-color: #31511c !important;
    color: #fff !important;
}

/* 7) Rispetto del movimento ridotto (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}