/**
 * VisualTemplate - Accessibility CSS
 * WCAG 2.1 Level AA compliance
 * EU Web Accessibility Directive (2016/2102)
 *
 * INDICE:
 * 1. Skip Navigation Link
 * 2. Focus Visibile (2.4.7)
 * 3. Dimensioni minime testo e touch target (1.4.4, 2.5.5)
 * 4. Riduzione movimento (2.3.3)
 * 5. Contrasto focus e stati interattivi
 * 6. Form accessibili
 * 7. Screen reader utilities
 * 8. Landmark e struttura
 */

/* ============================================================
   1. SKIP NAVIGATION LINK (2.4.1 - Bypass Blocks)
   Permette agli utenti da tastiera/screen reader di saltare
   direttamente al contenuto principale
   ============================================================ */
.skip-to-main {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 99999;
    padding: 12px 24px;
    background: #000;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transition: top 0.2s ease;
}

.skip-to-main:focus {
    top: 0;
    outline: 3px solid #ffdd00;
    outline-offset: 0;
}

/* ============================================================
   2. FOCUS VISIBILE (2.4.7 - Focus Visible)
   Il template originale ha: a, a:focus { text-decoration: none }
   e input { outline: none } — entrambi violano WCAG 2.4.7
   Ripristiniamo focus visibili chiari per tutti gli elementi
   ============================================================ */

/* Reset del focus rimosso dal template originale */
a:focus,
a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 2px;
}

button:focus,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 2px;
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 0;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.25) !important;
}

/* Focus per elementi interattivi nel menu */
.sp-megamenu-parent > li > a:focus,
.sp-megamenu-parent > li > a:focus-visible,
.sp-megamenu-parent .sp-dropdown a:focus,
.sp-megamenu-parent .sp-dropdown a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* Focus per burger/offcanvas toggler */
#offcanvas-toggler:focus,
#offcanvas-toggler:focus-visible,
.close-offcanvas:focus,
.close-offcanvas:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Focus per pulsante scroll-up */
.sp-scroll-up:focus,
.sp-scroll-up:focus-visible {
    outline: 3px solid #ffdd00;
    outline-offset: 2px;
}

/* Supporto per :focus-visible (non mostra focus su click mouse,
   solo su navigazione da tastiera) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================
   3. DIMENSIONI MINIME (2.5.5 - Target Size)
   Touch target minimo 44x44px per elementi interattivi
   ============================================================ */

/* Pulsanti e link nel menu devono avere area cliccabile adeguata */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Pulsante go-to-top */
.sp-scroll-up {
    width: 44px;
    height: 44px;
    line-height: 44px;
}

/* Offcanvas toggler */
#offcanvas-toggler {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Close offcanvas */
.close-offcanvas {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Link nel footer */
#sp-footer a,
#sp-bottom a {
    min-height: 24px;
    display: inline-block;
    padding: 4px 0;
}

/* ============================================================
   4. RIDUZIONE MOVIMENTO (2.3.3 - Animation from Interactions)
   Rispetta le preferenze di sistema per animazioni ridotte
   ============================================================ */
@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;
    }

    /* Disabilita animazioni specifiche Helix */
    #sp-header {
        animation: none !important;
    }

    .sp-megamenu-parent .sp-has-child:hover > .sp-dropdown {
        animation: none !important;
    }

    .sp-pre-loader .sp-loader-clock::after,
    .sp-pre-loader .sp-loader-clock::before,
    .sp-pre-loader .sp-loader-circle,
    .sp-pre-loader .sp-loader-bubble-loop {
        animation: none !important;
    }

    .body-wrapper,
    .offcanvas-overlay {
        transition: none !important;
    }
}

/* ============================================================
   5. CONTRASTO E STATI INTERATTIVI (1.4.3 - Contrast)
   Non modifichiamo i colori esistenti (richiesta utente)
   ma assicuriamo stati hover/focus/active chiari
   ============================================================ */

/* Assicura che i link abbiano uno stato hover distinguibile
   non solo dal colore (underline come indicatore aggiuntivo) */
a:hover {
    text-decoration: underline;
}

/* Eccezioni: link nel menu non usano underline (accettabile
   perché il contesto li identifica come navigazione) */
.sp-megamenu-parent a:hover,
#sp-footer a:hover,
#sp-bottom a:hover,
.offcanvas-menu a:hover,
.sp-scroll-up:hover {
    text-decoration: none;
}

