/**
 * accessibility.css — Correzioni di accessibilità (WCAG 2.1 AA)
 *
 * PERCHÉ UN FILE SEPARATO E NON input.css/output.css:
 * `output.css` è il file servito e NON si rigenera (vedi docs/WORKFLOW.md §6:
 * molte utility nascono a runtime dal JS e un rebuild le perderebbe). Lo script
 * `css-patch.sh` sostituisce regole ESISTENTI e si ferma se non le trova, quindi
 * non può introdurre regole nuove come queste. Tenerle qui significa zero
 * modifiche a output.css, zero rischio di regressione e regole leggibili.
 *
 * Caricato DOPO `output.css` (dipendenza 'blank' in inc/css-framework.php),
 * così vince sulle utility Tailwind senza bisogno di !important.
 *
 * Riferimento: docs/accessibility/2026-09-09-analisi-report-accessibilita.md
 */

/* ══════════════════════════════════════════════════════════════════
   1. FOCUS DA TASTIERA — WCAG 2.4.7 (AA) e 1.4.11 (AA)
   Segnalazioni 04FZ3, G0H67.

   Il tema non definiva alcuno stile di focus: il sito ereditava l'outline
   nero del browser, invisibile sui fondi #112358 / #004499.

   Doppio anello: lemon-pie all'interno, deep-night all'esterno. Sul chiaro
   contrasta l'anello scuro, sullo scuro contrasta il giallo — una regola
   sola valida su tutti i fondi del sito.

   Si usa :focus-visible, non :focus, così il mouse non lo mostra.

   NB: niente :where() — ha specificità zero e le utility Tailwind
   sovrascriverebbero l'anello.
   ══════════════════════════════════════════════════════════════════ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #f1ff62;
    outline-offset: 2px;
    /* secondo anello: garantisce il contrasto quando il fondo è chiaro */
    box-shadow: 0 0 0 6px #112358;
    border-radius: 2px;
}

/* Il bersaglio dello skip link porta `tabindex="-1"` per poter ricevere il
   focus (un <div>/<main> non è focusabile: senza, il browser sposta lo scroll
   ma lascia il focus sul link, e il Tab successivo torna nell'header —
   verificato, lo skip link non saltava nulla). Non è però un controllo:
   circondarlo d'oro significherebbe disegnare un anello attorno all'intera
   pagina. Che il salto sia avvenuto si vede dallo scroll e dal fatto che il
   Tab successivo entra nel contenuto. */
#contenuto-principale:focus,
#contenuto-principale:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Elementi con un'immagine figlia in `position:absolute` (player video, card
   con copertina a tutta area): l'anello va disegnato SOPRA quell'immagine.
   Verificato in browser: con il solo `outline` — anche con offset negativo —
   la copertina lo nasconde e il focus resta invisibile, che era esattamente
   la segnalazione 04FZ3. Serve un pseudo-elemento con z-index proprio.
   Il contenitore ha `overflow-hidden`, quindi l'anello è interno (`inset`). */
#video-play-btn:focus-visible,
.news__card:focus-visible,
.timeline-card:focus-visible {
    outline: none;
    box-shadow: none;
}

#video-play-btn:focus-visible::after,
.news__card:focus-visible::after,
.timeline-card:focus-visible::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 3px solid #f1ff62;
    box-shadow: 0 0 0 3px #112358;
    border-radius: inherit;
    /* sopra la copertina e sopra il pulsante play, che è z-1 */
    z-index: 5;
    pointer-events: none;
}

/* Il campo di ricerca ha già un bordo proprio: l'anello interno lo
   sovrasterebbe, quindi qui resta esterno con offset ridotto. */
input[type="search"]:focus-visible {
    outline-offset: 1px;
    box-shadow: 0 0 0 5px #112358;
}

/* ══════════════════════════════════════════════════════════════════
   2. SKIP LINK — WCAG 2.4.1 (A)
   Segnalazione T71SY (10 pagine su 10).

   Fuori schermo finché non riceve il focus: invisibile col mouse,
   prima voce raggiungibile con Tab.
   ══════════════════════════════════════════════════════════════════ */

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;              /* l'header del tema è z-50 */
    padding: 12px 20px;
    background: #112358;
    color: #f1ff62;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    border-radius: 0 0 8px 0;
    /* fuori dal flusso visivo senza display:none, che lo toglierebbe
       anche alla navigazione da tastiera */
    transform: translateY(-200%);
    transition: transform 0.15s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid #f1ff62;
    outline-offset: -6px;
    box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════
   3. BREADCRUMB DEL BANNER — WCAG 1.3.1 (A)
   Segnalazioni R41CM, YML9J, Z3JYQ (pagine di dettaglio).

   Il banner manteneva l'aspetto di un titolo pur essendo un <p>. Ora è
   un percorso di navigazione: stesso aspetto, ruolo semantico corretto.
   ══════════════════════════════════════════════════════════════════ */

.banner-breadcrumb {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1.25rem;
}

/* Il link si dimensiona sul testo: senza questo l'area cliccabile
   coprirebbe l'intera fascia del banner. */
.banner-breadcrumb__link {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    text-align: center;
    text-decoration: none;
    transition: color 0.2s ease;
}
/* NB: nessuna dichiarazione `color` qui. Il colore lo porta la classe
   Tailwind che il template passa (`text-white-solid`): questo foglio è
   caricato DOPO output.css e a parità di specificità vincerebbe, rendendo
   il breadcrumb nero sul banner blu. */

.banner-breadcrumb__link:hover {
    color: #f1ff62;
}

/* Ultima voce del percorso = pagina corrente: non è un link. */
.banner-breadcrumb__current {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    text-align: center;
}