/* Holds both the desktop and mobile menu */
#navigation-container {
    z-index: 15;
    width: 100%;
    /* Remove debug background color */
    border: 0px solid blue;
}
/* to make sure the span text is centered and not pushed down 
   it's a hack but it helps */
#north-menu .cm-main-heading {
    padding-bottom: .1em !important;
}
/* Responsive menu state classes - higher specificity to override ID selectors */
#north-menu.north-menu-hidden {
    position: absolute !important;
    z-index: -1 !important;
    height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

#north-menu.north-menu-visible {
    position: relative !important;
    z-index: 10 !important;
    height: auto !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#n-menu-dynamic-container {
    overflow-x: hidden !important; /* Prevent horizontal overflow */
    max-width: 100% !important; /* Make sure it doesn't exceed the available space */
    width: auto;
}


/* For full justified */
.north-menu-justified {
    display: flex !important;
    justify-content: space-between !important;
}

/* Ensure each item occupies an equal width */
.north-menu-justified .menu-item {
    flex-grow: 1; /* Makes each item take up equal space */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Ensures text is centered within the item */
    padding: 0 1em; /* Optional: Adjust padding if needed */
}

/* Optional: Ensure the text doesn't overflow the item */
.north-menu-justified .menu-item span {
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* For text overflow handling */
}

/* For centered */
.north-menu-center {
    display: flex;
    justify-content: center;
}

.north-menu-center .menu-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.north-menu-center ul.menu {
    justify-content: center;
}

/* For left-aligned */
.north-menu-left {
    display: flex;
    justify-content: flex-start;
}

.north-menu-left .menu-container {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.north-menu-left ul.menu {
    justify-content: flex-start;
}

/* For right-aligned */
.north-menu-right {
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
}

.north-menu-right .menu-container {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    box-sizing: border-box;
}

.north-menu-right ul.menu {
    justify-content: flex-end;
    box-sizing: border-box;
}

/* Main menu container */

#n-menu-dynamic-container{
  width: auto;
  position: absolute;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

#north-menu {
    position: relative;
    z-index: 1000;
    width: 100%;
    opacity: 0; /* on load in case absolute positioning is used - set to 1 in js */
    box-sizing: border-box;
}

#north-menu .menu-container {
    display: flex;
    /* justify-content: center; */
   /* width: 100%; */
    box-sizing: border-box;
}

/* Default menu item container */
#north-menu ul.menu {
    display: flex;
    /* Remove default centering to allow alignment classes to work */
    margin: 0;
    padding: 0;
}

/* Ensure dropdowns appear above other content */
#north-menu ul.sub-menu {
    z-index: 1001;
}

#north-menu .cm-main-heading{
    /* Padding removed - must be set via Style Tool in client-specific CSS */
    /* No fallback values per SSOT principles */
    cursor: pointer;
}

/* Top-level menu items */
#north-menu .menu-item {
    display: flex;
    justify-content: center;
    align-items: center; /* This will vertically center the text */
    white-space: nowrap;
    text-align: center;
    position: relative;
    cursor: pointer;
    box-sizing: border-box; /* Include padding in height calculation */
}

/* Ensure consistent alignment for items with and without arrows */
#north-menu .menu-item-has-children,
#north-menu .menu-item:not(.menu-item-has-children) {
    display: flex;
    align-items: center;
}

/* Ensure all menu items have the same line height */
#north-menu .cm-main-heading,
#north-menu .menu-item {
    
}

#n-menu-dynamic-container .n-menuitems-active{
    display: block !important;
    width: 100%;
}  

#n-menu-dynamic-container > .n-navbar-active{
    display: block !important;
    width: 100%;
}  

.n-menuitems-not-active {
    display: none;
    width: 100%;
}

#n-menu-dynamic-container > div{
    display: none; 
    width: 100%;
}

.n-menu-nav-bar-visible{
    display:block !important;
}

.cm-main-heading div{
    display:none;
}


.n-menu-heading-active{
    display: block !important;
}

#n-nav-prev{
    text-align: left;
    cursor: pointer;    
}

/* ensures the < arrow is visible when you need it to be */
#north-menu #n-menu-nav-bar #n-nav-prev.n-show-sprite::before {
    visibility: visible; /* Show the sprite when class is applied */
    width: 100%;
}

#n-menu-dynamic-container .menu-item-text{
    padding: .6em .6em .6em .6em;
}
#n-menu-heading-bar{
    padding: .2em 0 .2em 0;
    font-size: clamp(10px, .5vw, 35px);
    text-align: center;
}
#n-nav-prev{
    margin: .2em 0 .2em 0;
    font-size: clamp(13px, 0.4vw, 32px);    
    background: #999999;
    color: white;
}

#north-menu .menu-item-text {
    display: inline-block;
    vertical-align: middle; /* Ensures the text and the arrow are aligned vertically */
}

#north-menu .menu-arrow-right {
    display: inline-block;
    background: white;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    position: relative;
}

@media (min-width: 0px) and (max-width: 400px) {
    #north-menu .menu-arrow-right {
        width: 1.9vw;
        height: 1.9vw;
        top: 0.1vw;
     /*   margin-right: -6px; */
        margin-left: 8px;
    }         
}
@media (min-width: 401px) and (max-width: 550px) {
    #north-menu .menu-arrow-right {
        width: 1.75vw;
        height: 1.75vw;
        top: 0.1vw;
     /*   margin-right: -6px; */
     margin-left: 8px;
    }       
}
@media (min-width: 551px) and (max-width: 700px) {
    #north-menu .menu-arrow-right {
        width: 1.5vw;
        height: 1.5vw;
        top: 0.1vw;
     /*   margin-right: -6px; */
     margin-left: 8px;
    }        
}
@media (min-width: 701px) and (max-width: 850px) {
    #north-menu .menu-arrow-right {
        width: 1.25vw;
        height: 1.25vw;
        top: 0.1vw;
     /*   margin-right: -6px; */
     margin-left: 8px;
    }         
}
@media (min-width: 851px) and (max-width: 1000px) {
    #north-menu .menu-arrow-right {
        width: 1.25vw;
        height: 1.25vw;
        top: 0.1vw;
     /*   margin-right: -6px; */
     margin-left: 8px;
    }      

}
@media (min-width: 1001px) and (max-width: 1400px) {
    #north-menu .menu-arrow-right {
        width: 1vw;
        height: 1vw;
        top: 0.1vw;
     /*   margin-right: -6px; */
     margin-left: 8px;
    }    
}
@media (min-width: 1401px) {
    #north-menu .menu-arrow-right {
        width: 1vw;
        height: 1vw;
        top: 0.1vw;
     /*   margin-right: -6px; */
     margin-left: 12px;
    }        
}


#north-menu {background-color: rgb(29, 86, 161);}
#north-menu .cm-main-heading {background-color:  rgb(29, 86, 161);}
#north-menu .cm-main-heading {color: rgb(255, 255, 255);}
#north-menu .cm-main-heading {padding: 0px;}
#north-menu .cm-section-heading {background-color:  rgb(10, 44, 88);}
#north-menu .cm-section-heading {color: #FFFFFF;}
#north-menu .cm-page-link {background-color: rgb(225,220,199);}
#north-menu .cm-page-link {color: #000000;}
#n-menu-nav-bar {background-color: rgb(213, 226, 230);}
#n-menu-nav-bar {color: #000000;}
#n-menu-heading-bar {background-color: rgb(77, 123, 172);}
#n-menu-heading-bar {color: rgb(255,255,255);}