/* ==============================================
   NAVIGATION PERFORMANCE OPTIMIZATION
   Tối ưu thanh menu để loại bỏ jank/shake
   ============================================== */

/* ==============================================
   CRITICAL OVERRIDE: Block Tailwind transition-all
   Phải đặt TRƯỚC tất cả rules khác
   ============================================== */

/* Override Tailwind's transition-all for ALL navigation elements */
header nav a.transition-all,
header a.transition-all.nav-link,
nav.main-navigation a.transition-all,
.desktop-nav a.transition-all,
.mobile-menu a.transition-all,
.submenu a.transition-all,
.btn.transition-all,
.tab-button.transition-all,
[class*="menu"] a.transition-all,
[class*="nav"] a.transition-all {
    /* Override Tailwind's transition-all */
    transition: color 200ms ease-in-out,
                background-color 200ms ease-in-out,
                opacity 200ms ease-in-out !important;
}

/* ========================================
   DESKTOP NAVIGATION - Clean & Simple
   ======================================== */

/* High specificity to override Tailwind */
.desktop-nav .nav-link,
a.nav-link {
    /* Typography */
    font-weight: var(--font-semibold);
    white-space: nowrap;
    position: relative;
    display: inline-block;

    /* Performance: GPU acceleration - ONLY for static positioning */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Smooth transitions - ONLY color & opacity */
    transition: color 200ms ease-in-out, opacity 200ms ease-in-out !important;

    /* CRITICAL: No transform animations */
    will-change: color, opacity !important;
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link:active,
.desktop-nav .nav-link:focus,
a.nav-link:hover,
a.nav-link:active,
a.nav-link:focus {
    /* FORCE: No transform - prevents layout shift */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;

    /* No scale or translate */
    scale: 1 !important;
    -webkit-scale: 1 !important;
    translate: 0 0 !important;
    -webkit-translate: 0 0 !important;
}

/* Navigation underline indicator */
.nav-underline {
    position: absolute;
    bottom: -0.25rem;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-brand);
    
    /* Only transition opacity */
    transition: opacity 200ms ease-in-out !important;
    will-change: opacity !important;
    
    /* No transform */
    transform: none !important;
}

/* ========================================
   HTMX PAGE TRANSITIONS
   Note: More comprehensive rules at bottom of file
   ======================================== */

/* ========================================
   GENERAL PERFORMANCE RULES
   ======================================== */

/* Hardware acceleration for interactive elements */
.desktop-nav a,
.mobile-menu-item,
.tab-button,
.btn,
.hover-text-brand {
    transform: translateZ(0) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
}

/* Remove ALL transform animations from interactive elements */
.desktop-nav a,
.mobile-menu-item,
.tab-button,
.btn {
    /* Override any transform animations */
    transform: translateZ(0) !important;
}

.desktop-nav a:hover,
.mobile-menu-item:hover,
.tab-button:hover,
.btn:hover {
    /* FORCE: Keep GPU acceleration, no scale/translateY */
    transform: translateZ(0) !important;
    scale: 1 !important;
}

/* Override Tailwind hover utilities - CRITICAL for preventing jank */
.desktop-nav a.hover\:scale-105:hover,
.desktop-nav a.hover\:-translate-y-1:hover,
.desktop-nav a.hover\:scale-110:hover,
a.nav-link.hover\:scale-105:hover,
a.nav-link.hover\:-translate-y-1:hover,
a.nav-link.hover\:scale-110:hover,
.main-navigation a.hover\:scale-105:hover,
.main-navigation a.hover\:-translate-y-1:hover,
nav a.hover\:scale-105:hover,
nav a.hover\:-translate-y-1:hover {
    transform: translateZ(0) !important;
    scale: 1 !important;
    translate: 0 0 !important;
    -webkit-transform: translateZ(0) !important;
    -webkit-scale: 1 !important;
    -webkit-translate: 0 0 !important;
}

/* ========================================
   SUBMENU BAR (from submenu_bar.html)
   ======================================== */

