/**
 * Cabecera fija al hacer scroll.
 *
 * OJO: esto afecta a TODA la tienda, no solo al registro. Se deja en su propio
 * fichero para poder quitarlo sin tocar nada mas: basta con no cargarlo desde
 * eureka_functions.php.
 *
 * Se usa position:sticky y no fixed a proposito: sticky respeta el flujo del
 * documento, asi que no hace falta compensar la altura de la cabecera con un
 * padding en el body, que es de donde suelen venir los saltos de maquetado.
 */

#header {
    position: sticky;
    top: 0;
    /* Por debajo de los dialogos (que van en la capa superior del navegador)
       y por encima del contenido y de los mapas de Leaflet. */
    z-index: 900;
    background-color: #fff;
}

/* La copia "fija al bajar" del tema (#header-sticky, opcion
   active_header_sticky_layout del constructor, encendida en la Home): la
   cabecera ya es fija por si misma y salian dos al bajar. */
#header-sticky {
    display: none !important;
}

/* Al quedarse fija conviene despegarla del contenido con una sombra suave */
#header {
    box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
}

/* El banner promocional de la parte superior no tiene que viajar con nosotros:
   se lee una vez y despues solo resta pantalla. */
#header .header-banner {
    position: relative;
    z-index: 1;
}

/* Los desplegables del menu tienen que seguir apareciendo por encima */
#header .header-top,
#header #header-normal {
    position: relative;
    z-index: 2;
}

/* En pantallas bajas una cabecera fija se come demasiado espacio util */
@media (max-height: 520px) {
    #header {
        position: relative;
    }
}

/* Lo que tapa la cabecera en cada momento: la barra del logo y, si esta a la
   vista, el menu (header-sticky.js mide los dos). Para lo que se queda fijo
   al bajar y para los saltos a un ancla (scrollIntoView...). */
:root {
    --ek-bajo-cabecera: calc(var(--ek-alto-cabecera, 0px) + var(--ek-alto-menu, 0px));
}
:root.ek-menu-oculto {
    --ek-bajo-cabecera: var(--ek-alto-cabecera, 0px);
}
@media (max-height: 520px) {
    :root {
        --ek-bajo-cabecera: 0px;
    }
}
html {
    scroll-padding-top: calc(var(--ek-bajo-cabecera) + 12px);
}

/* =====================================================================
   Al bajar se esconde el menu de categorias (queda la barra del logo, el
   buscador y la cuenta) y al subir vuelve.

   El menu va FLOTANDO bajo la barra del logo (position absolute) y se
   esconde deslizandose detras de ella. Antes se plegaba con max-height, y
   eso cambiaba el alto de la cabecera: la pagina subia de golpe, el
   navegador corregia el scroll, eso contaba como "subir" y el menu volvia a
   salir, en bucle (el parpadeo). Asi el alto nunca cambia: el hueco del menu
   lo reserva un bloque vacio que header-sticky.js pone justo despues de
   #header (.ek-hueco-menu), con el alto que mide. No un margin-bottom en
   #header: se fundia con el margen de arriba del contenido y se perdia la
   separacion que habia entre el menu y la pagina.
   ===================================================================== */

.ek-hueco-menu {
    height: var(--ek-alto-menu, 0px);
}

#header.ek-menu-flotante .eureka-header-plegable {
    position: absolute;
    /* Elementor estira la seccion con left/width en linea */
    left: 0 !important;
    width: 100% !important;
    top: calc(100% + var(--ek-desde, 0px));
    /* Detras de la barra del logo, que es blanca y la tapa al subir */
    z-index: -1;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.25s ease, visibility 0s linear 0s;
    /* Sin el "slideInDown" del editor, que se quedaba con fill-mode both y su
       transform ganaba al de esconder/mostrar */
    animation: none !important;
}

/* El menu (Categorias, Nuestras marcas...) y su entrada, solo con CSS: las
   secciones que van despues de la barra con el buscador, cuando esa barra es
   la primera (Clasica; en la Express va debajo del aviso "Recuerda..."). Antes dependia de
   clases que pone header-sticky.js al terminar de cargar la pagina, y
   mientras tanto el menu no se veia (el editor lo deja oculto hasta lanzar
   su animacion) o se veia, desaparecia y volvia a bajar (22-oct-2026). */

/* Visible desde el principio */
#header .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-axps-search) ~ .elementor-top-section.elementor-invisible {
    visibility: visible;
}
/* La barra del logo por encima: mientras el menu entra no la tapa, aunque
   el script todavia no lo haya puesto detras (.ek-menu-flotante) */
#header .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-axps-search) {
    position: relative;
    z-index: 2;
}

/* Entrada al cargar, en cada pagina: baja desde detras de la barra del logo.
   Desde el primer pintado. Solo transform y opacity, que el navegador anima
   aparte aunque la pagina siga cargando. Con !important y el mismo valor en
   todos los estados: asi no se reinicia cuando el script le pone sus clases
   (ni el "slideInDown" del editor la pisa). Sin fill-mode: al terminar manda
   otra vez el transform de esconder/mostrar. */
#header .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-axps-search) ~ .elementor-top-section {
    animation: ek-menu-entra 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Y cada opcion aparece un poco despues de la anterior, de izquierda a derecha */
#header .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-axps-search) ~ .elementor-top-section .elementor-row > .elementor-column {
    animation: ek-menu-opcion 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
#header .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-axps-search) ~ .elementor-top-section .elementor-row > .elementor-column:nth-child(2) { animation-delay: 0.15s; }
#header .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-axps-search) ~ .elementor-top-section .elementor-row > .elementor-column:nth-child(3) { animation-delay: 0.2s; }
#header .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-axps-search) ~ .elementor-top-section .elementor-row > .elementor-column:nth-child(4) { animation-delay: 0.25s; }
#header .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-axps-search) ~ .elementor-top-section .elementor-row > .elementor-column:nth-child(5) { animation-delay: 0.3s; }
#header .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-axps-search) ~ .elementor-top-section .elementor-row > .elementor-column:nth-child(6) { animation-delay: 0.35s; }
#header .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-axps-search) ~ .elementor-top-section .elementor-row > .elementor-column:nth-child(n+7) { animation-delay: 0.4s; }

/* Mientras la pagina carga, la cabecera sin transiciones: al aplicarse los
   estilos el boton del buscador y los campos se "estiraban" animados. Se
   encienden al terminar de cargar (html.ek-cabecera-lista, header-sticky.js) */
html:not(.ek-cabecera-lista) #header,
html:not(.ek-cabecera-lista) #header * {
    transition: none !important;
}

@keyframes ek-menu-entra {
    from {
        transform: translateY(-100%);
    }
}
@keyframes ek-menu-opcion {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
}

#header.ek-menu-flotante.eureka-header--compacto .eureka-header-plegable {
    transform: translateY(calc(-100% - var(--ek-desde, 0px)));
    opacity: 0;
    /* Sin esto, los enlaces escondidos siguen siendo enfocables con el
       tabulador y se pueden pulsar */
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.25s ease, visibility 0s linear 0.3s;
}

@media (prefers-reduced-motion: reduce) {
    #header .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-axps-search) ~ .elementor-top-section,
    #header .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-axps-search) ~ .elementor-top-section .elementor-row > .elementor-column {
        animation: none !important;
    }
    #header.ek-menu-flotante .eureka-header-plegable,
    #header.ek-menu-flotante.eureka-header--compacto .eureka-header-plegable {
        transition: none;
        animation: none !important;
    }
    #header.ek-menu-flotante .eureka-header-plegable .elementor-row > .elementor-column {
        animation: none;
    }
}