/**
 * Flavor Accessibility Fix - CSS de Accesibilidad
 * Mejoras visuales para cumplir con WCAG 2.1 AA
 */

/* ========================================
   1. Focus visible para todos los elementos interactivos
   Lighthouse verifica que los elementos enfocables tengan
   un indicador de foco visible.
   ======================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.25) !important;
}

/* ========================================
   2. Contraste mínimo para texto de precio en WooCommerce
   ======================================== */

.woocommerce .price del,
.woocommerce del .woocommerce-Price-amount {
    color: #767676 !important; /* Ratio 4.54:1 sobre blanco - cumple AA */
}

.woocommerce .price ins,
.woocommerce ins .woocommerce-Price-amount {
    color: #333333 !important;
}

/* ========================================
   3. Ocultar visualmente pero mantener accesible para lectores de pantalla
   Clase utilitaria para contenido solo para screen readers.
   ======================================== */

.flavor-sr-only {
    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;
}

/* ========================================
   4. Asegurar que los enlaces dentro de texto
   tengan suficiente distinción visual (no solo color).
   ======================================== */

article a:not(.elementor-button):not(.wp-block-button__link),
.entry-content a:not(.elementor-button):not(.wp-block-button__link) {
    text-decoration: underline;
}

/* ========================================
   5. Target size mínimo para elementos táctiles (44x44px)
   WCAG 2.5.5 - AAA, pero buena práctica para AA
   ======================================== */

@media (pointer: coarse) {
    .elementor-button,
    .woocommerce .button,
    .add_to_cart_button,
    nav a,
    .menu-item a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}