/**
 * NAVIGATION MASTER - ALL NAVIGATION STYLES IN ONE FILE
 * This file contains COMPLETE navigation styling for DataGeeksTheme 2
 * 
 * @package DataGeeksTheme2
 * @version 2.0
 * 
 * TABLE OF CONTENTS:
 * 1. Base Navigation Structure
 * 2. Navigation Container & Menu
 * 3. Navigation Links & Typography
 * 4. Navigation States (Default, Hover, Active)
 * 5. Mobile Menu Toggle (Hamburger)
 * 6. Mobile Overlay Menu
 * 7. Desktop Responsive (>769px)
 * 8. Mobile Responsive (<768px)
 * 9. Small Mobile (<480px)
 * 10. Accessibility & Focus States
 */


/* ==========================================================================
   1. BASE NAVIGATION STRUCTURE
   ========================================================================== */

.site-navigation {
    background-color: #1a1a1a !important;  /* Very dark, almost black */
    border-bottom: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* Remove container padding in navigation context */
.site-navigation .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100%;
    width: 100%;
}


/* ==========================================================================
   2. NAVIGATION CONTAINER & MENU
   ========================================================================== */

/* Container - Flexbox layout, always left-aligned */
.nav-container,
.nav-container.has-hamburger,
.nav-container.no-hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;  /* Always left-aligned */
    padding: 0.1rem 0 !important;           /* Only top/bottom padding */
    margin: 0 !important;                    /* No margins */
    position: relative;
    min-height: 40px;
    box-sizing: border-box;
    overflow: visible !important;            /* Allow submenu overlays to show */
}

/* Menu - Horizontal list, zero spacing from left */
.nav-menu,
.nav-container .nav-menu,
.nav-container.has-hamburger .nav-menu,
.nav-container.no-hamburger .nav-menu,
#categories-menu {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;                    /* No margins */
    padding: 0 !important;                   /* No padding */
    gap: 0 !important;                       /* No gap */
    overflow-x: auto !important;             /* Horizontal scroll if needed */
    overflow-y: visible !important;          /* Allow submenu overlays to show */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                   /* Hide scrollbar Firefox */
    -ms-overflow-style: none;                /* Hide scrollbar IE/Edge */
    width: 100%;
    align-items: center;
    justify-content: flex-start !important;
    box-sizing: border-box;
    position: relative;                      /* For submenu positioning context */
}

/* Hide scrollbar Webkit browsers */
.nav-menu::-webkit-scrollbar {
    display: none !important;
}

/* Menu items */
.nav-menu li {
    flex-shrink: 0 !important;               /* Don't shrink */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    position: relative;                       /* For dropdown positioning */
}

.nav-menu li:first-child,
.nav-menu li:first-child a {
    margin-left: 0 !important;               /* First item at left edge */
}

/* Submenu dropdown styles - applies to ALL submenu levels (nested submenus) */
.nav-menu .sub-menu,
.nav-menu .sub-menu .sub-menu,
.nav-menu .sub-menu .sub-menu .sub-menu {
    position: fixed !important;               /* Fixed positioning for true overlay */
    background-color: #1a1a1a !important;    /* Dark background matching nav */
    min-width: 200px;
    max-width: 300px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1001 !important;                /* Above navigation */
    display: block !important;
    flex-direction: column !important;
    overflow: visible !important;            /* Allow nested submenus to show */
    pointer-events: none;                     /* Allow clicks through when hidden */
    text-align: left !important;              /* Left align all content */
}

/* Nested submenus: remove transform so JavaScript can position them correctly */
.nav-menu .sub-menu .sub-menu,
.nav-menu .sub-menu .sub-menu .sub-menu {
    transform: none !important;               /* No transform for nested - JS handles positioning */
    transition: opacity 0.2s ease, visibility 0.2s ease !important; /* Only transition opacity/visibility */
    /* CRITICAL: No transition on top/left - JavaScript controls these directly */
    transition-property: opacity, visibility !important;
    transition-duration: 0.2s !important;
    transition-timing-function: ease !important;
}

/* Increase z-index for nested submenus so they appear above parent submenus */
.nav-menu .sub-menu .sub-menu {
    z-index: 1002 !important;
    margin-left: 0 !important; /* Remove any left margin that might cause misalignment */
    margin-right: 0 !important; /* Remove any right margin */
    padding-left: 0 !important; /* Remove any left padding */
}

.nav-menu .sub-menu .sub-menu .sub-menu {
    z-index: 1003 !important;
    margin-left: 0 !important; /* Remove any left margin that might cause misalignment */
}

/* Ensure nested submenu items maintain proper positioning context */
.nav-menu .sub-menu li.menu-item-has-children {
    position: relative !important;
}

