/*
---------------------------------------------
WCAG 2.1 AA Accessibility Styles
---------------------------------------------
*/

/* Skip link para navegación por teclado */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color, #9FCD48);
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: 600;
    z-index: 100000;
    border-radius: 0 0 5px 0;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Estados focus mejorados para navegación */
.main-nav .nav li a:focus {
    outline: 3px solid var(--primary-color, #9FCD48);
    outline-offset: 2px;
    background: rgba(159, 205, 72, 0.1);
}

.background-header .main-nav .nav li a:focus {
    outline: 3px solid var(--primary-color, #9FCD48);
    outline-offset: 2px;
}

/* Estados focus para botones y enlaces */
a:focus,
button:focus {
    outline: 3px solid var(--primary-color, #9FCD48);
    outline-offset: 2px;
}

.btn-hero-primary:focus,
.btn-hero-secondary:focus {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.btn-catalog-cta:focus {
    outline: 3px solid var(--primary-color, #9FCD48);
    outline-offset: 3px;
}

/* Estados focus para iconos sociales */
.social-icons li a:focus {
    outline: 3px solid var(--primary-color, #9FCD48);
    outline-offset: 2px;
    transform: scale(1.1);
}

/* Estados focus para enlaces del footer */
footer a:focus {
    outline: 3px solid #fff;
    outline-offset: 2px;
    text-decoration: underline;
}

/* Estados focus para menú móvil */
.menu-trigger:focus {
    outline: 3px solid var(--primary-color, #9FCD48);
    outline-offset: 2px;
}

/* Estados focus para elementos de galería */
.gallery-item:focus,
.gallery-item a:focus {
    outline: 3px solid var(--primary-color, #9FCD48);
    outline-offset: 2px;
}

/* Mejorar contraste de texto */
.hero-description {
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.section-subtitle {
    color: #4a5568;
    font-size: 1.1rem;
}

/* Asegurar tamaño mínimo de objetivos táctiles - WCAG 2.1 AA */
.main-nav .nav li a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-hero-primary,
.btn-hero-secondary,
.btn-catalog-cta {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
}

.social-icons li a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-trigger {
    min-height: 44px;
    min-width: 44px;
}

/* Mejorar visibilidad de elementos interactivos */
.contact-card-modern:focus-within {
    outline: 3px solid var(--primary-color, #9FCD48);
    outline-offset: 2px;
}

/* Asegurar contraste adecuado en textos */
.contact-label,
.schedule-day,
.schedule-time {
    color: #374151;
    font-weight: 500;
}

/* Mejorar legibilidad de texto en imágenes */
.gallery-text {
    background: rgba(0, 0, 0, 0.8);
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: 600;
}

/* Estados hover y focus consistentes */
.main-nav .nav li a:hover,
.main-nav .nav li a:focus {
    color: var(--primary-color, #9FCD48);
}

/* Mejorar contraste de enlaces en el footer */
footer a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

footer a:hover,
footer a:focus {
    text-decoration-color: #fff;
}

/* Responsive - Mantener accesibilidad en móvil */
@media (max-width: 991px) {
    .skip-link {
        font-size: 14px;
        padding: 10px 16px;
    }

    .main-nav .nav li a {
        min-height: 48px;
        min-width: 48px;
    }
}

/* Animación reducida para usuarios con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
