/* Dark Mode Navbar Fix - Prevents flickering and artifacts during theme transitions */

/* Base navbar styles - ensure consistent rendering */
.desktop-header-1,
.mobile-header-1,
header.desktop-header-1,
header.mobile-header-1 {
    /* Use transform3d to enable hardware acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Prevent layout shift during transitions */
.desktop-header-1,
.mobile-header-1 {
    contain: layout style paint;
}

/* Light mode navbar - explicit styles */
[data-theme="light"] .desktop-header-1,
[data-theme="light"] .mobile-header-1,
[data-theme="light"] header.desktop-header-1,
[data-theme="light"] header.mobile-header-1,
body:not([data-theme="dark"]) .desktop-header-1,
body:not([data-theme="dark"]) .mobile-header-1,
body:not([data-theme="dark"]) header.desktop-header-1,
body:not([data-theme="dark"]) header.mobile-header-1 {
    background: #f9f9ff !important;
    background-color: #f9f9ff !important;
    border-right: solid 1px rgba(94, 92, 127, 0.1) !important;
}

/* Dark mode navbar - explicit styles */
[data-theme="dark"] .desktop-header-1,
[data-theme="dark"] .mobile-header-1,
[data-theme="dark"] header.desktop-header-1,
[data-theme="dark"] header.mobile-header-1 {
    background: #16161f !important;
    background-color: #16161f !important;
    border-right: solid 1px #2a2a3e !important;
}

/* Prevent navbar menu items from flickering */
.vertical-menu,
.vertical-menu li,
.vertical-menu li a {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Theme toggle button - prevent jumping */
.theme-toggle-nav,
.theme-switch {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* During theme transition - lock navbar colors temporarily */
.theme-transitioning .desktop-header-1,
.theme-transitioning .mobile-header-1,
.theme-transitioning header.desktop-header-1,
.theme-transitioning header.mobile-header-1 {
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Prevent text color flashing in navbar */
.theme-transitioning .vertical-menu li a,
.theme-transitioning .vertical-menu li a span,
.theme-transitioning .vertical-menu li i {
    transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Mobile specific optimizations */
@media (max-width: 991px) {
    .mobile-header-1 {
        /* Ensure mobile header stays fixed and doesn't jump */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transform: translateZ(0);
    }
    
    /* Dark mode mobile header background */
    [data-theme="dark"] .mobile-header-1,
    [data-theme="dark"] header.mobile-header-1 {
        background: rgba(22, 22, 31, 0.98) !important;
        background-color: rgba(22, 22, 31, 0.98) !important;
    }
    
    /* Light mode mobile header background */
    [data-theme="light"] .mobile-header-1,
    [data-theme="light"] header.mobile-header-1,
    body:not([data-theme="dark"]) .mobile-header-1,
    body:not([data-theme="dark"]) header.mobile-header-1 {
        background: rgba(249, 249, 255, 0.98) !important;
        background-color: rgba(249, 249, 255, 0.98) !important;
    }
    
    /* Prevent mobile menu from flickering */
    .mobile-header-1.open .vertical-menu {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

/* High performance mode for smooth transitions */
@supports (contain: layout) {
    .desktop-header-1,
    .mobile-header-1,
    .vertical-menu {
        contain: layout;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .theme-transitioning .desktop-header-1,
    .theme-transitioning .mobile-header-1,
    .theme-transitioning .vertical-menu li a {
        transition-duration: 0.01ms !important;
    }
}