/* 
 * File CSS per l'accessibilità - Conformità articolo 9 ONU
 * TuristaRurale Webapp
 */

/* Classi per nascondere visivamente ma mantenere accessibili agli screen reader */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus visibile per tutti gli elementi interattivi */
*:focus {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* Focus per i bottoni */
button:focus,
.btn:focus {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgba(0, 95, 204, 0.2) !important;
}

/* Focus per i link */
a:focus {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
    text-decoration: underline !important;
}

/* Focus per i form */
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
    border-color: #005fcc !important;
}

/* Skip link per la navigazione rapida */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
    border-radius: 0 0 4px 4px;
}

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

/* Miglioramenti per i contrasti */
.high-contrast {
    filter: contrast(150%) brightness(120%);
}

/* Indicatori di stato per i form */
.form-control:invalid {
    /* border-color: #dc3545; */
}

.form-control:valid {
    /* border-color: #28a745; */
}

/* Stili per i messaggi di errore */
.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Stili per i messaggi di successo */
.success-message {
    color: #28a745;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Miglioramenti per la navigazione */
nav[role="navigation"] ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav[role="navigation"] li {
    margin-bottom: 0.5rem;
}

/* Stili per i landmark ARIA */
[role="banner"] {
    border-bottom: 1px solid #dee2e6;
}

[role="main"] {
    min-height: 400px;
}

[role="complementary"] {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    margin: 1rem 0;
}

[role="contentinfo"] {
    background-color: #343a40;
    color: #fff;
    padding: 2rem 0;
    margin-top: 2rem;
}

/* Miglioramenti per le immagini */
img[alt=""] {
    border: 2px dashed #dc3545;
}

/* Stili per i bottoni del menu hamburger */
.hamburger[aria-expanded="true"] .hamburger-inner {
    transform: rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger-inner::before {
    transform: rotate(-90deg) translate(-6px, 0);
}

.hamburger[aria-expanded="true"] .hamburger-inner::after {
    opacity: 0;
}

/* Miglioramenti per i slider */
.swiper-button-prev:focus,
.swiper-button-next:focus {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* Stili per i tablist */
/* [role="tablist"] {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
}

[role="tab"] {
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    cursor: pointer;
    border-radius: 0.25rem 0.25rem 0 0;
}

[role="tab"][aria-selected="true"] {
    background: #005fcc;
    color: #fff;
    border-color: #005fcc;
} */

/* Responsive design per l'accessibilità */
@media (max-width: 768px) {
    .visually-hidden {
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: 0.5rem !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
    }
}

/* Stili per i messaggi di stato */
[aria-live="polite"] {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 0.75rem;
    border-radius: 0.25rem;
    margin: 1rem 0;
}

[role="alert"] {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 0.75rem;
    border-radius: 0.25rem;
    margin: 1rem 0;
}

/* Miglioramenti per i gruppi di elementi */
[role="group"] {
    /* border: 1px solid #dee2e6; */
    /* border-radius: 0.25rem; */
    padding: 0.5rem;
    margin: 0.5rem 0;
}

/* Stili per le regioni */
[role="region"] {
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    padding: 1rem;
    margin: 1rem 0;
}

/* Miglioramenti per l'accessibilità dei colori */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Stili per l'alto contrasto */
@media (prefers-contrast: high) {
    * {
        border-color: currentColor !important;
    }
    
    .btn {
        border: 2px solid currentColor !important;
    }
}