/**
 * Fix for dropdown menus being hidden behind swiper/slider on homepage
 *
 * Problem 1: Nav has z-index: 99, but swiper creates a stacking context
 * Problem 2: Swiper has pointer-events: auto which intercepts mouse events
 * Problem 3: Gap between menu and dropdown causes hover to break when passing through drag zone
 * Solution: Position dropdown IMMEDIATELY under menu with invisible bridge
 */

/* Increase header and nav z-index */
header.header-with-topbar {
    z-index: 1050 !important;
}

.navbar-expand-lg,
nav.navbar,
.navbar {
    z-index: 1050 !important;
}

/* CRITICAL: Position dropdown items to stay open when hovering */
.nav-item.dropdown,
.nav-item.dropdown-with-icon {
    position: relative;
}

/* Ensure dropdown menus have proper z-index AND pointer-events */
.dropdown-menu {
    z-index: 1051 !important;
    pointer-events: auto !important;
    margin-top: 0 !important; /* NO GAP between menu and dropdown */
    border-top: none !important; /* Remove border that creates visual gap */
}

/* CRITICAL FIX: Add invisible bridge above dropdown to prevent hover break */
/* This creates a seamless transition zone from menu to dropdown */
.dropdown-menu::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important; /* Extend 20px ABOVE the dropdown */
    left: 0 !important;
    right: 0 !important;
    height: 20px !important;
    background: transparent !important;
    pointer-events: auto !important; /* CRITICAL: This keeps the hover active */
    z-index: 1051 !important;
}

/* Language switcher dropdown */
.nav-item.dropdown .dropdown-menu {
    z-index: 1051 !important;
    pointer-events: auto !important;
}

/* Submenu dropdowns */
.nav-item.dropdown-with-icon .dropdown-menu {
    z-index: 1051 !important;
    pointer-events: auto !important;
}

/* CRITICAL FIX: Prevent swiper from intercepting mouse events in header area */
/* This allows users to hover over and click dropdown menus */
.swiper.full-screen,
.swiper.full-screen .swiper-wrapper,
.swiper.full-screen .swiper-slide {
    /* Allow pointer events only for interactive elements inside swiper */
    pointer-events: none !important;
}

/* Re-enable pointer events for clickable elements inside swiper */
.swiper.full-screen a,
.swiper.full-screen button,
.swiper.full-screen input,
.swiper.full-screen .swiper-pagination,
.swiper.full-screen .swiper-button-next,
.swiper.full-screen .swiper-button-prev {
    pointer-events: auto !important;
}

/* Make sure swiper stays below navigation */
.swiper,
.swiper-wrapper,
.swiper-slide {
    z-index: 1 !important;
}

/* Ensure dropdown stays open when hovering over parent OR dropdown itself */
.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown-with-icon:hover .dropdown-menu,
.dropdown-menu:hover {
    display: block !important;
    pointer-events: auto !important;
}

/* Keep dropdown open when hovering the invisible bridge */
.nav-item.dropdown:hover,
.nav-item.dropdown-with-icon:hover {
    position: relative;
}

/* Make parent nav item taller to provide hover area */
.nav-item.dropdown > .nav-link,
.nav-item.dropdown-with-icon > .nav-link {
    padding-bottom: 15px !important; /* Extra padding to create hover bridge */
}

/* Ensure mobile menu also works properly */
@media (max-width: 991px) {
    .navbar-collapse {
        z-index: 1050 !important;
    }

    /* Re-enable pointer events on mobile since swiper isn't overlapping */
    .swiper.full-screen,
    .swiper.full-screen .swiper-wrapper,
    .swiper.full-screen .swiper-slide {
        pointer-events: auto !important;
    }

    /* Reset dropdown positioning on mobile */
    .dropdown-menu::before {
        display: none !important;
    }
}