/**
 * Header del Tema Hijo - Hechizos de Amor
 *
 * Ubicación final: astra-child/css/global/templates/header/header.css
 *
 * Filosofía:
 *   En Elementor sólo se conserva:
 *     - La jerarquía de contenedores y widgets
 *     - El "display" del Disposición (Flexbox / Grid)
 *     - La configuración funcional de cada widget
 *     - Las clases BEM en Avanzado → Clases CSS
 *   TODO lo demás vive aquí.
 *
 * Estructura HTML que controla:
 *   wp-page
 *   ├── .site-header__top-anchor       (spacer en flujo normal)
 *   ├── .site-header__container        (header fixed, top: 0)
 *   │   └── .e-con-inner               (layout flex row)
 *   │       ├── .site-header__menu-container  (flex:1, hamburger)
 *   │       ├── .site-header__logo-container  (flex:0, logo centrado en viewport)
 *   │       └── .site-header__cart-container  (flex:1, search + cart)
 *   │           ├── .elementor-widget-lumik-search-icon
 *   │           └── .site-header__cart-icon
 *   └── .announcement-container        (announcement fixed, debajo del header)
 *       └── .lumik-announcement
 */


/* ============================================================
   1. TOKENS DE DISEÑO
   ============================================================ */
:root {
    /* Colores de marca de Hechizos de Amor */
    --hda-color-primary:     #7A0D13;  /* burgundy: header bg, badge text, brand accent */
    --hda-color-on-primary:  #FEF3E7;  /* crema: iconos, logo, badge bg */
    --hda-color-soft:        #EFDAE3;  /* rosa: announcement bg, hover de iconos */

    /* Alturas */
    --hda-header-height-desktop:  90px;
    --hda-header-height-tablet:   65px;
    --hda-header-height-mobile:   63px;
    --hda-announcement-height:    30px;

    /* Capas */
    --hda-z-header:        1000;
    --hda-z-announcement:  999;

    /* Layout */
    --hda-header-max-width: 1400px;
    --hda-header-padding-x: 2rem;
    --hda-header-icon-gap:  1rem;

    /* Tipografía */
    --hda-font-base: 'Founders Grotesk Official', sans-serif;

    /* Interacción */
    --hda-transition-hover: 0.2s ease;
}


/* ============================================================
   2. TOP ANCHOR — spacer
   ============================================================ */
.site-header__top-anchor {
    width: 100%;
    min-height: calc(var(--hda-header-height-desktop) + var(--hda-announcement-height));
    margin: 0;
    padding: 0;
}


/* ============================================================
   3. SITE HEADER — barra fija arriba
   ============================================================ */
.site-header__container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--hda-color-primary);
    z-index: var(--hda-z-header);
    /* Smooth scroll-hide */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Inner — chained .e-flex for specificity match against Elementor defaults */
.site-header__container.e-flex > .e-con-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 52rem;
    max-width: var(--hda-header-max-width);
    /* min-height forzada — sin esto, cuando se oculta el logo en tablet/mobile
     * el header colapsa a la altura de los iconos (~30px) y queda un gap
     * entre el header y el announcement. */
    min-height: var(--hda-header-height-desktop);
    margin: 0 auto;
    padding: 0;
    gap: 0;
}

/* --- Menu (izquierda, flex:1 para simetría visual) -------- */
.site-header__menu-container.e-flex {
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    margin: 0;
    padding: 0;
    gap: 0;
}

.site-header__icon-menu .elementor-icon {
    color: var(--hda-color-on-primary) !important;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--hda-transition-hover);
}

.site-header__icon-menu .elementor-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    transition: fill var(--hda-transition-hover);
}

/* Forzar fill en el SVG y su <path> — Elementor/tema pintan con specificity alta */
.site-header__icon-menu .elementor-icon svg,
.site-header__icon-menu .elementor-icon svg path {
    fill: var(--hda-color-on-primary) !important;
}

.site-header__icon-menu:hover .elementor-icon {
    color: var(--hda-color-soft) !important;
}

.site-header__icon-menu:hover .elementor-icon svg,
.site-header__icon-menu:hover .elementor-icon svg path {
    fill: var(--hda-color-soft) !important;
}

/* --- Logo (centrado absoluto del viewport) ---------------- */
.site-header__logo-container.e-flex {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: .6rem 0 .8rem 0;
    gap: 0;
}

