/* ==========================================================================
   header.css - 网站头部样式
   包含：顶部栏、主导航、搜索框等元素的样式
   ========================================================================== */

/* ==========================================================================
   1. 布局容器
   ========================================================================== */
   .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
}

.no-right-padding {
    padding-right: 15px;
}

/* ==========================================================================
   2. 顶部栏
   ========================================================================== */
/* 顶部栏容器 */
.top-bar-wrapper {
    background: var(--background-primary);
    border-bottom: 1px solid #eee;
    padding: 0;
    height: 55px;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0;
}

/* Logo和联系信息包装器 */
.logo-contact-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 100%;
}

/* Logo样式 */
.logo {
    display: flex;
    align-items: center;
    height: 55px;
    padding: 2px 0;
}

.logo img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}

/* 联系信息 */
.contact-info {
    display: flex;
    gap: 20px;
    align-items: center;
    height: 100%;
}

.top-bar-wrapper .contact-info a {
    color: var(--text-dark);
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

/* 联系信息图标 */
.contact-info a i {
    color: var(--text-dark);
}

/* 顶部右侧区域 */
.right-top-section {
    display: flex;
    align-items: center;
    height: 100%;
    padding-right: 15px;
}

/* 顶部社交媒体图标 */
.social-top {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
    padding-right: 15px;
}

.social-top a {
    color: white;
    font-size: 16px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-blue);
    text-decoration: none;
    border: none;
    position: relative;
    line-height: 1;
}

.social-top a::after {
    display: none; /* 移除可能的伪元素 */
}

.social-top a:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 语言选择器 */
.language-selector {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 15px;
    padding-left: 15px;
    padding-right: 0;
    border-left: 1px solid #eee;
    position: relative;
    color: var(--text-dark);
    font-weight: 700;
}

.language-selector i {
    font-size: 16px;
    color: var(--text-dark);
}

/* ==========================================================================
   3. 主导航
   ========================================================================== */
/* 导航容器 */
.main-nav-wrapper {
    background: var(--primary-blue);
    height: 60px;
    display: flex;
    align-items: center;
}

.main-nav {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 导航列表 */
.nav-list {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    height: 100%;
    align-items: center; /* 确保垂直居中 */
}

.nav-list li {
    height: 100%;
    line-height: 60px; /* 匹配导航栏高度 */
    display: flex;
    align-items: center;
}

.nav-list a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 700;
    padding: 0 10px;
    white-space: nowrap;
    font-size: 15px;
    display: flex;
    align-items: center;
    height: 100%;
}

/* 搜索框 */
.nav-search {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid white;
    border-radius: 4px;
    padding: 4px;
    margin-right: 0;
    transition: all 0.3s ease;
    max-width: 280px;
}

