/* =========================================
   BASE STYLES & MOBILE VIEW (Max Width 991px)
   ========================================= */

/* 1. The Menu Bar */
.main-nav {
    background-color: #1B2722; 
    font-family: sans-serif;
    
    position: -webkit-sticky; /* For Safari compatibility */
    position: sticky;
    top: 0;
    z-index: 9999; /* Ensures the menu stays on top of the scrolling content/images below it */
}

.nav-list, .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 5. The Hamburger Button */
.mobile-menu-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background-color: #1B2722;
    color: #EAB308; /* Icon color */
    border: none;
    padding: 15px 20px;
    font-size: 18px;
    cursor: pointer;
}

.dropdown-icon {
    float: right;
    color: #EAB308;
}

/* Hide the main menu on mobile by default */
.nav-list {
    display: none; 
    flex-direction: column;
}

/* 2. Menu Items (Mobile layout) */
.nav-list > li > a {
    display: block;
    padding: 15px 20px;
    background-color: #2C3E35;
    color: #E2E8F0;
    text-decoration: none;
    border-bottom: 1px solid #1B2722;
}

/* 3. Sub-Menu Items */
.sub-menu {
    display: none; /* Hidden by default on mobile, toggled via JS */
}

.sub-menu > li > a {
    display: block;
    padding: 12px 20px 12px 40px; /* Indented for mobile hierarchy */
    background-color: #3A4F44;
    color: #CBD5E1;
    text-decoration: none;
    border-bottom: 1px solid #2C3E35;
}

/* 4. Hover States */
.nav-list a:hover, 
.mobile-menu-toggle:hover {
    background-color: #D97743;
    color: #FFFFFF;
}


/* =========================================
   DESKTOP VIEW (Min Width 992px)
   ========================================= */
@media (min-width: 992px) {
    
    /* Hide Hamburger on Desktop */
    .mobile-menu-toggle {
        display: none;
    }

    /* Convert to Horizontal Bar */
    .nav-list {
        display: flex; /* Makes items sit side-by-side */
        flex-direction: row;
        flex-wrap: wrap;  
    }

    .nav-list > li > a {
        background-color: #1B2722;
        color: #F8FAFC;
        border: none;
    }

    /* Position Sub-menus absolutely for Desktop Dropdowns */
    .nav-list li {
        position: relative;
    }

    .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        z-index: 9999;
    }

    /* Level 3 Dropdown (Arts nested inside Department) */
    .child-menu {
        top: 0;
        left: 100%; /* Pushes the 3rd level menu out to the right side */
    }

    /* Show dropdowns on hover purely with CSS for Desktop */
    .nav-list li.has-dropdown:hover > .sub-menu {
        display: block;
    }

    /* Reset padding for desktop dropdowns */
    .sub-menu > li > a {
        padding: 15px 20px;
    }
}