/*
 * CSS per Accessibilità - Navigazione da Tastiera
 * Aggiunte per compliance WCAG
 */

/* Correzione del link "Salta al contenuto principale" */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10000;
    background: #000;
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
}

.skip-link:focus {
    left: 10px;
    top: 10px;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
}

/* Classe per nascondere testo visivamente ma mantenerlo per screen reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Reset per bottoni che sostituiscono link */
#mobile-nav-icon, 
.searchid, 
.countryid, 
#go-to-top {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

/* Assicuriamo che il bottone "torna su" mantenga l'aspetto originale */
#go-to-top {
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 24px;
    right: 10px;
    cursor: pointer;
    transition: color 300ms, background-color 300ms, opacity 300ms;
    z-index: 9;
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
    display: block;
    border: none;
}

#go-to-top span {
    font-size: 1em;
    line-height: 24px;
}

/* Focus visibile migliorato per tutti gli elementi interattivi */
a:focus-visible, 
button:focus-visible, 
input:focus-visible, 
select:focus-visible, 
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #57B957;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(87, 185, 87, 0.3);
}

/* Assicuriamo che il focus sia sempre visibile anche sui bottoni personalizzati */
.searchid:focus-visible,
.countryid:focus-visible,
#mobile-nav-icon:focus-visible {
    outline: 3px solid #57B957;
    outline-offset: 2px;
    background: rgba(87, 185, 87, 0.1);
}

/* Miglioramenti per i link con target="_blank" */
a[target="_blank"]::after {
    content: "";
    /* Rimuoviamo l'icona visiva per ora, usiamo solo text per screen reader */
}

/* Assicuriamo che i menu a tendina siano accessibili da tastiera */
.nav li:focus-within > ul,
.nav li:hover > ul {
    display: block;
}

/* Miglioriamo la visibilità del focus sui link del menu */
.nav a:focus-visible {
    background: rgba(87, 185, 87, 0.1);
    outline: 2px solid #57B957;
    outline-offset: 1px;
}

/* Stili specifici per la ricerca */
.avante-search-wrapper input:focus-visible {
    outline: 3px solid #57B957;
    outline-offset: 2px;
}

.avante-search-wrapper button:focus-visible {
    outline: 3px solid #57B957;
    outline-offset: 2px;
}

/* ACCESSIBILITÀ MENU - SOLO CSS (niente JavaScript) */

/* 1. SIMULA COMPORTAMENTO MOUSE: Replica le stessi classi che il JavaScript aggiunge con hover */
#menu-wrapper .nav > li:focus-within > ul:first-child {
    /* Simula .visible.hover che il JavaScript aggiunge al hover */
    z-index: 9;
    opacity: 1;
    height: auto;
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    overflow: visible;
    display: block;
    visibility: visible;
    /* Aggiunge il posizionamento che manca */
    position: absolute;
    top: 100%;
    left: 0;
}

/* Replica comportamento anche per sottomenu di secondo livello */
#menu-wrapper .nav > li > ul > li:focus-within > ul:first-child {
    /* Stessi stili del livello superiore */
    z-index: 9;
    opacity: 1;
    height: auto;
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    overflow: visible;
    display: block;
    visibility: visible;
    position: absolute;
    top: 0;
    left: 100%;
}

/* 2. NASCONDE MENU MOBILE SU DESKTOP - Evita duplicazioni nel tab order */
@media (min-width: 960px) {
    /* Elementi del menu mobile che non devono essere focusabili su desktop */
    #btn-close-mobile-menu,
    #mobile-menu-close, 
    .mobile-menu-wrapper,
    .mobile-main-nav,
    #side-sub-menu {
        /* Nasconde completamente dall'accessibilità */
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        /* Forza rimozione dal tab order */
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        z-index: -1 !important;
    }
}

/* 3. GESTISCE LOGHI DUPLICATI - Solo uno deve essere nel tab order */
.logo-wrapper.hidden,
#custom_logo.hidden,
#custom_logo_transparent.hidden {
    /* Logo nascosto non deve essere nel tab order */
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* 4. LIMITAZIONE: La navigazione Tab rimarrà 1→1.1→1.1.1 */
/* Questo è un limite del CSS-only. Per 1→2→3 serve JavaScript che non possiamo usare */
/* Ma l'accessibilità è comunque garantita: i sottomenu sono raggiungibili */

/* 5. FOCUS VISIBILE: Migliora accessibilità da tastiera */
#menu-wrapper .nav a:focus-visible {
    outline: 3px solid #57B957;
    outline-offset: 2px;
    background: rgba(87, 185, 87, 0.1);
}

/* 6. FOCUS SOTTOMENU: Stile specifico per link nei sottomenu */
#menu-wrapper .nav ul.sub-menu a:focus-visible {
    outline: 3px solid #57B957;
    outline-offset: 1px;
    background: rgba(87, 185, 87, 0.15);
}

/* 7. POSIZIONAMENTO: Corregge viewport overflow (mantiene logica esistente) */
#menu-wrapper .nav li.menu-item ul.sub-menu.viewport-flip {
    left: auto !important;
    right: 0 !important;
}

/* 8. MIGLIORAMENTI VISIVI: Per chiarezza navigazione */
#menu-wrapper .nav ul.sub-menu a:hover,
#menu-wrapper .nav ul.sub-menu a:focus {
    background: rgba(87, 185, 87, 0.2);
    color: #333;
}

/* 9. PROGRESSIVE ENHANCEMENT: Funziona con e senza JavaScript */
/* CSS fornisce accessibilità base, JavaScript del tema migliora UX mouse */

/* 10. DEBUG FOCUS - Mostra elementi attualmente con focus quando ?debugacc=1 */
body.debug-focus *:focus {
    outline: 5px solid red !important;
    outline-offset: 2px !important;
    background: rgba(255, 0, 0, 0.3) !important;
    position: relative !important;
}

body.debug-focus *:focus::before {
    content: attr(class) " | " attr(id) " | " attr(tagName);
    position: absolute !important;
    top: -30px !important;
    left: 0 !important;
    background: red !important;
    color: white !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-family: monospace !important;
    z-index: 10000 !important;
    white-space: nowrap !important;
    border-radius: 3px !important;
}