/*
 Theme Name:   Hello Elementor Child - Accesible WCAG 2.1 AA
 Theme URI:    https://transformadosplasticos.es
 Description:  Tema hijo con mejoras de accesibilidad WCAG 2.1 AA para Transformados Plásticos del Sureste
 Author:       Transformados Plásticos del Sureste SLU
 Author URI:   https://transformadosplasticos.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
   Kit Digital - Red.es
   Expediente: Njc5ZjI3ZDViNDVkZmEx
   Correcciones implementadas: 9.1.4.3, 9.2.4.4, 9.2.4.1, 9.2.5.8, 9.1.3.1
   ========================================================================== */

/* ==========================================================================
   9.1.4.3 - MEJORAS DE CONTRASTE (Ratio mínimo 4.5:1 para WCAG AA)
   ========================================================================== */

body {
    color: #2D2D2D; /* Ratio 12.63:1 sobre blanco - Cumple AAA */
    line-height: 1.6;
    font-size: max(1rem, 16px);
}

p, li, td, span {
    line-height: 1.75;
}

/* Asegurar contraste en textos principales */
h1, h2, h3, h4, h5, h6 {
    color: #1A1A1A; /* Ratio 16.08:1 - Excelente */
}

/* Enlaces con contraste adecuado */
a {
    color: #0056B3; /* Ratio 5.8:1 - Cumple AA */
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:hover,
a:focus {
    color: #003D82; /* Ratio 8.12:1 - Cumple AAA */
    text-decoration: none;
}

/* Botones con contraste adecuado */
button,
.elementor-button,
input[type="submit"],
input[type="button"] {
    background-color: #0056B3 !important; /* Ratio 5.8:1 */
    color: #FFFFFF !important; /* Ratio 21:1 sobre azul */
    border: 2px solid #003D82 !important;
}

button:hover,
.elementor-button:hover,
input[type="submit"]:hover {
    background-color: #003D82 !important; /* Ratio 8.12:1 */
}

/* ==========================================================================
   9.2.4.7 - INDICADORES DE FOCO VISIBLES (Navegación por teclado)
   ========================================================================== */

*:focus {
    outline: 3px solid #FCD039 !important; /* Amarillo visible */
    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 especial */
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.elementor-button: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.15);
}

/* ==========================================================================
   9.2.4.1 - SKIP LINK VISIBLE AL HACER FOCO (Evitar bloques)
   ========================================================================== */

.skip-link:focus,
.screen-reader-text:focus,
a[href="#content"]: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 25px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    outline: 3px solid #FCD039 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    border-radius: 4px !important;
}

/* ==========================================================================
   9.2.5.8 - TAMAÑO MÍNIMO DE ÁREAS TÁCTILES (44x44px WCAG AA)
   ========================================================================== */

/* Botones con tamaño táctil adecuado */
button,
.elementor-button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 24px !important;
    font-size: max(1rem, 16px) !important;
}

/* Enlaces de navegación táctiles */
.elementor-nav-menu a,
nav a,
.menu a {
    min-height: 44px !important;
    padding: 12px 15px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Iconos y botones sociales táctiles */
.elementor-icon,
.social-icon a,
a[class*="icon"] {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Campos de formulario táctiles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
    min-height: 44px !important;
    padding: 10px 15px !important;
    font-size: max(1rem, 16px) !important;
    border: 2px solid #696969 !important;
}

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

/* Espaciado entre elementos táctiles */
button + button,
a + a,
input + input {
    margin-left: 8px !important;
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   MEJORAS PARA FORMULARIOS DE CONTACTO
   ========================================================================== */

/* Labels de formulario visibles y con buen contraste */
label {
    font-size: max(0.875rem, 14px) !important;
    font-weight: 600 !important;
    color: #1A1A1A !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Campos requeridos visibles */
.required,
label .required,
abbr[title="required"] {
    color: #D32F2F !important;
    font-weight: bold !important;
}

/* Mensajes de error accesibles */
.error,
.wpcf7-not-valid-tip,
.validation-error {
    color: #B71C1C !important;
    background-color: #FFEBEE !important;
    padding: 10px !important;
    border-left: 4px solid #D32F2F !important;
    margin-top: 8px !important;
    font-size: max(0.875rem, 14px) !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,
    .elementor-button,
    input[type="submit"] {
        border: 3px solid #000000 !important;
        background-color: #FFFFFF !important;
        color: #000000 !important;
    }
}

/* ==========================================================================
   MEJORAS ESPECÍFICAS PARA ELEMENTOR
   ========================================================================== */

/* Asegurar que los widgets de Elementor sean accesibles */
.elementor-widget-container {
    color: inherit;
}

.elementor-heading-title {
    color: #1A1A1A !important;
}

.elementor-icon-list-item a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ==========================================================================
   MEJORAS RESPONSIVE (Mobile First)
   ========================================================================== */

@media (max-width: 768px) {
    /* Aumentar tamaños táctiles en móviles */
    button,
    .elementor-button,
    a.button {
        min-height: 48px !important;
        padding: 14px 28px !important;
        font-size: 17px !important;
    }

    /* Enlaces de navegación más grandes en móvil */
    .elementor-nav-menu a,
    nav a {
        min-height: 48px !important;
        padding: 14px 18px !important;
        font-size: 17px !important;
    }
}