/* ============================================================
   a11y.css — fix50 accessibilità globale (WCAG 2.1 AA)
   Caricato per ULTIMO in app/public/guest layout: vince sui
   16 punti sparsi con outline:none senza doverli inseguire.
   Rimuovere questo file ripristina integralmente il comportamento
   precedente (nessuna modifica distruttiva altrove).
   ============================================================ */

/* ------------------------------------------------------------
   1. Contrasto AA del colore primario.
   #f53324 misura 3.90:1 sia come testo su bianco sia con testo
   bianco sopra: sotto il minimo AA 4.5:1. #e61a0a è la variante
   più vicina che preserva la tinta e misura 4.65:1 in entrambe
   le direzioni. Override qui (revert = eliminare questo blocco).
   ------------------------------------------------------------ */
:root {
  --theme-primary-original: #f53324;
  --theme-primary: #e61a0a;
  --brand-color: #e61a0a;
}

/* ------------------------------------------------------------
   2. Focus visibile da tastiera, ovunque.
   :focus-visible → anello evidente; il focus da mouse resta
   pulito (nessun anello) per non degradare l'estetica.
   !important necessario per battere gli outline:none esistenti.
   ------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"]), [role="button"], [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--theme-primary, #e61a0a) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

:where(a, button, input, select, textarea, summary,
       [tabindex], [role="button"]):focus:not(:focus-visible) {
  outline: none;
}

/* Su sfondi scuri l'anello rosso scuro sparirebbe: bordo chiaro */
[data-theme="dark"] :where(a, button, input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible,
.dark-mode :where(a, button, input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible {
  outline-color: #ff8a7a !important;
}

/* ------------------------------------------------------------
   3. Skip link: primo elemento tabbabile della pagina.
   Invisibile finché non riceve focus da tastiera.
   ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: .65rem 1.1rem;
  /* Fixed dark brand red rather than var(--theme-primary): that variable resolves to
     a light orange on some pages (auth), leaving this white label at ~2:1 contrast.
     The skip link is the first thing a keyboard user reaches, so its legibility must
     not depend on whichever accent the active theme happens to set. */
  background: #c2140a;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: 2px solid #fff !important;
  outline-offset: -4px !important;
}

/* Il target del salto non deve mostrare l'anello (focus programmatico) */
#main-content:focus {
  outline: none !important;
}

/* ------------------------------------------------------------
   4. Rispetto di prefers-reduced-motion (era coperto solo in
   3 file su decine di animazioni).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   5. Target minimi touch sui bottoni-icona (WCAG 2.5.8):
   molti erano ~28px. Non tocca i bottoni con testo.
   ------------------------------------------------------------ */
button > .bi:only-child,
a.btn > .bi:only-child {
  min-width: 1.1em;
  min-height: 1.1em;
}

:where(button, a.btn):has(> .bi:only-child) {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}