/**
 * Header Sticky Fix
 * v1.0.0 - 4 de Noviembre, 2025
 * 
 * Soluciona:
 * - position: sticky que no funciona por overflow en containers
 * - body con position: relative que rompe el sticky
 * - JavaScript search que no muestra resultados
 * 
 * @package FlyntChild
 */

/* ========================================================================
   FIX CRÍTICO: Body position para permitir sticky
   ======================================================================== */

/**
 * PROBLEMA: body con position: relative rompe position: sticky
 * SOLUCIÓN: Remover position: relative del body
 */
body {
    position: static !important; /* Cambiado de relative a static */
}

/* ========================================================================
   HEADER STICKY - Asegurar que funcione correctamente
   ======================================================================== */

/**
 * Asegurar que navigationHeader mantenga position: sticky
 * y que sus containers no tengan overflow: hidden
 * 
 * CRÍTICO: Usar selectores más específicos para máxima prioridad
 */
/* ========================================================================
   FIX ULTRA-AGRESIVO: Header Sticky con múltiples selectores
   ======================================================================== */

/* Selectores múltiples para máxima especificidad - USAR FIXED DIRECTAMENTE */
.navigationHeader,
div.navigationHeader,
header.navigationHeader,
[data-component="NavigationHeader"],
header[data-component="NavigationHeader"],
div[data-component="NavigationHeader"],
body .navigationHeader,
body div.navigationHeader,
body header.navigationHeader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    overflow: visible !important;
    background: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

/* Asegurar que NINGÚN ancestro tenga overflow hidden */
html,
body,
body > *:not(.navigationHeader),
body > *:not(.navigationHeader) > * {
    /* NO poner overflow: hidden aquí - rompe sticky */
}

/* Asegurar que body permita scroll vertical */
body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: static !important; /* CRÍTICO: NO relative */
    height: auto !important; /* Permitir que body tenga altura automática */
}

/* Asegurar que html permita scroll */
html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important; /* Permitir que html tenga altura automática */
}

