/*
 Theme Name:   Hello Elementor Child - Accesible
 Theme URI:    https://coleccionesdeocasion.es
 Description:  Tema hijo con mejoras de accesibilidad WCAG 2.1 AA
 Author:       Colecciones de Ocasion
 Author URI:   https://coleccionesdeocasion.es
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
 License:      GNU General Public License v3 or later
 License URI:  https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================================
   MEJORAS DE ACCESIBILIDAD WCAG 2.1 AA
   ========================================================================== */

/* MEJORAS DE CONTRASTE - Texto más oscuro para mejor legibilidad */
.elementor-kit-17 {
    --e-global-color-primary: #595959; /* Mejorado de #696969 - Ratio 6.05:1 */
}

body {
    color: #2D2D2D; /* Ratio 12.63:1 sobre blanco */
    line-height: 1.6;
}

p {
    line-height: 1.8;
}

/* Enlaces con subrayado para diferenciación */
.elementor-kit-17 a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.elementor-kit-17 a:hover,
.elementor-kit-17 a:focus {
    text-decoration: none;
    color: #C57F00; /* Dorado oscuro con buen contraste */
}

/* ==========================================================================
   INDICADORES DE FOCO VISIBLES (WCAG 2.4.7)
   ========================================================================== */

*:focus {
    outline: 3px solid #FCD039 !important;
    outline-offset: 2px !important;
}

*:focus:not(:focus-visible) {
    outline: none !important;
}

*:focus-visible {
    outline: 3px solid #FCD039 !important;
    outline-offset: 2px !important;
}

/* Botones con foco visible */
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.button:focus-visible,
.btn:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 3px solid #1A1A1A !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(252, 208, 57, 0.4) !important;
}

/* Enlaces con foco */
a:focus-visible {
    outline: 3px solid #FCD039 !important;
    outline-offset: 2px !important;
    background-color: rgba(252, 208, 57, 0.1);
}

/* Skip link visible al hacer foco */
.skip-link:focus,
.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    width: auto !important;
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 100000 !important;
    background: #1A1A1A !important;
    color: #FFFFFF !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    outline: 3px solid #FCD039 !important;
}

/* ==========================================================================
   TAMAÑOS DE FUENTE MÍNIMOS (WCAG 1.4.4)
   ========================================================================== */

/* Corregir fuentes muy pequeñas de Elementor */
.elementor-11688 .elementor-element-f2deeba .elementor-heading-title {
    font-size: 14px !important;
}

.elementor-11688 .elementor-element-abc838b .stock {
    font-size: 12px !important;
}

/* Asegurar tamaño mínimo global */
body {
    font-size: max(1rem, 16px);
}

small,
.small,
.woocommerce-product-details__short-description small {
    font-size: max(0.875rem, 14px);
}

/* Precios legibles */
.woocommerce .price,
.woocommerce-Price-amount {
    font-size: max(1rem, 16px);
}

/* Stock y disponibilidad */
.stock,
.in-stock,
.out-of-stock {
    font-size: max(0.875rem, 14px) !important;
}

/* ==========================================================================
   MEJORAS PARA WOOCOMMERCE
   ========================================================================== */

/* Títulos de productos con mejor contraste */
.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #2D2D2D;
    font-size: max(1rem, 16px);
}

/* Botones de añadir al carrito */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    font-size: max(0.875rem, 14px);
    padding: 10px 20px;
}

/* Campos de formulario accesibles */
.woocommerce form .form-row label {
    font-size: max(0.875rem, 14px);
    font-weight: 600;
    color: #2D2D2D;
}

.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    font-size: max(1rem, 16px);
    padding: 10px;
    border: 2px solid #696969;
}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    border-color: #FCD039;
    box-shadow: 0 0 0 3px rgba(252, 208, 57, 0.3);
}

/* Campos requeridos visibles */
.woocommerce form .form-row .required {
    color: #D32F2F;
    font-weight: bold;
}

/* Mensajes de error accesibles */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    font-size: max(1rem, 16px);
    padding: 15px;
    border-left-width: 5px;
}

.woocommerce-error {
    background-color: #FFEBEE;
    border-left-color: #D32F2F;
    color: #B71C1C;
}

/* ==========================================================================
   IMÁGENES DE PRODUCTOS
   ========================================================================== */

/* Mejorar visibilidad de imágenes */
.woocommerce ul.products li.product a img,
.woocommerce-product-gallery__image img {
    border: 1px solid #E0E0E0;
}

.woocommerce ul.products li.product a:focus img,
.woocommerce ul.products li.product a:hover img {
    border-color: #FCD039;
    box-shadow: 0 0 0 3px rgba(252, 208, 57, 0.3);
}

/* ==========================================================================
   NAVEGACIÓN ACCESIBLE
   ========================================================================== */

/* Menú con mejor espaciado para touch */
.site-navigation ul li a {
    padding: 10px 15px;
    min-height: 44px; /* Tamaño mínimo touch target */
    display: inline-flex;
    align-items: center;
}

/* Indicador de página actual */
.site-navigation .current-menu-item > a {
    font-weight: bold;
    border-bottom: 3px solid #FCD039;
}

/* Submenús accesibles */
.site-navigation ul ul {
    background: #FFFFFF;
    border: 2px solid #E0E0E0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   TEXTO PARA LECTORES DE PANTALLA
   ========================================================================== */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* ==========================================================================
   ANIMACIONES REDUCIDAS (WCAG 2.3.3)
   ========================================================================== */

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

/* ==========================================================================
   ALTO CONTRASTE (Mejora para usuarios con baja visión)
   ========================================================================== */

@media (prefers-contrast: high) {
    body {
        color: #000000;
        background: #FFFFFF;
    }

    a {
        color: #0000EE;
        text-decoration: underline;
    }

    button,
    .button,
    input[type="submit"] {
        border: 2px solid #000000 !important;
    }
}

/* ==========================================================================
   REFERENCIAS DE PRODUCTO (convertidas de H5 a P para jerarquía correcta)
   ========================================================================== */

.product-reference {
    font-size: max(0.875rem, 14px);
    font-weight: 600;
    color: #595959;
    margin: 0.5em 0;
}