/**
 * Universal Accessibility CSS
 * Version: 1.0.0
 *
 * Base riutilizzabile per siti WordPress e temi differenti.
 * Non garantisce da sola la conformità EAA/WCAG: va affiancata a verifiche
 * su struttura HTML, contrasti, testi alternativi, form e navigazione.
 */

/* =========================================================
   1. VARIABILI PERSONALIZZABILI
   ========================================================= */

:root {
    --a11y-focus-color: #ffbf00;
    --a11y-focus-secondary-color: #111111;
    --a11y-focus-width: 3px;
    --a11y-focus-offset: 3px;
    --a11y-focus-radius: 4px;
    --a11y-skip-bg: #111111;
    --a11y-skip-color: #ffffff;
}

/* =========================================================
   2. FOCUS VISIBILE DA TASTIERA
   ========================================================= */

/*
 * Regola principale universale.
 * Include link, pulsanti, campi modulo, elementi con ruoli interattivi
 * ed elementi resi raggiungibili tramite tabindex.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="switch"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
    outline-offset: var(--a11y-focus-offset) !important;
    border-radius: var(--a11y-focus-radius);
    box-shadow: 0 0 0 1px var(--a11y-focus-secondary-color) !important;
}

/*
 * Fallback per browser o componenti che non gestiscono correttamente
 * :focus-visible. Viene applicato solo quando :focus-visible non è supportato.
 */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    summary:focus,
    [role="button"]:focus,
    [role="link"]:focus,
    [role="menuitem"]:focus,
    [role="tab"]:focus,
    [role="checkbox"]:focus,
    [role="radio"]:focus,
    [role="switch"]:focus,
    [tabindex]:not([tabindex="-1"]):focus {
        outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
        outline-offset: var(--a11y-focus-offset) !important;
        border-radius: var(--a11y-focus-radius);
        box-shadow: 0 0 0 1px var(--a11y-focus-secondary-color) !important;
    }
}

/*
 * Non eliminare globalmente il focus con :focus { outline: none; }.
 * Questa regola rimuove l'evidenziazione solo quando il browser stabilisce
 * che il focus non proviene dalla tastiera.
 */
@supports selector(:focus-visible) {
    :focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
    }
}

/* Focus più leggibile su immagini, loghi e card cliccabili. */
a:focus-visible img,
a:focus-visible svg {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
    outline-offset: var(--a11y-focus-offset);
}

/* =========================================================
   3. SKIP LINK
   ========================================================= */

/*
 * Compatibile con classi comuni:
 * .skip-link, .screen-reader-text, .skip-to-content
 */
.skip-link,
.skip-to-content {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 999999;
    padding: 12px 16px;
    background: var(--a11y-skip-bg);
    color: var(--a11y-skip-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 4px;
    transform: translateY(-200%);
    transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible,
.skip-to-content:focus,
.skip-to-content:focus-visible {
    transform: translateY(0);
    outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
    outline-offset: 2px !important;
}

/* =========================================================
   4. TESTO SOLO PER SCREEN READER
   ========================================================= */

.screen-reader-text,
.sr-only,
.visually-hidden {
    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;
}

/* Rende nuovamente visibile un testo nascosto quando riceve il focus. */
.screen-reader-text:focus,
.sr-only:focus,
.visually-hidden:focus {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 999999 !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background: var(--a11y-skip-bg);
    color: var(--a11y-skip-color);
}

/* =========================================================
   5. MOVIMENTO RIDOTTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-animation-duration: 0.01ms !important;
    }

    video[autoplay] {
        animation: none !important;
    }
}

/* =========================================================
   6. ALTO CONTRASTO E COLORI FORZATI
   ========================================================= */

@media (forced-colors: active) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    summary:focus,
    [role="button"]:focus,
    [role="link"]:focus,
    [tabindex]:not([tabindex="-1"]):focus {
        outline: 3px solid CanvasText !important;
        outline-offset: 3px !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   7. MODULI
   ========================================================= */

/* Migliora la riconoscibilità dei campi disabilitati senza nasconderli. */
input:disabled,
select:disabled,
textarea:disabled,
button:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.65;
}

/* Mantiene visibile il focus anche su checkbox e radio personalizzati. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline-offset: 4px !important;
}

/* =========================================================
   8. LINK NEL CONTENUTO
   ========================================================= */

/*
 * Classe opzionale da applicare ai contenitori testuali.
 * Esempio: <main class="a11y-readable-content">
 */
.a11y-readable-content a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.15em;
}

.a11y-readable-content a:not([class]):hover {
    text-decoration-thickness: 0.18em;
}

/* =========================================================
   9. CONTENUTI DI DESTINAZIONE
   ========================================================= */

/* Evidenzia temporaneamente una sezione raggiunta tramite link con ancora. */
:target {
    scroll-margin-top: 100px;
}

/* =========================================================
   10. STAMPA
   ========================================================= */

@media print {
    .skip-link,
    .skip-to-content {
        display: none !important;
    }
}