/* CRÍTICO: Asegurar que ningún contenedor entre body y header tenga overflow */
body > *:not(.navigationHeader) {
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

/* Si sticky no funciona, el JavaScript cambiará a fixed - este CSS prepara el fallback */
.navigationHeader[style*='position: fixed'] {
    position: fixed !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* Agregar padding-top al body cuando el header es fixed (lo hará el JS) */
body[style*='padding-top'] {
    /* Permitir que el JS agregue el padding */
}

/* Subcontainers también deben permitir overflow visible */
.navigationHeader-announcement,
.navigationHeader-main,
.navigationHeader-secondary,
.navigationHeader-main-inner,
.navigationHeader-secondary-inner {
    overflow: visible !important;
}

/* Asegurar que ningún ancestro tenga overflow hidden */
html,
body,
body > *:not(.navigationHeader) {
    /* NO poner overflow: hidden aquí - rompe sticky */
}

/* Asegurar que el header tenga un contenedor scrolleable */
body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ========================================================================
   FIX: Search Results Panel - Asegurar z-index correcto
   ======================================================================== */

/**
 * El panel de resultados de búsqueda debe estar ENCIMA del contenido
 * pero DEBAJO de los mega menús y mobile menu
 */
/* FIX CRÍTICO: Search Results Panel - OCULTO POR DEFECTO */
.navigationHeader-search-results,
[data-search-results] {
    position: absolute !important;
    z-index: 500 !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    /* OCULTO POR DEFECTO - solo se muestra cuando hay resultados */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Cuando NO tiene clase hidden y tiene contenido, mostrarlo */
.navigationHeader-search-results:not(.hidden):not(:empty),
[data-search-results]:not(.hidden):not(:empty) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Cuando tiene clase hidden, forzar oculto */
.navigationHeader-search-results.hidden,
[data-search-results].hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Asegurar que el contenedor de búsqueda permita absolute positioning */
.navigationHeader-search {
    position: relative !important;
    z-index: 501 !important; /* Justo encima de results */
}

/* Input de búsqueda debe ser visible */
.navigationHeader-search-input,
[data-search-input] {
    position: relative !important;
    z-index: 502 !important;
}

/* ========================================================================
   MOBILE MENU - Z-index hierarchy
   ======================================================================== */

.navigationHeader-mobileToggle {
    position: relative !important;
    z-index: 101 !important; /* Encima del header principal */
}

/* FIX: Overlay oscuro para el menú móvil */
.navigationHeader-mobileOverlay,
[data-mobile-overlay] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right:auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important; /* Fondo oscuro semi-transparente */
    backdrop-filter: blur(2px) !important; /* Efecto blur sutil */
    z-index: 9998 !important; /* Debajo del menú (9999) pero encima de todo lo demás */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    pointer-events: none !important; /* No bloquear clics cuando está oculto */
}

/* Cuando el overlay está abierto */
.navigationHeader-mobileOverlay.is-open,
[data-mobile-overlay].is-open,
body.navigationHeader-mobileMenu-open .navigationHeader-mobileOverlay,
body.navigationHeader-mobileMenu-open [data-mobile-overlay] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* Permitir clics cuando está visible */
    z-index: 99998 !important; /* Justo debajo del menú (99999) pero por encima de todo lo demás */
}

/* FIX: Menú móvil debe tener altura completa y estar POR ENCIMA DE TODO */
.navigationHeader-mobileMenu,
[data-mobile-menu] {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: auto !important;
    width: 320px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    z-index: 99999 !important; /* Z-index ULTRA ALTO para estar por encima de TODO */
    background: white !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Asegurar que el menú móvil esté por encima de TODO cuando está abierto */
body.navigationHeader-mobileMenu-open .navigationHeader-mobileMenu,
body.navigationHeader-mobileMenu-open [data-mobile-menu] {
    z-index: 99999 !important; /* Z-index ULTRA ALTO - por encima de filtros, botones, etc */
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
}

/* Cuando el menú está abierto, forzar que esté por encima de todo */
body.navigationHeader-mobileMenu-open .navigationHeader-mobileMenu.is-open,
body.navigationHeader-mobileMenu-open [data-mobile-menu].is-open {
    z-index: 99999 !important;
    position: fixed !important;
}

/* FORZAR: Todos los elementos de shop-now deben estar DEBAJO del menú móvil */
body.navigationHeader-mobileMenu-open .filters-toggle-btn,
body.navigationHeader-mobileMenu-open .sidebar,
body.navigationHeader-mobileMenu-open .sidebar-overlay,
body.navigationHeader-mobileMenu-open .shopHeader,
body.navigationHeader-mobileMenu-open .shopContent,
body.navigationHeader-mobileMenu-open [class*="shop"],
body.navigationHeader-mobileMenu-open [class*="filter"],
body.navigationHeader-mobileMenu-open [class*="sidebar"]:not(.navigationHeader-mobileMenu) {
    z-index: 1 !important; /* Forzar que estén por debajo del menú móvil */
}

/* Asegurar que el botón de filtro no esté por encima del menú móvil */
body.navigationHeader-mobileMenu-open .filters-toggle-btn {
    z-index: 1 !important;
    position: relative !important;
}

/* ========================================================================
   MEGA MENU - Z-index and positioning
   ======================================================================== */

.navigationHeader-megamenu-content {
    position: fixed !important;
    z-index: 999 !important; /* Justo debajo del header sticky (1000) */
}

/* ========================================================================
   DEBUGGING: Console log fix (remover en producción)
   ======================================================================== */

/**
 * Si el JavaScript no se está inicializando, puede ser porque:
 * 1. El componente no tiene el atributo data-component="NavigationHeader"
 * 2. El script no está cargando
 * 3. Hay un error JavaScript que previene la ejecución
 * 
 * Para debug: Abrir consola (F12) y buscar:
 * - "NavigationHeader: Inicializando componente"
 * - Errores en rojo
 */

/* ========================================================================
   NOTAS TÉCNICAS
   ======================================================================== */

/**
 * Z-INDEX HIERARCHY FINAL:
 * 
 * 2000  - Admin bar (si está logueado)
 * 1999  - Mobile menu sidebar
 * 1998  - Mobile menu overlay
 * 1100  - Submenus del header principal
 * 1000  - Header sticky (navigationHeader)
 * 999   - Mega menus del header secundario
 * 500   - Search results panel
 * 150   - Dropdowns del header secundario
 * 101   - Mobile menu toggle button
 * 100   - Header secundario (barra roja)
 * 
 * IMPORTANTE: position: sticky requiere:
 * ✅ No tener overflow: hidden en ningún ancestro
 * ✅ No tener position: relative en body
 * ✅ Tener top, bottom, left o right definido
 * ✅ Tener un contenedor scrolleable (normalmente body/html)
 */