/* Enhanced Sticky Menu Fix */
html {
    scroll-padding-top: 60px; /* Adjust based on your menu height */
}

body {
    overflow-x: hidden;
    position: relative;
}

/* Only make the menu container sticky, not the entire header */
#menu-container.sticky-menu-container {
    position: relative;
    z-index: 1001 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* When the menu becomes sticky */
#menu-container.sticky-menu-container.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: stickySlideDown 0.3s forwards;
}

/* Hide on scroll down, show on scroll up */
#menu-container.sticky-menu-container.hide-on-scroll {
    transform: translateY(-100%);
}

@keyframes stickySlideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Ensure content doesn't jump when menu becomes sticky */
.sticky-spacer {
    display: none;
    height: 60px; /* Same as menu height */
}

.sticky-active + .sticky-spacer {
    display: block;
}

/* Fix for article content to ensure it doesn't overlap with submenus */
.article-content-wrapper {
    position: relative;
    z-index: 10; /* Lower than the menu z-index */
    padding-top: 40px; /* Add extra padding to ensure content is below the submenu */
    margin-top: 20px;
}

/* Smooth transition for submenu appearance */
.submenu {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
    z-index: 1002 !important; /* Higher than the menu container */
}

/* Ensure search icon stays in the menu bar */
.search-menu-item {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Ensure search icon is properly aligned with menu items */
.search-menu-item a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    #menu-container.sticky-menu-container {
        position: relative !important; /* Don't make sticky on mobile */
    }

    #menu-container.sticky-menu-container.sticky {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
    }
}