/* Ensure nested submenus are properly contained and positioned */
.nav-menu .sub-menu .sub-menu {
    position: fixed !important;
    /* JavaScript will set top and left - don't override with CSS */
    top: auto !important; /* Let JS set this */
    left: auto !important; /* Let JS set this */
    right: auto !important;
    bottom: auto !important;
    min-width: 180px !important; /* Ensure minimum width for readability */
    /* Remove any default positioning that might interfere */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important; /* Remove transform that might affect positioning */
    /* Remove any inset that might conflict */
    inset: unset !important;
}

/* Visual indicator for nested submenus - subtle border to distinguish levels */
.nav-menu .sub-menu .sub-menu {
    border-left: 2px solid rgba(241, 196, 15, 0.3) !important; /* Subtle yellow border to show nesting */
}

/* Enable pointer events when visible - applies to ALL submenu levels */
.nav-menu li:hover > .sub-menu,
.nav-menu li.menu-item-has-children:hover > .sub-menu,
.nav-menu li.menu-item-has-children.active > .sub-menu,
.nav-menu .sub-menu li:hover > .sub-menu,
.nav-menu .sub-menu li.menu-item-has-children:hover > .sub-menu,
.nav-menu .sub-menu li.menu-item-has-children.active > .sub-menu {
    pointer-events: auto;
}

/* Show submenu on hover (desktop) - applies to ALL submenu levels */
.nav-menu li:hover > .sub-menu,
.nav-menu li.menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Nested submenus: no transform, just show/hide */
.nav-menu .sub-menu li:hover > .sub-menu,
.nav-menu .sub-menu li.menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none !important; /* No transform - JS handles positioning */
}

/* Show submenu when active class is added (for click/touch) - applies to ALL submenu levels */
.nav-menu li.menu-item-has-children.active > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Nested submenus: no transform when active */
.nav-menu .sub-menu li.menu-item-has-children.active > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none !important; /* No transform - JS handles positioning */
}

/* Submenu items - MAXIMUM SPECIFICITY - applies to ALL nested levels */
.site-navigation .nav-menu .sub-menu li,
.site-navigation .nav-container .nav-menu .sub-menu li,
nav .nav-menu .sub-menu li,
#site-navigation .nav-menu .sub-menu li,
.nav-menu .sub-menu li,
.nav-menu .sub-menu .sub-menu li,
.nav-menu .sub-menu .sub-menu .sub-menu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 1 !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    position: relative !important;            /* For nested submenu positioning */
}

.site-navigation .nav-menu .sub-menu li:last-child,
.nav-menu .sub-menu li:last-child {
    border: none !important;
    border-bottom: none !important;
}

/* ==========================================================================
   SUBMENU STYLING - UNIFIED ACROSS ALL STATES AND VIEWS
   This section ensures consistent submenu styling regardless of:
   - Active/inactive states
   - Parent menu item states
   - Desktop/mobile views
   - Any WordPress classes (current-menu-item, current-menu-ancestor, etc.)
   ========================================================================== */

/* Base submenu link styling - applies to ALL submenu links at ALL nested levels */
.site-navigation .nav-menu .sub-menu a,
.site-navigation .nav-container .nav-menu .sub-menu a,
.site-navigation .nav-container.has-hamburger .nav-menu .sub-menu a,
.site-navigation .nav-container.no-hamburger .nav-menu .sub-menu a,
.site-navigation .container .nav-container .nav-menu .sub-menu a,
nav .nav-menu .sub-menu a,
#site-navigation .nav-menu .sub-menu a,
.nav-menu .sub-menu li a,
.nav-menu .sub-menu a,
.nav-menu .sub-menu .sub-menu a,
.nav-menu .sub-menu .sub-menu li a,
.nav-menu .sub-menu .sub-menu .sub-menu a,
.nav-menu .sub-menu li.current-menu-item a,
.nav-menu .sub-menu li.current-menu-ancestor a,
.nav-menu .sub-menu .current-menu-item a,
.nav-menu .sub-menu .current-menu-ancestor a,
.nav-menu .sub-menu li.current-menu-item > a,
.nav-menu .sub-menu li.current-menu-ancestor > a,
.nav-menu li.current-menu-ancestor .sub-menu a,
.nav-menu li.menu-item-has-children.current-menu-ancestor .sub-menu a,
.nav-menu li.menu-item-has-children.current-menu-item .sub-menu a {
    display: block !important;
    padding: 0.75rem 1rem !important;
    color: #6c757d !important;
    background-color: transparent !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    text-align: left !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
}

