/* ==========================================================================
   accessibility.css -- layer di accessibilita del tema base
   ==========================================================================

   Chiude il tema base: caricato dopo default.css, theme.css e queries.css e
   PRIMA delle personalizzazioni per-cliente (custom/theme.css, custom/new.css).

   Contiene SOLO le correzioni ai difetti del codice in site/: se un difetto
   nasce da una regola o da un markup dentro /custom/, si corregge in /custom/,
   non qui. Regole del tema base che azzerano gli indicatori di focus:

     - site/vinora.1.0/theme/css/default.css:12   a, a:focus { outline: none }
     - site/vinora.1.0/theme/css/theme.css:83     .btn-small:focus { outline: 0 }
     - site/vinora.1.0/theme/css/theme.css:90     .btn-link:focus { outline: none }
     - plugin/bootstrap/css/bootstrap.css         numerosi outline: 0
     - plugin/selectordie/selectordie.css:45      .sod_select { outline: 0 }

   I campi di modulo non sono trattati qui: nel tema base .form-control:focus ha
   gia' l'indicatore di Bootstrap (bordo + alone), gli altri input quello del
   browser.

   Inclusione: Global.asax (bundle ~/bundle/konicocss) e MasterPage.master
   (tag <link> nel ramo seoOptimized = False), con lo stesso ordine.

   NON aggiungere qui regole estetiche: questo file contiene solo cio che serve
   alla conformita WCAG 2.1 AA / EN 301549.

   Le dichiarazioni di focus portano !important di proposito: diversi
   componenti iniettano il proprio foglio di stile a runtime (banner cookie
   TermsFeed, lightGallery, selectOrDie), quindi finiscono in cascata DOPO
   questo file e senza !important tornerebbero ad azzerare l'indicatore.

   Audit Ruffino coperto da questo file: righe 9, 16, 18, 19, 20, 58, 59, 61,
   73, 82, 120. Vedi md/Ruffino Accessibilita/Report-interventi.md.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Contenuto per sole tecnologie assistive
   --------------------------------------------------------------------------
   .sr-only e .sr-only-focusable arrivano gia da Bootstrap 3
   (plugin/bootstrap/css/bootstrap.css:1158). Qui si aggiunge solo il
   white-space: nowrap, che Bootstrap 3 non ha: senza, un testo lungo dentro un
   box di 1px viene mandato a capo carattere per carattere e alcuni screen
   reader lo annunciano lettera per lettera.
   -------------------------------------------------------------------------- */

.sr-only {
    white-space: nowrap;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    white-space: normal;
}


/* --------------------------------------------------------------------------
   2. Skip link -- WCAG 2.4.1 Bypass Blocks (audit riga 16)
   --------------------------------------------------------------------------
   Fuori schermo finche non riceve il focus da tastiera, poi compare in alto a
   sinistra sopra a tutto. Il markup sta in MasterPage.master, subito dopo
   <form id="form1">; il bersaglio e' <main id="main-content">.
   -------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 10000;
    padding: 12px 20px;
    background-color: #ffffff;
    color: #111111;
    font-size: 16px;
    line-height: 1.3;
    text-decoration: underline;
    border: 2px solid #111111;
    transition: none;
}

.skip-link:focus,
.skip-link:active {
    top: 0;
    color: #111111;
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   3. Indicatore di focus -- WCAG 2.4.7 Focus Visible / 2.4.11 Focus Not Obscured
   --------------------------------------------------------------------------
   Audit righe 9, 20, 58, 59, 61, 73, 82.

   Indicatore a due colori (anello scuro adiacente ad anello chiaro): e la
   tecnica raccomandata quando il focus deve restare percepibile sia su sfondo
   chiaro sia su sfondo scuro, come qui (header e footer scuri, corpo chiaro,
   slide fotografiche). Almeno uno dei due anelli contrasta sempre >=3:1 con lo
   sfondo adiacente.

   L'anello primario e' l'outline, non il box-shadow: il box-shadow verrebbe
   sovrascritto da qualunque componente che ne dichiari uno proprio (verificato
   sul banner cookie TermsFeed, che vince con un suo box-shadow verde), mentre
   l'outline resta. Il box-shadow fa da secondo anello chiaro.
   In Windows High Contrast / forced-colors il box-shadow viene soppresso dal
   sistema ma l'outline viene ridisegnato con il colore di sistema, quindi
   l'indicatore sopravvive comunque.
   -------------------------------------------------------------------------- */