.nav-search .header-search-form {
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-search .header-search-input {
    background: transparent;
    border: none;
    color: var(--primary-blue);
    padding: 5px 10px;
    width: 180px;
    font-size: 14px;
    outline: none;
}

.nav-search .header-search-input::placeholder {
    color: rgba(69, 140, 255, 0.7);
}

.nav-search .header-search-button {
    background: transparent;
    border: none;
    color: var(--primary-blue);
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-search .header-search-button:hover {
    color: var(--primary-dark-blue);
}

/* ==========================================================================
   4. 下拉菜单
   ========================================================================== */

/* 下拉菜单容器 */
.nav-list .has-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-list .has-dropdown > a {
    display: flex;
    align-items: center;
    height: 100%;
}

/* 下拉菜单 */
.dropdown-menu {
    position: absolute;
    top: 60px; /* 固定位置，与导航栏高度一致 */
    left: 0;
    min-width: 200px;
    background: var(--primary-blue); /* 使用网站主色 */
    border-radius: 0 0 5px 5px;
    padding: 10px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000; /* 增加z-index确保菜单显示在其他元素之上 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* 柔和的阴影代替边框 */
    border: none; /* 移除边框 */
}

/* 增加一个透明的覆盖区域，扩大鼠标感应范围 */
.nav-list .has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

.nav-list .has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: block; /* 确保显示 */
}

.dropdown-menu li {
    margin: 0;
    padding: 0;
    height: auto; /* 确保下拉菜单项高度正确 */
    line-height: normal;
    display: block; /* 覆盖父级的flex设置 */
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    font-size: 14px;
    white-space: nowrap;
    height: auto; /* 覆盖父级的高度设置 */
    line-height: 1.5; /* 正常行高 */
}

.dropdown-menu a:hover {
    background: var(--primary-dark-blue); /* 使用深色主色作为悬停背景 */
    padding-left: 25px;
}

/* 当前活动链接样式 */
.nav-list li.active > a,
.dropdown-menu li.active > a {
    text-decoration: underline;
}

/* ==========================================================================
   4. 固定导航样式
   ========================================================================== */

/* 固定导航基础样式 - 应用于整个site-header */
#site-header.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* 为固定导航腾出空间 */
body.has-fixed-header {
    padding-top: 115px; /* 顶部栏高度 + 主导航高度 */
}

/* 确保顶部栏和主导航在固定状态下的样式一致 */
#site-header.header-fixed .top-bar-wrapper {
    border-bottom: 1px solid #eee;
}

#site-header.header-fixed .main-nav-wrapper {
    border-bottom: none;
}

/* 移除不需要的类，确保不会发生冲突 */
.header-hidden {
    display: none;
}

/* 确保body初始状态没有顶部padding */
body {
    margin: 0;
    padding: 0;
}

/* 修改固定导航样式 */
#site-header {
    margin-top: 0;
    padding-top: 0;
}

html {
    margin: 0;
    padding: 0;
}

/* 确保主内容区域不受影响 */
.main-content {
    padding-top: 0;
}

/* 增加特异性 */
.site-header .header-search-form .header-search-input { ... }

/* 移除主导航中活动链接的下划线 */
.main-nav .nav-list > li.active > a {
    text-decoration: none !important; /* 使用 !important 确保覆盖其他规则 */
}

/* 或者，如果下划线是直接应用在所有链接上，再移除 */
.main-nav .nav-list > li > a {
     text-decoration: none;
}

/* ==========================================================================
   响应式设计 - 头部 (Header) - 修正与增强
   ========================================================================== */

/* 默认状态 (通常是桌面优先，或者移动优先然后逐级覆盖) */
/* 假设我们以桌面为基础，然后向下调整 */

