/**
 * Accessibility Fixes for Resolace Theme
 * 
 * Este archivo contiene correcciones de accesibilidad para cumplir con WCAG 2.1
 */

/* Skip link para navegación por teclado */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999999;
    padding: 0.75em 1.5em;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0 0 4px 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}

.skip-link:focus {
    left: 0;
    top: 0;
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    overflow: visible;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Skip link dentro del header */
.site-header {
    position: relative;
}

.site-header .skip-link {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100000;
}

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

.screen-reader-text:focus {
    background-color: #000;
    clip: auto !important;
    clip-path: none;
    color: #fff;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Elementos visualmente ocultos pero accesibles para lectores de pantalla 
   fix: accessibility update - 2025-11-03 */
/* .visually-hidden ya está definido junto con .screen-reader-text */

/* Mejora de contraste para enlaces */
a {
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
}

a:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Asegurar que los elementos interactivos tengan un tamaño mínimo de 44x44px */
button,
input[type="submit"],
input[type="button"],
.guten-button,
.wp-block-button__link {
    min-height: 44px;
    min-width: 44px;
}

/* Mejorar el foco visible en elementos interactivos */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Landmarks semánticos - asegurar que sean visualmente correctos */
header[role="banner"],
nav[role="navigation"],
main[role="main"],
footer,
[role="region"] {
    display: block;
}

/* Asegurar que los landmarks no rompan el diseño */
.site-header,
.site-main,
.site-footer {
    width: 100%;
    display: block;
}

/* Etiqueta descriptiva para headers adicionales */
[role="region"][aria-labelledby] {
    width: 100%;
    display: block;
}

/* fix: accessibility update - 2025-11-03 */

/* Mejorar indicadores visuales para navegación por teclado en landmarks */
header[role="banner"]:focus-within,
nav[role="navigation"]:focus-within,
main[role="main"]:focus-within,
footer:focus-within,
[role="region"]:focus-within {
    outline: 1px solid rgba(0, 102, 204, 0.3);
    outline-offset: -1px;
}

/* Asegurar que los elementos interactivos dentro de landmarks sean accesibles */
[role="banner"] a:focus,
[role="navigation"] a:focus,
[role="main"] a:focus,
footer a:focus,
[role="region"] a:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}