/*
 * Component: Cabecera
 *
 * ARQUITECTURA
 * ─────────────────────────────────────────────────────────────────────────────
 * ESCRITORIO – FLOTANTE (sin scroll):
 *
 *   site-header              → fijo, transparente, padding-top: 16px
 *   └── header-wrap          → max-width: 1320px, centrado
 *       └── header-bar       → display:grid (1fr auto 1fr), blanco, sombra, h:64px
 *           ├── left (1fr)   → navegación alineada a la izquierda
 *           ├── logo-anchor  → reserva 160px de ancho; height: 64px (igual a la barra)
 *           │   └── logo     → position:absolute, top:50%, translateY(-50%), h:92px
 *           │                  → desborda 14px ARRIBA y 14px ABAJO de la barra
 *           │                  → la barra visualmente atraviesa el bloque de logo
 *           └── right (1fr)  → CTA alineado a la derecha; hamburguesa oculta
 *
 * ESCRITORIO – STICKY (.is-sticky):
 *   site-header              → padding-top: 0, fondo blanco, sombra
 *   header-bar               → fondo transparente (se fusiona con site-header)
 *   header-logo              → height: 64px → al ras, sin sombra ni borde
 *
 * TABLET / MÓVIL (≤1024px) – FLOTANTE:
 *   site-header              → transparente, padding: 12px 16px 0
 *                              (los 16px crean el efecto "caja flotante" con gap lateral)
 *   header-bar               → display:flex, blanco, sombra
 *   header-logo-anchor       → static, flex:1 → logo queda a la IZQUIERDA
 *   header-bar__left         → display:none
 *   menu-toggle              → display:flex → DERECHA
 *
 * TABLET / MÓVIL – STICKY (.is-sticky):
 *   site-header              → padding: 0, fondo blanco, sombra
 *   header-bar               → transparente (igual que en escritorio sticky)
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ==========================================================================
   1. Site-header – capa fija transparente con padding superior
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-header);
    padding-top: 16px;
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease, padding-top 0.3s ease;
}

/* STICKY: fondo verde de ancho completo, padding a cero */
.site-header.is-sticky {
    padding-top: 0;
    background: var(--color-green, #a6ce39);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}


/* ==========================================================================
   2. Header-wrap – contenedor centrado de ancho máximo
   ========================================================================== */

.header-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0; /* header-bar tiene su propio padding interno */
}


/* ==========================================================================
   3. Header-bar – la barra blanca visible (flotante en escritorio)
   ========================================================================== */

.header-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 64px;
    background: var(--color-green, #a6ce39);
    box-shadow: 0 2px 28px rgba(0, 0, 0, 0.10);
    overflow: visible; /* CRÍTICO: permite que el logo sobresalga arriba y abajo */
    position: relative;
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* STICKY: la barra se vuelve transparente y se fusiona con el site-header blanco */
.site-header.is-sticky .header-bar {
    box-shadow: none;
    background: transparent;
}


/* ==========================================================================
   4. Header-bar__left – columna izquierda (navegación, solo escritorio)
   ========================================================================== */

.header-bar__left {
    display: flex;
    align-items: center;
    padding-left: 32px;
    padding-right: 24px; /* margen de separación con el logo */
}

.header-nav {
    display: flex;
    align-items: center;
}

.header-nav__menu {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav__menu a {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: opacity 0.2s;
}

.header-nav__menu a:hover {
    opacity: 0.6;
    text-decoration: none;
}

/* Nav icon – matches text cap-height exactly */
.header-nav__menu .nav-icon {
    font-size: 0.875em;
    opacity: 0.7;
    margin-right: 0.3rem;
    vertical-align: -0.05em;
}


/* ==========================================================================
   5. Header-logo-anchor – columna central, reserva el espacio horizontal del logo
      El logo visible (.header-logo) es position:absolute y desborda
      por encima y por debajo del anchor (y de la barra).
   ========================================================================== */

.header-logo-anchor {
    position: relative;
    width: 160px;
    height: 64px; /* igual a la barra; el logo desborda este valor */
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   6. Header-logo – el bloque elevado que intersecta la barra

      Matemática:
        Barra h: 64px
        Logo  h: 92px
        Desborde: (92 - 64) / 2 = 14px arriba + 14px abajo
        top: 50%  +  translateY(-50%)  →  centrado en la línea media de la barra
   ========================================================================== */

.header-logo {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 92px;

    background: var(--color-green, #a6ce39);
    border: 1px solid transparent;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    z-index: 2;

    transition: height 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* STICKY: logo queda al ras de la barra, sin sombra ni borde */
.site-header.is-sticky .header-logo {
    height: 64px;
    box-shadow: none;
    border-color: transparent;
}

/* Imagen de logo personalizado */
.header-logo .custom-logo {
    height: 44px;
    width: auto;
    display: block;
    transition: height 0.3s ease;
}

.site-header.is-sticky .header-logo .custom-logo {
    height: 36px;
}

/* Logo texto (fallback si no hay imagen) */
.header-logo__link {
    font-family: var(--font-display, 'Billion Dreams', serif);
    font-size: 1.9rem;
    font-weight: 400;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
    line-height: 1;
}

.header-logo__link:hover {
    opacity: 0.75;
    text-decoration: none;
}


/* ==========================================================================
   7. Header-bar__right – columna derecha (CTA + hamburguesa)
   ========================================================================== */

.header-bar__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-right: 32px;
    padding-left: 24px; /* margen de separación con el logo */
}

/* Botón CTA */
.header-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    background-color: var(--color-green, #a6ce39);
    border: 1px solid #000;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s;
}

.header-cta-btn:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
    opacity: 0.88;
    text-decoration: none;
}

/* Cart icon button */
.header-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 36px;
    height: 36px;
    color: #000;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.header-cart-btn:hover {
    opacity: 0.65;
    text-decoration: none;
}

/* Cart count badge */
.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    background: #dc2626;
    color: #fff;
    border: none;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}


/* ==========================================================================
   11. Cart icon attention animation (fires when cart has items)
   ========================================================================== */

@keyframes cart-attention {
    0%, 70%, 100% { transform: rotate(0deg); }
    75%            { transform: rotate(-14deg); }
    82%            { transform: rotate(12deg); }
    89%            { transform: rotate(-8deg); }
    96%            { transform: rotate(5deg); }
}

body.cart-has-items .header-cart-btn i {
    display: inline-block;
    transform-origin: top center;
    animation: cart-attention 4s ease-in-out 1.5s infinite;
}


/* ==========================================================================
   8. Hamburguesa – oculta en escritorio, visible en móvil/tablet
   ========================================================================== */

.menu-toggle {
    display: none; /* flex en ≤1024px */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: relative;
    flex-shrink: 0;
    color: #000;
}

.menu-toggle span {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease;
    transform-origin: center;
}

.menu-toggle span:nth-child(1) { top: 12px; }
.menu-toggle span:nth-child(2) { top: 19px; }
.menu-toggle span:nth-child(3) { top: 26px; }

/* Hamburguesa → X cuando el drawer está abierto */
body.drawer--open .menu-toggle span:nth-child(1) {
    transform: rotate(45deg);
    top: 19px;
}

body.drawer--open .menu-toggle span:nth-child(2) {
    opacity: 0;
}

body.drawer--open .menu-toggle span:nth-child(3) {
    transform: rotate(-45deg);
    top: 19px;
}


/* ==========================================================================
   9. Tablet / Móvil (≤1024px)
      El header sigue siendo flotante (caja, no ancho completo) antes del scroll.
      El logo pasa a ser estático → queda a la IZQUIERDA.
      La hamburguesa queda a la DERECHA (último elemento flex).
   ========================================================================== */

@media (max-width: 1024px) {

    /* Mantener efecto flotante: header transparente, padding lateral = gap lateral visible */
    .site-header {
        padding: 12px 16px 0;
        transition: background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
    }

    /* STICKY móvil: fondo verde ancho completo, gap lateral desaparece */
    .site-header.is-sticky {
        padding: 0;
        background: var(--color-green, #a6ce39);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    /* header-wrap: ancho completo en móvil */
    .header-wrap {
        max-width: 100%;
    }

    /* header-bar: flex en lugar de grid en móvil */
    .header-bar {
        display: flex;
        height: 60px;
        /* Mantiene fondo blanco y sombra para el efecto caja flotante */
    }

    /* STICKY móvil: bar se fusiona con site-header blanco */
    .site-header.is-sticky .header-bar {
        box-shadow: none;
        background: transparent;
    }

    /* ── Logo: vuelve al flujo flex, queda a la IZQUIERDA ── */
    .header-logo-anchor {
        position: static;
        width: auto;
        height: auto;
        align-self: auto;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 16px;
    }

    /* header-logo es estático en tablet/móvil (sin overflow arriba/abajo) */
    .header-logo,
    .site-header.is-sticky .header-logo {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        height: auto;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0;
        justify-content: flex-start;
        transition: none;
    }

    /* Ocultar navegación de escritorio */
    .header-bar__left {
        display: none;
    }

    /* Derecha: mostrar hamburguesa, ajustar padding */
    .header-bar__right {
        flex: 0 0 auto;
        padding-right: 12px;
        padding-left: 0;
    }

    /* Mostrar hamburguesa */
    .menu-toggle {
        display: flex;
    }
}


/* ==========================================================================
   10. Móvil puro (≤768px) – ocultar CTA
   ========================================================================== */

@media (max-width: 768px) {
    .header-cta-btn {
        display: none;
    }

    .header-bar__right {
        padding-right: 8px;
    }
}