/* ===========================================
   导航栏样式文件 - navbar.css
   统一所有页面的导航栏显示效果
   =========================================== */

/* 导航栏 - 强制所有页面完全统一 */
.navbar,
nav.navbar,
#navbar,
html body .navbar,
html body nav.navbar,
html body #navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid #e5e7eb !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: none !important;
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
}

/* 强制统一所有页面的导航栏样式 */
body .navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid var(--border-light) !important;
    height: 70px !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    transition: all 0.3s ease !important;
}

/* 导航栏容器 - 强制所有页面完全统一 */
.nav-container,
div.nav-container,
.navbar .nav-container,
nav.navbar .nav-container,
#navbar .nav-container,
html body .navbar .nav-container,
html body nav.navbar .nav-container,
html body #navbar .nav-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 2rem !important;
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    box-sizing: border-box !important;
    position: relative !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
}

/* 强制统一导航栏容器样式 */
body .nav-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 2rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    height: 100% !important;
}

/* Logo区域 - 强制所有页面完全统一 */
.nav-logo,
div.nav-logo,
a.nav-logo,
.navbar .nav-logo,
nav.navbar .nav-logo,
#navbar .nav-logo,
html body .navbar .nav-logo,
html body nav.navbar .nav-logo,
html body #navbar .nav-logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: opacity 0.3s ease !important;
}

/* 确保链接状态下无下划线 */
.nav-logo:link,
.nav-logo:visited,
.nav-logo:hover,
.nav-logo:active,
a.nav-logo:link,
a.nav-logo:visited,
a.nav-logo:hover,
a.nav-logo:active {
    text-decoration: none !important;
    color: inherit !important;
}

/* Logo图片 - 强制所有页面完全统一 */
.nav-logo .logo,
.navbar .nav-logo .logo,
nav.navbar .nav-logo .logo,
#navbar .nav-logo .logo,
html body .navbar .nav-logo .logo,
html body nav.navbar .nav-logo .logo,
html body #navbar .nav-logo .logo {
    height: 50px !important;
    width: auto !important;
    min-height: 50px !important;
    max-height: 50px !important;
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
    object-fit: contain !important;
}

/* 公司名称 - 强制所有页面完全统一 */
.company-name,
span.company-name,
.nav-logo .company-name,
.navbar .company-name,
nav.navbar .company-name,
#navbar .company-name,
html body .navbar .company-name,
html body nav.navbar .company-name,
html body #navbar .company-name {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: #12826d !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3rem !important;
    min-height: 1.3rem !important;
    white-space: nowrap !important;
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
}

/* 强制统一logo和公司名样式 */
body .nav-logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body .nav-logo .logo {
    height: 50px !important;
    width: auto !important;
}

body .company-name {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: var(--primary-green) !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    min-height: 1.3rem !important;
    line-height: 1.3rem !important;
}

/* 导航菜单 - 强制所有页面完全统一 */
.nav-menu,
div.nav-menu,
.navbar .nav-menu,
nav.navbar .nav-menu,
#navbar .nav-menu,
html body .navbar .nav-menu,
html body nav.navbar .nav-menu,
html body #navbar .nav-menu {
    display: flex !important;
    gap: 2.5rem !important;
    align-items: center !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex-shrink: 0 !important;
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
}

/* 强制统一导航菜单样式 */
body .nav-menu {
    display: flex !important;
    gap: 2.5rem !important;
}

/* 导航链接 - 强制所有页面完全统一 */
.nav-link,
a.nav-link,
.nav-menu .nav-link,
.navbar .nav-link,
nav.navbar .nav-link,
#navbar .nav-link,
html body .navbar .nav-link,
html body nav.navbar .nav-link,
html body #navbar .nav-link {
    text-decoration: none !important;
    color: #64748b !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    line-height: 0.95rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
    display: inline-block !important;
}

