/* CM Menu North Over Header Positioning Styles */

/* Base overlay styles when positioning is active */
#north-menu.menu-overlay-active {
    position: absolute !important;
    z-index: 9999;
    /* Remove any default margins that might interfere */
    margin: 0 !important;
    /* Ensure menu doesn't stretch full width when overlaying */
    width: auto;
}

/* Ensure the navigation container doesn't interfere when overlay is active */
.menu-overlay-active-container #navigation-container {
    position: static !important;
}

/* Optional: Add transition for smooth repositioning */
#north-menu.menu-overlay-active {
    transition: top 0.3s ease, left 0.3s ease, transform 0.3s ease;
}

/* Ensure menu remains interactive when overlaying */
#north-menu.menu-overlay-active .menu-container {
    position: relative;
    z-index: 1;
}

/* Handle different alignment classes when in overlay mode */
#north-menu.menu-overlay-active.north-menu-left .menu-container {
    justify-content: flex-start;
}

#north-menu.menu-overlay-active.north-menu-center .menu-container {
    justify-content: center;
}

#north-menu.menu-overlay-active.north-menu-right .menu-container {
    justify-content: flex-end;
}

/* Ensure dropdown menus work properly in overlay mode */
#north-menu.menu-overlay-active #n-menu-dynamic-container {
    position: absolute;
    z-index: 10000;
}

/* Debug helper class (remove in production) */
.header-container-outline {
    outline: 2px dashed red !important;
}