:root {
    --nav-bg: #ffffff;
    --mobile-width: 320px;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================
   Desktop Styles (Min-width 768px)
   ========================================= */
@media (min-width: 768px) {
    .burger-menu, .mobile-forward-btn, .mobile-back-btn, .mobile-back {
        display: none !important;
    }

    .main-navigation {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        
        position: relative;
        z-index: 1000;
    }

    .menu-root {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 1.5rem;
    }

    .menu-item {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .menu-item > a {
        text-decoration: none;
        color: #fff;
        font-weight: 500; transition:all 0.3s ease;
        transition: color 0.3s ease;
    }
     .scrolled .menu-item > a {color:var(--dark); }
    
    .menu-item:hover > a,
    .menu-item.active > a { color: var(--highlight); }

    /* Dropdown */
    .submenu {
        position: absolute;
        top: 100%;
        left: -20px;
        min-width: 240px;
        background: #ffffff;
        list-style: none;
        padding: 12px 0;
        border-radius: 8px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        transition: all 0.3s var(--ease-out-expo);
        z-index: 100;
    }

    .has-children:hover > .submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .submenu li a {
        display: block;
        padding: 10px 24px;
        color: #000;
        text-decoration: none;
    }
    .submenu li a:hover { color: var(--highlight); }
}

/* =========================================
   Mobile Styles (Max-width 767px)
   ========================================= */
@media (max-width: 767px) {
    body.menu-open { overflow: hidden; }

    /* --- Burger (Same as before) --- */
    .burger-menu {
        position: fixed; top: 14px; right: 20px; z-index: 2001;
        background: transparent; border: none; cursor: pointer; padding: 10px; display: block;
    }
    .burger-bar {
        display: block; width: 26px; height: 3px; background: var(--highlight); margin: 5px 0;
        transition: 0.3s; border-radius: 2px;
    }
    .burger-menu.active .burger-bar:nth-child(1) { transform: rotate(-45deg) translate(-6px, 6px); }
    .burger-menu.active .burger-bar:nth-child(2) { opacity: 0; }
    .burger-menu.active .burger-bar:nth-child(3) { transform: rotate(45deg) translate(-6px, -6px); }

    /* --- Main Drawer Container --- */
    .menu-container {
        position: fixed; top: 0; right: 0; width: var(--mobile-width); height: 100vh;
        background: #ffffff; 
        z-index: 2000;
        transform: translateX(100%); 
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: -5px 0 20px rgba(0,0,0,0.1);
        /* We DO NOT want overflow hidden here, or fixed children might get cut off */
        overflow: hidden; 
    }
    .menu-container.is-open { transform: translateX(0); }

    /* --- The Menus (Parent and Children) --- */
    .menu-root, .submenu {
        list-style: none; padding: 80px 0 0 0; margin: 0;
        
        /* PIN TO EDGES: This ensures every menu fills the drawer exactly */
        position: absolute; 
        top: 0; left: 0; bottom: 0; right: 0;
        
        width: 100%; 
        height: 100%;
        
        background: #ffffff;
        overflow-y: auto; /* Scrollable content */
        -webkit-overflow-scrolling: touch;
    }

    /* --- Submenu Behavior --- */
    .submenu {
        /* Start hidden to the right */
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 10; /* Sit ON TOP of parent */
        
        /* Force visibility override from desktop styles */
        opacity: 1 !important; 
        visibility: visible !important;
        display: block;
        
        /* Add a shadow so we see the edge sliding in */
        box-shadow: -5px 0 15px rgba(0,0,0,0.05);
    }

    /* Active State: Just slide in. NO opacity changes to parent. */
    .submenu-active {
        transform: translateX(0);
    }

    /* We disable the 'Slide Left' on the parent to prevent the bug */
    .menu-slide-left {
        /* Optional: We can just dim it slightly if you want depth, but NO movement */
        /* filter: brightness(0.9); */
        /* transform: none !important; */
    }

    /* --- List Items --- */
    .menu-item {
        /* CRITICAL: Static position allows the absolute submenu to see the .menu-container as parent */
        position: static; 
        
        border-bottom: 1px solid #eee;
        display: flex; justify-content: space-between; align-items: stretch;
    }

    .menu-item a {
        padding: 15px 20px; flex-grow: 1; text-decoration: none;
        color: #000; font-size: 1.1rem;
        display: flex; align-items: center;
    }

    /* --- Buttons --- */
    .mobile-forward-btn {
        width: 60px; background: transparent; border: none; border-left: 1px solid #eee;
        cursor: pointer; font-size: 1.5rem; color: var(--highlight); transition:all 0.4s ease; 
        display: flex; align-items: center; justify-content: center; z-index: 20;
    }
    
    .menu-slide-left .mobile-forward-btn { opacity:0; }
    /* The Modern Right Chevron */
    .mobile-forward-btn::after { 
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        background-color: currentColor; /* Takes the color from parent */
        
        /* SVG Chevron Right */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E");
        
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }

    .mobile-back-btn {
        width: 100%; 
        padding: 18px 20px; 
        background: #f8fafc; 
        border: none;
        text-align: left; 
        font-weight: 600; 
        font-size: 0.9rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--highlight); /* Text Color */
        cursor: pointer;
        display: flex; 
        align-items: center; 
        border-bottom: 1px solid #e2e8f0;
        transition: background 0.2s;
    }
    
    .mobile-back-btn:hover {
        background: #edf2f7;
    }

    /* The Modern Left Chevron */
    .mobile-back-btn::before { 
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        margin-right: 12px;
        background-color: currentColor;
        
        /* SVG Chevron Left */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E");
        
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }
}