/**
 * 顶部导航 —— 深色玻璃改版
 *
 * ── 结构 ──────────────────────────────────────────────────────────
 * 本文件分三段：
 *   一、外壳与配色      全部视口生效（PC / 移动端共用同一套底色）
 *   二、≥769px 布局     pill 主菜单、chip 分类、胶囊搜索、滚动收起
 *   三、≤768px 布局     移动端自己的横向菜单、汉堡、图标
 *
 * ── 为什么整份是 CSS ──────────────────────────────────────────────
 * 头部 HTML 由 Modules/Templates/Header.php 挂在 b2_header 上输出，
 * 不是模板文件，走不了 locate_template，改结构就得整份接管 933 行。
 * 唯一需要 PHP 的是 logo 换白版（见 inc/header.php）。
 *
 * ── 1.23.0 的三处修正 ─────────────────────────────────────────────
 * 1. 移动端之前整份包在 min-width:769px 里，完全没改到 —— 现在拆开了。
 * 2. 两行之间那条 1px 白线太生硬 —— 去掉，改成 30px 的软渐变过渡。
 * 3. 配色发灰 —— 见下面「不透明度」那段的推算。
 */

/* =========================================================================
 * 一、外壳与配色（全部视口）
 * ====================================================================== */

/*
 * ── 不透明度为什么从 .78 提到 .95 ──────────────────────────────────
 *
 * 半透明色最终呈现的是它和背后内容的混合结果。1.22.0 用的是
 * rgba(11,15,23,.78)，而头部背后是接近白色的页面（≈ rgb(240,242,245)）：
 *
 *     .78 × (11,15,23) + .22 × (240,242,245) ≈ rgb(61,65,72)
 *
 * —— 算出来是一块**中灰**，不是深蓝。屏幕上看到的发灰、发脏就是这么来的。
 *
 * 提到 .95：
 *
 *     .95 × (9,13,26) + .05 × (240,242,245) ≈ rgb(21,24,37)
 *
 * 才是真正立得住的深蓝。
 *
 * 这同时解决了两行色差：背后透过来的比例从 22% 降到 5%，
 * 第一行（背后是浅色页面）和第二行（背后是深色 banner 图）的差异
 * 也跟着缩到原来的四分之一，接缝自然就看不出来了。
 *
 * blur 保留 —— 滚动时内容从底下擦过仍有一点通透感，
 * 只是不再让它主导颜色。
 */
.social-top .site-header-in {
    background-color: rgba(9, 13, 26, .95);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    backdrop-filter: blur(26px) saturate(140%);
    color: rgba(255, 255, 255, .88);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .07),
        0 10px 34px rgba(4, 8, 18, .30);
}

/* 滚动后再压实一点，长文滚动时文字始终清楚 */
.site.action .site-header-in {
    background-color: rgba(7, 10, 21, .97);
}

/*
 * 光晕 + 分区。
 *
 * ⚠️ 不能给 .site-header-in 加 overflow:hidden 来裁光晕 ——
 *    主菜单的下拉浮层是它的绝对定位后代，会被一起裁掉。
 *    所以全部用 gradient 画在 ::before 的 background 上：
 *    背景本身不会溢出盒子，压根不需要裁剪。
 *
 * 三层，从上到下：
 *   1  蓝色光晕（偏左）
 *   2  紫色光晕（偏右）
 *   3  顶部一道很淡的高光，模拟光打在玻璃厚度上
 *
 * ── 1.24.0：两行之间不再做任何分隔 ────────────────────────────────
 * 1.22.0 用 1px 白线，1.23.0 换成 46→78px 的暗色渐变带。
 * 用户对两版都反馈「分割线太明显」。
 *
 * 真正的原因是**两条线叠在一起**：
 *   · 我加的那条暗色渐变带（rgba(0,0,0,.20)）
 *   · 父主题 .top-style-bottom 上一条 border-top: 1px rgba(245,246,247,.32)
 *     —— 这条 1.22/1.23 都漏掉了：当时只清了 .header-banner / .header 的
 *     border，没注意到真正画线的是它们里面那个 .top-style-bottom。
 *
 * 结论：两行本来就是同一块玻璃，不需要任何分隔。分类 chip 自带底色，
 * 已经足够把第二行区分出来了。两条线一起去掉。
 */
