/* public/css/menu.css (NEW STYLES) */

/* --- Mobile First Styles --- */
.new-navbar-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1040;
    padding: 0.5rem 1rem;
    transition: background-color 0.4s ease;
    /*background-color: var(--menu-back-ground);*/
}

.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-logo img {
    height: 40px;
    width: auto;
}

.navbar-toggler {
    border: none;
    color: white;
    font-size: 1.5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Active State */
#mainNavCollapse .nav-item.active .nav-link{
    background-color: var(--delta-red);
    color: white;
}

.category-submenu li {
    list-style: none ;
    margin-bottom: 10px;
}
.category-submenu li a{
    text-decoration: none;
    color:white;
    margin-bottom: 5px;
}
.category-submenu li ul{
    margin-left: 40px;
}

#mainNavCollapse {
    background-color: var(--delta-blue-dark);
    position: absolute;
    top: 100%; /* Position below the mobile header */
    left: 0;
    right: 0;
    height: calc(100vh - 56px); /* Adjust 56px to match your mobile header height */
    padding: 1rem;
    overflow-y: auto;
}

#mainNavCollapse .nav-link {
    color: white;
}

#mainNavCollapse .project-group-menu {
    list-style: none;
    padding-left: 1rem;
}

#mainNavCollapse .project-group-menu li {
    margin-bottom: 10px;
}


#mainNavCollapse .project-group-menu a{
    color: white;
    text-decoration: none;
    text-transform: lowercase;
}
.project-group-menu a::first-letter{
    text-transform: uppercase!important;
}


