/* ─── Menú — item activo según sección visible (home) o página actual (resto) ─
   En el home, la fuente de verdad es .fj-nav-active (scrollspy de header.js).
   No se puede usar .current-menu-item ahí: como "Sobre nosotros" y "Nuestro
   impacto" son enlaces a /#ancla, WordPress los marca current-menu-item por
   coincidir la ruta "/" con el home, sin importar el hash — junto con
   "Inicio" quedarían los 3 marcados a la vez.
   En páginas internas no hay secciones que trackear (header.js no agrega
   .fj-nav-active ahí), así que se usa .current-menu-item de WordPress, que
   ahí sí es correcto y único.
   ────────────────────────────────────────────────────────────────────────── */

body.home .main-navigation .primary-menu-container > ul > li.menu-item.fj-nav-active > a,
body:not(.home) .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
    color: var(--global-palette3);
    position: relative;
}

body.home .main-navigation .primary-menu-container > ul > li.menu-item.fj-nav-active > a::after,
body:not(.home) .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a::after {
    content: '';
    position: absolute;
    /* El <a> trae padding-left: calc(1.3em / 2) del tema Kadence; sin este
       offset la línea arranca en el borde del <a>, antes de donde empieza
       la palabra. */
    left: calc(1.3em / 2);
    bottom: -2px;
    width: 30%;
    height: 2px;
    background: var(--global-palette1, #fea900);
}

body.home .mobile-navigation ul li.fj-nav-active > a,
body:not(.home) .mobile-navigation ul li.current-menu-item > a {
    color: var(--global-palette-highlight);
}

/* En el home, current-menu-item queda "pegado" en varios items a la vez
   (ver nota arriba) y en el que no coincide con la sección visible hay que
   apagarlo explícitamente para que no compita con el color de Kadence. */
body.home .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item:not(.fj-nav-active) > a {
    color: var(--global-palette4);
}

body.home .mobile-navigation ul li.current-menu-item:not(.fj-nav-active) > a {
    color: var(--global-palette3);
}

/* El menú móvil traía la tipografía decorativa del starter template de
   Kadence (Sorts Mill Goudy cursiva), nunca ajustada a las fuentes reales
   del sitio (Manrope en menús/UI, igual que el menú de escritorio).
   !important porque Kadence imprime su CSS generado DESPUÉS de este
   archivo con la misma especificidad exacta (.mobile-navigation ul li),
   así que sin esto gana el suyo solo por ir después en el HTML. */
.mobile-navigation ul li {
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    font-family: var(--global-primary-nav-font-family, 'Manrope', sans-serif) !important;
}

/* Barra dorada institucional a la izquierda del item seleccionado, de la
   altura completa del <li> (a diferencia del subrayado parcial de
   escritorio, que no tiene sentido en una lista vertical apilada). */
.mobile-navigation ul li {
    position: relative;
    padding-left: 16px;
}

body.home .mobile-navigation ul li.fj-nav-active::before,
body:not(.home) .mobile-navigation ul li.current-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--global-palette1, #fea900);
}

/* La copia de "Aplicar a una beca" / "Donar" que vive dentro del menú
   hamburguesa (Kadence duplica el bloque HTML del header para mobile) no
   debe depender del scroll como la de escritorio: dentro del menú siempre
   tienen que verse, sin importar si ya se pasó el hero o no. Gana por
   especificidad sobre la regla base ".header-actions{opacity:0;...}" del
   Additional CSS, sin importar el orden de impresión. */
.mobile-html-inner .header-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Header de Kadence: siempre es position:fixed (clase "item-is-fixed"), y
   usa un "top" inline igual a la distancia que había entre el header y el
   borde de la página al cargar — así que, en reposo ("item-at-start"), ese
   top coincide con la altura de la barra de anuncios y el header queda bien
   pegado justo debajo de ella. Pero al hacer scroll ("item-is-stuck") sigue
   usando ese mismo top, sin enterarse de que la barra (que no es sticky) ya
   desapareció — deja un hueco vacío del alto de la barra en vez de pegarse
   al borde real del viewport. Se corrige solo en el estado scrolleado; en
   reposo no se toca para no tapar la barra de anuncios. */
.site-header-inner-wrap.item-is-fixed.item-is-stuck {
    top: 0 !important;
}