/* ==========================================================================
   TaiQi Home Nav — index.aspx 独立首页导航（已脱离 Base.master）
   --------------------------------------------------------------------------
   只服务首页一个页面。结构 / 类名沿用 master.css 的外壳契约（.nav-wrap /
   .nav-bar / .nav-pop-list / #myInfoBox / .suspension / .foot），这样
   master.css 里的基础规则与 jQuery 的 show/hide 逻辑照常生效；本文件用
   .tq-shell .tq-nav 三层前缀（+1 类特异度）把首页导航升级成深色渐变高端版。

   三条继承铁律：
   1. 本文件在 /css/home.css 之后加载，且只写导航相关选择器，不参与页面正文级联。
   2. 不给 body / .tq-shell 设 font-size，字号逐组件显式声明。
   3. .nav-pop-list / #myInfoBox / .Js_hotSearchKeyWord 由 jQuery .show()/.hide()
      写内联 display，元素本身绝不设 display:flex。
   ========================================================================== */

/* ---------- 0. 首页导航专属 token ---------- */
:root {
    --tq-nav-h: 76px;
    --tq-nav-max: var(--shell-max);
    /* 深色导航渐变：深海军蓝 → 品牌蓝，只在本页导航使用 */
    --tq-nav-g1: var(--brand-950);
    --tq-nav-g2: var(--brand-800);
    --tq-nav-g3: var(--brand-700);
    --tq-nav-g4: var(--brand-600);
    --tq-nav-fg: var(--surface);
    --tq-nav-fg-dim: 0 0% 100% / .72;
    --tq-nav-mega-w: 720px;
    --tq-nav-ring: 0 0 0 1px hsl(0 0% 100% / .14);
    --tq-shadow-nav: 0 1px 0 hsl(0 0% 100% / .08) inset, 0 18px 40px -24px hsl(var(--brand-950) / .9);
    --tq-shadow-mega: 0 24px 60px -24px hsl(var(--ink-900) / .34);
}

/* ---------- S1. 导航容器：吸顶深色渐变条 ---------- */
.tq-shell .tq-nav.nav-wrap {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    height: auto;
    background: linear-gradient(112deg, hsl(var(--tq-nav-g1)) 0%, hsl(var(--tq-nav-g2)) 38%, hsl(var(--tq-nav-g3)) 70%, hsl(var(--tq-nav-g4)) 100%);
    box-shadow: var(--tq-shadow-nav);
    isolation: isolate;
}

    /* 顶部品牌色细线，替代生硬的边框 */
    .tq-shell .tq-nav.nav-wrap::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 2px;
        background: linear-gradient(90deg, hsl(var(--brand-600) / 0) 0%, hsl(var(--accent-400) / .85) 34%, hsl(var(--surface) / .9) 50%, hsl(var(--accent-400) / .85) 66%, hsl(var(--brand-600) / 0) 100%);
        pointer-events: none;
    }

/* 光晕层：纯装饰，不参与交互 */
.tq-shell .tq-nav .tq-nav-aurora {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

    .tq-shell .tq-nav .tq-nav-aurora::before,
    .tq-shell .tq-nav .tq-nav-aurora::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(28px);
    }

    .tq-shell .tq-nav .tq-nav-aurora::before {
        top: -110px;
        left: 8%;
        width: 360px;
        height: 220px;
        background: hsl(var(--brand-400) / .28);
    }

    .tq-shell .tq-nav .tq-nav-aurora::after {
        top: -90px;
        right: 12%;
        width: 300px;
        height: 200px;
        background: hsl(var(--accent-400) / .18);
    }

.tq-shell .tq-nav .nav-bar {
    position: relative;
    max-width: var(--tq-nav-max);
    height: var(--tq-nav-h);
    padding: 0 var(--shell-pad);
    gap: var(--sp-4);
    color: hsl(var(--tq-nav-fg));
}

