/*
 * accessibility.css — Focus, Keyboard Navigation, Scroll
 * SPINLYTICS Comparatore Casino
 *
 * Caricato dopo style.css e cro-enhancements.css.
 * Contiene:
 *   1. Rimozione outline di default (sicura — sostituita con :focus-visible)
 *   2. :focus-visible su tutti gli elementi interattivi
 *   3. scroll-behavior smooth
 *   4. Skip link per screen reader
 *   5. Utilità screen-reader (già in style.css ma centralizzata qui)
 */

/* ══ 1. OUTLINE GLOBALE — reset sicuro ══════════════════════════════
   :focus (senza :focus-visible) rimuove l'outline solo per mouse/touch.
   Gli utenti da tastiera vedono ancora l'outline via :focus-visible.
   Questo è il pattern moderno raccomandato dal W3C.
══════════════════════════════════════════════════════════════════════ */
:focus:not(:focus-visible) { outline: none }
:focus-visible             { outline: 2px solid #667eea; outline-offset: 2px }

/* ══ 2. FOCUS-VISIBLE SPECIFICO PER ELEMENTO ═════════════════════════
   Ogni elemento interattivo ha il proprio ring contestuale:
   - outline match al border-radius del componente
   - colore coerente con la palette del sito
══════════════════════════════════════════════════════════════════════ */

/* Pulsanti CTA principali */
.btn:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(102,126,234,.2);
}
.btn-primary:focus-visible {
  outline-color: #16a34a;
  box-shadow: 0 0 0 4px rgba(34,197,94,.2);
}

/* Filtri tab */
.filter-btn:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(102,126,234,.15);
}

/* FAQ accordion */
.faq-question:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: -2px; /* dentro il border del faq-item */
  background: #f5f7ff;
}

/* Paginazione */
.page-btn:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(102,126,234,.15);
}

/* Tab bar bottom */
.tab-item:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: -2px;
  background: rgba(102,126,234,.08);
  border-radius: 6px;
}

/* Language switcher */
.lang-trigger:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
  border-color: #667eea;
}
.lang-option a:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: -2px;
  background: #f0f4ff;
}

/* Mobile nav drawer links */
.mobile-nav-drawer a:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: -2px;
  background: #f5f7ff;
}

/* Hamburger — già presente in critical.css, qui rinforziamo il ring */
.hamburger-btn:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
  background: #f0f2f8;
}

/* Back to top */
.back-to-top:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(102,126,234,.5);
}

/* Advanced filter — toggle + bottoni */
.adv-filter-toggle:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}
.adv-apply-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(102,126,234,.4);
}
.adv-reset-btn:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* Cookie banner */
.cookie-btn-accept:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(102,126,234,.4);
}
.cookie-btn-decline:focus-visible {
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 2px;
}

/* PWA install */
.install-btn-primary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(102,126,234,.4);
}
.install-btn-dismiss:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}
.install-close:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* AI Matcher — trigger FAB e reply buttons */
.ai-matcher-trigger:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(91,141,239,.4) !important;
}
.reply-btn:focus-visible {
  outline: 2px solid #0088cc !important;
  outline-offset: 1px !important;
}

/* Sticky CTA bar btn */
.sticky-cta-bar .btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ══ 3. SCROLL BEHAVIOR ══════════════════════════════════════════════
   Scroll fluido per link anchor (filtri, FAQ, #sezioni).
   Rispetta prefers-reduced-motion: con reduced-motion lo scroll
   torna istantaneo per non causare disorientamento.
══════════════════════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
}

/* ══ 4. SKIP LINK — accessibilità keyboard-first ═════════════════════
   Link visibile solo con focus da tastiera. Permette di saltare
   direttamente al contenuto principale senza navigare tutto l'header.
   Va aggiunto come primo elemento nel <body> del PHP:
   <a href="#main-content" class="skip-link">Vai al contenuto</a>
══════════════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: #667eea;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  z-index: 9000;
  transition: top .2s;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}