/* ===== HEADER NAVIGATION TEXT ENHANCEMENT - DESKTOP ONLY ===== */
/* Apply beautiful gradient text effects ONLY to desktop screens (992px and above) */
/* Mobile screens will keep their original styles unchanged */

/* ===== LARGE DESKTOP SCREENS (1400px+) ===== */
@media (min-width: 1400px) {
    .site-menu li a {
        /* White text color for contrast */
        color: #ffffff !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
        background-clip: initial !important;
        
        /* Compact typography for large screens */
        font-size: 16px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1px !important;
        
        /* Compact FIXED background behind each text */
        position: relative !important;
        padding: 4px 8px !important;
        border-radius: 3px !important;
        transition: all 0.3s ease !important;
        
        /* Remove default text decoration */
        text-decoration: none !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }
    
    /* Beautiful gradient FIXED background effect behind each navigation text - ALWAYS VISIBLE */
    .site-menu li a::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border-radius: 3px !important;
        opacity: 1 !important;
        z-index: -1 !important;
        border: 1px solid rgba(102, 126, 234, 0.3) !important;
        box-shadow: 0 1px 4px rgba(102, 126, 234, 0.2) !important;
    }
}

/* ===== STANDARD DESKTOP SCREENS (1200px-1399px) ===== */
@media (min-width: 1200px) and (max-width: 1399px) {
    .site-menu li a {
        /* White text color for contrast */
        color: #ffffff !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
        background-clip: initial !important;
        
        /* Compact typography for standard desktop */
        font-size: 15px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0px !important;
        
        /* Compact FIXED background behind each text */
        position: relative !important;
        padding: 3px 6px !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
        
        /* Remove default text decoration */
        text-decoration: none !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }
    
    /* Beautiful gradient FIXED background effect behind each navigation text - ALWAYS VISIBLE */
    .site-menu li a::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border-radius: 2px !important;
        opacity: 1 !important;
        z-index: -1 !important;
        border: 1px solid rgba(102, 126, 234, 0.3) !important;
        box-shadow: 0 1px 3px rgba(102, 126, 234, 0.2) !important;
    }
}

/* ===== MEDIUM DESKTOP SCREENS (992px-1199px) ===== */
@media (min-width: 992px) and (max-width: 1199px) {
    .site-menu li a {
        /* White text color for contrast */
        color: #ffffff !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
        background-clip: initial !important;
        
        /* Compact typography for medium desktop */
        font-size: 11px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0px !important;
        
        /* Compact FIXED background behind each text */
        position: relative !important;
        padding: 2px 5px !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
        
        /* Remove default text decoration */
        text-decoration: none !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }
    
    /* Beautiful gradient FIXED background effect behind each navigation text - ALWAYS VISIBLE */
    .site-menu li a::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border-radius: 2px !important;
        opacity: 1 !important;
        z-index: -1 !important;
        border: 1px solid rgba(102, 126, 234, 0.3) !important;
        box-shadow: 0 1px 2px rgba(102, 126, 234, 0.2) !important;
    }
}

/* ===== HOVER EFFECTS FOR ALL DESKTOP SIZES ===== */
@media (min-width: 992px) {
    /* Enhanced hover effects for navigation text */
    .site-menu li a:hover {
        /* Keep white text on hover */
        color: #ffffff !important;
        
        /* Enhanced transform effect */
        transform: translateY(-2px) scale(1.05) !important;
    }
    
    /* Beautiful gradient background on hover */
    .site-menu li a:hover::before {
        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
        border: 1px solid rgba(102, 126, 234, 0.5) !important;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
    }
    
    /* Enhanced active state styling */
    .site-menu li a.active {
        /* Keep white text for active page */
        color: #ffffff !important;
        font-weight: 600 !important;
        transform: scale(1.08) !important;
    }
    
    /* Beautiful gradient active state background */
    .site-menu li a.active::before {
        background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%) !important;
        border: 1px solid rgba(76, 81, 191, 0.6) !important;
        box-shadow: 0 4px 12px rgba(76, 81, 191, 0.4) !important;
    }
    
    /* Focus state for accessibility */
    .site-menu li a:focus {
        outline: 2px solid #ffffff !important;
        outline-offset: 1px !important;
    }
    
    /* Compact navigation container */
    .site-menu {
        gap: 1px !important;
        padding: 2px 0 !important;
    }
    
    /* Individual menu item spacing */
    .site-menu li {
        margin: 0 0.5px !important;
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS FOR DESKTOP ONLY ===== */
@media (min-width: 992px) {
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .site-menu li a {
            background: #000000 !important;
            -webkit-background-clip: initial !important;
            -webkit-text-fill-color: #ffffff !important;
            background-clip: initial !important;
        }
        
        .site-menu li a:hover {
            background: #333333 !important;
            -webkit-background-clip: initial !important;
            -webkit-text-fill-color: #ffffff !important;
            background-clip: initial !important;
        }
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        .site-menu li a {
            transition: none !important;
        }
        
        .site-menu li a:hover {
            transform: none !important;
        }
    }
}