/* --- Desktop Styles (min-width: 992px) --- */
@media (min-width: 992px) {
    .new-navbar-container {
        padding: 5px 2rem;
        /*background-color: transparent;*/
    }

    .desktop-header {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top:30px;
        position: fixed;
        left: 0;
        right: 0;
    }

    /* The Main Nav Rectangle (Blue) - Contains everything */
    .main-nav-links {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--delta-blue-dark, #2E388D);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 8px 20px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        gap: 1rem;
        width: auto;
        max-width: 95%;
        margin-right: calc(50vw - 50%);
    }

    /* Logo inside the blue rectangle */
    .main-nav-links .desktop-logo {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .main-nav-links .desktop-logo img {
        height: 45px;
        width: auto;
    }

    /* Right controls inside the blue rectangle */
    .nav-right-controls {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-shrink: 0;
    }

    .main-nav-links .navbar-nav {
        gap: 3px;
        margin: 0;
    }

    .main-nav-links .nav-link {
        color: white;
        font-weight: 500;
        padding: 8px 15px;
        border-radius: 15px;
        transition: all 0.3s ease;
        font-size: 0.95rem;
        margin: 0 36px;
    }

    .main-nav-links .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Active State - White background with blue text */
    .main-nav-links .nav-item.active .nav-link,
    .main-nav-links .nav-item.js-submenu-active .nav-link {
        background-color: white;
        color: var(--delta-blue-dark);
        font-size: 18px;
        padding: 5px 15px;
    }
    .category-submenu li ul{
        margin-left: unset;
    }

    /* Language Switcher & Search Styling */
    #search {
        background-color: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.7);
        color: #212529;
    }

    #search::placeholder {
        color: #555;
    }

    .btn-lang {
        color: white;
        font-weight: 500;
    }

    .lang-options-menu {
        /* Style your language dropdown menu here */
    }


    /* public/css/menu.css */
    /* --- NEW Search Box Styling --- */
    .search-form {
        display: flex;
        align-items: center;
    }
    .search-form .search-icon {
        position: absolute;
        left: 15px;
        color: var(--delta-blue-dark); /* Muted icon color */
        z-index: 3;
        pointer-events: none
    }
    .search-form .search-input {
        background-color: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.7);
        color: #212529;
        padding-left: 40px; /* Make space for the icon */
        width: 150px;
        transition: all 0.3s ease;
    }
    .search-form .search-input:focus {
        background-color: white;
        border-color: #0dcaf0;
        box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.25);
        width: 220px; /* Expand the width on focus */
    }

    .search-form .search-tick-btn {
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: green;
        font-size: 1.2rem;
    }


    /* --- Language Switcher Styling --- */
    .lang-switcher-container .btn-lang-simple {
        background-color: transparent;
        border: none;
        padding: 5px 10px;
        box-shadow: none;
        color: white;
        font-weight: 500;
        font-size: 0.9rem;
        transition: opacity 0.2s ease;
    }

    .lang-switcher-container .btn-lang-simple:hover,
    .lang-switcher-container .btn-lang-simple:focus {
        opacity: 0.8;
        color: white;
    }

    .lang-switcher-container .btn-lang-simple .fas {
        font-size: 1.1rem;
    }

    /* Search Icon Button */
    .search-icon-btn {
        background-color: transparent;
        border: none;
        padding: 5px 10px;
        color: white;
        font-size: 1.1rem;
        transition: opacity 0.2s ease;
    }

    .search-icon-btn:hover,
    .search-icon-btn:focus {
        opacity: 0.8;
        color: white;
    }

    /* The dropdown menu itself can keep its existing styles */
    .lang-switcher-container .lang-options-menu {
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(5px);
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,0.1);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .lang-switcher-container .lang-options-menu .dropdown-item {
        font-weight: 500;
    }
    .lang-switcher-container .lang-options-menu .dropdown-item.active {
        background-color: var(--delta-red); /* Red for active language */
        color: white;
    }

    /* Ensure the close button is positioned correctly within the fixed container */
    .sub-menu-div .btn-close {
        position: absolute;
        /* Adjust right or left based on your language direction (dir) if needed */
        right: 30px;
        z-index: 1046; /* Above the submenu content */
    }

    /* Main container for the copied menu items */
    #menuItems-lg {
        display: flex;
        justify-content: center; /* Center the columns horizontally */
        gap: 2rem; /* Space between the columns */
        padding: 0 5%; /* Add some padding around the content */
        width: 100%;
    }

    #menuItems-lg li{
        margin-bottom: 1rem;
    }
    #menuItems-lg ul{
        margin-top: 1.1rem;
    }
    #menuItems-lg li a{
        color: var(--delta-blue-darker);
        text-decoration: none;
    }


    /* Target the specific submenus we want to style */
    #menuItems-lg.category-submenu {
        /* This class will be added by our JS */
    }

    /* Each category becomes a column */
    #menuItems-lg .category-submenu > li {
        list-style-type: none;
        padding: 0 1rem; /* Spacing for each column */
        min-width: 250px; /* Give columns a minimum width */
    }

    /* Optional: Add a visual separator between columns */
    #menuItems-lg .category-submenu > li:not(:last-child) {
        border-right: 1px solid #444;
    }

    /* Style the Category Titles (e.g., "About Delta") */
    #menuItems-lg .category-submenu .text-info { /* JS adds this class */
        display: block;
        font-size: 1.1rem;
        font-weight: bold;
        color: #0dcaf0 !important; /* Bootstrap's info color, or your brand color */
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #555;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Style the nested lists of links */
    #menuItems-lg .category-submenu ul {
        list-style-type: none;
        padding-left: 0;
    }

    /* Style the individual page links (e.g., "Mission") */
    #menuItems-lg .category-submenu ul li {
        margin-bottom: 0.75rem;
    }

    #menuItems-lg .category-submenu ul li a {
        color: #ccc;
        text-decoration: none;
        display: inline-block;
        position: relative;
        padding-bottom: 2px;
    }

    /* Hover effect for the links */
    #menuItems-lg .category-submenu ul li a::after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #0dcaf0; /* Match the title color */
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
    }

    #menuItems-lg .category-submenu ul li a:hover {
        color: white;
    }

    #menuItems-lg .category-submenu ul li a:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

    /* Main Nav Pill - Active State (The Tab Itself) */
    .main-nav-links .nav-item.parent-menu .nav-link {
        background-color: white;
        color: var(--delta-blue-dark);
        transform: translateY(6px); /* Move it down slightly to connect with the submenu div */
        position: relative;
        border-radius: 20px;
        z-index: 1036; /* Ensure it's above the submenu background */
    }

    /* The Submenu Panel (The Folder Body) */
    .sub-menu-div {
        display: none; /* Hidden by default */
        position: fixed;
        top: 97px; /* Adjust this to control vertical position from top of screen */
        z-index: 1035; /* Below the main nav pill, above page content */

        /* --- SIZING AND POSITIONING (AUTO-WIDTH) --- */
        width: max-content; /* KEY CHANGE: Panel will be as wide as its longest content */
        min-width: 220px;   /* Optional: Set a minimum width to look good even with short text */
        max-width: 400px;   /* Optional: Set a maximum width to prevent it from getting too wide */


        left: var(--parent-menu-center, 50%); /* Position the left edge at the parent's center */
        transform: translateX(-50%); /* Shift the panel left by half its own width to center it */

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        padding: 1.5rem 3rem 0 1.5rem;


        /*margin: 0 auto; !* Center the panel *!*/
        /*padding: 2rem;*/
        /*padding-top: 3rem; !* Extra padding at the top to make space for the tab text *!*/

        /* Appearance */
        background-color: white;
    }



    /* Styling for the content INSIDE the submenu */
    #menuItems-lg {
        /* Reset previous flex styles if they exist */
        display: block;
        padding: 0;
        text-align: left; /* Center the content */
    }
    #menuItems-lg li{
        padding-left: 10px;
    }
    #menuItems-lg li:hover{
        background-color: var(--delta-blue-dark);
        border-radius: 7px;
    }
    #menuItems-lg li:hover a{
        color:white;
    }
    /* Style for the simple list of categories (like in Projects menu) */
    .sub-menu-div .project-group-menu {
        list-style: none;
        padding: 0;
        white-space: nowrap; /* Ensure links don't wrap, forcing the container to be wide enough */
    }
    .sub-menu-div .project-group-menu li a {
        display: block;
        padding: 0.75rem;
        color: #ccc;
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.2s ease;
    }


    /*.sub-menu-div .project-group-menu li a:hover {*/
    /*    background-color: rgba(255,255,255,0.1);*/
    /*    color: white;*/
    /*}*/

    #menuItems-lg.category-submenu {
        display: flex; /* Re-apply flex for multi-column layouts */
        justify-content: center;
        gap: 2rem;
    }

    #menuItems-lg .category-submenu > li:not(:last-child) {
        border-right: 1px solid rgba(255,255,255,0.3); /* Lighter separator for red background */
    }

    #menuItems-lg .category-submenu .text-info {
        color: white !important; /* Make category titles white */
        border-bottom-color: rgba(255,255,255,0.5); /* Lighter border */
    }

    #menuItems-lg .category-submenu ul li a {
        color: rgba(255,255,255,0.8); /* Slightly transparent white for links */
    }

    #menuItems-lg .category-submenu ul li a::after {
        background-color: white; /* White underline on hover */
    }

    #menuItems-lg .category-submenu ul li a:hover {
        color: white;
    }

    /* Ensure the close button is visible on the red background */
    .sub-menu-div .btn-close {
        filter: brightness(0) invert(1); /* A trick to turn a dark bootstrap icon white */
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 1036;
    }

}

/* --- Dynamic States (Controlled by JS) --- */

/* Scrolled State for Hero Page */
body.hero-page .new-navbar-container {
    background-color: transparent;
}
/*body.hero-page .sub-menu-div{*/
/*    top: 0;*/
/*    padding-top: 104px;*/
/*}*/

/*body.hero-page.scrolled .new-navbar-container {*/
/*    background-color: var(--delta-blue-dark,#2E388DFF);*/
/*    transition: background-color 0.4s ease;*/
/*}*/
.main-nav-links.submenu-is-open {
    background-color: rgba(255, 255, 255, 0.4) !important; /* Your desired background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color 0.3s ease;
}

/* You might not need to change the main nav pill on scroll if it looks good on black */

/* Open Mobile Menu State on Hero Page */
.new-navbar-container.navbar-is-open {
    background-color: black !important;
}

.new-navbar-container.navbar-is-open .navbar-toggler {
    color: white;
}