/**
 * PATCHES.CSS - Stili per accessibilità e patch
 * 
 * Questo file contiene stili che non possono essere applicati
 * direttamente nell'HTML di Webflow ma sono necessari per:
 * - Accessibilità (WCAG 2.2 AA)
 * - Comportamenti interattivi
 * - Stati dinamici
 */

/* ============================================
   SCREEN READER ONLY
   ============================================ */

.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   SKIP LINK
   ============================================ */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100;
  font-weight: bold;
}

.skip-link:focus {
  top: 0;
}

/* ============================================
   FOCUS STYLES (WCAG 2.4.7)
   ============================================ */

/* Focus visibile per navigazione tastiera */
*:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Focus specifico per pulsanti */
button:focus-visible,
.btn-big:focus-visible,
.btn-small:focus-visible,
a[role="button"]:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 4px;
}

/* ============================================
   STATI INTERATTIVI
   ============================================ */

/* Pulsanti disabilitati */
button:disabled,
.btn-big:disabled,
.btn-small:disabled,
[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Stati ARIA per toggle buttons */
[aria-pressed="true"] {
  /* Aggiungere stili per stato "pressed" se necessario */
}

/* Radio buttons custom */
[role="radio"][aria-checked="true"] {
  /* Stile verrà gestito da classi Webflow esistenti */
}

/* ============================================
   FORM VALIDATION
   ============================================ */

/* Input con errore */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #d32f2f !important;
  border-width: 2px !important;
}

/* Messaggio di errore */
.error-message {
  display: block !important;
  color: #d32f2f !important;
  background-color: #ffebee !important;
  font-size: 0.875rem !important;
  margin-top: 8px !important;
  padding: 8px 12px !important;
  border-left: 4px solid #d32f2f !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}

/* Input valido */
input[aria-invalid="false"]:not(:placeholder-shown),
select[aria-invalid="false"]:not(:placeholder-shown),
textarea[aria-invalid="false"]:not(:placeholder-shown) {
  border-color: #4caf50;
}

/* ============================================
   LOADING STATES
   ============================================ */

.loading-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #000;
  border-radius: 50%;
  animation: spinner-rotate 1s linear infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* ============================================
   LIVE REGIONS
   ============================================ */

#a11y-announcer {
  /* Screen reader only, gestito da .sr-only */
}

/* ============================================
   CONTRASTO COLORI (WCAG 1.4.3)
   ============================================ */

/* Assicurarsi che i link abbiano contrasto sufficiente */
a {
  /* Webflow gestisce i colori, ma verifichiamo che siano accessibili */
}

/* ============================================
   RESPONSIVE ACCESSIBILITY
   ============================================ */

/* Touch targets minimi 44x44px (WCAG 2.5.5) */
@media (max-width: 767px) {
  button,
  .btn-big,
  .btn-small,
  a[role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ============================================
   STATI SPECIFICI PATCH
   ============================================ */

/* Bookings - slot occupato */
.occupato {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Bookings - slot selezionato */
.selezionato {
  /* Usa già classi Webflow, ma aggiungiamo focus ring */
}

/* Quiz - risposta selezionata */
.quiz-answer-selected {
  /* Stile custom per risposta selezionata nel quiz */
  box-shadow: 0 0 0 3px #0066cc;
}

/* ============================================
   UTILITIES
   ============================================ */

/* Nascondere elementi mantenendo accessibilità */
.hidden-accessible {
  position: absolute;
  left: -9999px;
}

/* Prevenire scroll durante modali */
.no-scroll {
  overflow: hidden;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .skip-link,
  .loading-spinner,
  .loading-overlay {
    display: none;
  }
}