/* 导航链接悬停和激活状态 - 强制所有页面完全统一 */
.nav-link:hover,
.nav-link.active,
a.nav-link:hover,
a.nav-link.active,
.nav-menu .nav-link:hover,
.nav-menu .nav-link.active,
.navbar .nav-link:hover,
.navbar .nav-link.active,
nav.navbar .nav-link:hover,
nav.navbar .nav-link.active,
#navbar .nav-link:hover,
#navbar .nav-link.active,
html body .navbar .nav-link:hover,
html body .navbar .nav-link.active,
html body nav.navbar .nav-link:hover,
html body nav.navbar .nav-link.active,
html body #navbar .nav-link:hover,
html body #navbar .nav-link.active {
    color: #12826d !important;
}

.nav-link::after,
a.nav-link::after,
.nav-menu .nav-link::after,
.navbar .nav-link::after,
nav.navbar .nav-link::after,
#navbar .nav-link::after,
html body .navbar .nav-link::after,
html body nav.navbar .nav-link::after,
html body #navbar .nav-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #12826d !important;
    transition: all 0.3s ease !important;
}

.nav-link.active::after,
.nav-link:hover::after,
a.nav-link.active::after,
a.nav-link:hover::after,
.nav-menu .nav-link.active::after,
.nav-menu .nav-link:hover::after,
.navbar .nav-link.active::after,
.navbar .nav-link:hover::after,
nav.navbar .nav-link.active::after,
nav.navbar .nav-link:hover::after,
#navbar .nav-link.active::after,
#navbar .nav-link:hover::after,
html body .navbar .nav-link.active::after,
html body .navbar .nav-link:hover::after,
html body nav.navbar .nav-link.active::after,
html body nav.navbar .nav-link:hover::after,
html body #navbar .nav-link.active::after,
html body #navbar .nav-link:hover::after {
    width: 100% !important;
}

/* 专门修复产品中心页面导航栏 - 终极解决方案 */
body:has(.product-lines) .navbar,
body:has(.page-hero) .navbar,
body:has(.product-categories-section) .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid #e5e7eb !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
    font-size: inherit !important;
}

/* 强制产品页面导航栏容器一致 */
body:has(.product-lines) .navbar .nav-container,
body:has(.page-hero) .navbar .nav-container,
body:has(.product-categories-section) .navbar .nav-container {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 1rem 2rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
}

/* 强制产品页面Logo和公司名一致 */
body:has(.product-lines) .navbar .nav-logo .logo,
body:has(.page-hero) .navbar .nav-logo .logo,
body:has(.product-categories-section) .navbar .nav-logo .logo {
    height: 50px !important;
    width: auto !important;
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
}

body:has(.product-lines) .navbar .company-name,
body:has(.page-hero) .navbar .company-name,
body:has(.product-categories-section) .navbar .company-name {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: #12826d !important;
    line-height: 1.3rem !important;
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
}