/* Stato current/active nel menu deve essere distinguibile
   non solo dal colore — aggiungiamo font-weight */
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active > span {
    font-weight: 700;
}

/* ============================================================
   6. FORM ACCESSIBILI (1.3.1, 3.3.2)
   Label associate, messaggi errore visibili
   ============================================================ */

/* Label sempre visibili e associate */
label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Campi required — indicatore visivo oltre al colore */
input[required],
textarea[required],
select[required] {
    border-left: 3px solid #c00 !important;
}

/* Messaggi di errore */
.invalid,
.form-control-feedback,
.alert-error {
    font-weight: 600;
}

/* Campo in errore */
.invalid {
    border-color: #c00 !important;
    outline-color: #c00 !important;
}

/* Input: rimuoviamo il reset dell'outline del template originale
   template.css aveva: input[type=text] { outline: none } */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
    outline: initial; /* annulla il "outline: none" del template */
}

/* Campo di ricerca con role searchbox */
input[type="search"] {
    -webkit-appearance: none;
}

/* ============================================================
   7. SCREEN READER UTILITIES
   Classi per testo visibile solo agli screen reader
   ============================================================ */

/* Testo solo per screen reader (già esiste .visually-hidden
   nel template, la rinforziamo e aggiungiamo .sr-only) */
.sr-only,
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Visibile quando riceve focus (es. skip link interni) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ============================================================
   8. LANDMARK E STRUTTURA (1.3.1 - Info and Relationships)
   ============================================================ */

/* Header landmark visivamente distinto */
#sp-header[role="banner"],
header[role="banner"] {
    /* già gestito dal template, assicuriamo solo che sia presente */
}

/* Main landmark */
main#sp-main,
[role="main"] {
    /* Nessun margine negativo che nasconda contenuto */
    min-height: 200px;
}

/* Footer landmark */
footer#sp-footer,
[role="contentinfo"] {
    /* Identificabile visivamente */
}

/* Navigation landmark — identifica il nav principale */
nav[aria-label],
[role="navigation"] {
    /* presente — nessuna modifica necessaria al CSS */
}

/* Breadcrumb — deve avere aria-label="Breadcrumb" (gestito in PHP) */
nav.breadcrumb-nav,
.breadcrumb[aria-label] {
    /* già presente nel template */
}

/* Liste di navigazione nel menu — rimuove stile lista
   mantenendo la semantica */
.sp-megamenu-parent {
    /* già: list-style: none — corretto */
}

/* Immagini decorative — assicura alt="" (gestito in PHP/HTML)
   Le immagini senza alt text vengono nascoste agli screen reader */
img:not([alt]) {
    /* Non possiamo forzare alt via CSS, ma possiamo evidenziare
       le immagini senza alt in fase di sviluppo */
    outline: 3px solid red;
}

/* In produzione commenta la regola sopra e usa questa: */
/* img:not([alt]) { outline: none; } */

/* ============================================================
   9. TABELLA ACCESSIBILE (1.3.1)
   ============================================================ */
table {
    border-collapse: collapse;
    width: 100%;
}

table caption {
    font-weight: 600;
    text-align: left;
    padding: 8px 0;
}

table th {
    font-weight: 700;
    text-align: left;
}

table th,
table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
}

/* ============================================================
   10. LINK CHIARAMENTE IDENTIFICABILI (1.4.1)
   I link nel testo devono essere distinguibili non solo
   dal colore — usiamo underline nel contenuto articolo
   ============================================================ */
.article-details a:not([class]),
.contentpane a:not([class]),
.sp-module-content a:not([class]) {
    text-decoration: underline;
}

.article-details a:not([class]):hover,
.contentpane a:not([class]):hover,
.sp-module-content a:not([class]):hover {
    text-decoration: none;
}

/* ============================================================
   11. TOOLTIP E TITLE ATTRIBUTE (1.4.13)
   ============================================================ */
[title]:not([title=""]) {
    cursor: help;
}

/* ============================================================
   12. MEDIA QUERY - TESTO GRANDE (1.4.4 - Resize Text)
   Il testo deve scalare fino a 200% senza perdita di contenuto
   Usiamo rem/em invece di px per scalabilità
   ============================================================ */
html {
    /* font-size base: 16px di default del browser — non lo
       sovrascriviamo con pixel fissi */
    font-size: 100%;
}

/* Assicura che le aree di contenuto non abbiano altezze fisse
   che potrebbero troncare il testo ingrandito */
.sp-column,
.sp-module-content,
.article-details {
    min-height: 0;
    height: auto !important;
}