/*
 * Accessibility Focus (Unified)
 *
 * Obiettivo: stile di focus uniforme per TUTTI gli elementi interattivi
 * Come richiesto: bordo blu solido ben definito, leggero sfondo giallo,
 * nessuna opacità, ombre o animazioni.
 */

/* Mostra focus solo per navigazione da tastiera */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Stile di focus UNIFORME per tutti */
*:focus-visible {
  outline: 5px solid #0066ff !important;
  outline-offset: 4px !important;
  background-color: rgba(255, 222, 22, 0.15) !important;
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
}

/* Utility: link di salto al contenuto (se presente nel tema) */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: #ffde16;
  color: #000;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  z-index: 9999;
  border-radius: 0 0 4px 0;
}
.skip-to-content:focus-visible,
.skip-to-content:focus {
  top: 0;
}

/* Utility: sr-only per contenuti accessibili solo ai lettori di schermo */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus-visible,
.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
/**
 * Accessibility Focus Management Stylesheet
 * 
 * Questo file contiene regole CSS dedicate alla gestione del focus
 * per migliorare l'accessibilità web secondo le WCAG 2.1 (AA level).
 * 
 * Caratteristiche:
 * - Focus visibile e distinto per tutti gli elementi interattivi
 * - Supporto per utenti che navigano con tastiera
 * - Compatibilità con screen reader
 * - Design coerente e non invasivo
 */

/* ============================================
   RESET E CONFIGURAZIONE BASE
   ============================================ */

/**
 * Animazione pulsante per focus (opzionale, migliora l'attenzione)
 */
@keyframes focusPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(0, 102, 255, 0.4), 0 0 20px rgba(0, 102, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 0 2px #fff, 0 0 0 8px rgba(0, 102, 255, 0.6), 0 0 30px rgba(0, 102, 255, 0.5);
  }
}

/**
 * Rimuovi outline predefinito solo quando il mouse è attivo
 * Mantieni focus visibile per navigazione da tastiera
 */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Assicura che il focus sia sempre visibile quando necessario */
*:focus-visible {
  outline: 5px solid #0066ff;
  outline-offset: 4px;
  background-color: rgba(255, 222, 22, 0.15);
  box-shadow: none;
  transition: none;
}

/* ============================================
   LINK E NAVIGAZIONE
   ============================================ */

/**
 * Stile focus per tutti i link
 * Doppio bordo per massima visibilità
 */
a:focus-visible {
  outline: 5px solid #0066ff;
  outline-offset: 4px;
  background-color: rgba(255, 222, 22, 0.15);
  box-shadow: none;
  transition: none;
}

/* Link in testo corrente */
.prose a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #ffde16;
}

/* Previeni focus visibile sul div prose principale */
.prose:focus,
.prose:focus-visible,
div.prose:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Link di navigazione */
nav a:focus-visible {
  outline: 5px solid #0066ff;
  outline-offset: 4px;
  background-color: rgba(255, 222, 22, 0.15);
  box-shadow: none;
  transition: none;
}

/* Banner rotating content link */
.rotating-content-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease-in-out;
}

/* .rotating-content-link:hover {
  transform: translateY(-2px);
} */

.rotating-content-link:focus-visible {
  outline: 5px solid #0066ff;
  outline-offset: 4px;
  background-color: rgba(255, 222, 22, 0.15);
  box-shadow: none;
  transition: none;
}

/* ============================================
   BOTTONI E ELEMENTI INTERATTIVI
   ============================================ */

/**
 * Focus per bottoni e elementi button-like
 */
button:focus-visible,
[role="button"]:focus-visible,
.cursor-pointer:focus-visible {
  outline: 5px solid #0066ff;
  outline-offset: 4px;
  background-color: rgba(255, 222, 22, 0.15);
  box-shadow: none;
  transition: none;
}

/* ============================================
   CATEGORIE E TAG
   ============================================ */

/**
 * Focus per badge di categoria/tag
 */
a.rounded-full:focus-visible,
a.bg-brand-100:focus-visible,
a[href*="tipologia"]:focus-visible {
  outline: 5px solid #0066ff;
  outline-offset: 4px;
  background-color: rgba(255, 222, 22, 0.15);
  box-shadow: none;
  transition: none;
}

/* ============================================
   IMMAGINI E MEDIA INTERATTIVI
   ============================================ */

/**
 * Focus per immagini cliccabili e contenitori
 */
a img:focus-visible,
.cursor-pointer img:focus-visible {
  outline: 3px solid #ffde16;
  outline-offset: -3px;
}

/* Contenitori di immagini linkate */
a.rounded-xl:focus-visible {
  outline: 5px solid #0066ff;
  outline-offset: 4px;
  background-color: rgba(255, 222, 22, 0.15);
  box-shadow: none;
  transition: none;
}

/* ============================================
   CARD CON OVERFLOW-HIDDEN
   ============================================ */

