/* ==========================================================================
   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, 68, 46, 88, 81, 84, 86, 110, 125, 126.
   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.

   Un solo anello: outline 2px, offset 2px, nel colore --a11y-focus-color.
   Scuro (#111, 18:1 sul bianco) sul corpo chiaro, bianco nelle zone scure del
   tema base (header trasparente sopra lo slider, pannello menu mobile, footer,
   .bg-black, link .text-white sopra le foto): in entrambi i casi il contrasto con lo sfondo adiacente resta
   ben sopra il 3:1 richiesto da 1.4.11. La variabile si eredita, quindi basta
   ridefinirla sul contenitore: le personalizzazioni in /custom/ con altre zone
   scure (o chiare) fanno lo stesso sui propri contenitori.

   Outline e non 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) e in Windows High Contrast
   / forced-colors viene soppresso, mentre l'outline resta e viene ridisegnato
   con il colore di sistema.
   -------------------------------------------------------------------------- */

:root {
    --a11y-focus-color: #111111;
    --a11y-focus-width: 2px;
}

/* Zone scure del tema base: anello bianco. */
#header,
.primary-nav,
#footer,
#footer-bottom,
.bg-black,
.bg-black-opacity-plus,
.text-white {
    --a11y-focus-color: #ffffff;
}

/* Varianti chiare dell'header e blocchi bianchi annidati: di nuovo scuro. */
#header.menu-transparent-dark,
#header.menu-white,
.bg-white {
    --a11y-focus-color: #111111;
}

/* A menu mobile aperto l'header chiaro sta sopra il pannello scuro e theme.css
   ne porta i link a bianco: l'anello segue. .primary-nav non serve ripeterlo,
   la regola sopra vale sull'elemento stesso e batte l'ereditarieta'. */
body.navigation-is-open #header.menu-transparent-dark {
    --a11y-focus-color: #ffffff;
}

a:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
summary:focus-visible,
[tabindex]:not(input):not(select):not(textarea):not(.sod_select):not(.sod_label):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-color) !important;
    outline-offset: 2px !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-color) !important;
    outline-offset: 2px !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);
}

/* Dall'audit riga 74 il focus reale sta su .sod_label (role="combobox", vedi
   selectordie.konico.js): l'indicatore resta quello del contenitore .sod_select.focus
   qui sopra, quindi il combobox non disegna un secondo anello. */
.sod_select .sod_label:focus {
    outline: none;
}

/* .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;
}


/* --------------------------------------------------------------------------
   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>: gli stili nativi li azzera il
   reset di button in theme.css, qui si ripete la geometria di ".menu-top a"
   perche' la resa resti identica. */
.menu-top #language-change > button {
    display: inline-block;
    padding: 10px 0;
    line-height: 30px;
}


/* --------------------------------------------------------------------------
   6. Carousel lightSlider -- WCAG 2.5.7, 1.4.11 (audit righe 46, 87, 88)
   --------------------------------------------------------------------------
   Pulsanti Precedente/Successivo aggiunti da theme.js (opzione a11yControls)
   agli slider che si potevano scorrere solo trascinando. Stile minimo: le
   personalizzazioni in /custom/ possono ridefinirlo.
   -------------------------------------------------------------------------- */

.a11y-carousel-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.a11y-carousel-controls[hidden] {
    display: none;
}

.a11y-carousel-controls button {
    width: 44px;
    height: 44px;
    border: 1px solid currentColor;
    font-size: 20px;
    line-height: 1;
}

.a11y-carousel-controls button[aria-disabled="true"] {
    opacity: .35;
    cursor: default;
}

/* Pallini di paginazione (audit riga 88): #CCC su bianco era 1,6:1, sotto il
   3:1 richiesto ai componenti dell'interfaccia. #767676 e' 4,5:1. */
.wrap-ls-product .lSSlideOuter .lSPager.lSpg > li a,
.wrap-ls-product .lSSlideOuter .lSPager.lSpg > li:hover a,
.wrap-ls-cselling_cart .lSSlideOuter .lSPager.lSpg > li a,
.wrap-ls-cselling_cart .lSSlideOuter .lSPager.lSpg > li:hover a {
    background-color: #767676;
}

.wrap-ls-product .lSSlideOuter .lSPager.lSpg > li.active a,
.wrap-ls-cselling_cart .lSSlideOuter .lSPager.lSpg > li.active a {
    background-color: transparent;
    border-color: #767676;
}


/* --------------------------------------------------------------------------
   8. Paginazione del listing -- best practice (audit riga 68)
   --------------------------------------------------------------------------
   La pagina corrente si distingueva solo per la dimensione (21px contro 16px),
   poco percepibile con un font sottile. Grassetto e sottolineatura spessa la
   rendono riconoscibile anche con lo zoom e in scala di grigi; aria-current
   la comunica agli screen reader (theme.js, a11yAriaCurrent).
   -------------------------------------------------------------------------- */

.paging .btn-link.active {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}


/* --------------------------------------------------------------------------
   9. Carrello, checkout, ordini e area riservata (audit righe 81, 84, 86,
      110, 125, 126)
   -------------------------------------------------------------------------- */

/* Intestazioni aggiunte solo per la struttura (nomi prodotto nel carrello):
   stessa resa del testo in linea che sostituiscono. */
.heading-plain {
    display: inline;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

/* Passo corrente del checkout e dello stato ordine: non solo colore
   (su Ruffino il colore coincideva con gli altri passi). Stessa resa della
   pagina corrente della paginazione (sez. 8). */
.checkout-steps [aria-current="step"],
.order-status [aria-current="step"] {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Badge di stato (WCAG 1.4.3): testo bianco su sfondi chiari sotto 4,5:1.
   warning #fad776 1,4:1, success #6cbfaf 2,2:1, primary #c69c6d 2,5:1 ->
   testo #111 (15:1, 9:1, 7,8:1); default #777 4,48:1 -> sfondo #666 (5,7:1). */
.label-warning,
.label-success,
.label-primary {
    color: #111;
}

.label-default {
    background-color: #666;
}

/* Messaggio di esito positivo (es. "Ordine pagato correttamente"):
   #6cbfaf su bianco 2,2:1 -> #2e7d6f 4,9:1; il bordo resta. */
.alert-success {
    color: #2e7d6f;
}


/* --------------------------------------------------------------------------
   7. 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;
    }
}