.social-top .site-header-in::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(820px 340px at 10% -34%, rgba(58, 124, 255, .34), transparent 66%),
        radial-gradient(760px 360px at 68% -46%, rgba(146, 80, 255, .28), transparent 68%),
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 44px);
}

/*
 * 两行自己的白底清掉，露出下面的玻璃。
 *
 * ⚠️ 这份选择器列表里有两个坑，都是「分割线」的真身：
 *
 * ① .top-style-bottom 必须单独列出来（PC 端那条线）
 *    它是 .header 里面的一层包裹，父主题在**它**身上写了
 *    border-top: 1px solid rgba(245,246,247,.32)。
 *    只清 .header 的 border 是清不掉的。
 *
 * ② .header-banner-left 必须写成三段（移动端那条线）
 *    mobile.css:264 写的是
 *        .social-top .header-banner-content .header-banner-left{
 *            border-top: 1px solid #eaeaea4f;
 *        }
 *    权重 (0,0,3,0)。1.24.0 这里用的是 .social-top .header-banner-left，
 *    只有 (0,0,2,0) —— **权重不够，被父主题压住**，
 *    所以 PC 端修好了、移动端那条线还在。
 *    这里补足到同样三段，靠加载顺序取胜。
 */
.social-top .header-banner.top-style,
.social-top .header-banner-content .header-banner-left,
.social-top .header,
.social-top .top-style-bottom {
    background: transparent;
    border: 0;
}

/* 第二行那层空遮罩不再需要，留着只会挡事 */
.social-top .top-style-blur {
    display: none;
}

/* 压在光晕之上（父主题已给第一行 z-index:6，这里补第二行） */
.social-top .header {
    position: relative;
    z-index: 1;
}

/* ── Logo ─────────────────────────────────────────
 *
 * 后台若配了「白色 LOGO」（normal_main / img_logo_white），
 * inc/header.php 会直接换成那张，这里不用管。
 *
 * 没配的话退回滤镜反白：brightness(0) 先把图压成纯黑，再 invert 成纯白。
 * 会丢掉原 logo 里的蓝色，但在深色底上至少是干净可读的。
 */
.social-top .header-logo .b2c-logo-invert {
    filter: brightness(0) invert(1);
}

.social-top .header-logo .site-title {
    color: #fff;
}

/* ── 浮层保持浅色 ─────────────────────────────────
 *
 * ⚠️ .site-header-in 上设了 color:rgba(255,255,255,.88)，而父主题这类浮层
 *    大量使用 color:inherit —— 不显式写回深色，浮层里会是白字白底。
 *    移动端那个侧滑抽屉（#mobile-menu）也是同一个问题，一并处理。
 */
.social-top .top-search .header-search-select,
.social-top .header-banner-left .ym-menu .sub-menu {
    background: #fff;
    color: #1a1a1a;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(4, 8, 18, .24);
}

.social-top .top-search .header-search-select a,
.social-top .header-banner-left .ym-menu .sub-menu li a {
    color: #1a1a1a;
}

.social-top #mobile-menu.mobile-box {
    color: #121212;
}

/* =========================================================================
 * 二、≥769px 布局
 * ====================================================================== */

@media screen and (min-width: 769px) {

/* ── 主菜单：pill ─────────────────────────────── */

.social-top .header-banner-left .ym-menu > ul.menu {
    display: flex;
    align-items: center;
    gap: 4px;
}

.social-top .header-banner-left .ym-menu > ul.menu > li {
    display: flex;
    align-items: center;
    height: 64px;
}

.social-top .header-banner-left .ym-menu > ul.menu > li > a {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    padding: 8px 14px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .70);
    transition: color .18s ease, background-color .18s ease;
}

.social-top .header-banner-left .ym-menu > ul.menu > li > a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

/*
 * 选中态用品牌蓝紫，而不是 1.22.0 那种灰白玻璃 ——
 * 灰白在深色底上偏「系统控件」，蓝紫才和站点调性一致。
 */
.social-top .header-banner-left .ym-menu > ul.menu > li.current-menu-item > a {
    color: #fff;
    background: linear-gradient(120deg, rgba(58, 124, 255, .34), rgba(146, 80, 255, .28));
    box-shadow: inset 0 0 0 1px rgba(130, 165, 255, .34);
}

/*
 * ⚠️ 父主题用 a::after 画了一条 10×2px 的蓝色下划线表示当前项。
 *    选中态改成 pill 后它是重复表达，且贴在 pill 底边上很难看。
 *    只关掉当前项那一条（HOT 角标是独立的 <small>，不受影响）。
 */