/**
 * Focus per card e link block con overflow-hidden
 * Usa box-shadow inset spesso + glow esterno per massima visibilità
 */
a.focus-ring:focus-visible,
.link-most-readed:focus-visible,
a.block.overflow-hidden:focus-visible {
  outline: 5px solid #0066ff;
  outline-offset: 4px;
  background-color: rgba(255, 222, 22, 0.15);
  box-shadow: none;
  transition: none;
}

/* ============================================
   ARTICOLI E CARD
   ============================================ */

/**
 * Focus per card di articoli e preview
 */
article:focus-within {
  outline: 2px solid rgba(255, 222, 22, 0.5);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Titoli linkati all'interno di card */
article h3 a:focus-visible,
article h4 a:focus-visible {
  outline: 5px solid #0066ff;
  outline-offset: 4px;
  background-color: rgba(255, 222, 22, 0.15);
  box-shadow: none;
  transition: none;
}

/* ============================================
   FORM E INPUT
   ============================================ */

/**
 * Focus per elementi di form
 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 5px solid #0066ff;
  outline-offset: 4px;
  background-color: rgba(255, 222, 22, 0.15);
  box-shadow: none;
  transition: none;
}

/* Checkbox e radio button */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 5px solid #0066ff;
  outline-offset: 4px;
  background-color: rgba(255, 222, 22, 0.15);
  box-shadow: none;
  transition: none;
}

/* ============================================
   SKIP LINKS E NAVIGAZIONE ASSISTIVA
   ============================================ */

/**
 * Skip to content link per screen reader e tastiera
 */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: #ffde16;
  color: #000;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  z-index: 9999;
  border-radius: 0 0 4px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.skip-to-content:focus {
  top: 0;
  outline: 5px solid #0066ff;
  outline-offset: 4px;
  background-color: rgba(255, 222, 22, 0.15);
  box-shadow: none;
  transition: none;
}

/* ============================================
   TABELLE E LISTE
   ============================================ */

/**
 * Focus per elementi di tabelle interattive
 */
table tr:focus-within {
  outline: 2px solid #ffde16;
  outline-offset: 2px;
  background-color: rgba(255, 222, 22, 0.05);
}

/* Liste interattive */
li:has(a:focus-visible) {
  background-color: rgba(255, 222, 22, 0.05);
  border-radius: 4px;
}

/* ============================================
   MODALITÀ ALTO CONTRASTO
   ============================================ */

/**
 * Migliora visibilità in modalità high contrast
 */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline-width: 4px;
    outline-color: currentColor;
    outline-offset: 4px;
  }

  a:focus-visible {
    outline: 4px solid currentColor;
    text-decoration: underline;
    text-decoration-thickness: 3px;
  }
}

/* ============================================
   RIDUZIONE MOVIMENTO
   ============================================ */

/**
 * Disabilita animazioni per utenti con preferenze ridotte movimento
 */
@media (prefers-reduced-motion: reduce) {
  *:focus-visible,
  button:focus-visible,
  a:focus-visible {
    transition: none;
    transform: none;
  }

  /* Mantieni solo outline immediato */
  *:focus-visible {
    transition: none !important;
  }
}

/* ============================================
   DARK MODE (per uso futuro)
   ============================================ */

/**
 * Adattamento colori focus per dark mode
 */
@media (prefers-color-scheme: dark) {
  *:focus-visible {
    outline-color: #ffde16;
  }

  a:focus-visible {
    background-color: rgba(255, 222, 22, 0.15);
  }

  .skip-to-content {
    background: #ffde16;
    color: #000;
  }
}

/* ============================================
   MIGLIORAMENTI SPECIFICI PER SCREEN READER
   ============================================ */

/**
 * Nascondi visualmente ma mantieni accessibile
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Mostra quando in focus (es. skip links) */
.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ============================================
   INDICATORI DI STATO
   ============================================ */

/**
 * Indicatori visivi per stati attivi/correnti
 */
[aria-current="page"]:focus-visible,
[aria-selected="true"]:focus-visible {
  outline: 4px solid #ffde16;
  outline-offset: 2px;
  background-color: rgba(255, 222, 22, 0.2);
}

/* ============================================
   COMPATIBILITÀ BROWSER SPECIFICI
   ============================================ */

/**
 * Firefox specific fixes
 */
@-moz-document url-prefix() {
  *:focus-visible {
    outline-style: solid;
  }
}

/**
 * Safari specific fixes
 */
@supports (-webkit-backdrop-filter: blur(1px)) {
  *:focus-visible {
    outline-style: auto;
  }
}

/* ============================================
   UNIFORM FOCUS OVERRIDE (ensures consistency)
   ============================================ */
*:focus-visible {
  outline: 5px solid #0066ff !important;
  outline-offset: 4px !important;
  background-color: rgba(255, 222, 22, 0.15) !important;
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
}