/*
 * ============================================================================
 * ----------------------------------Menu--------------------------------------
 * ============================================================================
 */
/* General reset for better control */
body {
    margin: 0;
    padding: 0;
}

/* Menu Wrapper - Sets the overall container width and background color */
.wrap-menu {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #004080; /* Dark Blue for the main menu bar */
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.15);
}

/* Main Navigation List */
#menu {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align:left;
    justify-content: center;
}

/* Main Menu Items (LIs) */
#menu > li {
    position: relative;
    display: inline-block; /* Aligns menu items horizontally */
    font-size: 12px;
    font-weight: 700;
    margin: 0;
     margin: 5px 2px;
     color:#004080;
}

/* Main Menu Links (A) */
#menu > li > a {
    display: block;
    padding: 2px 5px; /* Vertical and horizontal padding */
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap; /* Prevents menu items from wrapping */
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease;
}

/* Primary Button Hover/Active State */
#menu > li:hover > a,
#menu > li.active > a {
    background-color: #0073e6; /* Primary Blue background on hover/active */
    color: #fff;
}


/* ----------------------------------Dropdown Menu (Sub-menus)---------------------------------- */

#menu ul {
    position: absolute;
    z-index: 999;
    top: 100%; /* Positions dropdown below the main item */
    left: 0;
    min-width: 220px;
    background: #004080; /* Dark Blue background for dropdown */
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: none; /* Hides the dropdown by default */
}

#menu li:hover > ul {
    display: block; /* Shows the dropdown on hover */
}

#menu ul li {
    display: block; /* Stacks dropdown items vertically */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#menu ul li a {
    display: block;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#menu ul li a:hover {
    background-color: #FF9900; /* Accent Orange background on dropdown hover */
    color: #fff;
}

/* ----------------------------------Mobile Menu Toggle---------------------------------- */

#menu-trigger {
    display: none; /* Hidden on desktop */
    text-align: center;
    padding: 10px;
    background-color: #004080; /* Primary Blue for mobile toggle button */
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
}


/* ----------------------------------Media Queries for Responsiveness---------------------------------- */


@media only screen and (max-width: 992px) {
    /* Shows the toggle button and hides the full menu */
    #menu-trigger {
        display: block;
    }
    
    /* Forces the main menu to stack vertically */
    #menu {
        display: none; /* Hide the menu by default for mobile */
        width: 100%;
        float: none !important;
        text-align: left;
    }
    
    #menu.active {
        display: block; /* Shows the menu when activated by JS */
    }

    /* All LI elements become full width and block display */
    #menu > li {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Dropdowns also become full width, but still controlled by JS/CSS */
    #menu ul {
        position: static; /* Allows dropdown to flow naturally below the main item */
        width: 100%;
        background: rgba(0, 0, 0, 0.3); /* Slightly transparent background for sub-menu */
    }

    #menu ul li a {
        padding-left: 40px; /* Indent sub-menu links */
    }
}