.site-header__logo-container--img {
    flex: 0 0 auto;
    background: url("https://floristeriahechizosdeamor.com/wp-content/uploads/2024/01/Floristeria-Hechizos-De-Amor_Logo-Red_Negativo_Color_Red.svg") no-repeat center center;
    background-size: contain;
    width: 11rem;
    height: 4.231rem;
    margin: 0;
    padding: 0;
    transition: opacity var(--hda-transition-hover);
}

.site-header__logo-container--img:hover {
    opacity: 0.85;
}

/* --- Cart container (derecha, flex:1 para simetría) ------- */
.site-header__cart-container.e-flex {
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    margin: 0;
    padding: 0;
    gap: var(--hda-header-icon-gap);
}

/* Reset del wrapper del widget search — Elementor mete margin/padding */
.elementor-widget-lumik-search-icon,
.elementor-widget-lumik-search-icon .elementor-widget-container {
    margin: 0;
    padding: 0;
}

/* Search trigger button */
.zenth-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    color: var(--hda-color-on-primary);
    cursor: pointer;
    transition: color var(--hda-transition-hover);
}

.zenth-search-icon svg {
    stroke: currentColor;
    width: 1.5rem;
    height: 1.5rem;
}

.zenth-search-icon:hover {
    color: var(--hda-color-soft);
}

/* --- Cart icon (Lumik Cart Icon widget) ------------------ */
/* Reset del wrapper del widget cart — Elementor mete margin/padding */
.elementor-widget-lumik-cart-icon,
.elementor-widget-lumik-cart-icon .elementor-widget-container {
    margin: 0;
    padding: 0;
}

/* Botón del icono del carrito */
.zenth-cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    color: var(--hda-color-on-primary);
    cursor: pointer;
    transition: color var(--hda-transition-hover);
}

.zenth-cart-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

.zenth-cart-icon:hover {
    color: var(--hda-color-soft);
}

/* Badge de cantidad — círculo crema con número burgundy */
.zenth-cart-icon__count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: var(--hda-color-on-primary);
    color: var(--hda-color-primary);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   4. ANNOUNCEMENT — barra fija debajo del header
   ============================================================ */
.announcement-container {
    position: fixed;
    top: var(--hda-header-height-desktop);
    left: 0;
    right: 0;
    width: 100%;
    height: var(--hda-announcement-height);
    margin: 0;
    padding: 0;
    background-color: var(--hda-color-soft);
    z-index: var(--hda-z-announcement);
    /* Smooth scroll-hide (sincronizado con .site-header__container) */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.announcement-container.e-flex {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.announcement-container .elementor-widget-lumik-announcement {
    width: 100%;
}

.announcement-container .lumik-announcement {
    height: var(--hda-announcement-height);
}

.announcement-container .lumik-announcement__msg {
    font-family: var(--hda-font-base);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--hda-color-primary);
    margin: 0;
}


/* ============================================================
   5. SCROLL BEHAVIOR — hide on scroll down, show on scroll up
   ============================================================
   La clase `.is-hidden` la añade JS (header-scroll.js) cuando el
   usuario scrollea hacia abajo, y la quita cuando scrollea hacia
   arriba o vuelve al top de la página.

   Tanto el header como el announcement se traducen hacia arriba
   por la altura combinada de ambos, así desaparecen como una
   unidad y reaparecen juntos.
   ============================================================ */
.site-header__container.is-hidden,
.announcement-container.is-hidden {
    transform: translateY(calc(-1 * (var(--hda-header-height-desktop) + var(--hda-announcement-height))));
}

@media screen and (max-width: 1024px) {
    .site-header__container.is-hidden,
    .announcement-container.is-hidden {
        transform: translateY(calc(-1 * (var(--hda-header-height-tablet) + var(--hda-announcement-height))));
    }
}

@media screen and (max-width: 767px) {
    .site-header__container.is-hidden,
    .announcement-container.is-hidden {
        transform: translateY(calc(-1 * (var(--hda-header-height-mobile) + var(--hda-announcement-height))));
    }
}


/* ============================================================
   6. ZENTH SEARCH MODAL — alinear acento con marca
   ============================================================ */
.zenth-search-root {
    --zenth-search-accent: var(--hda-color-primary);
    --zenth-search-selected-bg: rgba(122, 13, 19, 0.08);
}


/* ============================================================
   6b. ZENTH CART DRAWER — alinear con la marca
   ============================================================
   Uso `body .zenth-cart-root` (specificity 0,0,1,1) para vencer
   los defaults del cart.css del plugin (que tiene 0,0,1,0). Sin
   esto, dependeríamos del orden de carga de los stylesheets.
   ============================================================ */

/* Variables override — los tokens neutros del plugin se reemplazan
 * por los de marca de Hechizos de Amor. Como cart.css usa estas
 * variables internamente, casi todos los elementos heredan el
 * cambio automáticamente (botón primario, progress bar, empty CTA). */
body .zenth-cart-root {
    --zenth-cart-accent:    var(--hda-color-primary);
    --zenth-cart-accent-on: var(--hda-color-on-primary);
}

/* --- Progress bar de envío gratis ------------------------- */
/* Más alta y con gradiente sutil para que se note. */
body .zenth-cart-shipping__bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(122, 13, 19, 0.12);
}

