/**
 * ROUGESWORLD - Accessibilità di base
 * Scritto il 03.08.2026 per i task f3-focus, f3-skip, f3-motion, f3-touch.
 *
 * Perché esiste: è **l'unico foglio di stile caricato da tutte e 13 le pagine**
 * insieme a fonts.css. Prima gli stili di accessibilità erano sparsi in sei
 * file diversi con regole diverse, e `css/core/accessibility.css` — che ne
 * conteneva una parte — era caricato da **2 pagine su 13**. Su tutte le altre,
 * chi naviga da tastiera non vedeva dove si trovava. Quello che sta qui vale
 * ovunque per costruzione, non perché ci si è ricordati di linkarlo.
 *
 * Regola per il futuro: se una cosa deve valere su tutto il sito, va qui.
 * Se è specifica di una sezione, non va qui.
 *
 * Scelte:
 *  - :focus-visible e non :focus, così l'anello non compare al click del mouse
 *    ma solo quando serve davvero (tastiera).
 *  - outline + outline-offset invece di box-shadow: l'outline è l'unica
 *    proprietà che sopravvive alla modalità a contrasto forzato di Windows.
 *  - un secondo anello nero sotto quello colorato, perché il sito ha fondi sia
 *    neri sia colorati e un solo anello sparirebbe su metà dei componenti.
 */

:root {
  --focus-colore: #ffffff;
  --focus-spessore: 3px;
  --focus-stacco: 3px;
}

/* Regola di base: vale per qualunque cosa possa ricevere il focus. */
:focus-visible {
  outline: var(--focus-spessore) solid var(--focus-colore);
  outline-offset: var(--focus-stacco);
  /* L'alone scuro stacca l'anello bianco dai fondi chiari o accesi. */
  box-shadow: 0 0 0 calc(var(--focus-spessore) + var(--focus-stacco)) rgba(0, 0, 0, 0.85);
  border-radius: 2px;
}

/* I browser che non conoscono :focus-visible (nessuno di quelli in uso, ma il
   costo è zero) ricevono comunque un indicatore su :focus. */
@supports not selector(:focus-visible) {
  :focus {
    outline: var(--focus-spessore) solid var(--focus-colore);
    outline-offset: var(--focus-stacco);
  }
}

/* Nessuno stile di focus deve essere rimosso senza sostituirlo. Se in futuro
   ricompare un `outline: none`, questa regola più specifica lo riporta. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-spessore) solid var(--focus-colore);
  outline-offset: var(--focus-stacco);
}

/* --------------------------------------------------------------
   Skip link — "Vai al contenuto"
   Nascosto finché non riceve il focus, poi compare in alto a sinistra.
   Non usa display:none: un elemento con display:none non è raggiungibile
   da tastiera, quindi lo skip link non funzionerebbe.
   -------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 0 0 6px 0;
  font-family: inherit;
  font-size: 1rem;
  text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: var(--focus-spessore) solid var(--focus-colore);
  outline-offset: -1px;
}

/* --------------------------------------------------------------
   Area minima dei bersagli touch (f3-touch, WCAG 2.5.5).
   Solo sui puntatori grossolani: su desktop non serve ingrandire nulla.
   -------------------------------------------------------------- */
@media (pointer: coarse) {
  button,
  a[href],
  input[type="button"],
  input[type="submit"],
  [role="button"] {
    min-height: 44px;
  }
}

/* --------------------------------------------------------------
   Movimento ridotto (f3-motion).

   Una regola globale identica esisteva già in `css/core/base.css`, ma base.css
   è caricato da **8 pagine su 13**. Le altre cinque se la cavavano con blocchi
   scritti a mano dentro la pagina — tranne `privacy.html`, che aveva una
   transizione e nessuna copertura. Ripetendola qui la garanzia diventa
   strutturale: vale ovunque perché questo file è ovunque, non perché qualcuno
   si è ricordato di aggiungerla.

   Non azzera le durate ma le porta a 0.01ms: una durata di 0 fa saltare
   l'evento `animationend`, e il codice che ci si appoggia resterebbe appeso.
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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