/*
Theme Name: Hello Elementor Child - Accesibilidad WCAG 2.1 AA
Theme URI: https://asenciohomesinspain.nl/
Description: Tema hijo de Hello Elementor con mejoras de accesibilidad WCAG 2.1 AA para Kit Digital
Author: Asencio Homes Spain
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   MEJORAS DE ACCESIBILIDAD WCAG 2.1 AA - KIT DIGITAL
   ========================================================================== */

/*
   9.2.4.1 - Enlaces de salto enfocables
   Los enlaces de salto deben ser visibles cuando reciben el foco
   IMPORTANTE: Sobrescribe screen-reader-text para hacerlo visible en focus
*/

/* Asegurar que screen-reader-text sea enfocable */
.screen-reader-text,
.skip-link {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
}

/* Hacer visible el skip-link cuando recibe el foco */
.screen-reader-text:focus,
.skip-link:focus {
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 15px 20px !important;
    top: 5px !important;
    left: 5px !important;
    z-index: 999999 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    outline: 3px solid #4A90E2 !important;
    outline-offset: 2px !important;
}

/*
   9.1.4.1 - Identificación de enlaces sin depender solo del color
   Los enlaces deben tener subrayado y otros estilos visuales
*/
a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}

a:hover,
a:focus {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Enlaces en párrafos y contenido de texto */
p a,
li a,
.elementor-text-editor a,
.entry-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 500;
}

p a:hover,
li a:hover,
.elementor-text-editor a:hover,
.entry-content a:hover {
    text-decoration-thickness: 2px;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0 2px;
}

/* Tamaños mínimos táctiles para accesibilidad */
.elementor-button,
.elementor-button-link,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
    min-height: 44px;
    min-width: 44px;
}

.elementor-button:focus,
.elementor-button-link:focus,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
.wp-block-button__link:focus {
    outline: 3px solid #4A90E2;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
}

/*
   9.1.4.3 - Contraste mínimo mejorado
   NOTA: Los colores originales del sitio se mantienen.
   Solo se mejora el focus en formularios.
*/

/* Focus mejorado en formularios */
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #4A90E2;
    outline-offset: 2px;
}

/*
   9.2.4.4 - Propósito de enlaces claro
   Mejorar identificación visual de enlaces
*/

/* Enlaces externos con indicador visual */
a[target="_blank"]:not(.elementor-button):after {
    content: " ↗";
    font-size: 0.85em;
    text-decoration: none;
    display: inline-block;
    margin-left: 2px;
}

/* Enlaces de descarga con indicador */
a[href$=".pdf"]:before,
a[href$=".doc"]:before,
a[href$=".docx"]:before,
a[href$=".zip"]:before {
    content: "📄 ";
    text-decoration: none;
    margin-right: 3px;
}

/*
   Focus visible mejorado en todos los elementos interactivos
*/
*:focus-visible {
    outline: 3px solid #4A90E2;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Eliminar outline solo cuando no es por teclado */
*:focus:not(:focus-visible) {
    outline: none;
}

/*
   Mejoras de legibilidad - sin forzar estilos
*/
/* Los estilos de texto originales se mantienen */

/*
   Mejorar accesibilidad de imágenes
*/
/* Las imágenes mantienen su estilo original */

/*
   Mejorar accesibilidad de tablas - estilos mínimos
*/
/* Los estilos de tabla originales se mantienen */

/*
   Estados de elementos interactivos
*/
button:disabled,
input:disabled,
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/*
   Mejorar contraste en fondos oscuros
*/
.dark-background,
.has-dark-background {
    color: #ffffff !important;
}

.dark-background a,
.has-dark-background a {
    color: #7dc4ff; /* Contraste 7.1:1 sobre fondo oscuro */
}

.dark-background a:hover,
.has-dark-background a:hover {
    color: #a6d9ff;
}

/*
   Responsive y accesibilidad móvil
*/
@media (max-width: 768px) {
    /* Aumentar tamaños táctiles para mejor accesibilidad */
    button,
    input[type="submit"],
    .elementor-button {
        min-height: 48px;
        min-width: 48px;
    }
}

/*
   Animaciones respetando preferencias de 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;
    }
}

/*
   Alto contraste para usuarios con preferencia
*/
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }

    a {
        text-decoration-thickness: 2px !important;
    }
}