/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Template: hello-elementor
Author: ESBA
Description: Child theme de Hello Elementor con header y footer nativos (sin Elementor ni ElementsKit). Portable: sirve para esba.edu.ar y extension.esba.edu.ar sin cambios.
Version: 4.0.0
Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, translation-ready
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   ESBA — Header y Footer nativos
   Paleta tomada del Elementor Kit del sitio para mantener la identidad.
   ========================================================================== */

:root{
  --esba-navy:#26276E;
  --esba-navy-deep:#041C5E;   /* fondo del footer */
  --esba-bordo:#BF0411;
  --esba-bordo-dark:#A00310;
  --esba-ink:#333333;
  --esba-line:#E3E4EC;
  --esba-hover:#F2F3F9;
  --esba-header-h:76px;
  --esba-max:1200px;
  --esba-focus:#3863FA;
}

/* ---------- utilidades ---------- */
.esba-skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--esba-navy); color:#fff; padding:12px 20px;
  border-radius:0 0 6px 0; font-weight:600; text-decoration:none;
}
.esba-skip:focus{ left:0; }

.esba-wrap{
  max-width:var(--esba-max); margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:24px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.esba-header{
  background:#fff;
  border-bottom:1px solid transparent;
  position:sticky; top:0; z-index:500;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.esba-header.is-stuck{
  box-shadow:0 1px 12px rgba(26,26,46,.08);
  border-bottom-color:var(--esba-line);
}
/* position:relative = ancla de los mega menús (ver más abajo) */
.esba-header .esba-wrap{ min-height:var(--esba-header-h); position:relative; }

/* La barra de administración de WordPress es fixed: el header sticky
   debe quedar por debajo, no encima. */
body.admin-bar .esba-header{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .esba-header{ top:46px; }
}

/* logo */
.esba-logo{ display:flex; align-items:center; flex:none; }
.esba-logo img{ display:block; max-height:46px; width:auto; height:auto; }
.esba-logo__text{ font-weight:700; font-size:22px; color:var(--esba-navy); letter-spacing:-.02em; }

/* zona derecha */
.esba-header__right{ margin-left:auto; display:flex; align-items:center; gap:16px; }

/* boton CTA — !important contra .elementor-kit-15 a {color:#000} */
a.esba-cta,
a.esba-cta:visited{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--esba-bordo) !important;
  color:#fff !important;
  text-decoration:none;
  font-size:16px; font-weight:600; line-height:1;
  padding:14px 30px; border-radius:10px; border:0;
  min-height:44px; white-space:nowrap;
  transition:background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
a.esba-cta:hover,
a.esba-cta:focus,
a.esba-cta:active{
  background:var(--esba-bordo-dark) !important;
  color:#fff !important;
}

/* ---------- navegacion escritorio ---------- */
.esba-nav{ display:flex; }
.esba-nav ul{ list-style:none; margin:0; padding:0; }
.esba-nav > ul{ display:flex; align-items:center; gap:2px; }

.esba-nav > ul > li{ position:relative; }

/* Los !important son deliberados: el kit de Elementor aplica estilos
   globales a <a> y <button> (.elementor-kit-15 a {color:#000},
   .elementor-kit-15 button:hover {background:accent azul}) que pisan
   cualquier selector de una sola clase. */
.esba-header .esba-nav__link,
.esba-header .esba-nav__toggle{
  display:inline-flex; align-items:center; gap:6px;
  font-family:inherit; font-size:16px; font-weight:500; line-height:1.2;
  color:var(--esba-navy) !important;
  background:transparent !important;
  border:0; box-shadow:none; cursor:pointer;
  padding:13px 15px; border-radius:6px; text-decoration:none;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.esba-header .esba-nav__link:hover,
.esba-header .esba-nav__toggle:hover,
.esba-header .esba-nav__link:focus,
.esba-header .esba-nav__toggle:focus,
.esba-header .esba-nav__toggle:active{
  background:var(--esba-hover) !important;
  color:var(--esba-navy) !important;
}
/* submenú abierto: el disparador queda marcado en bordó */
.esba-nav > ul > li[data-open="true"] > .esba-nav__toggle{
  background:var(--esba-hover) !important;
  color:var(--esba-bordo) !important;
}
.esba-nav__link:focus-visible,.esba-nav__toggle:focus-visible,
.esba-cta:focus-visible,.esba-burger:focus-visible,
.esba-mega a:focus-visible,.esba-drop a:focus-visible{
  outline:3px solid var(--esba-focus); outline-offset:2px;
}
/* pagina actual */
.esba-nav .current-menu-item > .esba-nav__link,
.esba-nav .current-menu-ancestor > .esba-nav__toggle{
  color:var(--esba-bordo);
}

.esba-nav__caret{ width:14px; height:14px; flex:none; transition:transform .2s ease; }
.esba-nav > ul > li[data-open="true"] .esba-nav__caret{ transform:rotate(180deg); }

/* ---------- desplegable simple ---------- */
.esba-drop{
  position:absolute; top:calc(100% + 6px); left:0; min-width:250px;
  background:#fff; border:1px solid var(--esba-line); border-radius:8px;
  box-shadow:0 10px 32px rgba(26,26,46,.12);
  padding:8px; display:none; z-index:600;
}
/* Puente invisible sobre el hueco entre el botón y el panel: sin esto
   el desplegable se cierra al mover el mouse hacia él. */
.esba-drop::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:10px;
}
/* El mega cuelga del header (no del <li>), así que el hueco a cubrir
   es mayor: va desde la base del botón hasta el panel. Igual el cierre
   tiene un periodo de gracia en JS: el puente es la primera defensa. */
.esba-mega::before{
  content:""; position:absolute; left:0; right:0; top:-26px; height:26px;
}
/* Los desplegables cercanos al borde derecho se alinean hacia adentro. */
.esba-nav > ul > li:nth-last-child(-n+2) > .esba-drop{ left:auto; right:0; }
.esba-drop a,
.esba-drop a:visited{
  display:block; padding:10px 14px; border-radius:5px;
  color:var(--esba-ink) !important; text-decoration:none; font-size:15px; line-height:1.4;
}
.esba-drop a:hover,
.esba-drop a:focus{ background:var(--esba-hover); color:var(--esba-navy) !important; }

/* ---------- mega menu ----------
   Se ancla al contenedor del header (.esba-wrap), no al <li>, para que
   nunca se salga de la pantalla: ocupa exactamente el ancho del contenido. */
.esba-mega{
  position:absolute; top:100%; left:0; right:auto;
  width:max-content; max-width:100%;
  background:#fff;
  border:1px solid var(--esba-line); border-radius:10px;
  box-shadow:0 14px 40px rgba(26,26,46,.14);
  padding:26px 28px; display:none; z-index:600;
  max-height:calc(100vh - var(--esba-header-h) - 40px);
  overflow-y:auto; overscroll-behavior:contain;
}
/* Todas las áreas en una sola fila: con auto-fit, 4 grupos entraban en
   3 columnas y el panel crecía a dos filas (679px de alto).
   El rango 190-290px evita columnas gigantes cuando hay pocos grupos. */
.esba-mega__cols{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(190px, 290px); gap:8px 26px;
}
.esba-mega__group{ break-inside:avoid; }
/* Los encabezados de área van en bordó tanto si enlazan (<a>) como si no
   (<span>). Sin !important, el <a> heredaba el negro de .elementor-kit-15 a
   y quedaban de distinto color según si la categoría existía o no. */
span.esba-mega__title,
a.esba-mega__title,
a.esba-mega__title:visited{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--esba-bordo) !important;
  padding:6px 10px 8px; text-decoration:none;
  border-bottom:1px solid var(--esba-line);
  margin-bottom:6px;
}
a.esba-mega__title:hover,
a.esba-mega__title:focus{
  color:var(--esba-bordo-dark) !important; text-decoration:underline;
}
.esba-mega__group a:not(.esba-mega__title),
.esba-mega__group a:not(.esba-mega__title):visited{
  display:block; padding:8px 10px; border-radius:5px;
  color:var(--esba-ink) !important; text-decoration:none; font-size:14.5px; line-height:1.4;
}
.esba-mega__group a:not(.esba-mega__title):hover,
.esba-mega__group a:not(.esba-mega__title):focus{
  background:var(--esba-hover); color:var(--esba-navy) !important;
}

/* abierto (escritorio: hover o foco; mobile: click) */
@media (min-width:1025px){
  .esba-nav > ul > li[data-open="true"] > .esba-drop,
  .esba-nav > ul > li[data-open="true"] > .esba-mega{ display:block; }

  /* El <li> que contiene un mega debe ser estático para que el panel
     se posicione respecto de .esba-wrap y no del propio <li>. */
  .esba-nav > ul > li:has(> .esba-mega){ position:static; }
}

/* ---------- boton hamburguesa ---------- */
.esba-burger{
  display:none; width:46px; height:46px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--esba-line); border-radius:8px;
  color:var(--esba-navy); cursor:pointer; padding:0;
}
.esba-burger svg{ width:24px; height:24px; }
.esba-burger .esba-burger__close{ display:none; }
.esba-burger[aria-expanded="true"] .esba-burger__open{ display:none; }
.esba-burger[aria-expanded="true"] .esba-burger__close{ display:block; }

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width:1024px){
  .esba-burger{ display:inline-flex; }
  .esba-header__right .esba-cta{ display:none; }

  /* --esba-nav-top lo calcula esba-nav.js con la posición real del header.
     Es lo que evita que el panel tape el logo y el botón de cerrar cuando
     hay barra de administración de WordPress. */
  .esba-nav{
    position:fixed;
    top:var(--esba-nav-top, var(--esba-header-h));
    left:0; right:0; bottom:0;
    background:#fff; display:block; overflow-y:auto; overscroll-behavior:contain;
    padding:8px 20px 40px;
    transform:translateX(100%); visibility:hidden;
    transition:transform .25s ease, visibility .25s ease;
    z-index:490;
  }
  .esba-nav.is-open{ transform:none; visibility:visible; }

  /* El menú abierto queda por encima del botón flotante de WhatsApp
     (Elementor lo dibuja con z-index alto y tapaba los últimos ítems). */
  .esba-nav.is-open{ z-index:99980; }

  .esba-nav > ul{ display:block; }
  .esba-nav > ul > li{ border-bottom:1px solid var(--esba-line); }

  .esba-header .esba-nav__link,
  .esba-header .esba-nav__toggle{
    width:100%; justify-content:space-between; padding:16px 12px;
    font-size:17px; border-radius:8px; min-height:56px;
  }
  .esba-header .esba-nav__toggle{ text-align:left; }

  .esba-drop,.esba-mega{
    position:static; transform:none; width:auto; display:none;
    border:0; box-shadow:none; padding:0 0 12px 12px; border-radius:0;
    border-left:2px solid var(--esba-line); margin:0 0 10px 4px;
    max-height:none; overflow:visible;
  }
  .esba-drop::before,.esba-mega::before{ content:none; }
  .esba-mega__cols{ grid-auto-flow:row; }
  .esba-nav > ul > li[data-open="true"] > .esba-drop,
  .esba-nav > ul > li[data-open="true"] > .esba-mega{ display:block; }

  .esba-mega__cols{ grid-template-columns:1fr; gap:4px; }
  .esba-mega__title{ border-bottom:0; padding:10px 8px 4px; margin:0; }
  .esba-drop a,.esba-mega__group a:not(.esba-mega__title){ padding:12px 8px; font-size:15.5px; min-height:44px; }

  .esba-nav__cta-mobile{ display:block; margin:22px 4px 0; }
  .esba-nav__cta-mobile .esba-cta{ width:100%; }

  body.esba-nav-open{ overflow:hidden; }
}
@media (min-width:1025px){
  .esba-nav__cta-mobile{ display:none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.esba-footer{
  background:var(--esba-navy-deep); color:#fff;
  padding:50px 0 0; margin-top:0;
}
/* !important contra .elementor-kit-15 a {color:#000} y el a:hover del reset */
.esba-footer a,
.esba-footer a:visited{ color:#fff !important; text-decoration:none; }
.esba-footer a:hover,
.esba-footer a:focus{ color:#fff !important; text-decoration:underline; }

.esba-footer__claim{
  max-width:var(--esba-max); margin:0 auto 40px; padding:0 20px;
  text-align:center; font-size:clamp(19px,2.4vw,26px); font-weight:600;
  line-height:1.35; color:#fff;
}

.esba-footer__grid{
  max-width:var(--esba-max); margin:0 auto; padding:0 20px 45px;
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:36px;
  align-items:start;
}
.esba-footer__brand img{ max-width:190px; height:auto; display:block; margin-bottom:16px; }
/* Respaldo cuando no hay logo claro en la biblioteca. */
.esba-footer__brandname{
  display:block; font-weight:700; font-size:24px; color:#fff;
  letter-spacing:-.02em; margin-bottom:16px;
}
.esba-footer__brand p{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.78); margin:0; }

.esba-footer__col h2{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin:0 0 14px;
}
.esba-footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.esba-footer__col a{ font-size:15px; line-height:1.45; display:inline-block; padding:2px 0; }

.esba-footer__contact ul{ display:grid; gap:12px; list-style:none; margin:0; padding:0; }
.esba-footer__contact li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.45; }
.esba-footer__contact svg{ width:17px; height:17px; flex:none; margin-top:3px; opacity:.75; }

.esba-footer__bottom{
  border-top:1px solid rgba(255,255,255,.16);
}
.esba-footer__bottom .esba-wrap{
  min-height:70px; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding-top:16px; padding-bottom:16px;
}
.esba-footer__copy{ font-size:13.5px; color:rgba(255,255,255,.72); }
.esba-social{ display:flex; gap:10px; }
.esba-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease;
}
.esba-social a:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6); }
.esba-social svg{ width:17px; height:17px; }

@media (max-width:900px){
  .esba-footer__grid{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width:560px){
  .esba-footer__grid{ grid-template-columns:1fr; }
  .esba-footer__bottom .esba-wrap{ justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  .esba-nav,.esba-nav__caret,.esba-header,.esba-cta,.esba-social a{ transition:none !important; }
}