.social-top .header-banner-left .ym-menu > ul.menu > li.current-menu-item > a::after {
    display: none;
}

/* 深色底上把角标描边改成透明，免得露出一圈白边 */
.social-top .header-banner-left .b2small {
    border-color: transparent;
}

/* ── 搜索：胶囊 ───────────────────────────────── */

.social-top .top-search form {
    display: flex;
    align-items: center;
    height: 38px;
    padding-right: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .13);
    transition: background-color .2s ease, border-color .2s ease;
}

.social-top .top-search form:focus-within {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(120, 160, 255, .45);
}

.social-top .top-search-select {
    color: rgba(255, 255, 255, .78);
    border-right: 1px solid rgba(255, 255, 255, .16);
    padding: 0 9px 0 16px;
}

.social-top .top-search input.search-input {
    width: 190px;
    color: #fff;
    font-size: 13.5px;
    padding: 8px 40px 8px 12px;
}

.social-top .top-search input.search-input::placeholder {
    color: rgba(255, 255, 255, .40);
}

/*
 * 放大镜改成实心圆按钮。
 * 父主题给的是 position:absolute; right:-5px; top:0 —— 那是贴着方框右边缘算的，
 * 换成胶囊后要往里收，并且垂直居中。
 */
.social-top .top-search .search-button-action {
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(120deg, #3a7cff, #8b4aff);
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-top .top-search .search-button-action i {
    font-size: 15px;
}

.social-top .top-search .header-search-select {
    top: 44px;
    padding: 6px;
}

.social-top .top-search .header-search-select a {
    padding: 7px 12px;
}

/* ── 发布 / 通知 / 登录 ───────────────────────── */

.social-top .change-theme > div > a,
.social-top .change-theme > div > button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .82);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .18s ease;
}

.social-top .change-theme > div > a:hover,
.social-top .change-theme > div > button:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.social-top .change-theme > div > a i,
.social-top .change-theme > div > button i {
    font-size: 19px;
    line-height: 1;
}

.social-top .header-login-button button {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    border-radius: 999px;
    padding: 8px 18px;
}

.social-top .header-login-button button:hover {
    background: rgba(255, 255, 255, .18);
}

/* ── 分类行：chip ─────────────────────────────── */

.social-top .top-menu .top-menu-ul {
    gap: 6px;
    justify-content: flex-start;
}

.social-top .top-menu ul li.depth-0 {
    align-items: center;
}

/*
 * ⚠️ 父主题给的是 height:57px / line-height:57px / opacity:.8 ——
 *    整个 <a> 就是一条 57px 高的色块，chip 化必须把这三个都改掉，
 *    只改 padding 会得到一个很高的胶囊。
 */
.social-top .top-menu ul li.depth-0 > a {
    height: auto;
    line-height: 1;
    opacity: 1;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .60);
    background: rgba(255, 255, 255, .055);
    transition: color .18s ease, background-color .18s ease;
}

/* 第一项父主题写了 padding-left:0，chip 化后要还回来 */
.social-top .top-menu .top-menu-ul > li.depth-0:first-child > a {
    padding-left: 13px;
}

.social-top .top-menu ul li.depth-0 > a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .13);
}