/* Target submenu buttons - prevent transform animations */
.btn.btn-primary,
.btn.btn-secondary {
    transform: translateZ(0) !important;
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out, opacity 150ms ease-in-out !important;
    will-change: background-color, color !important;
}

.btn.btn-primary:hover,
.btn.btn-secondary:hover,
.btn.btn-primary:active,
.btn.btn-secondary:active,
.btn.btn-primary:focus,
.btn.btn-secondary:focus {
    transform: translateZ(0) !important;
    scale: 1 !important;
    translate: 0 0 !important;
}

/* ========================================
   MOBILE MENU
   ======================================== */

.mobile-menu-item {
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out !important;
    transform: translateZ(0) !important;
}

.mobile-menu-item:hover {
    transform: translateZ(0) !important;
    scale: 1 !important;
}

.mobile-menu-item:active {
    /* Use opacity for tap feedback instead of scale */
    opacity: 0.8;
    transform: translateZ(0) !important;
    scale: 1 !important;
}

/* ========================================
   BUTTONS & TABS
   ======================================== */

.tab-button,
.btn {
    transition: background-color 150ms ease-in-out,
                color 150ms ease-in-out,
                border-color 150ms ease-in-out,
                opacity 150ms ease-in-out !important;
    transform: translateZ(0) !important;
}

.tab-button:hover,
.btn:hover {
    transform: translateZ(0) !important;
    scale: 1 !important;
}

/* ========================================
   HOVER UTILITIES
   ======================================== */

.hover-text-brand {
    transition: color 150ms ease-in-out !important;
}

.hover-text-brand:hover {
    color: var(--color-brand);
    transform: translateZ(0) !important;
}

/* ==============================================
   USER DROPDOWN MENU STYLES
   ============================================== */

.user-menu {
    position: relative;
}

#user-menu-button {
    cursor: pointer;
    border: none;
    background: transparent;
}

#user-dropdown {
    min-width: 14rem;
    animation: slideDown 200ms ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#user-dropdown a,
#user-dropdown button {
    cursor: pointer;
    border: none;
    background: transparent;
    white-space: nowrap;
}

#user-dropdown .hidden {
    display: none !important;
}

/* Prevent transform on user dropdown items */
#user-dropdown a:hover,
#user-dropdown button:hover,
#user-dropdown a:active,
#user-dropdown button:active {
    transform: none !important;
    scale: 1 !important;
}

/* ==============================================
   GLOBAL MENU CONSISTENCY RULES
   Đảm bảo tất cả menu hoạt động đồng nhất
   ============================================== */

/* All navigation elements should not scale/translate on hover */
header nav a,
header a.nav-link,
nav.main-navigation a,
.desktop-nav a,
.mobile-menu a,
.submenu a,
.tab-button,
[class*="menu"] a,
[class*="nav"] a {
    /* Only transition colors and opacity */
    transition: color 200ms ease-in-out,
                background-color 200ms ease-in-out,
                opacity 200ms ease-in-out !important;
}

/* Force no transform on all interactive states */
header nav a:hover,
header nav a:active,
header nav a:focus,
header a.nav-link:hover,
header a.nav-link:active,
header a.nav-link:focus,
nav.main-navigation a:hover,
nav.main-navigation a:active,
nav.main-navigation a:focus,
.desktop-nav a:hover,
.desktop-nav a:active,
.desktop-nav a:focus,
.mobile-menu a:hover,
.mobile-menu a:active,
.submenu a:hover,
.submenu a:active,
.tab-button:hover,
.tab-button:active,
[class*="menu"] a:hover,
[class*="menu"] a:active,
[class*="nav"] a:hover,
[class*="nav"] a:active {
    transform: translateZ(0) !important;
    scale: 1 !important;
    translate: 0 0 !important;
    -webkit-transform: translateZ(0) !important;
}

/* ==============================================
   PERFORMANCE & CONSISTENCY
   ============================================== */

