/* 导航栏 */
 .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 100vw;
    /* 不能 overflow:hidden！会把向下展开的 dropdown 切掉。
       横向防溢出由 body { overflow-x: hidden } 兜底 */
    background: var(--dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 10000;
    padding: 0 22px;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}

.nav-left {
    display: none;
    align-items: center;
}

.back-btn {
    text-decoration: none;
    color: #fff;
    font-size: 36px;
    font-weight: bold;
}

.back-btn:hover {
    color: var(--primary);
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    width: 141px;
            height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.logo img {
    width: 100%;
    height: 100%;
}

.logo1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    width: 141px;
            height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.logo1 img {
    width: 100%;
    height: 100%;
}

.nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
    /* justify-content: center; */
    align-items: center;
    cursor: pointer;
}

.nav-links a {
    text-decoration: none;
    color: #333333;
    font-size: 13px;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--primary);
}

/* 当前页 active 状态（PC + 移动共用） */
.nav-links a.active,
.nav-dropdown.active > a,
.mobile-menu a.active {
    color: var(--primary);
}
.nav-dropdown.active .toggle-icon {
    color: var(--primary);
}

.nav-dropdown {
    position: relative;
}

/* 鼠标从 li 移动到 dropdown 中间不留空隙：用 ::after 做隐形桥梁（高度 40px 兜底） */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 40px;               /* 加高到 40px，更宽的容错 */
    display: none;
    z-index: 99;
}

.nav-dropdown .toggle-icon {
    font-size: 12px;
    margin-left: 4px;
    color: #333;
}

.nav-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 140px;
    padding: 8px 0;
    z-index: 100;               /* 提升层叠，确保不被其他元素挡住 */

    /* 用 opacity + visibility 控制显隐，离开 1 级后还能保留 0.3s 显示 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.3s;
}

/* 悬停展开二级菜单（基础层，PC / 平板 / 移动端都生效） */
.nav-dropdown:hover > .dropdown-menu,
.nav-dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* hover 状态 transition 不延迟，离开时 0.3s 延迟才执行 visibility 隐藏 */
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.nav-dropdown .dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: #333;
    font-size: 13px;
}

.nav-dropdown .dropdown-menu a:hover {
    background: #f5f5f5;
    color: var(--primary);
}

/* .nav-btn {
    background: var(--primary);
    color: var(--white) !important;
    padding: 8px 20px;
    border-radius: 4px;
} */

/* .nav-btn:hover {
    background: var(--primary-dark);
} */

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.menu-toggle span {
    width: 24px;
    height: 2px;
    background-color: #fff;
    transition: 0.3s;
}
.menu-toggle.is-active span {
    display: none !important;
}
.menu-toggle.is-active {
    background: url('/images/close.png') center/24px no-repeat !important;
}

/* 移动端菜单 */
.mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 0 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu a {
    display: block;
    padding: 12px 0;
    text-decoration: none;
    color: #333333;
    border-bottom: 1px solid #eee;
}

.mobile-menu-dropdown {
    display: none;
    padding-left: 20px;
    background: #f9f9f9;
    font-size: 16px;
}

.mobile-menu-dropdown.active {
    display: block;
}

.mobile-menu > .mobile-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    color: #333333;
    font-size: 16px;
    border-bottom: 1px solid #eee;
}

/* PC端适配 (≥769px)：半透明深色背景 + 16px 白色字体 + 二级菜单悬停展开 */
@media (min-width: 769px) {
    .navbar {
        background: rgba(34, 40, 43, 0.25);
        box-shadow: none;
    }
    .nav-links a {
        color: #fff;
        font-size: 16px;
    }
    .nav-dropdown .toggle-icon {
        color: rgba(255, 255, 255, 0.85);
    }
    .nav-dropdown.active .toggle-icon,
    .nav-dropdown:hover .toggle-icon {
        color: var(--primary);
    }
    /* PC 端：显示隐形桥梁（从 li 到 dropdown 中间 20px 透明 buffer，鼠标不丢 hover） */
    .nav-dropdown:hover::after,
    .nav-dropdown:focus-within::after {
        display: block;
    }
}

/* 平板端适配 (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-container {
        height: 56px;
    }

    .nav-links {
        gap: 20px;
    }

    .nav-btn {
        padding: 6px 16px;
    }

    .logo {
        font-size: 20px;
        display: flex;
    align-items: center;
    justify-content: center;
    }
    .logo1 {
        font-size: 20px;
        display: flex;
    align-items: center;
    justify-content: center;
    }
}

/* PC端适配 (≥1025px) */
@media (min-width: 1025px) {
    .nav-container {
        height: 70px;
        max-width: 100%;
    }
    .nav-links {
        gap: 40px;
    }

    .logo {
        font-size: 28px;
        display: flex;
    align-items: center;
    justify-content: center;
    }
    .logo1 {
        font-size: 28px;
        display: flex;
    align-items: center;
    justify-content: center;
    }
}

/* 移动端 (≤768px) */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .mobile-menu {
        top: 64px;
    }
    .mobile-menu a {
        font-size: 16px;
    }

    .logo1 {
        width: 105px;
        height: 36px;
    }
}