/*
Theme Name: Ecomall Child
Template: ecomall
Version: 1.0.0
*/

/****************************************************
 * A11Y + HOME Fixes (Kit Digital / WCAG 2.1 AA)
 * Tema: Ecomall Child + Elementor
 * Objetivo: mantener lo existente y corregir foco/contraste
 ****************************************************/

/* --------------------------------------------------
 * 1) Móvil: área clicable mínima 44x44 (WCAG 2.5.8)
 * Mantiene tu regla, sin cambios.
 * -------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-location-footer a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --------------------------------------------------
 * 2) HOME: Overlay para legibilidad (WCAG 1.4.3)
 * IMPORTANTE: Evitamos tocar todos los overlays de la HOME.
 * Si aún no lo has hecho, añade clase "home-hero" a la sección del hero.
 * Elementor: Sección (Hero) -> Avanzado -> CSS Classes: home-hero
 * -------------------------------------------------- */
.home .home-hero .elementor-background-overlay {
  opacity: 0.45;
}

/* --------------------------------------------------
 * 3) HOME: enlaces con mejor legibilidad sin subrayar TODO
 * Evitamos subrayar menús, botones, iconos, etc.
 * -------------------------------------------------- */
.home main a:not(.elementor-button):not(.elementor-item) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------------
 * 4) HOME: CTA “¿Estás preparado?” con contraste seguro
 * (usas class .cta-skillroom en el span)
 * -------------------------------------------------- */
.home .cta-skillroom {
  color: #ffffff;
  font-weight: 700;
}

/* --------------------------------------------------
 * 5) A11Y: Foco visible (WCAG 2.4.7) - ROJO FUERTE
 * Esto NO daña la web: solo aparece al navegar con teclado.
 * Usamos :focus-visible para no molestar con clicks de ratón.
 * -------------------------------------------------- */
:root {
  --focus-color: #ff0000;
  --focus-shadow: rgba(255, 0, 0, 0.35);
}

/* Ring base para elementos interactivos */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 4px solid var(--focus-color) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px var(--focus-shadow) !important;
}

/* Elementor Nav Menu (desktop + dropdown) */
.elementor-nav-menu a:focus-visible,
.elementor-nav-menu .elementor-item:focus-visible {
  outline: 4px solid var(--focus-color) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px var(--focus-shadow) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
}

/* Si el foco cae dentro del <li>, resalta el <a> padre (submenús, etc.) */
.elementor-nav-menu li:focus-within > a.elementor-item {
  outline: 4px solid var(--focus-color) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px var(--focus-shadow) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
}

/* --------------------------------------------------
 * 6) Último recurso seguro: si algún plugin/tema borra outlines,
 * forzamos foco visible SOLO cuando el navegador marque :focus-visible.
 * Esto no rompe nada.
 * -------------------------------------------------- */
*:focus-visible {
  outline: 4px solid var(--focus-color) !important;
  outline-offset: 4px !important;
}

/* --------------------------------------------------
 * 7) Complianz (cookie banner): foco visible si está activo
 * (opcional, pero ayuda si el banner capturaba foco)
 * -------------------------------------------------- */
#cmplz-cookiebanner-container a:focus-visible,
#cmplz-cookiebanner-container button:focus-visible {
  outline: 4px solid var(--focus-color) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px var(--focus-shadow) !important;
}