/* ---------- S2. Logo 芯片 ---------- */
.tq-shell .tq-nav .logo .wrap-logo {
    height: 46px;
    padding: 6px 14px;
    /* background: hsl(var(--surface)); */
    border-radius: var(--r-md);
    overflow: hidden;
    /* box-shadow: 0 10px 24px -14px hsl(var(--brand-950) / .9), var(--tq-nav-ring); */
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}

    .tq-shell .tq-nav .logo .wrap-logo:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 30px -14px hsl(var(--brand-950) / .95), var(--tq-nav-ring);
    }

    .tq-shell .tq-nav .logo .wrap-logo img {
        height: 32px;
        border-radius: 4px;
    }

/* ---------- S3. 菜单项 ----------
   重要：这里的上色规则一律用子代组合符限定到「导航条直接项」，
   绝不能写成 .nav-list-item a 这种后代选择器——它会把白色压进
   .nav-pop-list 下拉面板（master.css 的面板深色规则特异度更低，会被反杀，
   结果就是深底白字规则串台成白底白字）。 */
.tq-shell .tq-nav .nav-ul-l {
    font-size: var(--fs-16);
}

.tq-shell .tq-nav .nav-bar .nav-list-item > a,
.tq-shell .tq-nav .nav-bar .nav-list-item > .pos-rel > .nav-list-tit1 {
    min-width: 96px;
    padding: 0 var(--sp-4);
    font-size: var(--fs-16);
    font-weight: 500;
    letter-spacing: .04em;
    color: hsl(var(--tq-nav-fg));
}

    /* hover：整块高亮胶囊 + 底部渐变指示条 */
    .tq-shell .tq-nav .nav-bar .nav-list-item > a:hover,
    .tq-shell .tq-nav .nav-bar .nav-list-item > .pos-rel:hover > .nav-list-tit1,
    .tq-shell .tq-nav .nav-bar .nav-list-item:hover > .pos-rel > .nav-list-tit1 {
        background: hsl(0 0% 100% / .12);
        color: hsl(var(--tq-nav-fg));
    }

    .tq-shell .tq-nav .nav-bar .nav-list-item > a::after,
    .tq-shell .tq-nav .nav-bar .nav-list-item > .pos-rel::after {
        right: 14px;
        left: 14px;
        bottom: 10px;
        height: 3px;
        border-radius: var(--r-full);
        background: linear-gradient(90deg, hsl(var(--accent-300)), hsl(var(--surface)));
        opacity: 1;
        box-shadow: 0 0 12px hsl(var(--accent-400) / .7);
    }

    .tq-shell .tq-nav .nav-bar .nav-list-item > a:hover::after,
    .tq-shell .tq-nav .nav-bar .nav-list-item:hover > .pos-rel::after {
        transform: scaleX(1);
    }

/* 当前页：指示条常驻 + 文字略提亮 */
.tq-shell .tq-nav .nav-bar .nav-list-item.is-active > a {
    background: hsl(0 0% 100% / .1);
    font-weight: 600;
}

    .tq-shell .tq-nav .nav-bar .nav-list-item.is-active > a::after {
        transform: scaleX(1);
    }

.tq-shell .tq-nav .nav-icon2 svg {
    width: 15px;
    height: 15px;
}

/* ---------- S4. 文档分类mega 面板 ---------- */
/* 面板整棵子树强制深色：S3 的白色只给导航条直接项，这里再兜一层底，
   避免任何渗进面板的白字规则把文字打成「白底白字」 */
.tq-shell .tq-nav .nav-pop-list {
    top: calc(100% + 10px);
    color: hsl(var(--ink-700));
    border: 1px solid hsl(var(--line));
    border-radius: var(--r-lg);
    box-shadow: var(--tq-shadow-mega);
    animation: tq-nav-pop-in 220ms var(--ease-spring) both;
}

    /* 面板与导航条之间留了 10px 间隙，master.css 的透明桥只有 9px，
       鼠标穿过最后 1px 会触发 li 的 mouseleave 把面板关掉——这里把桥拉长到 11px 盖住间隙 */
    .tq-shell .tq-nav .nav-pop-list::after {
        top: -11px;
        height: 11px;
    }