.social-top .top-menu ul li.depth-0.current-menu-item > a,
.social-top .top-menu ul li.depth-0.current-menu-parent > a,
.social-top .top-menu ul li.depth-0.current-category-ancestor > a {
    color: #fff;
    background: linear-gradient(120deg, #3a7cff, #8b4aff);
    box-shadow: 0 4px 14px rgba(58, 124, 255, .30);
}

/* 父主题的 hover 下划线（.hob）和 chip 是重复表达，关掉 */
.social-top .top-menu ul li.depth-0 > a .hob {
    display: none;
}

/* ── 投稿 ─────────────────────────────────────── */

.social-top .top-submit .button,
.social-top .top-submit button {
    border: 0;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0b0f17;
    background: #eaf1ff;
    box-shadow: none;
    transition: background-color .18s ease, transform .18s ease;
}

.social-top .top-submit .button:hover,
.social-top .top-submit button:hover {
    background: #fff;
    transform: translateY(-1px);
}

/* ── 滚动时收起分类行 ─────────────────────────────
 *
 * ── 父主题原本的行为正好相反 ──────────────────────────────────────
 * Assets/fontend/main.js 的 b2HeaderTop() 在下滚时给 #page.site 加 .up，
 * 然后 CSS 里：
 *     .social-top .site.up .site-header-in{ transform: translate(0,-64px) }
 *     .header-banner-left.hidden{ opacity: 0 }
 * —— 把**第一行**（logo、主菜单、搜索、用户）顶出视口，留下分类行。
 *
 * 需求是反过来：留主导航、收起分类行。所以这里把父主题那两条都撤销。
 * .up 这个 class 由父主题的滚动脚本负责加减，子主题不用自己监听滚动。
 *
 * ⚠️ 折叠的目标必须是 .header 本身，不能是它里面的 .top-style-bottom。
 *    父主题给 .social-top .header 写死了 height:55px ——
 *    只折叠内层，外层这 55px 还占着，实测头部高度纹丝不动（119px）。
 *    max-height 能压过 height，所以直接加在 .header 上。改后实测 119 → 65px。
 *
 * ⚠️ 折叠用 max-height + overflow:hidden，会裁掉第二行的下拉浮层。
 *    线上已确认这 10 个分类项都没有子菜单，所以当前安全。
 *    将来若给分类加了二级菜单，这里要改成别的收起方式。
 *
 * 这一段只在 PC 生效 —— 移动端父主题原本的「下滚整条收起」是合理的，
 * 不要动。
 */

body.social-top #page.site.up .site-header-in {
    transform: translate(0);
}

#page.site .header-banner-left.hidden {
    opacity: 1;
}

#page.site .header.social-top {
    max-height: 56px;
    overflow: hidden;
    transition: max-height .3s ease, opacity .22s ease;
}

#page.site.up .header.social-top {
    max-height: 0;
    opacity: 0;
}

} /* /min-width:769px */

/* =========================================================================
 * 三、≤768px 布局
 *
 * 移动端头部是另一套结构，线上实测（606px 视口）：
 *
 *   .site-header-in                 591×91
 *     .header-banner.top-style      591×91   ← 整个头部都在这一行里
 *       .header-logo                绝对定位，left:12 top:5
 *       .header-banner-right          搜索图标 / 通知 / 头像，top:11
 *       #ym-menu                      横向主菜单，top:49，高 47
 *       .top-style-menu               汉堡，绝对定位在右
 *     .header.social-top            591×0    ← 只用来装侧滑抽屉
 *
 * 所以移动端**没有第二行**，主菜单就在第一行下面。
 * 底色已由第一段统一处理，这里只管前景元素的颜色和形态。
 * ====================================================================== */

@media screen and (max-width: 768px) {

/* 横向主菜单 */
.social-top .header-banner-left .ym-menu > ul.menu > li > a {
    color: rgba(255, 255, 255, .68);
    font-weight: 500;
}

.social-top .header-banner-left .ym-menu > ul.menu > li.current-menu-item > a {
    color: #fff;
    font-weight: 700;
}

/*
 * 当前项的下划线：手机上没有 pill 的空间，保留这条线，
 * 但把颜色提亮一点，深色底上原来的 #0066ff 偏暗。
 */
.social-top .header-banner-left .ym-menu > ul.menu > li.current-menu-item > a::after {
    background: linear-gradient(90deg, #4d8cff, #9b6bff);
    height: 3px;
    border-radius: 2px;
}

/* 顶部那排图标（搜索 / 通知 / 头像） */
.social-top .header-banner-right,
.social-top .header-user,
.social-top .header-user i.b2font {
    color: rgba(255, 255, 255, .88);
}

/*
 * 汉堡按钮。
 * 父主题给的是 background:rgba(246,246,246,.67) + 深色线条 ——
 * 浅色小方块贴在深色头部上非常突兀，改成玻璃圆钮 + 白线。
 */
.social-top #mobile-menu-button {
    background: rgba(255, 255, 255, .10);
    border-radius: 9px;
}

.social-top #mobile-menu-button .line-1,
.social-top #mobile-menu-button .line-2,
.social-top #mobile-menu-button .line-3 {
    background-color: #fff;
}

/* 头像的红色角标原本描的是白边，深色底上换成底色描边才干净 */
.social-top .top-user-info .user-tips-number,
.social-top .header-user .b2-tips-number {
    border-color: rgba(9, 13, 26, .95);
}

} /* /max-width:768px */