/* Submenu link hover - same gray color, slight background - applies to ALL nested levels */
.site-navigation .nav-menu .sub-menu a:hover,
.site-navigation .nav-container .nav-menu .sub-menu a:hover,
.site-navigation .nav-container.has-hamburger .nav-menu .sub-menu a:hover,
.site-navigation .nav-container.no-hamburger .nav-menu .sub-menu a:hover,
.site-navigation .container .nav-container .nav-menu .sub-menu a:hover,
nav .nav-menu .sub-menu a:hover,
#site-navigation .nav-menu .sub-menu a:hover,
.nav-menu .sub-menu li a:hover,
.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu .sub-menu a:hover,
.nav-menu .sub-menu .sub-menu li a:hover,
.nav-menu .sub-menu .sub-menu .sub-menu a:hover,
.nav-menu .sub-menu li.current-menu-item a:hover,
.nav-menu .sub-menu li.current-menu-ancestor a:hover,
.nav-menu .sub-menu .current-menu-item a:hover,
.nav-menu .sub-menu .current-menu-ancestor a:hover,
.nav-menu li.current-menu-ancestor .sub-menu a:hover,
.nav-menu li.menu-item-has-children.current-menu-ancestor .sub-menu a:hover {
    color: #6c757d !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    padding-left: 1.25rem !important;
    text-align: left !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

/* Submenu active/current states - VISUALLY DISTINCT with background highlight - applies to ALL nested levels */
.site-navigation .nav-menu .sub-menu .current-menu-item a,
.site-navigation .nav-menu .sub-menu .current-menu-ancestor a,
.site-navigation .nav-container .nav-menu .sub-menu .current-menu-item a,
.site-navigation .nav-container .nav-menu .sub-menu .current-menu-ancestor a,
nav .nav-menu .sub-menu .current-menu-item a,
#site-navigation .nav-menu .sub-menu .current-menu-item a,
.nav-menu .sub-menu .current-menu-item a,
.nav-menu .sub-menu .current-menu-ancestor a,
.nav-menu .sub-menu li.current-menu-item a,
.nav-menu .sub-menu li.current-menu-ancestor a,
.nav-menu .sub-menu li.current-menu-item > a,
.nav-menu .sub-menu li.current-menu-ancestor > a,
.nav-menu .sub-menu .sub-menu .current-menu-item a,
.nav-menu .sub-menu .sub-menu li.current-menu-item a,
.nav-menu .sub-menu .sub-menu .sub-menu .current-menu-item a,
.nav-menu li.current-menu-ancestor .sub-menu .current-menu-item a,
.nav-menu li.current-menu-ancestor .sub-menu .current-menu-ancestor a,
.nav-menu li.menu-item-has-children.current-menu-ancestor .sub-menu .current-menu-item a,
.nav-menu li.menu-item-has-children.current-menu-item .sub-menu a,
.nav-menu li.menu-item-has-children.current-menu-ancestor .sub-menu a {
    color: #ffffff !important;                /* White text for better contrast on active */
    background-color: rgba(241, 196, 15, 0.15) !important; /* Light yellow background highlight */
    border-left: 3px solid #f1c40f !important; /* Yellow left border indicator */
    padding-left: calc(1rem - 3px) !important; /* Adjust padding for border */
    text-align: left !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    font-weight: 500 !important;              /* Slightly bolder for emphasis */
}

/* Arrow indicator for parent items - applies to ALL levels (main menu and nested submenus) */
.nav-menu > li.menu-item-has-children > a::after,
.nav-menu .sub-menu li.menu-item-has-children > a::after,
.nav-menu .sub-menu .sub-menu li.menu-item-has-children > a::after {
    content: '▼';
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.7rem;
    color: #6c757d;
    transition: transform 0.2s ease, color 0.2s ease;
    vertical-align: middle;
}

.nav-menu > li.menu-item-has-children:hover > a::after,
.nav-menu > li.menu-item-has-children.active > a::after,
.nav-menu > li.menu-item-has-children.current-menu-ancestor > a::after,
.nav-menu .sub-menu li.menu-item-has-children:hover > a::after,
.nav-menu .sub-menu li.menu-item-has-children.active > a::after,
.nav-menu .sub-menu .sub-menu li.menu-item-has-children:hover > a::after,
.nav-menu .sub-menu .sub-menu li.menu-item-has-children.active > a::after {
    color: #6c757d !important;  /* Keep gray, not yellow */
    transform: rotate(180deg);
}


/* ==========================================================================
   3. NAVIGATION LINKS & TYPOGRAPHY
   ========================================================================== */

.nav-menu a {
    display: block;
    padding: 0.5rem 0.75rem !important;      /* Comfortable padding */
    margin: 0 !important;
    color: #ffffff !important;               /* White text */
    background-color: transparent;
    text-decoration: none;
    font-size: 1rem !important;          /* 16px - Better readable size */
    font-weight: 500 !important;             /* Medium weight */
    line-height: 1.2;
    text-transform: none !important;         /* Normal case (not uppercase) */
    letter-spacing: 0.3px;
    text-align: left;
    white-space: nowrap;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    transition: color 0.2s ease;
    position: relative;
}


/* ==========================================================================
   4. NAVIGATION STATES (Default, Hover, Active)
   ========================================================================== */

/* DEFAULT STATE */
.nav-menu a,
.nav-container.has-hamburger .nav-menu a,
.nav-container.no-hamburger .nav-menu a {
    color: #6c757d !important;
    background-color: transparent !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

/* HOVER STATE - Border below - CONSISTENT FOR ALL MENU ITEMS */
/* This ensures hover is the same regardless of active state or parent state */
.site-navigation .nav-menu a:hover,
.site-navigation .nav-container .nav-menu a:hover,
.site-navigation .nav-container.has-hamburger .nav-menu a:hover,
.site-navigation .nav-container.no-hamburger .nav-menu a:hover,
.site-navigation .container .nav-container .nav-menu a:hover,
nav .nav-menu a:hover,
#site-navigation .nav-menu a:hover,
.nav-menu a:hover,
.nav-container.has-hamburger .nav-menu a:hover,
.nav-container.no-hamburger .nav-menu a:hover,
.nav-menu li a:hover,
.nav-menu .current-menu-item a:hover,
.nav-menu li.current-menu-item a:hover,
.nav-menu li.current-menu-item > a:hover,
.nav-menu .current-menu-ancestor a:hover,
.nav-menu li.current-menu-ancestor a:hover,
.nav-menu li.current-menu-ancestor > a:hover,
.nav-menu li.menu-item-has-children a:hover,
.nav-menu li.menu-item-has-children.current-menu-ancestor a:hover,
.nav-menu li.menu-item-has-children.current-menu-item a:hover,
body .nav-menu a:hover,
html body .nav-menu a:hover {
    color: #f1c40f !important;               /* Yellow theme color - ALWAYS */
    background-color: transparent !important; /* No background fill */
    text-decoration: none !important;
    border: none !important;                  /* Remove all borders */
    border-bottom: 3px solid #f1c40f !important; /* Yellow bottom border - ALWAYS */
    border-radius: 0 !important;             /* No border radius */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 0.875rem !important;
    padding-bottom: calc(0.5rem - 3px) !important; /* Adjust padding for border */
    font-weight: 400 !important;
}

/* ACTIVE STATE - Border below like second image */
/* MAXIMUM SPECIFICITY - Works in ALL hierarchy levels and scenarios */
/* Note: ONLY applies to direct children (main menu items), NOT submenu items */
/* Note: Hover states are handled separately above to ensure consistency */
.site-navigation .nav-menu > li.current-menu-item > a,
.site-navigation .nav-container .nav-menu > li.current-menu-item > a,
.site-navigation .nav-container.has-hamburger .nav-menu > li.current-menu-item > a,
.site-navigation .nav-container.no-hamburger .nav-menu > li.current-menu-item > a,
.site-navigation .container .nav-container .nav-menu > li.current-menu-item > a,
.site-navigation .container .nav-container.has-hamburger .nav-menu > li.current-menu-item > a,
.site-navigation .container .nav-container.no-hamburger .nav-menu > li.current-menu-item > a,
nav .nav-menu > li.current-menu-item > a,
nav .nav-container .nav-menu > li.current-menu-item > a,
#site-navigation .nav-menu > li.current-menu-item > a,
#site-navigation .container .nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-item > a {
    background-color: transparent !important; /* No background fill */
    color: #f1c40f !important;               /* Yellow text color */
    text-decoration: none !important;        /* No text-decoration */
    border: none !important;                  /* Remove all borders */
    border-bottom: 3px solid #f1c40f !important; /* Yellow bottom border */
    border-radius: 0 !important;             /* No border radius */
    outline: none !important;
    box-shadow: none !important;
    padding: 0.5rem 0.75rem !important;
    padding-bottom: calc(0.5rem - 3px) !important; /* Adjust padding for border */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

/* Active menu item focus/active/visited - same styling - ONLY direct children */
.nav-menu > li.current-menu-item > a:focus,
.nav-menu > li.current-menu-item > a:active,
.nav-menu > li.current-menu-item > a:visited {
    background-color: transparent !important;
    color: #f1c40f !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: 3px solid #f1c40f !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0.5rem 0.75rem !important;
    padding-bottom: calc(0.5rem - 3px) !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}


/* ==========================================================================
   5. MOBILE MENU TOGGLE (Hamburger)
   ========================================================================== */

.mobile-menu-toggle,
.nav-container .mobile-menu-toggle,
.site-navigation .mobile-menu-toggle,
#site-navigation .mobile-menu-toggle {
    display: none;                            /* Hidden by default (desktop) */
    position: relative !important;            /* Inline element */
    background: rgba(0, 0, 0, 0.5) !important; /* Dark semi-transparent box */
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0.5rem 0.75rem !important;      /* Same as nav links */
    margin: 0 0.5rem 0 0 !important;         /* Right margin prevents overlap */
    font-size: 1rem !important;
    font-weight: 500 !important;
    border-radius: 0;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    flex-shrink: 0 !important;               /* Won't compress */
    transition: background 0.2s ease, color 0.2s ease;
}

.mobile-menu-toggle:hover {
    background: rgba(0, 0, 0, 0.7) !important;
    color: #f1c40f !important;               /* Yellow on hover */
}

.mobile-menu-toggle:focus,
.mobile-menu-toggle:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.mobile-menu-toggle i {
    font-size: 1rem;
}


/* ==========================================================================
   6. MOBILE OVERLAY MENU (Full-screen when active)
   ========================================================================== */

@media (max-width: 768px) {
    /* Full-screen overlay when menu is active */
    .nav-menu.active:not(.single .nav-menu.active) {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 2rem 0.5rem 0.5rem;
        z-index: 10000;
        overflow-y: auto;
        margin: 0 !important;
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
    }
    
    /* Disable full-screen for single posts */
    .single .nav-menu.active {
        display: flex;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        background: transparent;
        backdrop-filter: none;
        flex-direction: row;
        padding: 0;
        z-index: auto;
        overflow-y: visible;
        transform: none;
        transition: none;
    }
    
    /* Overlay header bar */
    .nav-menu.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 30px;
        background: #1a1a1a;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Menu items in overlay */
    .nav-menu.active li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        list-style: none;
    }
    
    .nav-menu.active li:last-child {
        border-bottom: none;
    }
    
    .nav-menu.active a {
        width: 100%;
        text-align: left;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        text-transform: none !important;
        color: #ffffff;
        background-color: transparent;
        border: none;
        border-bottom: none;
    }
    
    .nav-menu.active a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #f1c40f;
        padding-left: 1.5rem !important;
    }
    
    .nav-menu.active .current-menu-item a {
        background-color: rgba(241, 196, 15, 0.1) !important;
        color: #f1c40f !important;
        border: none !important;
        border-left: 4px solid #f1c40f !important; /* Left border in vertical list */
        text-decoration: none !important;
    }
    
    /* Close button */
    .nav-menu.active::after {
        content: '✕';
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        color: #ffffff;
        font-size: 1.5rem;
        cursor: pointer;
        z-index: 10001;
        width: 1.5rem;
        height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
    }
    
    .nav-menu.active::after:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    /* Lock body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}


/* ==========================================================================
   7. DESKTOP RESPONSIVE (769px and up)
   ========================================================================== */

