@charset "UTF-8";

/* Color Variables */
:root {
    --bg-color: var(--hoverblue);
    --text-color: var(--txtblue1);
    --hover-main: var(--backblue);
    --hover-sub1: var(--hlblue1);
    --hover-sub2: var(--hlblue2);
    --menu-width: 250px;
}

/* Reset and Base Styles */


/* Navigation Container */
.nav-container {
    background-color: var(--bg-color);
    width: 100%;
    position: relative;
}

/* Mobile Menu Toggle Button */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 24px;
    padding: 15px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

/* Menu Lists Base */
.nav-menu, .nav-menu ul {
    list-style: none;
}

.nav-menu a {
    display: block;
    font-weight: bold;
    color: var(--text-color);
    text-decoration: none;
    padding: 15px 20px;
    white-space: nowrap;
}

/* Main Level Hover */
.nav-menu > li > a:hover {
    background-color: var(--hover-main);
}

/* --- DESKTOP LAYOUT --- */
@media (min-width: 769px) {
    .nav-menu {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .nav-menu li {
        position: relative;
    }

    /* Submenu level 1 positioning */
    .nav-menu .submenu-l1 {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--bg-color);
        min-width: var(--menu-width);
        box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    }

    /* Submenu level 2 positioning */
    .nav-menu .submenu-l2 {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        background-color: var(--bg-color);
        min-width: var(--menu-width);
        box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    }

    /* Show submenus on hover */
    .nav-menu li:hover > .submenu-l1,
    .submenu-l1 li:hover > .submenu-l2 {
        display: block;
    }

    /* Specific Hovers for Submenus */
    .submenu-l1 a:hover {
        background-color: var(--hover-sub1);
    }

    .submenu-l2 a:hover {
        background-color: var(--hover-sub2);
    }
}

/* --- MOBILE LAYOUT --- */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    /* Show main menu when active */
    .nav-menu.active {
        display: flex;
    }

    /* Indent submenus for clear hierarchy */
    .submenu-l1 a {
        padding-left: 40px;
    }

    .submenu-l2 a {
        padding-left: 60px;
    }

    /* Mobile Hover Colors matching desktop logic */
    .submenu-l1 li a:hover {
        background-color: var(--hover-sub1);
    }

    .submenu-l2 li a:hover {
        background-color: var(--hover-sub2);
    }
}