/* =====================================================================
   FAD Academy — LAYER DI ACCESSIBILITÀ (compatibile con lo stack esistente)
   Bootstrap 5.1.3 + jQuery 3.6.0 + custom.css + mestry.css
   ---------------------------------------------------------------------
   NON sostituisce il tuo CSS: lo integra. Tutte le classi proprie sono
   prefissate con `a11y-` per non collidere con Bootstrap/custom/mestry.
   CARICARE PER ULTIMO:
     <link href="/css/custom/accessibile.css" rel="stylesheet">
   ===================================================================== */

:root { --a11y-focus: #1c2f6b; }                 /* anello focus su sfondi chiari */
.a11y-dark, .corso_blue { --a11y-focus: #ffd23f; } /* su sfondi scuri: ambra */

/* --- FOCUS VISIBILE (additivo) — WCAG 2.4.7 / 2.4.11 / 2.4.13 ------- */
:where(a, button, input, select, textarea, summary, [tabindex], iframe,
       .bottone, .button, .nextslide, .nextslide2, .openfull,
       .dropdown-item, .dropdown-toggle):focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid var(--a11y-focus); outline-offset: 3px;
  }
}

/* --- FOCUS sui radio/checkbox "custom" -----------------------------
   In custom.css l'input vero è nascosto (opacity:0; 0x0; absolute) e il
   pallino è la <label>. Quindi il focus va mostrato SUL pallino. -------- */
.input-radio input:focus-visible + label,
.input-checkbox input:focus-visible + label {
  outline: 3px solid var(--a11y-focus);
  outline-offset: 3px;
}

/* --- SKIP LINK — WCAG 2.4.1 ---------------------------------------- */
.a11y-skip-link {
  position: absolute; left: 1rem; top: -120px; z-index: 2000;
  background: #20377a; color: #fff; font-weight: 700; padding: .7rem 1.1rem;
  border-radius: 0 0 8px 8px; text-decoration: none; transition: top .15s ease;
}
.a11y-skip-link:focus { top: 0; color: #fff; }

/* --- SOLO SCREEN READER -------------------------------------------- */
.a11y-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- FIELDSET del test (nessuno stile aggiuntivo) ------------------ */
.a11y-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* --- CORREZIONI DI CONTRASTO — WCAG 1.4.3 --------------------------
   Il teal #008fae con testo bianco è ~2.9:1 (sotto soglia). Lo scurisco
   a #007d99 (~4.8:1). Valore tarabile: l'importante è restare >= 4.5:1
   per il testo normale e >= 3:1 per il testo grande. -------------------- */
.corso_blue { background: #007d99 !important; }
.bg_blue, .blue .bottombox, .bg_blue .bottombox { background: #007d99 !important; }
/* accenti usati come testo o sfondo di testo bianco */
.red { color: #0a6e8c !important; }                                   /* era #1c99c4 */
.button:hover, .bottone:hover { background: #0a6e8c !important; border-color: #0a6e8c !important; }
.btn--primary, .btn--primary:visited { background: #2f7d92 !important; border-color: #2f7d92 !important; } /* era #40a6c1 */

/* --- MONITOR (player): voci lezione e comandi come <button> -------- */
.a11y-player button.bottone_menu { width: 100%; text-align: left; border: 0; font: inherit; cursor: pointer; }
.a11y-iconbtn { background: none; border: 0; cursor: pointer; }

/* --- MOVIMENTO RIDOTTO — WCAG 2.3.3 -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

.a11y-linkbtn {
  border: none;
  background: none;
}