/**
 * Mejoras de Accesibilidad para KTS Theme
 * Soluciona problemas de objetivos táctiles pequeños
 * Cumple con WCAG 2.1 AA - Criterio 2.5.5 (Target Size)
 * NO modifica colores, solo tamaños y estructura
 */

/* ==========================================================================
   OBJETIVOS TÁCTILES - TAMAÑO MÍNIMO 44x44px
   ========================================================================== */

/**
 * Logo del header
 * Asegura que el logo sea accesible táctilmente
 */
.header-logo__link {
    display: block;
    min-height: 44px;
    min-width: 44px;
    padding: 4px;
}

/**
 * Logo del footer
 * Asegura que el logo del footer sea accesible táctilmente
 */
.footer__logo-link {
    display: block;
    min-height: 44px;
    min-width: 44px;
    padding: 4px;
}

/**
 * Enlaces de contacto en header
 * Aumenta el área táctil para teléfono y email
 */
.header__item--phone a,
.header__item--email a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 12px 8px;
    line-height: 1.2;
    text-align: center;
}

/**
 * Enlaces del menú de navegación principal
 * Asegura área táctil suficiente en todos los dispositivos
 */
.nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
    text-align: center;
}

/**
 * Enlaces del footer (legal, contacto, redes sociales)
 * Mejora la accesibilidad táctil en el pie de página
 */
.footer__contact-links-item a,
.nav__list--footer-legal-menu .nav__link,
.footer__social-network-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    min-width: 44px;
    padding: 12px 8px;
}

/**
 * Botón de menú móvil
 * Ya tiene 50x50px, pero aseguramos que sea táctil
 */
.header__item--menu-toggle {
    min-height: 50px;
    min-width: 50px;
    cursor: pointer;
    /* Área táctil adicional con padding invisible */
    padding: 5px;
}

.menu-toggle__link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-toggle__link svg {
    width: 100%;
    height: 100%;
    stroke: var(--header--logo--color, var(--wp--preset--color--contrast));
}

/**
 * Language switcher
 * Mejora el área táctil del selector de idioma
 */
.language-switcher__current,
.language-switcher__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 8px;
}

/**
 * Enlaces de redes sociales
 * Asegura que los iconos sean fáciles de tocar
 */
.footer__social-network-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 8px;
}

/**
 * Enlaces de sponsors en footer
 * Mejora la accesibilidad de los logos de sponsors
 */
.footer__social-sponsor-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px;
}

/* ==========================================================================
   SEPARACIÓN ENTRE OBJETIVOS TÁCTILES
   ========================================================================== */

/**
 * Espaciado mínimo entre enlaces táctiles
 * Evita toques accidentales
 */
.header__zone--top-bar {
    gap: max(25px, 8px); /* Mínimo 8px de separación */
}

.footer__contact-links-list li,
.nav__list--footer-legal-menu li {
    margin-bottom: 8px; /* Separación vertical mínima */
}

.footer__social-network-list li,
.footer__social-sponsor-list li {
    margin: 4px; /* Separación en todas las direcciones */
}

/* ==========================================================================
   MEJORAS ADICIONALES DE ACCESIBILIDAD
   ========================================================================== */

/**
 * Focus indicators mejorados
 * Mejora la navegación por teclado sin cambiar colores del tema
 */
.nav__link:focus,
.header__item--phone a:focus,
.header__item--email a:focus,
.footer__contact-links-item a:focus,
.language-switcher__current:focus,
.menu-toggle__link:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ==========================================================================
   RESPONSIVE - AJUSTES PARA MÓVILES
   ========================================================================== */

/**
 * En dispositivos móviles, aumenta ligeramente el área táctil
 */
@media (max-width: 768px) {
    .nav__link,
    .header__item--phone a,
    .header__item--email a {
        min-height: 48px;
        padding: 14px 12px;
    }
    
    .footer__contact-links-item a,
    .nav__list--footer-legal-menu .nav__link {
        min-height: 48px;
        padding: 14px 8px;
    }
}

/**
 * Para pantallas muy pequeñas, prioriza la usabilidad
 */
@media (max-width: 480px) {
    .header__zone--top-bar {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }
    
    .header__item--phone a,
    .header__item--email a {
        width: 100%;
        max-width: 200px;
        text-align: center;
    }
}