/* ===============================
   Desktop Dropdown Improvements
   =============================== */
@media (min-width: 769px) {
    .nav-menu {
        background: #1a1a1a !important; 
        border: 1px solid #333 !important;
        border-radius: 8px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
        padding: 5px 0 !important;
    }
    .nav-menu .nav-item {
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important; 
    }
    .nav-menu .nav-link {
        color: #eee !important;
        padding: 12px 35px 12px 25px !important; 
        transition: all 0.3s ease !important;
        border-bottom: 1px solid rgba(255,255,255,0.03) !important;
        display: block !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    .nav-menu .nav-item:last-child > .nav-link {
        border-bottom: none !important;
    }
    .nav-menu .nav-link:hover {
        background: var(--main-color) !important;
        color: #fff !important;
    }
    
    /* KILL ALL default WordPress arrow spans on desktop */
    .dropdown-item > span,
    .nav-item > span,
    .nav-menu .dropdown-item > span,
    .nav-menu .nav-item > span {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        font-size: 0 !important; 
        width: 0 !important; 
        height: 0 !important;
        position: absolute !important;
        pointer-events: none !important;
    }
    
    /* Clean arrow for sub-dropdowns */
    .nav-menu .dropdown-item > .nav-link::after {
        content: "" !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        border-top: 5px solid transparent !important;
        border-bottom: 5px solid transparent !important;
        border-left: 5px solid rgba(255,255,255,0.4) !important;
        display: block !important;
        font-size: 0 !important;
    }
    .nav-menu .dropdown-item:hover > .nav-link::after {
        border-left-color: #fff !important;
    }
}

/* ===============================
   Mobile Menu Dark Theme
   =============================== */
@media (max-width: 768px) {
    /* Dark background for the whole nav area */
    .header__nav {
        background: #1a1a1a !important;
    }
    .header__nav .wrapper,
    .header__nav .nav-wrap,
    .header__nav .nav-wrap > div {
        background: transparent !important;
    }
    
    /* Main nav list */
    .header__nav .nav {
        background: transparent !important;
    }
    
    /* All nav items */
    .header__nav .nav-item {
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }
    .header__nav .nav-item:last-child {
        border-bottom: none !important;
    }
    
    /* All nav links - white text on dark */
    .header__nav .nav-link {
        color: #eee !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    .header__nav .nav-link:hover,
    .header__nav .nav-link:active {
        color: var(--main-color) !important;
    }
    
    /* Arrow/toggle spans - make them visible and orange */
    .header__nav .dropdown-item > span {
        color: var(--main-color) !important;
        font-size: 18px !important;
    }
    
    /* ---- Level 1 submenu ---- */
    .header__nav .nav-menu--level-1 {
        background: rgba(255,255,255,0.05) !important;
        border-left: 3px solid var(--main-color) !important;
        margin-left: 15px !important;
    }
    .header__nav .nav-menu--level-1 > .nav-item > .nav-link {
        font-size: 14px !important;
        text-transform: none !important;
        padding: 12px 20px 12px 20px !important;
        color: #ccc !important;
    }
    .header__nav .nav-menu--level-1 > .nav-item > .nav-link:hover {
        color: var(--main-color) !important;
    }
    
    /* ---- Level 2 submenu ---- */
    .header__nav .nav-menu--level-2 {
        background: rgba(255,255,255,0.03) !important;
        border-left: 2px solid rgba(247,148,29,0.4) !important;
        margin-left: 15px !important;
    }
    .header__nav .nav-menu--level-2 > .nav-item > .nav-link {
        font-size: 13px !important;
        text-transform: none !important;
        padding: 10px 20px 10px 15px !important;
        color: #aaa !important;
    }
    .header__nav .nav-menu--level-2 > .nav-item > .nav-link:hover {
        color: var(--main-color) !important;
    }
    
    /* ---- Level 3 submenu ---- */
    .header__nav .nav-menu--level-3 {
        background: rgba(255,255,255,0.02) !important;
        border-left: 2px solid rgba(247,148,29,0.25) !important;
        margin-left: 10px !important;
    }
    .header__nav .nav-menu--level-3 > .nav-item > .nav-link {
        font-size: 12px !important;
        text-transform: none !important;
        padding: 8px 15px 8px 12px !important;
        color: #999 !important;
    }
    .header__nav .nav-menu--level-3 > .nav-item > .nav-link:hover {
        color: var(--main-color) !important;
    }
    
    /* Fix hamburger close state - white X on dark bg */
    .header.open {
        background-color: #1a1a1a !important;
    }
    .header.open .header__top {
        background-color: #1a1a1a !important;
    }
    .header.open .header__btn span {
        background-color: #fff !important;
    }
}