@media (min-width: 769px) {
    .nav-menu {
        flex-direction: row;
    }
    
    /* Hide hamburger on desktop */
    .mobile-menu-toggle {
        display: none !important;
    }
    
    /* Ensure active state works on desktop - MAXIMUM SPECIFICITY - ONLY direct children */
    .site-navigation .nav-menu > li.current-menu-item > a,
    .site-navigation .nav-container .nav-menu > li.current-menu-item > a,
    .site-navigation .nav-container.has-hamburger .nav-menu > li.current-menu-item > a,
    .site-navigation .nav-container.no-hamburger .nav-menu > li.current-menu-item > a,
    nav .nav-menu > li.current-menu-item > a,
    #site-navigation .nav-menu > li.current-menu-item > a,
    .nav-menu > li.current-menu-item > a {
        color: #f1c40f !important;
        border: none !important;
        border-bottom: 3px solid #f1c40f !important;
        text-decoration: none !important;
        padding-bottom: calc(0.5rem - 3px) !important;
        background-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Desktop hover - CONSISTENT for all menu items including active ones - ONLY direct children */
    .site-navigation .nav-menu > li > a:hover,
    .site-navigation .nav-container .nav-menu > li > a:hover,
    nav .nav-menu > li > a:hover,
    #site-navigation .nav-menu > li > a:hover,
    .nav-menu > li > a:hover,
    .nav-menu > li.current-menu-item > a:hover,
    .nav-menu > li.current-menu-ancestor > a:hover,
    .nav-menu > li.menu-item-has-children > a:hover,
    .nav-menu > li.menu-item-has-children.current-menu-ancestor > a:hover,
    .nav-menu > li.menu-item-has-children.current-menu-item > a:hover {
        color: #f1c40f !important;
        border: none !important;
        border-bottom: 3px solid #f1c40f !important;
        text-decoration: none !important;
        padding-bottom: calc(0.5rem - 3px) !important;
        background-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Ensure zero spacing on desktop */
    .site-navigation .container,
    .nav-container,
    .nav-menu {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Desktop submenu positioning - ensure dropdowns work properly */
    .nav-menu .sub-menu {
        position: fixed !important;          /* Fixed for true overlay */
        display: block !important;
    }

    /* Ensure submenu stays visible on hover */
    .nav-menu li:hover > .sub-menu,
    .nav-menu li.menu-item-has-children:hover > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* Keep submenu visible when parent has active class (for keyboard navigation) */
    .nav-menu li.menu-item-has-children.active > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}


/* ==========================================================================
   8. MOBILE RESPONSIVE (768px and below)
   ========================================================================== */

@media (max-width: 768px) {
    /* Show hamburger on mobile (if enabled) */
    .mobile-menu-toggle:not(.single .mobile-menu-toggle) {
        display: flex !important;
    }
    
    /* Ensure zero left spacing on mobile */
    .site-navigation .container,
    .nav-container,
    .nav-container.has-hamburger,
    .nav-container.no-hamburger,
    .nav-menu {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    /* Ensure active state works on mobile - MAXIMUM SPECIFICITY */
    .site-navigation .nav-menu .current-menu-item a,
    .site-navigation .nav-container .nav-menu .current-menu-item a,
    .site-navigation .nav-container.has-hamburger .nav-menu .current-menu-item a,
    .site-navigation .nav-container.no-hamburger .nav-menu .current-menu-item a,
    nav .nav-menu .current-menu-item a,
    #site-navigation .nav-menu .current-menu-item a,
    .nav-menu li.current-menu-item a,
    .nav-menu .current-menu-item > a {
        color: #f1c40f !important;
        border: none !important;
        border-bottom: 3px solid #f1c40f !important;
        text-decoration: none !important;
        padding-bottom: calc(0.5rem - 3px) !important;
        background-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Mobile hover - CONSISTENT for all menu items including active ones */
    .site-navigation .nav-menu a:hover,
    .site-navigation .nav-container .nav-menu a:hover,
    nav .nav-menu a:hover,
    #site-navigation .nav-menu a:hover,
    .nav-menu a:hover,
    .nav-menu .current-menu-item a:hover,
    .nav-menu li.current-menu-item a:hover,
    .nav-menu li.current-menu-item > a:hover,
    .nav-menu .current-menu-ancestor a:hover,
    .nav-menu li.current-menu-ancestor a:hover,
    .nav-menu li.menu-item-has-children a:hover,
    .nav-menu li.menu-item-has-children.current-menu-ancestor a:hover,
    .nav-menu li.menu-item-has-children.current-menu-item a:hover {
        color: #f1c40f !important;
        border: none !important;
        border-bottom: 3px solid #f1c40f !important;
        text-decoration: none !important;
        padding-bottom: calc(0.5rem - 3px) !important;
        background-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Mobile menu styling */
    .nav-menu a {
        padding: 0.5rem 0.75rem !important;
        font-size: 1rem !important;
    }

    /* Mobile submenu styles - still use fixed positioning for overlay */
    .nav-menu .sub-menu {
        position: fixed !important;          /* Fixed overlay on mobile too */
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px) !important;
        display: block !important;              /* Always in DOM for positioning */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background-color: #1a1a1a !important;
        margin-left: 0 !important;
        padding: 0.5rem 0 !important;
        max-width: calc(100vw - 20px) !important; /* Don't exceed viewport */
        pointer-events: none !important;
        z-index: 1001 !important;
    }
    
    /* Mobile nested submenu styles - position below parent menu item */
    .nav-menu .sub-menu .sub-menu {
        position: fixed !important;
        /* On mobile, nested submenus should appear below, not beside */
        transform: none !important; /* No transform for nested - JS handles positioning */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        max-width: calc(100vw - 20px) !important;
        z-index: 1002 !important;
    }

    /* Show submenu when active on mobile */
    .nav-menu li.menu-item-has-children.active > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    /* Mobile submenu items - MAXIMUM SPECIFICITY */
    .site-navigation .nav-menu .sub-menu li,
    .site-navigation .nav-container .nav-menu .sub-menu li,
    nav .nav-menu .sub-menu li,
    #site-navigation .nav-menu .sub-menu li,
    .nav-menu .sub-menu li {
        border: none !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: none !important;
    }

    /* Mobile submenu links - SAME as desktop, using same comprehensive selectors */
    .site-navigation .nav-menu .sub-menu a,
    .site-navigation .nav-container .nav-menu .sub-menu a,
    nav .nav-menu .sub-menu a,
    #site-navigation .nav-menu .sub-menu a,
    .nav-menu .sub-menu li a,
    .nav-menu .sub-menu a,
    .nav-menu .sub-menu li.current-menu-item a,
    .nav-menu .sub-menu li.current-menu-ancestor a,
    .nav-menu .sub-menu .current-menu-item a,
    .nav-menu .sub-menu .current-menu-ancestor a,
    .nav-menu li.current-menu-ancestor .sub-menu a,
    .nav-menu li.menu-item-has-children.current-menu-ancestor .sub-menu a {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        color: #6c757d !important;
        text-align: left !important;
        border: none !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: none !important;
        background-color: transparent !important;
    }

    /* Mobile submenu link hover - SAME as desktop */
    .site-navigation .nav-menu .sub-menu a:hover,
    .site-navigation .nav-container .nav-menu .sub-menu a:hover,
    nav .nav-menu .sub-menu a:hover,
    #site-navigation .nav-menu .sub-menu a:hover,
    .nav-menu .sub-menu li a:hover,
    .nav-menu .sub-menu a:hover,
    .nav-menu .sub-menu li.current-menu-item a:hover,
    .nav-menu .sub-menu li.current-menu-ancestor a:hover,
    .nav-menu li.current-menu-ancestor .sub-menu a:hover {
        color: #6c757d !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        padding-left: 1.25rem !important;
        text-align: left !important;
        border: none !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: none !important;
    }

    /* Mobile submenu active state - SAME as normal state */
    .site-navigation .nav-menu .sub-menu .current-menu-item a,
    .site-navigation .nav-menu .sub-menu .current-menu-ancestor a,
    nav .nav-menu .sub-menu .current-menu-item a,
    #site-navigation .nav-menu .sub-menu .current-menu-item a,
    .nav-menu .sub-menu .current-menu-item a,
    .nav-menu .sub-menu .current-menu-ancestor a,
    .nav-menu .sub-menu li.current-menu-item a,
    .nav-menu .sub-menu li.current-menu-ancestor a,
    .nav-menu li.current-menu-ancestor .sub-menu .current-menu-item a,
    .nav-menu li.menu-item-has-children.current-menu-ancestor .sub-menu .current-menu-item a {
        color: #6c757d !important;
        background-color: transparent !important;
        border-left: none !important;
        padding-left: 1rem !important;
        text-align: left !important;
        border: none !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    /* Disable hover effects on mobile */
    .nav-menu li:hover > .sub-menu {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}


/* ==========================================================================
   9. SMALL MOBILE (480px and below)
   ========================================================================== */

@media (max-width: 480px) {
    .nav-menu a {
        padding: 0.4rem 0.6rem !important;   /* Slightly smaller padding */
        font-size: 0.9rem !important;      /* Better readable size for mobile */
    }
    
    .mobile-menu-toggle {
        padding: 0.4rem 0.6rem !important;
        margin-right: 0.3rem !important;
    }
    
    /* Ensure active state works on small mobile - MAXIMUM SPECIFICITY */
    .site-navigation .nav-menu .current-menu-item a,
    .site-navigation .nav-container .nav-menu .current-menu-item a,
    .site-navigation .nav-container.has-hamburger .nav-menu .current-menu-item a,
    .site-navigation .nav-container.no-hamburger .nav-menu .current-menu-item a,
    nav .nav-menu .current-menu-item a,
    #site-navigation .nav-menu .current-menu-item a,
    .nav-menu li.current-menu-item a,
    .nav-menu .current-menu-item > a {
        color: #f1c40f !important;
        border: none !important;
        border-bottom: 3px solid #f1c40f !important;
        text-decoration: none !important;
        padding-bottom: calc(0.4rem - 3px) !important; /* Adjusted for smaller padding */
        background-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Small mobile hover - CONSISTENT for all menu items including active ones */
    .site-navigation .nav-menu a:hover,
    .site-navigation .nav-container .nav-menu a:hover,
    nav .nav-menu a:hover,
    #site-navigation .nav-menu a:hover,
    .nav-menu a:hover,
    .nav-menu .current-menu-item a:hover,
    .nav-menu li.current-menu-item a:hover,
    .nav-menu li.current-menu-item > a:hover,
    .nav-menu .current-menu-ancestor a:hover,
    .nav-menu li.current-menu-ancestor a:hover,
    .nav-menu li.menu-item-has-children a:hover,
    .nav-menu li.menu-item-has-children.current-menu-ancestor a:hover,
    .nav-menu li.menu-item-has-children.current-menu-item a:hover {
        color: #f1c40f !important;
        border: none !important;
        border-bottom: 3px solid #f1c40f !important;
        text-decoration: none !important;
        padding-bottom: calc(0.4rem - 3px) !important;
        background-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;
    }
}


/* ==========================================================================
   10. ACCESSIBILITY & FOCUS STATES
   ========================================================================== */

/* Remove default focus outline that creates blue box */
.nav-menu a:focus,
.nav-menu a:active,
.nav-menu .current-menu-item a:focus,
.nav-menu .current-menu-item a:active,
.mobile-menu-toggle:focus,
.mobile-menu-toggle:active {
    outline: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Keep bottom border on active tab when focused */
.nav-menu .current-menu-item a:focus,
.nav-menu .current-menu-item a:active {
    border-bottom: 3px solid #f1c40f !important;
}

/* Keyboard navigation support - visible focus for accessibility */
.nav-menu a:focus-visible {
    outline: 2px dashed #f1c40f;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .nav-menu a:hover,
    .nav-menu .current-menu-item a {
        border-bottom: 3px solid currentColor !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .nav-menu a,
    .mobile-menu-toggle,
    .nav-menu.active {
        transition: none !important;
    }
}





/* ==========================================================================
   UNIVERSAL SUBMENU OVERRIDE - FINAL FALLBACK - ABSOLUTE OVERRIDE
   This rule ensures ALL submenu items are styled consistently,
   overriding ANY other CSS rules that might exist, including inline styles
   ========================================================================== */

/* Universal submenu link override - catches ALL possible selectors including attribute selectors */
.nav-menu .sub-menu a,
.nav-menu .sub-menu li a,
.nav-menu .sub-menu li > a,
.nav-menu .sub-menu a[href],
.nav-menu .sub-menu li a[href],
.nav-menu .sub-menu .current-menu-item a,
.nav-menu .sub-menu .current-menu-ancestor a,
.nav-menu .sub-menu li.current-menu-item a,
.nav-menu .sub-menu li.current-menu-ancestor a,
.nav-menu .sub-menu li.current-menu-item > a,
.nav-menu .sub-menu li.current-menu-ancestor > a,
.nav-menu li .sub-menu a,
.nav-menu li .sub-menu li a,
.nav-menu li.current-menu-ancestor .sub-menu a,
.nav-menu li.current-menu-ancestor .sub-menu li a,
.nav-menu li.menu-item-has-children .sub-menu a,
.nav-menu li.menu-item-has-children.current-menu-ancestor .sub-menu a,
.nav-menu li.menu-item-has-children.current-menu-item .sub-menu a,
.nav-menu li.menu-item-has-children.current-menu-ancestor .sub-menu li a,
.nav-menu li.menu-item-has-children.current-menu-item .sub-menu li a,
.site-navigation .nav-menu .sub-menu a,
.site-navigation .nav-menu .sub-menu li a,
.site-navigation .nav-container .nav-menu .sub-menu a,
.site-navigation .nav-container .nav-menu .sub-menu li a,
nav .nav-menu .sub-menu a,
nav .nav-menu .sub-menu li a,
#site-navigation .nav-menu .sub-menu a,
#site-navigation .nav-menu .sub-menu li a,
body .nav-menu .sub-menu a,
body .nav-menu .sub-menu li a,
html body .nav-menu .sub-menu a,
html body .nav-menu .sub-menu li a {
    color: #6c757d !important;
    background-color: transparent !important;
    text-align: left !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    text-decoration: none !important;
}

/* Universal submenu hover override */
.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu li a:hover,
.nav-menu .sub-menu li > a:hover,
.nav-menu .sub-menu a[href]:hover,
.nav-menu .sub-menu li a[href]:hover,
.nav-menu .sub-menu .current-menu-item a:hover,
.nav-menu .sub-menu .current-menu-ancestor a:hover,
.nav-menu .sub-menu li.current-menu-item a:hover,
.nav-menu .sub-menu li.current-menu-ancestor a:hover,
.nav-menu li.current-menu-ancestor .sub-menu a:hover,
.nav-menu li.menu-item-has-children.current-menu-ancestor .sub-menu a:hover,
body .nav-menu .sub-menu a:hover,
html body .nav-menu .sub-menu a:hover {
    color: #6c757d !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

/* Universal submenu active/current override - VISUALLY DISTINCT - ABSOLUTE OVERRIDE */
.nav-menu .sub-menu .current-menu-item a,
.nav-menu .sub-menu .current-menu-ancestor a,
.nav-menu .sub-menu li.current-menu-item a,
.nav-menu .sub-menu li.current-menu-ancestor a,
.nav-menu .sub-menu li.current-menu-item > a,
.nav-menu .sub-menu li.current-menu-ancestor > a,
.nav-menu li.current-menu-ancestor .sub-menu .current-menu-item a,
.nav-menu li.current-menu-ancestor .sub-menu .current-menu-ancestor a,
.nav-menu li.menu-item-has-children.current-menu-ancestor .sub-menu .current-menu-item a,
.nav-menu li.menu-item-has-children.current-menu-item .sub-menu a,
.nav-menu li.menu-item-has-children.current-menu-ancestor .sub-menu a,
.nav-menu li.menu-item-has-children.current-menu-ancestor .sub-menu li.current-menu-item a,
.nav-menu li.menu-item-has-children.current-menu-item .sub-menu li.current-menu-item a,
body .nav-menu .sub-menu .current-menu-item a,
body .nav-menu .sub-menu .current-menu-ancestor a,
html body .nav-menu .sub-menu .current-menu-item a,
html body .nav-menu .sub-menu .current-menu-ancestor a {
    color: #ffffff !important;                /* White text for better contrast */
    background-color: rgba(241, 196, 15, 0.15) !important; /* Light yellow background */
    border-left: 3px solid #f1c40f !important; /* Yellow left border */
    padding-left: calc(1rem - 3px) !important; /* Adjust for border */
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    font-weight: 500 !important;              /* Slightly bolder */
}

/* Force override for any visited, focus, active states */
.nav-menu .sub-menu a:visited,
.nav-menu .sub-menu a:focus,
.nav-menu .sub-menu a:active,
.nav-menu .sub-menu .current-menu-item a:visited,
.nav-menu .sub-menu .current-menu-item a:focus,
.nav-menu .sub-menu .current-menu-item a:active,
.nav-menu .sub-menu .current-menu-ancestor a:visited,
.nav-menu .sub-menu .current-menu-ancestor a:focus,
.nav-menu .sub-menu .current-menu-ancestor a:active {
    color: #6c757d !important;
    background-color: transparent !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

/* ==========================================================================
   END OF NAVIGATION MASTER STYLES
   ========================================================================== */