/**
 * Accessibility CSS - WCAG AA Compliance
 * Versión conservadora: Solo mejoras esenciales SIN romper diseño
 *
 * @package    Woodmart Child
 * @since      1.0.0
 */

/* ============================================
   1. SKIP LINK - Navegación por teclado
   ============================================ */

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

.skip-link:focus {
    top: 0;
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}


/* ============================================
   2. FOCUS INDICATORS - WCAG 2.4.7
   Solo para elementos interactivos principales
   ============================================ */

/* Botones y enlaces cuando reciben foco del teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
.btn:focus-visible {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* Asegurar que el outline no se elimine */
*:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 1px;
}


/* ============================================
   3. TOUCH TARGETS - WCAG 2.5.5
   Solo para elementos críticos de navegación
   ============================================ */

/* Botones de cantidad en producto (muy pequeños por defecto) */
.quantity .qty,
.quantity button,
.quantity .plus,
.quantity .minus {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* Iconos de carrito y cuenta */
.header-cart a,
.header-account a,
.mobile-nav-icon {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* ============================================
   4. CONTRASTE SOLO EN ELEMENTOS CRÍTICOS
   No tocar enlaces normales - solo elementos con contraste insuficiente
   ============================================ */

/* Labels de formularios (si son muy claras) */
label {
    color: inherit; /* Mantener color original pero asegurar herencia */
}

/* Textos de ayuda muy claros */
.form-row .description,
.woocommerce-input-wrapper .description {
    color: #666666; /* Mínimo para WCAG AA: 4.5:1 */
}

/* Placeholder de inputs */
input::placeholder,
textarea::placeholder {
    color: #757575; /* Suficiente contraste sin ser negro */
    opacity: 1;
}


/* ============================================
   5. FORMULARIOS - Labels visibles y asociados
   ============================================ */

/* Asegurar que los labels sean visibles */
.screen-reader-text:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Labels de WooCommerce checkout */
.woocommerce-checkout .form-row label {
    display: block !important;
    margin-bottom: 8px;
    font-weight: 500;
}


/* ============================================
   6. TABLAS - Headers claramente identificables
   ============================================ */

/* Tablas de carrito y checkout */
.shop_table th {
    font-weight: bold;
    background-color: #f5f5f5;
}


/* ============================================
   7. ARIA LIVE REGIONS - Para lectores de pantalla
   ============================================ */

/* Notificaciones de WooCommerce */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    /* Ya tienen buenos estilos, solo asegurar que sean anunciados */
}

[aria-live="polite"],
[aria-live="assertive"] {
    /* Mantener estilos existentes */
}


/* ============================================
   8. RESPONSIVE - Mantener accesibilidad en móvil
   ============================================ */

@media (max-width: 768px) {
    /* Todos los touch targets deben ser 44x44px mínimo */
    .mobile-nav .menu-item a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding: 12px 15px !important;
    }
}


/* ============================================
   9. MOTION - Respetar preferencias del usuario
   ============================================ */

@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;
    }
}


/* ============================================
   10. HIGH CONTRAST MODE - Windows
   ============================================ */

@media (prefers-contrast: high) {
    button,
    .button,
    a {
        border: 2px solid currentColor;
    }
}


/* ============================================
   FIN - Notas importantes
   ============================================ */

/**
 * IMPORTANTE: Este archivo NO modifica:
 * - Colores de enlaces normales (mantiene tu branding)
 * - Tamaños de botones existentes (solo añade mínimos)
 * - Fuentes o tipografía
 * - Layouts o espaciados generales
 *
 * Solo añade:
 * - Focus indicators para teclado
 * - Touch targets mínimos (44x44px)
 * - Skip link oculto hasta que se use
 * - Soporte para preferencias de usuario (reduced motion, high contrast)
 */