body .zenth-cart-shipping__bar-fill {
    background: linear-gradient(90deg, var(--hda-color-primary), #9C2D2E);
    border-radius: 3px;
}

/* --- Botón secundario "Ver carrito" ----------------------- */
/* Outline burgundy + texto burgundy + hover crema (como pediste). */
body .zenth-cart-drawer__btn--secondary {
    color: var(--hda-color-primary);
    border-color: var(--hda-color-primary);
}

body .zenth-cart-drawer__btn--secondary:hover {
    background: var(--hda-color-on-primary);
    color: var(--hda-color-primary);
    border-color: var(--hda-color-primary);
}

/* --- Botón primario "Finalizar compra" -------------------- */
/* El bg ya viene burgundy vía la variable. Reforzamos hover. */
body .zenth-cart-drawer__btn--primary:hover {
    background: #5C0A0F;  /* burgundy ligeramente más oscuro */
    opacity: 1;
}

/* --- Hover sutil en items del carrito --------------------- */
body .zenth-cart-item {
    transition:
        background-color 0.15s ease,
        opacity 0.2s ease,
        transform 0.2s ease;
}

body .zenth-cart-item:hover {
    background-color: rgba(122, 13, 19, 0.03);
}

/* --- Footer: levemente más aire --------------------------- */
body .zenth-cart-drawer__footer {
    padding: 1.5rem 1.5rem 1.25rem;
}

body .zenth-cart-drawer__subtotal {
    margin-bottom: 1.25rem;
}

body .zenth-cart-drawer__buttons {
    gap: 0.6rem;
}

/* --- Title con la tipografía de la marca ------------------ */
body .zenth-cart-drawer__title {
    font-family: var(--hda-font-base);
    color: var(--hda-color-primary);
    letter-spacing: 0.01em;
}

/* --- Subtotal amount con el tono de marca ----------------- */
body .zenth-cart-drawer__subtotal-amount {
    color: var(--hda-color-primary);
}


/* ============================================================
   7. RESPONSIVE — DESKTOP (≥ 1025px)
   ============================================================ */
@media screen and (min-width: 1025px) {
    .announcement-container .elementor-widget-lumik-announcement {
        width: 66%;
    }
}


/* ============================================================
   8. RESPONSIVE — TABLET (≤ 1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {
    .site-header__top-anchor {
        min-height: calc(var(--hda-header-height-tablet) + var(--hda-announcement-height));
    }

    .announcement-container {
        top: var(--hda-header-height-tablet);
    }

    .site-header__container.e-flex > .e-con-inner {
        width: 80%;
        /* min-height tablet — coincide con la posición del announcement */
        min-height: var(--hda-header-height-tablet);
    }

    /* Ocultar logo en tablet/mobile (specificity para vencer .e-flex) */
    .site-header__logo-container.e-flex {
        display: none;
    }
}


/* ============================================================
   9. RESPONSIVE — MOBILE (≤ 767px)
   ============================================================ */
@media screen and (max-width: 767px) {
    .site-header__top-anchor {
        min-height: calc(var(--hda-header-height-mobile) + var(--hda-announcement-height));
    }

    .announcement-container {
        top: var(--hda-header-height-mobile);
    }

    .site-header__container.e-flex > .e-con-inner {
        width: 100%;
        padding: 0 1rem;
        /* min-height mobile — coincide con la posición del announcement */
        min-height: var(--hda-header-height-mobile);
    }

    .announcement-container .lumik-announcement__msg {
        font-size: 1.1rem;
    }
}