/* Navigation Component Styles */

/* Responsive Logo and Navigation Spacing */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* Large screens - ensure adequate spacing */
    .flex-shrink-0 {
        margin-right: 3rem !important;
    }
    
    .desktop-nav ul {
        gap: 1rem !important;
    }
    
    .hidden.lg\\:flex {
        margin-left: 1.5rem !important;
    }
    
    .desktop-nav ul li a {
        font-size: 0.875rem !important; /* 14px */
        padding: 0.25rem 0.5rem !important;
    }
    
    .desktop-nav ul li .fas {
        font-size: 0.75rem !important; /* 12px for icons */
    }
}

@media (min-width: 1280px) and (max-width: 1535px) {
    /* XL screens - comfortable spacing */
    .flex-shrink-0 {
        margin-right: 3.5rem !important;
    }
    
    .desktop-nav ul {
        gap: 1.5rem !important;
    }
    
    .hidden.lg\\:flex {
        margin-left: 2rem !important;
    }
}

@media (min-width: 1536px) {
    /* 2XL screens - generous spacing for large screens */
    .flex-shrink-0 {
        margin-right: 4rem !important;
    }
    
    .desktop-nav ul {
        gap: 2rem !important;
    }
    
    .hidden.lg\\:flex {
        margin-left: 2.5rem !important;
    }
    
    .desktop-nav ul li a {
        font-size: 1rem !important; /* 16px */
        padding: 0.5rem 0.75rem !important;
    }
}

/* Ensure proper logo positioning across all screen sizes */
@media (min-width: 1024px) {
    .container {
        max-width: none !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1280px) {
    .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Hide language selector on mobile and tablets */
@media (max-width: 1023px) {
    .hidden.lg\\:flex {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Ensure dropdown menus work on index page with transparent background */
@media (min-width: 1024px) {
    .group:hover .group-hover\\:opacity-100 {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 999999 !important;
    }
    
    .group:hover .group-hover\\:visible {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 999999 !important;
    }
    
    /* Ensure sub-dropdowns also work */
    .group/sub:hover .group-hover\\/sub\\:opacity-100 {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 999999 !important;
    }
    
    .group/sub:hover .group-hover\\/sub\\:visible {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 999999 !important;
    }
    
    /* Ensure dropdown backgrounds are solid */
    .desktop-nav .absolute.bg-white {
        background-color: #ffffff !important;
        backdrop-filter: none !important;
    }
}

/* Desktop Navigation */
@media (min-width: 1024px) {
    .desktop-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: 0 !important; /* Prevent overlap */
        flex-shrink: 0 !important; /* Prevent shrinking */
    }
    
    /* Force logo spacing for all desktop sizes */
    .flex-shrink-0 {
        margin-right: 3rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Ensure navigation doesn't expand to full width */
    .desktop-nav ul {
        flex-shrink: 0 !important;
        gap: 1.5rem !important; /* 统一导航菜单间距 */
    }
    
    /* Language selector spacing */
    .hidden.lg\\:flex {
        margin-left: 2rem !important;
    }
    
    /* Globe icon spacing - only for navigation */
    #main-header .fas.fa-globe {
        margin-right: 0.5rem !important;
    }
    
    #mobile-menu,
    #mobile-menu-btn {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Mobile Navigation */
@media (max-width: 1023px) {
    .desktop-nav {
        display: none !important;
        visibility: hidden !important;
    }
    
    #mobile-menu-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-color: #dc2626 !important;
        color: white !important;
        padding: 12px !important;
        border-radius: 8px !important;
        border: none !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        min-width: 48px !important;
        min-height: 48px !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 999999 !important;
        position: relative !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    #mobile-menu {
        display: block !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        position: absolute !important;
        top: 100% !important;
        transform: translateY(-100%) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transition: all 0.3s ease !important;
        z-index: 999998 !important;
        pointer-events: none !important;
    }
    
    #mobile-menu.show {
        transform: translateY(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999998 !important;
        pointer-events: auto !important;
    }
    
    /* Mobile menu item spacing and interactions */
    .mobile-submenu {
        margin-top: 0.75rem !important;
        padding-left: 1rem !important;
    }
    
    .mobile-sub-submenu {
        margin-top: 0.5rem !important;
        padding-left: 1rem !important;
    }
    
    .mobile-menu-item,
    .mobile-submenu-item {
        cursor: pointer !important;
        pointer-events: auto !important;
        user-select: none !important;
        touch-action: manipulation !important;
    }
    
    .mobile-menu-item:active,
    .mobile-submenu-item:active {
        background-color: #f3f4f6 !important;
    }
}

/* Header styles */
#main-header {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Logo positioning */
.flex-shrink-0 img {
    height: 40px !important;
    width: auto !important;
}

/* Navigation hover effects */
.nav-link:hover {
    color: #dc2626 !important;
}

/* Dropdown animations */
.group:hover .group-hover\:opacity-100 {
    opacity: 1 !important;
}

.group:hover .group-hover\:visible {
    visibility: visible !important;
}

/* Mobile menu transitions */
.mobile-menu-item i,
.mobile-submenu-item i {
    transition: transform 0.3s ease !important;
}

/* Page content spacing for fixed header - only for non-hero pages */
body:not(.hero-page) {
    padding-top: 80px !important;
}

/* Hero pages have no top padding - content starts at navigation */
body.hero-page {
    padding-top: 0 !important;
}