/* Use containment for better rendering performance */
.main-navigation,
.desktop-nav,
.mobile-menu,
header nav {
    contain: layout style;
}

/* Reduce layout shifts */
.nav-link,
.mobile-menu-item,
.btn {
    box-sizing: border-box;
}

/* Prevent text selection on navigation items */
.nav-link,
.mobile-menu-item,
.tab-button,
.btn {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ==============================================
   CRITICAL FIX: Active State Override
   Loại bỏ HOÀN TOÀN transform trên :active
   ============================================== */

/* Override touch-targets.css và mọi active state animations */
.nav-link:active,
.desktop-nav a:active,
.desktop-nav .nav-link:active,
.mobile-menu a:active,
.mobile-menu-item:active,
header nav a:active,
header a.nav-link:active,
nav.main-navigation a:active,
nav a:active,
.submenu a:active,
.btn.btn-primary:active,
.btn.btn-secondary:active,
[class*="menu"] a:active,
[class*="nav"] a:active {
    /* FORCE: No transform, no scale, no translate */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    scale: 1 !important;
    -webkit-scale: 1 !important;
    translate: 0 0 !important;
    -webkit-translate: 0 0 !important;

    /* No opacity change for navigation */
    opacity: 1 !important;

    /* Prevent any transition on active */
    transition: none !important;
}

/* ==============================================
   HTMX PAGE TRANSITION FIX
   Đảm bảo không có animation trong quá trình navigate
   ============================================== */

/* Prevent ALL animations during HTMX transitions */
body.htmx-swapping .nav-link,
body.htmx-settling .nav-link,
body.htmx-swapping .desktop-nav .nav-link,
body.htmx-settling .desktop-nav .nav-link,
body.htmx-swapping nav a,
body.htmx-settling nav a,
body.htmx-swapping .btn,
body.htmx-settling .btn {
    transition: none !important;
    transform: translateZ(0) !important;
    scale: 1 !important;
    translate: 0 0 !important;
    opacity: 1 !important;
}

/* ==============================================
   NUCLEAR OPTION: Final Safety Net
   Override MỌI trường hợp có thể xảy ra
   ============================================== */

/* Block ALL transform/scale/translate on navigation - Nuclear override */
header nav *,
nav.main-navigation *,
.desktop-nav *,
.mobile-menu *,
.submenu *,
.main-navigation * {
    /* Prevent ANY transform that might come from anywhere */
    -webkit-transform: translateZ(0) !important;
    -moz-transform: translateZ(0) !important;
    -ms-transform: translateZ(0) !important;
    -o-transform: translateZ(0) !important;
}

/* Specifically for links and buttons inside navigation */
header nav a,
header nav button,
nav.main-navigation a,
nav.main-navigation button,
.desktop-nav a,
.desktop-nav button,
.mobile-menu a,
.mobile-menu button,
.submenu a,
.submenu button {
    /* Force no transform on ANY state */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* Override for pseudo-states */
header nav a:hover, header nav a:active, header nav a:focus,
nav.main-navigation a:hover, nav.main-navigation a:active, nav.main-navigation a:focus,
.desktop-nav a:hover, .desktop-nav a:active, .desktop-nav a:focus,
.mobile-menu a:hover, .mobile-menu a:active, .mobile-menu a:focus,
.submenu a:hover, .submenu a:active, .submenu a:focus {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    scale: 1 !important;
    translate: 0 0 !important;
}

/* ==============================================
   CRITICAL: Prevent Scroll Jump on Click
   Loại bỏ smooth scroll khi click navigation
   ============================================== */

/* Disable scroll-behavior for navigation containers */
header nav,
nav.main-navigation,
.desktop-nav,
.mobile-menu,
.submenu {
    scroll-behavior: auto !important;
}

/* Disable smooth scrolling during navigation */
html.navigating,
body.navigating {
    scroll-behavior: auto !important;
}

/* Prevent scroll restoration on page load */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: auto !important;
    }
}