/* =========================================================
   多途网络 · 全站公共头部美化（header-enhance.css）
   说明：
   - 仅作用于 .header 区域，全站所有引入 header.htm 的页面共享
   - 仅在 ≥1024px 大屏生效，移动端保持原样
   - 页面有 banner 时 header 默认透明，下拉滚动后自动变白
     （由 header-enhance.js 自动检测 .banner / #banner 并加 .dt-has-banner 类）
   ========================================================= */

/* ========== PC 端：禁用 wow.js 把标题永久隐藏的副作用（仅大屏，避免干扰手机排版） ========== */
@media screen and (min-width: 1024px) {
.wow,
h2.wow,
h3.wow,
img.wow,
.section .section-title h2.wow,
.section .section-title h2 {
    visibility: visible !important;
    opacity: 1 !important;
}

    /* 1) header 内容居中（避免大屏 logo 与"立即注册"两端拉得太开） */
    .header .top {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 28px;
        box-sizing: border-box;
    }
    .header .logo { margin-left: 0 !important; }

    /* 2) header 底色与过渡 */
    .header {
        transition:
            background-color .3s ease,
            backdrop-filter .3s ease,
            box-shadow .3s ease,
            border-color .3s ease;
        box-shadow: 0 6px 24px -14px rgba(15, 32, 68, .15);
        border-bottom: 1px solid rgba(238, 238, 238, 0);
    }

    /* —— 有 Banner 的页面：完全透明 + backdrop-filter 模糊（与首页 index.css 完全一致）——
       两条触发路径：
       ① CSS :has()  —— 自动检测 body 内有 .banner / #banner，无需 JS（现代浏览器）
       ② .dt-has-banner —— 由 header-enhance.js / inline script 加上（老浏览器兜底） */
    body:has(.banner) .header:not(.header-fixed):not(.dt-scrolled),
    body:has(#banner) .header:not(.header-fixed):not(.dt-scrolled),
    body:has(.banner) .header:not(.header-fixed):not(.dt-scrolled):hover,
    body:has(#banner) .header:not(.header-fixed):not(.dt-scrolled):hover,
    body:has(.banner) .header:not(.header-fixed):not(.dt-scrolled):focus-within,
    body:has(#banner) .header:not(.header-fixed):not(.dt-scrolled):focus-within,
    .header.dt-has-banner:not(.dt-scrolled):not(.header-fixed),
    .header.dt-has-banner:not(.dt-scrolled):not(.header-fixed):hover,
    .header.dt-has-banner:not(.dt-scrolled):not(.header-fixed):focus-within {
        background-color: transparent !important;
        background-image: none !important;
        backdrop-filter: blur(16.2px) !important;
        -webkit-backdrop-filter: blur(16.2px) !important;
        box-shadow: none !important;
        border-bottom-color: transparent !important;
    }

    /* —— 滚动超过阈值后变白（透明 header 也好，固定 header 也好都生效） —— */
    .header.dt-scrolled,
    .header.header-fixed,
    body:has(.banner) .header.dt-scrolled,
    body:has(#banner) .header.dt-scrolled {
        background-color: rgba(255, 255, 255, .92) !important;
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        box-shadow: 0 8px 28px -14px rgba(15, 32, 68, .18) !important;
        border-bottom-color: rgba(238, 238, 238, .6) !important;
    }

    /* 3) 导航项 hover 下划线改为渐变光带 */
    .nav li > a::after {
        background: linear-gradient(90deg, #2981ff, #22d3ee) !important;
        height: 3px !important;
        bottom: 12px !important;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(41, 129, 255, .45);
    }
    .nav li.on > a::after,
    .nav li:hover > a::after { width: 22px !important; }

    /* 4) "立即注册" 按钮：渐变 + 流光扫描 hover 效果 */
    .top-r li .btn-register {
        background: linear-gradient(135deg, #2981ff 0%, #22d3ee 100%) !important;
        position: relative;
        overflow: hidden;
        transition: all .3s ease;
        font-weight: 600;
        letter-spacing: .5px;
    }
    .top-r li .btn-register::before {
        content: "";
        position: absolute;
        top: 0; left: -100%;
        width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
        transition: left .6s ease;
    }
    .top-r li .btn-register:hover::before { left: 100%; }
    .top-r li .btn-register:hover {
        background: linear-gradient(135deg, #3a8eff 0%, #2dddee 100%) !important;
        box-shadow: 0 8px 22px -8px rgba(41, 129, 255, .55);
    }
}