/**
 * accessibility.css - Casa Vacanze Linda
 * WCAG 2.1 AA compliance additions
 * Includere dopo style.css e responsive.css
 */

/* ── Focus visibile (WCAG 2.4.7) ──────────────────────────────── */
:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
    border-radius: 3px;
}

/* Rimuovi outline solo quando non si usa la tastiera */
:focus:not(:focus-visible) {
    outline: none;
}

/* ── Skip link (WCAG 2.4.1) ──────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -50px;
    left: 1rem;
    background: #005fcc;
    color: #fff;
    padding: .6rem 1.2rem;
    border-radius: 0 0 8px 8px;
    z-index: 10001;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: top .2s ease;
    white-space: nowrap;
}
.skip-link:focus {
    top: 0;
}

/* ── Contrasto testo (WCAG 1.4.3 - min 4.5:1) ────────────────── */
/* Testo secondario Bootstrap #6c757d ha contrasto 4.53:1 su bianco — OK */
/* Rafforzamento per elementi critici */
.text-body-secondary,
.card-text,
.list-unstyled li,
small {
    color: #555 !important; /* 7:1 su bianco */
}

.link-secondary {
    color: #444 !important;
}

/* ── Dimensione minima elementi interattivi (WCAG 2.5.8 - 24x24px) */
.btn, button, a.btn, input[type="submit"] {
    min-height: 44px; /* Raccomandazione Apple HIG / WCAG 2.5.5 */
}

input[type="checkbox"], input[type="radio"] {
    min-height: auto;
}

.form-check-input,
.form-check-custom {
    min-width: 18px;
    min-height: 18px;
    cursor: pointer;
}

/* ── Riduzione del movimento (WCAG 2.3.3) ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Tema scuro sistema (rispetta preferenza utente) ─────────── */
@media (prefers-color-scheme: dark) {
    /* Opzionale - decommentare se si vuole supporto dark mode */
    /*
    body { background: #121212; color: #e0e0e0; }
    .card { background: #1e1e1e; border-color: #333; }
    */
}

/* ── Immagini accessibili ─────────────────────────────────────── */
img:not([alt]) {
    border: 3px solid red; /* Segnala immagini senza alt in sviluppo */
}

/* ── Tabelle accessibili ──────────────────────────────────────── */
.table th[scope] { font-weight: 700; }

/* ── Form - etichette e messaggi di errore ───────────────────── */
.form-label {
    font-weight: 600;
    color: #333;
}

.invalid-feedback {
    font-size: .875rem;
    color: #c0392b; /* Contrasto 4.7:1 su bianco */
}

/* ── Link - contrasto minimo ─────────────────────────────────── */
/* Solo link testuali nel contenuto, non nav/bottoni/logo */
main a:not([class]) {
  color: #005fcc;
}
main a:not([class]):hover {
  color: #003d99;
  text-decoration: underline;
}

.footer-col a,
.bc-legal a {
  color: rgba(255,255,255,.44) !important;
}
.footer-col a:hover,
.bc-legal a:hover {
  color: #a8c8dc !important;
}

.review-score .review-total,
.award-num sup {
  color: rgba(255,255,255,.78) !important;
}

.footer-col a:visited,
.footer-bottom a:visited,
.bc-legal a:visited {
  color: rgba(255,255,255,.56) !important;
}

/* ── Pulsanti - stato disabilitato visibile ───────────────────── */
button:disabled,
.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── Responsive font sizes ────────────────────────────────────── */
@media (max-width: 576px) {
    h2 { font-size: 2rem !important; }
    h3 { font-size: 1.5rem !important; }
}

/* ── Calendario FullCalendar accessibilità ───────────────────── */
.fc-day-today { background-color: rgba(0, 95, 204, .1) !important; }
.fc-event     { border-radius: 4px !important; }
.booked-event { cursor: default !important; }

/* ── Legenda calendario ──────────────────────────────────────── */
.calendar-legend {
    display: flex;
    gap: 1rem;
    font-size: .82rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}
.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}