:root {
    --a11y-focus-dark: #111111;
    --a11y-focus-light: #ffd200;
    --a11y-focus-width: 2px;
    --a11y-focus-spread: 5px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not(input):not(select):not(textarea):not(.sod_select):focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="option"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-dark) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 var(--a11y-focus-spread) var(--a11y-focus-light) !important;
}

/* Componenti che sostituiscono un controllo nativo e che quindi non
   ereditano dalle regole sopra.
   .addtocart   = +/-/rimuovi nel carrello (audit riga 82)
   .product-item a, .breadcrumb li a = card prodotto e filtri (righe 58, 59)
   .sod_select (selectOrDie) ha una regola a parte, qui sotto. */
.addtocart:focus-visible,
.product-item > a:focus-visible,
.product-item a:focus-visible,
.breadcrumb li a:focus-visible,
.lSPager a:focus-visible,
.lSAction a:focus-visible,
.primary-nav-trigger:focus-visible,
.close:focus-visible {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-dark) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 var(--a11y-focus-spread) var(--a11y-focus-light) !important;
}

/* Selettore selectOrDie (quantita in scheda prodotto, audit riga 73): e' un
   <span tabindex> che sostituisce una <select>, quindi al focus deve comportarsi
   come le select native del tema, cioe' come .form-control:focus di Bootstrap
   (bordo + alone). default.css:1644 lo azzerava (border #CCC, box-shadow none)
   e il plugin toglie l'outline. Niente !important: le personalizzazioni in
   /custom/ lo ridefiniscono come le loro select. */
.sod_select.focus {
    border-color: #66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

/* I pulsanti di chiusura delle modali erano <div class="close"> (audit riga 4):
   non focusabili, senza ruolo e senza nome accessibile. Ora sono <button>, e
   qui si azzerano gli stili nativi del bottone perche' la resa resti identica
   a prima: l'icona arriva dal background di .close in theme.css. */
button.close {
    padding: 0;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* .hover-overlay e' in overflow:hidden (default.css:1382): senza questo
   l'anello di focus delle card verrebbe tagliato e risulterebbe invisibile. */
.product-item,
.rel-item,
.hover-overlay {
    overflow: visible;
}

@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus-visible,
    .sod_select.focus,
    .addtocart:focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
    }
}


/* --------------------------------------------------------------------------
   4. Menu mobile fuori dal tab order quando non e' aperto
   --------------------------------------------------------------------------
   Audit righe 18 e 120 -- WCAG 2.4.3 Focus Order.

   Il pannello #primary-nav era nascosto solo con transform: translateY(-1015px)
   e le colonne .menu-middle-mobile con un posizionamento fuori schermo. Per il
   browser restavano visibili e interagibili: navigando con Tab su desktop si
   attraversava una seconda navigazione identica e invisibile, e da chiuso si
   passava per tutti i link del menu mobile prima di arrivare al contenuto.

   visibility: hidden toglie il sottoalbero dal tab order e dall'albero di
   accessibilita' senza togliere l'elemento dal flusso, quindi la transizione di
   apertura continua a funzionare: si riaccende con visibility: visible quando
   body ha la classe navigation-is-open, messa da theme.js.
   -------------------------------------------------------------------------- */

.primary-nav {
    visibility: hidden;
}

body.navigation-is-open .primary-nav {
    visibility: visible;
}

/* Su desktop il blocco mobile non e' mai raggiungibile: e' una replica del menu
   principale, gia' presente e navigabile in .menu-middle. */
@media (min-width: 1200px) {
    .menu-middle-mobile,
    .primary-nav {
        visibility: hidden;
    }
}


/* --------------------------------------------------------------------------
   5. Sottomenu e selettore lingua da tastiera -- WCAG 2.1.1 (audit riga 19)
   --------------------------------------------------------------------------
   I sottomenu dell'header si aprivano solo con :hover
   (theme.css "#header .menu > ul > li:hover > ul"), quindi chi naviga da
   tastiera non poteva raggiungerne le voci. :focus-within li apre appena il
   focus entra nella voce padre.
   -------------------------------------------------------------------------- */

#header .menu > ul > li:focus-within > ul {
    display: block;
}

/* Il selettore lingua di .menu-top (#language-change in MasterPage.master) era un
   <a class="text-btn-small">, ora e' un <button>: si azzerano gli stili nativi e
   si ripete la geometria di ".menu-top a" perche' la resa resti identica. */
.menu-top #language-change > button {
    display: inline-block;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    line-height: 30px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}


/* --------------------------------------------------------------------------
   6. Rispetto delle preferenze di movimento -- WCAG 2.3.3 (best practice)
   -------------------------------------------------------------------------- */

@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;
    }
}