:root{
            --drawer-w: min(86vw, 360px);
        }

        a:hover:before, a:hover:before {
            text-decoration: none;
            color: white;
        }

        /* --- Basic Reset & Font --- */
        body { margin: 0; font-family: sans-serif; }
        a { text-decoration: none; color: inherit; }

        /* --- Navigation Bar --- */
        .navbar {
            background-color: #122A48;
            color: #ffffff;
            padding: 0 .6rem;
            position: sticky;
            top: 0;
            z-index: 1001;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .navbar nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        /* --- Main Menu (Level 1) --- */
        .main-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        .main-menu > li {
            position: relative;
        }

        .main-menu > li > a {
            display: block;
            padding: .75rem 1rem;
            color: #ffffff !important;
            position: relative;
            z-index: 2;
            transition: color 0.3s ease;
        }

        /* Sliding Background Effect for Top Level */
        .main-menu > li > a::before {
            content: '';
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            background-color: #FF9046;
            border-radius: 8px;
            z-index: -1;
            transform: scaleY(0);
            transform-origin: bottom;
            transition: transform 0.3s ease-out;
        }

        .main-menu > li:hover > a::before {
            transform: scaleY(1);
        }

        /* --- Dropdown Menus (Level 2 & 3) --- */
        .main-menu ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #122A48;
            list-style: none;
            padding: 3px;
            min-width: 220px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            z-index: 1000;
        }

        .main-menu ul li {
            position: relative;
        }

        .main-menu ul a {
            display: block;
            padding: 0.75rem 1rem;
            color: #ffffff !important;
            white-space: nowrap;
            transition: background-color 0.2s ease;
        }

        .main-menu ul a:hover {
            background-color: #1d3f6d;
        }

        .main-menu ul ul {
            top: -3px;
            left: 100%;
        }

        /* Show dropdown on hover (Desktop) */
        .main-menu li:hover > ul {
            display: block;
        }

        /* --- Dropdown Arrow Indicator --- */
        .has-dropdown > a {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .arrow {
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: 0.5em;
            border-top: 5px solid;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
        }
        .main-menu ul .has-dropdown > a .arrow {
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid;
        }

        /* --- Mobile Styles: Off-canvas drawer --- */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            line-height: 1;
        }

        /* overlay (hidden by default) */
        .menu-overlay{
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;               /* will be changed to start after drawer when active */
            background: rgba(0,0,0,0.45);

            opacity: 0;
            visibility: hidden;
            pointer-events: none;

            transition: opacity 220ms ease, visibility 220ms ease, left 220ms ease;
            z-index: 5000;         /* overlay layer */
        }

        .menu-overlay.is-active{
            opacity: 1;
            visibility: visible;
            pointer-events: auto;

            /* CRITICAL: overlay starts AFTER the drawer */
            left: var(--drawer-w);
        }

        @media (max-width: 992px) {
            .menu-toggle {
                display: block;
                position: relative;
                z-index: 7001; /* above everything */
            }

            /* Drawer menu */
            .main-menu{
                display: flex;
                flex-direction: column;
                gap: 0;

                position: fixed;
                top: 0;
                left: 0;

                height: 100vh;
                width: var(--drawer-w);

                background-color: #122A48;
                padding: 12px 10px;
                margin: 0;
                overflow-y: auto;

                transform: translateX(-105%);
                transition: transform 240ms ease;

                z-index: 7000; /* ABOVE overlay; also overlay doesn't cover drawer anyway */
                box-shadow: 0 12px 30px rgba(0,0,0,0.35);

                isolation: isolate;
                -webkit-overflow-scrolling: touch;
            }

            .main-menu.is-active{
                transform: translateX(0);
            }

            .main-menu > li > a{
                padding: .9rem 1rem;
            }

            /* Disable top hover effect on mobile */
            .main-menu > li > a::before{
                display:none;
            }

            /* Stacked submenus */
            .main-menu ul{
                position: static;
                display: none;
                padding: 6px 0 6px 14px;
                min-width: 0;
                box-shadow: none;
                background-color: transparent;
            }
            .main-menu ul.is-open{
                display: block !important;
            }

            /* kill desktop hover behavior on mobile */
            .main-menu li:hover > ul{
                display:none;
            }

            .has-dropdown > a{
                display:flex;
                justify-content: space-between;
                align-items:center;
                gap: 10px;
            }

            .is-open-item > a .arrow{
                transform: rotate(180deg);
                transition: transform 180ms ease;
            }
            .arrow{
                transition: transform 180ms ease;
            }
        }