/**
 * Header Submenu Z-Index Fix
 * v1.0.0
 * 
 * Arregla:
 * - Submenús del header principal que se ven por debajo de otros elementos
 * - Asegura que los dropdowns siempre estén visibles encima del header secundario
 */

/* ========================================================================
   NAVIGATION HEADER: Z-INDEX HIERARCHY
   ======================================================================== */

/* Header principal - base */
.navigationHeader {
    z-index: 1000 !important;
}

/* Menu principal y sus items */
.navigationHeader-nav,
.navigationHeader-menu {
    position: relative !important;
    z-index: auto !important;
}

.navigationHeader-menu-item {
    position: relative !important;
    z-index: auto !important;
}

/* SUBMENUS - Máxima prioridad para que se vean ENCIMA de todo */
.navigationHeader-submenu {
    position: absolute !important;
    z-index: 1100 !important; /* Mayor que el header (1000) */
}

/* Asegurar que cuando está visible tenga aún más prioridad */
.navigationHeader-menu-item:hover .navigationHeader-submenu,
.navigationHeader-submenu:hover {
    z-index: 1100 !important;
}

/* ========================================================================
   MENU SECUNDARIO: Debe estar DEBAJO de los submenus principales
   ======================================================================== */

.navigationHeader-secondary {
    position: relative !important;
    z-index: 100 !important; /* Menor que submenus (1100) */
}

/* Dropdowns del menú secundario - debajo de submenus principales */
.navigationHeader-dropdown-menu {
    z-index: 150 !important; /* Mayor que secondary (100) pero menor que submenu (1100) */
}

/* Megamenus del menú secundario - debajo de submenus principales */
.navigationHeader-megamenu-content {
    z-index: 150 !important; /* Mismo nivel que dropdowns secundarios */
}

/* ========================================================================
   HEADER ACTIONS: No interferir con submenus
   ======================================================================== */

.navigationHeader-actions {
    position: relative !important;
    z-index: 50 !important; /* Debajo de todo */
}

.navigationHeader-cart,
.navigationHeader-actions-link {
    position: relative !important;
    z-index: 51 !important;
}

/* ========================================================================
   MOBILE MENU: Por encima de todo cuando está abierto
   ======================================================================== */

.navigationHeader-mobileOverlay {
    z-index: 1998 !important;
}

.navigationHeader-mobileMenu {
    z-index: 1999 !important;
}

/* ========================================================================
   SEARCH RESULTS: Debajo de submenus pero encima del contenido
   ======================================================================== */

.navigationHeader-search-results {
    z-index: 200 !important; /* Debajo de submenus (1100) */
}

/* ========================================================================
   ASEGURAR QUE EL HEADER NO CORTE LOS SUBMENUS
   ======================================================================== */

.navigationHeader-main,
.navigationHeader-main-inner {
    overflow: visible !important;
}

.navigationHeader-nav {
    overflow: visible !important;
}

.navigationHeader-menu {
    overflow: visible !important;
}

/* ========================================================================
   HIERARCHY VISUAL REFERENCE:
   
   Z-INDEX LAYERS (de mayor a menor):
   
   2000+  Mobile Menu (cuando está abierto)
   1100   Submenus del menú principal ← MÁXIMA PRIORIDAD
   1000   Header principal (sticky)
   200    Search results
   150    Dropdowns/Megamenus del menú secundario
   100    Menú secundario (barra roja)
   50-51  Header actions (login, cart)
   
   ======================================================================== */

/* ========================================================================
   DEBUGGING: Agregar borde visual a submenus (comentar en producción)
   ======================================================================== */

/*
.navigationHeader-submenu {
    border: 2px solid red !important;
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.2) !important;
}
*/