/* 移动端菜单按钮 */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 0.5rem;
    gap: 4px;
    background: none;
    border: none;
    z-index: 1001;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* 移动端遮层 */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 移动端响应式 */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu,
    div.nav-menu,
    .navbar .nav-menu,
    nav.navbar .nav-menu,
    #navbar .nav-menu,
    html body .navbar .nav-menu,
    html body nav.navbar .nav-menu,
    html body #navbar .nav-menu {
        position: fixed !important;
        left: -100% !important;
        top: 70px !important;
        flex-direction: column !important;
        background-color: #ffffff !important;
        background: #ffffff !important;
        background-image: none !important;
        width: 100% !important;
        text-align: left !important;
        transition: var(--transition) !important;
        border-top: 1px solid var(--border-light) !important;
        padding: 0 !important;
        gap: 0 !important;
        height: auto !important;
        display: flex !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
        z-index: 1000 !important;
        opacity: 1 !important;
        align-items: stretch !important;
    }

    .nav-menu.active,
    div.nav-menu.active,
    .navbar .nav-menu.active,
    nav.navbar .nav-menu.active,
    #navbar .nav-menu.active,
    html body .navbar .nav-menu.active,
    html body nav.navbar .nav-menu.active,
    html body #navbar .nav-menu.active {
        left: 0 !important;
        background-color: #ffffff !important;
        background: #ffffff !important;
        background-image: none !important;
        opacity: 1 !important;
    }

    .nav-menu a,
    .nav-menu .nav-link,
    .navbar .nav-menu a,
    .navbar .nav-menu .nav-link,
    nav.navbar .nav-menu a,
    nav.navbar .nav-menu .nav-link,
    #navbar .nav-menu a,
    #navbar .nav-menu .nav-link,
    html body .navbar .nav-menu a,
    html body .navbar .nav-menu .nav-link,
    html body nav.navbar .nav-menu a,
    html body nav.navbar .nav-menu .nav-link,
    html body #navbar .nav-menu a,
    html body #navbar .nav-menu .nav-link {
        padding: 1.2rem 2rem !important;
        display: block !important;
        font-size: 1.1rem !important;
        color: #2c3e50 !important;
        background: transparent !important;
        width: 100% !important;
        text-align: left !important;
        border-bottom: 1px solid #e5e7eb !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        position: relative !important;
        flex: none !important;
    }
    
    .nav-menu a:last-child,
    .nav-menu .nav-link:last-child,
    .navbar .nav-menu a:last-child,
    .navbar .nav-menu .nav-link:last-child,
    nav.navbar .nav-menu a:last-child,
    nav.navbar .nav-menu .nav-link:last-child,
    #navbar .nav-menu a:last-child,
    #navbar .nav-menu .nav-link:last-child,
    html body .navbar .nav-menu a:last-child,
    html body .navbar .nav-menu .nav-link:last-child,
    html body nav.navbar .nav-menu a:last-child,
    html body nav.navbar .nav-menu .nav-link:last-child,
    html body #navbar .nav-menu a:last-child,
    html body #navbar .nav-menu .nav-link:last-child {
        border-bottom: none !important;
    }
    
    .nav-menu a:hover,
    .nav-menu a.active,
    .nav-menu .nav-link:hover,
    .nav-menu .nav-link.active,
    .navbar .nav-menu a:hover,
    .navbar .nav-menu a.active,
    .navbar .nav-menu .nav-link:hover,
    .navbar .nav-menu .nav-link.active,
    nav.navbar .nav-menu a:hover,
    nav.navbar .nav-menu a.active,
    nav.navbar .nav-menu .nav-link:hover,
    nav.navbar .nav-menu .nav-link.active,
    #navbar .nav-menu a:hover,
    #navbar .nav-menu a.active,
    #navbar .nav-menu .nav-link:hover,
    #navbar .nav-menu .nav-link.active,
    html body .navbar .nav-menu a:hover,
    html body .navbar .nav-menu a.active,
    html body .navbar .nav-menu .nav-link:hover,
    html body .navbar .nav-menu .nav-link.active,
    html body nav.navbar .nav-menu a:hover,
    html body nav.navbar .nav-menu a.active,
    html body nav.navbar .nav-menu .nav-link:hover,
    html body nav.navbar .nav-menu .nav-link.active,
    html body #navbar .nav-menu a:hover,
    html body #navbar .nav-menu a.active,
    html body #navbar .nav-menu .nav-link:hover,
    html body #navbar .nav-menu .nav-link.active {
        background: #f8fffe !important;
        color: #12826d !important;
        width: 100% !important;
        padding: 1.2rem 2rem !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        transform: none !important;
    }

    .nav-container {
        padding: 1rem !important;
    }
    
    /* 强制桌面端保持 2rem 水平边距 */
    @media (min-width: 769px) {
        .navbar .nav-container {
            padding: 1rem 2rem !important;
        }
    }

    /* 强制移动端容器样式 */
    html body .navbar .nav-container,
    html body div.nav-container,
    html body nav.navbar .nav-container,
    .nav-container {
        padding: 0 1rem !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}