/* =========================================================================
   Accessibilita', comune ai quattro portali (05/10/2026)
   Nato dalla verifica WCAG 2.2 AA (docs/accessibilita/verifica-wcag-2026-10-05.html).
   Si carica PER ULTIMO, dopo grafica.css: qui stanno le correzioni che devono
   valere ovunque, e le preferenze di lettura scelte nel profilo.
   ========================================================================= */

/* ---------- Focus da tastiera (WCAG 2.4.7) ----------
   MudBlazor segnava il focus cambiando appena il tono: nella barra laterale scura
   non si vedeva niente. Un anello a due colori — giallo dentro, blu notte fuori —
   si vede sul bianco, sul blu della barra e sul tema scuro, senza dover sapere
   dove sta l'elemento. Solo con la tastiera (:focus-visible): col dito o col
   mouse non compare. */
:focus-visible {
    outline: 2px solid #0e1b44 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffd23f !important;
}
[data-theme="dark"] :focus-visible { outline-color: #ffffff !important; }
/* Il contenuto principale riceve il focus da «Salta al contenuto»: lui no. */
#contenuto:focus, #contenuto:focus-visible { outline: none !important; box-shadow: none !important; }
/* Nemmeno i titoli: il focus ci arriva da solo a ogni pagina (FocusOnNavigate,
   per il lettore di schermo), non da un Tab, ma il WebView delle app lo prendeva
   per focus da tastiera e incorniciava di giallo il titolo del login (22/10/2026). */
h1:focus, h1:focus-visible { outline: none !important; box-shadow: none !important; }

/* ---------- Salta al contenuto (WCAG 2.4.1) ----------
   Fuori dallo schermo finche' non arriva il focus: e' il primo Tab della pagina. */
.va-salta {
    position: fixed; left: 12px; top: -80px; z-index: 4000;
    background: #0e1b44; color: #ffffff !important; text-decoration: none;
    font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: 10px;
    border: 0; cursor: pointer;
}
.va-salta:focus, .va-salta:focus-visible { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ---------- Contrasti che il tema non raggiunge (WCAG 1.4.3) ---------- */
/* I giorni fuori mese del calendario: grigio 2,6:1, ora 4,8. */
.mud-cal-month-outside .mud-cal-month-cell-title { color: #6b7280 !important; }
[data-theme="dark"] .mud-cal-month-outside .mud-cal-month-cell-title { color: #a8b3cc !important; }
/* Testi di avviso su fondi chiari colorati. */
.auth-err { color: #9f1520 !important; }
.pz-g-pres { color: #0f5f2c !important; }
/* La versione in fondo al menu: si legge quando qualcuno segnala un problema. */
.va-versione { opacity: 1 !important; color: var(--mud-palette-text-secondary) !important; }
.va-side .va-versione { color: rgba(233, 238, 255, .82) !important; }

/* =========================================================================
   Preferenze di lettura (accessibilita.js le mette su <html>)
   ========================================================================= */

/* ---------- Testo piu' grande ----------
   I portali scrivono in pixel (la scala di TemaClub, le --va-t*): non basta
   cambiare la radice. Si ingrandiscono le variabili che MudBlazor e i fogli dei
   portali usano davvero. */
html[data-va-testo="grande"] {
    font-size: 17px !important;
    --mud-typography-default-size: 17px; --mud-typography-body1-size: 17px; --mud-typography-body2-size: 15px;
    --mud-typography-caption-size: 13px; --mud-typography-overline-size: 13px; --mud-typography-button-size: 15px;
    --mud-typography-subtitle1-size: 19px; --mud-typography-subtitle2-size: 15px;
    --mud-typography-h6-size: 19px; --mud-typography-h5-size: 23px; --mud-typography-h4-size: 30px;
    --va-t0: 12px; --va-t1: 13px; --va-t2: 15px; --va-t3: 17px; --va-t4: 19px; --va-t5: 23px; --va-t6: 30px;
}
html[data-va-testo="molto"] {
    font-size: 19px !important;
    --mud-typography-default-size: 19px; --mud-typography-body1-size: 19px; --mud-typography-body2-size: 17px;
    --mud-typography-caption-size: 15px; --mud-typography-overline-size: 14px; --mud-typography-button-size: 17px;
    --mud-typography-subtitle1-size: 21px; --mud-typography-subtitle2-size: 17px;
    --mud-typography-h6-size: 21px; --mud-typography-h5-size: 25px; --mud-typography-h4-size: 32px;
    --va-t0: 13px; --va-t1: 15px; --va-t2: 17px; --va-t3: 19px; --va-t4: 21px; --va-t5: 25px; --va-t6: 32px;
}

/* ---------- Contrasto alto ----------
   Il testo secondario diventa come il principale, i bordi si vedono, i link sono
   sottolineati: chi legge male lo schermo, o lo legge al sole a bordo campo. */
html[data-va-contrasto="alto"] {
    --mud-palette-text-secondary: var(--mud-palette-text-primary);
    --mud-palette-lines-default: rgba(0, 0, 0, .55);
    --mud-palette-lines-inputs: rgba(0, 0, 0, .7);
    --muted: #1a2233;
}
html[data-va-contrasto="alto"][data-theme="dark"] {
    --mud-palette-lines-default: rgba(255, 255, 255, .6);
    --mud-palette-lines-inputs: rgba(255, 255, 255, .75);
    --muted: #e8ecf6;
}
html[data-va-contrasto="alto"] a:not(.mud-button-root):not(.va-salta):not(.mud-nav-link):not(.va-squadra-fascia) { text-decoration: underline !important; }
html[data-va-contrasto="alto"] .mud-paper,
html[data-va-contrasto="alto"] .mud-card { border: 1px solid var(--mud-palette-lines-default); }

/* ---------- Meno animazioni ----------
   Scelte nel profilo, o chieste dal sistema operativo: transizioni e animazioni
   si fermano, lo scorrimento non e' piu' animato. */
html[data-va-movimento="ridotto"] *, html[data-va-movimento="ridotto"] *::before, html[data-va-movimento="ridotto"] *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}

/* ---------- Solo per il lettore di schermo ----------
   Un testo che il lettore legge e lo schermo non mostra: il titolo delle pagine
   di Campi, che a vista partono gia' dal contenuto. */
.va-solo-lettore {
    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;
}

/* ---------- I colori scelti dagli utenti, sul tema scuro ----------
   Sul chiaro il testo colorato e' scurito quanto basta (Colori.SuChiaro); sul
   fondo scuro servirebbe il contrario, e il colore originale si legge gia'
   bene: lo porta la variabile --va-c, e qui si rimette. */
[data-theme="dark"] [style*="--va-c:"],
.club-dark [style*="--va-c:"] { color: var(--va-c) !important; }

/* ---------- Testi resi tenui con l'opacita' ----------
   Mezza trasparenza su un testo gia' secondario lo porta sotto la soglia: nei
   calendari di Campi e Gestione gli orari e i dettagli restano pieni. */
.cal-ev b, .cal-ev em, .tl-seg small { opacity: 1 !important; }
.occ-item .ora small { opacity: .9 !important; }