/* 面板标题行：告诉用户父分类可点进列表 */
.tq-shell .tq-nav .tq-mega-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5) var(--sp-3);
    background: linear-gradient(180deg, hsl(var(--brand-50)), hsl(var(--surface)));
    border-bottom: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    font-size: var(--fs-13);
    color: hsl(var(--ink-500));
}

    .tq-shell .tq-nav .tq-mega-head b {
        font-size: var(--fs-15);
        font-weight: 600;
        letter-spacing: .06em;
        color: hsl(var(--ink-900));
    }

    .tq-shell .tq-nav .tq-mega-head a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: hsl(var(--brand-600));
        transition: color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .tq-nav .tq-mega-head a:hover {
            color: hsl(var(--brand-800));
        }

        .tq-shell .tq-nav .tq-mega-head a svg {
            width: 13px;
            height: 13px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

.tq-shell .tq-nav .nav-pop-list2 {
    width: var(--tq-nav-mega-w);
    padding-bottom: var(--sp-2);
}

    /* 单栏行式目录：一行一个父分类，标题在左、子分类胶囊在右，
       行与行之间一条浅分隔线，整行 hover 浮出浅品牌蓝圆角底 */
    .tq-shell .tq-nav .nav-pop-list2 .nav-pop-scroll {
        display: flex;
        flex-direction: column;
        max-height: min(72vh, 600px);
        padding: var(--sp-1) 18px 10px;
    }

    /* 行用负外边距左右各撑出 8px：分隔线两端留白、hover 圆角块不贴面板边 */
    .tq-shell .tq-nav .nav-pop-list2 .class-lay {
        align-items: center;
        gap: var(--sp-3) var(--sp-4);
        margin: 0 -8px;
        padding: 16px 8px;
        border-bottom: 1px solid hsl(var(--line-soft));
        border-radius: var(--r-md);
    }

        .tq-shell .tq-nav .nav-pop-list2 .class-lay:last-child {
            border-bottom: 0;
        }

        .tq-shell .tq-nav .nav-pop-list2 .class-lay:hover {
            background: hsl(var(--brand-50));
        }

        .tq-shell .tq-nav .nav-pop-list2 .class-lay h3 {
            flex: 0 0 112px;
            padding-top: 0;
            font-size: var(--fs-15);
            line-height: 22px;
        }

            .tq-shell .tq-nav .nav-pop-list2 .class-lay h3 a.tit {
                font-size: var(--fs-15);
            }

    /* 子分类胶囊：浅灰底 + 深灰字，hover 升级品牌蓝底白字 */
    .tq-shell .tq-nav .nav-pop-list2 .class-lay ul {
        gap: var(--sp-2);
    }

    .tq-shell .tq-nav .nav-pop-list2 .class-lay li a {
        padding: 5px 12px;
        background: hsl(var(--surface-muted));
        font-size: var(--fs-13);
        color: hsl(var(--ink-600));
    }

        .tq-shell .tq-nav .nav-pop-list2 .class-lay li a:hover {
            background: hsl(var(--brand-600));
            color: hsl(var(--surface));
            box-shadow: 0 6px 14px -8px hsl(var(--brand-700) / .8);
        }

/* 个人中心下拉：与mega 面板同一套圆角与动效；
   链接必须显式深色，不能靠继承（继承会拿到导航条的白色） */
.tq-shell .tq-nav .nav-pop-list5 {
    min-width: 156px;
    padding: 6px;
}

    .tq-shell .tq-nav .nav-pop-list5 .ui-navlist2 li a {
        padding: 8px var(--sp-4);
        border-radius: var(--r-sm);
        color: hsl(var(--ink-700));
    }

        .tq-shell .tq-nav .nav-pop-list5 .ui-navlist2 li a:hover {
            color: hsl(var(--brand-700));
        }

@keyframes tq-nav-pop-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------- S5. 右侧工具区 ---------- */
.tq-shell .tq-nav .nav-tool {
    height: 36px;
    padding: 0 var(--sp-4);
    border: 1px solid hsl(0 0% 100% / .28);
    background: hsl(0 0% 100% / .08);
    font-size: var(--fs-14);
    letter-spacing: .02em;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

    .tq-shell .tq-nav .nav-tool:hover {
        background: hsl(var(--surface));
        border-color: hsl(var(--surface));
        box-shadow: 0 10px 22px -12px hsl(var(--brand-950) / .9);
        color: hsl(var(--brand-700));
    }

    .tq-shell .tq-nav .nav-tool svg {
        width: 15px;
        height: 15px;
    }

.tq-shell .tq-nav .topbar-avatar {
    width: 34px;
    height: 34px;
    line-height: 34px;
    border: 1px solid hsl(0 0% 100% / .5);
    box-shadow: 0 0 0 3px hsl(0 0% 100% / .12);
}

    .tq-shell .tq-nav .topbar-avatar:hover {
        box-shadow: 0 0 0 3px hsl(var(--accent-300) / .5);
    }

.tq-shell .tq-nav .auth-btn {
    min-width: 66px;
    height: 36px;
    font-size: var(--fs-14);
}

    .tq-shell .tq-nav .auth-btn.login-btn {
        border-color: hsl(0 0% 100% / .4);
    }

        .tq-shell .tq-nav .auth-btn.login-btn:hover {
            background: hsl(0 0% 100% / .16);
            border-color: hsl(0 0% 100% / .85);
        }

    .tq-shell .tq-nav .auth-btn.register-btn {
        background: linear-gradient(120deg, hsl(var(--surface)), hsl(var(--brand-50)));
        box-shadow: 0 10px 24px -12px hsl(var(--brand-950) / .95);
    }

        .tq-shell .tq-nav .auth-btn.register-btn:hover {
            background: linear-gradient(120deg, hsl(var(--brand-100)), hsl(var(--brand-200)));
            color: hsl(var(--brand-800));
        }

/* 头像面板：与mega 面板统一动效 */
.tq-shell .tq-nav #myInfoBox {
    top: calc(100% + 10px);
    animation: tq-nav-pop-in 220ms var(--ease-spring) both;
}

/* ---------- S6. 响应式（首页导航比外壳多一档收敛） ---------- */
@media screen and (max-width: 1240px) {
    .tq-shell .tq-nav .nav-pop-list2 {
        width: min(var(--tq-nav-mega-w), calc(100vw - 2 * var(--shell-pad)));
    }
}

@media screen and (max-width: 1120px) {
    .tq-shell .tq-nav .nav-bar {
        gap: var(--sp-2);
    }

        .tq-shell .tq-nav .nav-bar .nav-list-item > a,
        .tq-shell .tq-nav .nav-bar .nav-list-item > .pos-rel > .nav-list-tit1 {
            min-width: 0;
            padding: 0 10px;
            font-size: var(--fs-14);
        }

    /* 窄屏时把面板从「贴着触发项」改成「贴着版心左边」，避免伸出视口右缘；
       触发项因此不再与箭头对齐，箭头直接隐藏 */
    .tq-shell .tq-nav .nav-list-item.Js_CategoryHover {
        position: static;
    }

    .tq-shell .tq-nav .nav-pop-list2 {
        left: var(--shell-pad);
        width: calc(100vw - 2 * var(--shell-pad));
        max-width: var(--tq-nav-mega-w);
    }

        .tq-shell .tq-nav .nav-pop-list2::before {
            display: none;
        }
}

/* ---------- S7. 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    .tq-shell .tq-nav .nav-pop-list,
    .tq-shell .tq-nav #myInfoBox {
        animation: none;
    }

    .tq-shell .tq-nav .logo .wrap-logo,
    .tq-shell .tq-nav .nav-tool,
    .tq-shell .tq-nav .topbar-avatar {
        transition-duration: 1ms;
    }
}