/* 桌面端 (例如：大于等于 1024px，或者你定义的平板断点之上) */
@media (min-width: 1024px) { /* 或者你平板断点的上限 +1px, e.g., 768px if 767px is mobile */
    .mobile-menu-toggle {
        display: none !important; /* 强制在桌面端隐藏汉堡按钮 */
    }

    .main-nav .nav-list {
        display: flex !important; /* 强制在桌面端显示导航列表为flex布局 */
        position: static !important; /* 重置可能从移动端继承的绝对定位 */
        width: auto !important;      /* 重置可能从移动端继承的宽度 */
        flex-direction: row !important; /* 确保是横向排列 */
        background-color: transparent !important; /* 移除移动菜单的背景 */
        padding: 0 !important; /* 重置移动菜单的padding */
        box-shadow: none !important; /* 移除移动菜单的阴影 */
        gap: 30px; /* 恢复桌面端的gap */
    }

    .main-nav .nav-list li {
        width: auto !important; /* 恢复列表项的自动宽度 */
        text-align: left !important; /* 恢复文本对齐 */
        line-height: 60px !important; /* 恢复桌面行高 */
        border-bottom: none !important; /* 移除移动菜单的分隔线 */
    }

    .main-nav .nav-list a {
        justify-content: flex-start !important; /* 恢复链接内容对齐 */
        padding: 0 10px !important; /* 恢复桌面端链接padding */
        font-size: 15px !important; /* 恢复桌面字体大小 */
        line-height: 60px !important; /* 确保行高正确 */
        height: 100% !important; /* 确保高度正确 */
        color: var(--text-light) !important; /* 确保字体颜色 */
    }

    /* 确保下拉菜单在桌面端的行为正确 */
    .nav-list .has-dropdown:hover .dropdown-menu {
        display: block; /* 或者你用于桌面下拉的显示方式 */
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .dropdown-menu {
        position: absolute !important;
        top: 60px !important; /* 恢复桌面下拉的 top 值 */
        background: var(--primary-blue) !important; /* 恢复桌面下拉背景 */
        /* ... 其他桌面下拉菜单需要的样式重置 ... */
    }
}

/* 平板设备 (例如：768px 到 1023px) */
@media (max-width: 1023px) and (min-width: 768px) { /* 更精确的平板范围 */
    .mobile-menu-toggle {
        display: none !important; /* 确保在平板上也隐藏汉堡按钮 */
    }

    .main-nav .nav-list {
        display: flex !important; /* 确保平板导航列表是flex布局 */
        position: static !important;
        width: auto !important;
        flex-direction: row !important;
        background-color: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        gap: 15px; /* 平板的gap */
    }

     .main-nav .nav-list li {
        width: auto !important;
        text-align: left !important;
        line-height: 55px !important; /* 平板行高 */
        border-bottom: none !important;
    }

    .main-nav .nav-list a {
        justify-content: flex-start !important;
        padding: 0 8px !important; /* 平板链接padding */
        font-size: 14px !important; /* 平板字体大小 */
        line-height: 55px !important; /* 确保行高正确 */
        height: 100% !important; /* 确保高度正确 */
        color: var(--text-light) !important;
    }
     /* 确保下拉菜单在平板端的行为正确 */
    .nav-list .has-dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .dropdown-menu {
        position: absolute !important;
        top: 55px !important; /* 平板下拉的 top 值 */
        background: var(--primary-blue) !important;
    }

    /* 你在 @media (max-width: 1023px) 中的其他平板特定样式可以保留，例如：*/
    /* .top-bar-wrapper { ... } */
    /* .logo img { height: 45px; } */
    /* 等等 */
}


/* --- 手机设备 (小于 768px) --- */
@media (max-width: 767px) {

    /* --- 1. 布局容器 --- */
    .container {
        padding: 0 10px !important; /* 确保手机上有边距，!important 以防万一 */
    }

    /* --- 2. 顶部栏 --- */
    .top-bar-wrapper {
        height: auto; /* 允许高度自适应内容 */
        padding: 10px 0;
        position: relative; /* 确保 z-index 生效 */
        z-index: 1001;      /* 比移动菜单稍高，确保它不被完全覆盖 */
    }
    .logo-contact-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }
    .logo img {
        height: 40px;
    }
    .contact-info {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 15px;
    }
    .right-top-section {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .social-top {
        justify-content: center; 
        flex-wrap: wrap;         
        gap: 6px; /* Reduced gap from 10px to 6px */              
        padding-right: 0;        
        width: 100%;             
    }
    .language-selector {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: 5px;
    }


    /* --- 3. 主导航 - 手机上通常需要汉堡菜单 --- */
    .main-nav-wrapper {
        height: 50px;
        position: relative; /* 为汉堡菜单的绝对定位和展开菜单的定位做准备 */
        z-index: 1000; /* 比 top-bar 低，但比页面内容高 */
    }
    .main-nav {
        height: 50px;
    }

    /* 隐藏桌面导航列表 */
    .nav-list {
        display: none; 
        position: absolute;
        top: 50px; /* 等于 .main-nav-wrapper 的高度 */
        left: 0;
        width: 100%;
        background: var(--primary-blue); 
        flex-direction: column; 
        padding: 10px 0;
        gap: 0;
        z-index: 999; /* 比 .main-nav-wrapper 低，确保在主导航条下方展开 */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);

        /* --- 解决全屏问题的关键修改 --- */
        height: auto; /* 高度由内容决定 */
        max-height: calc(100vh - 50px - 0px); /* 视口高度 - 主导航高度 - 顶部栏在滚动时的高度（如果是固定的） */
                                             /* 如果顶部栏不参与固定滚动，或者菜单希望覆盖它，则只减去主导航高度 */
                                             /* 假设顶部栏不固定或不影响下方菜单： max-height: calc(100vh - 50px); */
        overflow-y: auto; /* 如果内容超出计算的最大高度，则允许垂直滚动 */
        bottom: auto; /* 确保没有 bottom: 0 这样的设置 */
    }

    .nav-list.mobile-menu-active { 
        display: flex !important;
    }

    .nav-list li {
        width: 100%;
        text-align: center;
        line-height: 40px; 
        border-bottom: 1px solid rgba(255,255,255,0.1); 
    }
    .nav-list li:last-child {
        border-bottom: none;
    }
    .nav-list a { /* 手机菜单项链接 */
        width: 100%;
        padding: 0; 
        justify-content: center;
        font-size: 15px;
        line-height: inherit; 
        height: auto;
        color: var(--text-light); /* 确保手机菜单文字颜色，覆盖桌面端的修改 */
    }
    
    /* 汉堡菜单按钮 */
    .mobile-menu-toggle { 
        display: block; 
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        color: var(--text-light);
        cursor: pointer;
        z-index: 1001; /* 比 .main-nav-wrapper 和 .nav-list 都高，确保可点击 */
    }

    /* 隐藏桌面搜索框，或调整其位置/样式 */
    .nav-search {
        margin: 10px auto;
        max-width: 90%;
        /* display: none; /* 如果不希望在移动菜单中显示搜索框，可以取消注释 */
    }


    /* --- 4. 下拉菜单 (在手机上，下拉通常集成在主菜单的展开项中) --- */
    .nav-list .has-dropdown > a::after { 
        /* content: ' ▼'; */ 
        /* margin-left: 5px; */
    }
    .dropdown-menu { /* 手机端的子菜单 */
        position: static !important; 
        width: 100%;
        opacity: 1 !important; /* 确保可见 */
        visibility: visible !important; /* 确保可见 */
        transform: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: rgba(0,0,0,0.1) !important; /* 给子菜单一个稍微不同的背景以区分 */
        max-height: none; /* 移除桌面可能设置的 max-height */
        /* display: none; /* 由JS控制是否展开 */
    }
    
    /* 确保JS添加 .open 类到 .has-dropdown 时子菜单显示 */
    .nav-list .has-dropdown.open > .dropdown-menu {
        display: block !important; /* 或者 flex，取决于你的子菜单 li 排列 */
    }

    .dropdown-menu li a {
        padding: 8px 20px 8px 30px; 
        font-size: 14px;
        color: var(--text-light) !important; /* 确保子菜单文字颜色 */
    }
    .nav-list .has-dropdown::after { /* 移除桌面版的透明覆盖区域 */
        display: none !important;
    }


    /* --- 固定导航 --- */
    /* body.has-fixed-header { */
        /* 假设手机端的 top-bar-wrapper 滚动时高度变为 X (如果它是响应式的) */
        /* main-nav-wrapper 高度是 50px */
        /* padding-top: calc(X + 50px) !important; */
        /* 如果头部在手机上不是固定的，或者菜单设计为完全覆盖，则这条规则可能不需要或需要调整 */
        /* 例如，如果只有 main-nav-wrapper 固定: */
        /* padding-top: 50px !important; */
    /* } */

    /* 之前为了改变手机菜单展开时导航项颜色的规则 */
    /* 这条规则的特异性可能不够，或者颜色被覆盖了，已在上面的 .nav-list a 中直接设置 */
    /* .main-nav .nav-list.mobile-menu-active > li > a {
        color: var(--text-dark); 
    } */
}