/* ============================================================
 * 老手村 · 全站顶栏样式（2026-09-15 改版）
 * 来源：老手村首页-改版预览5.html 顶栏部分
 * 结构：① .header-main  logo + 搜索 + 热门词　② .nav-bar 分类导航条
 * ⛔ 全文件作用域限定 .lsc-sitehead，全站加载，不影响其它元素
 * ⛔ 改这个文件必须同步 bump functions.php 里的版本号
 * ============================================================ */

.lsc-sitehead {
    --sh-main: #339999;
    --sh-main-dark: #2A8585;
    --sh-ink: #1a1a1a;
    --sh-ink2: #5f5e5a;
    --sh-ink3: #8a8a85;
    --sh-line: #e8e8e4;
    background: #fff;
    /* 给手机版「菜单」悬浮面板当定位祖先 + 保证面板浮在正文之上
       （2026-09-15 老板：展开菜单要悬浮，不能把 Hero 挤下去） */
    position: relative;
    z-index: 100;
}

.lsc-sitehead *,
.lsc-sitehead *::before,
.lsc-sitehead *::after { box-sizing: border-box; }

/* ⛔ 2026-09-15 老板反馈「菜单导航栏没对齐」的真因：
   站上正文的内容线是「内容 1200、左起 113」（老页面 .site-content 的 padding 算出来的），
   而顶栏原来是「容器 1200 含 18px 内边距」→ 实际内容只有 1164、起点右移 18px，
   再加上菜单项自带 16px 左内边距 → 导航文字比正文右缩 34px。
   改成 1236 = 1200 + 左右各 18px，内容线跟着落到 113~1313，与正文基准一致。

   ⛔⛔ 上面这套只在 **≥1320px** 成立（2026-09-15 老板：「搜索词右边超出主区域右缘了」）：
   父主题给正文留的是**百分比**内边距（左右各 4.5455%），顶栏是**定宽 1236 + 定值 18px**，
   两套算法在 1320px 以下就分叉了 —— 顶栏内区比正文宽，热词/搜索框右缘会戳出正文右缘
   31~36px（实测：1085px 超 31 / 1180px 超 36 / 1240px 超 36）。
   1320 = 「正文刚好顶到 1200 上限」的临界宽度（1200 ÷ (1 − 2×4.5455%) ≈ 1320）。
   → 见文件末尾 `@media(max-width:1319px)`，那一档改成同样的百分比内边距，两边右缘就严丝合缝。
   ⛔ 别把 1320 以下的差值当成「顶栏故意的出血」，正文右缘才是基准。 */
.lsc-sitehead .wrap {
    max-width: 1236px;
    margin: 0 auto;
    padding: 0 18px;
}

/* 顶栏吸顶（关掉后台管理条时会顶到最上，留一点容差） */
.lsc-sitehead .topbar {
    background: #fff;
    border-bottom: 1px solid var(--sh-line);
    position: sticky;
    top: 0;
    z-index: 50;
}
body.admin-bar .lsc-sitehead .topbar { top: 32px; }

/* ⛔⛔ 2026-09-16 老板（/workbuddy 截图）：青绿导航条下面有一条 1px 的浅灰白线，「很细的一个空白区域」。
   根因：上面那条 border-bottom 是给「白底顶栏接白底内容」做分隔用的，
   而 .nav-bar（青绿 #339999 实色块）是 .topbar 的**最后一个子元素** ——
   于是这条线直接贴在了青绿色块的下缘，夹在导航条和深色 banner 中间，成了一条突兀的缝。
   实测（探针）：.topbar y=0~159（bb 在 158~159）／.nav-bar y=114~158／banner 从 y=159 起。
   修法：导航条本身就是重色块，下面不需要再画分隔线 —— 只在它存在时去掉。
   ⛔ 限定 ≥901px：≤900px 导航条收起（.nav-bar{display:none}），顶栏是纯白的，
      那条分隔线仍然有用，**手机端保持原样别动**。 */
@media(min-width:901px){
    .lsc-sitehead .topbar:has(.nav-bar) { border-bottom: 0; }
}

/* ===== ① logo + 搜索 + 热词 ===== */
.lsc-sitehead .header-main { padding: 22px 0 20px; }

.lsc-sitehead .header-main .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

.lsc-sitehead .logo { justify-self: start; }
.lsc-sitehead .logo a { display: inline-block; }
.lsc-sitehead .logo img { height: 64px; display: block; }
.lsc-sitehead .logo .logotext {
    font-size: 26px;
    font-weight: 800;
    color: var(--sh-main);
    display: block;
}

.lsc-sitehead .searchwrap { justify-self: center; width: 500px; max-width: 100%; }

.lsc-sitehead .topsearch {
    display: flex;
    align-items: center;
    border: 1px solid var(--sh-line);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

.lsc-sitehead .topsearch input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    padding: 11px 16px;
    font-size: 14.5px;
    font-family: inherit;
    background: transparent;
    color: var(--sh-ink);
}

.lsc-sitehead .topsearch input::placeholder { color: #a8a8a3; transition: color .12s; }
.lsc-sitehead .topsearch input:hover::placeholder,
.lsc-sitehead .topsearch input:focus::placeholder { color: transparent; }

.lsc-sitehead .topsearch button {
    border: 0;
    background: var(--sh-main);
    color: #fff;
    padding: 11px 26px;
    font-size: 14.5px;
    font-family: inherit;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s;
}
.lsc-sitehead .topsearch button:hover { background: var(--sh-main-dark); }

/* 搜索按钮里的两种内容：桌面显示文字「搜索」，窄屏（≤820px）只显示放大镜图标
   （2026-09-15 老板：「不要搜索文字，用个图标表示就行了，这样输入框就足够长了」）
   ⛔⛔ 类名必须带 lsc- 前缀：原来叫 .ico / .txt，跟新设计内页那条**未作用域**的
   `.ico{width:48px;height:48px}`（软件图标色块）撞名 → 放大镜被撑成 48×48、搜索框被顶到 50px
   （老板 2026-09-15：「搜索框的兼容性就有问题」）。⛔ 别改回 .ico / .txt。
   顺带给 svg 钉死尺寸 —— 万一再被别的页面 CSS 命中也不会胀。 */
.lsc-sitehead .topsearch button .lsc-mag-ico {
    display: none;
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}
.lsc-sitehead .topsearch button .lsc-btn-txt { display: inline; }

.lsc-sitehead .hotsearch {
    justify-self: end;
    display: flex;
    /* ⛔ 原来是 9px —— 三个词挤成一坨，词与词之间看不出边界（2026-09-15 老板反馈「靠得太近」）。
       现在 20px + 词间竖线分隔，实测净间距 20px、分隔线正好落在中缝。 */
    gap: 20px;
    align-items: center;
    font-size: 12.5px;
    color: var(--sh-ink3);
    white-space: nowrap;
    overflow: hidden;
    /* ⭐ 整体左移 ≈2.5 个汉字（12.5px × 2.5 ≈ 31px），别顶在正文右缘上
       （2026-09-15 老板：「搜索旁边这几个关键词顶得太靠右，往左移一点，2~3 个汉字都行」）
       ⛔ 必须用 transform 而不是 margin-right —— 中间那列是 1fr + 搜索框 500px **居中**，
          margin 会改列宽 → 搜索框跟着左移 16px；transform 不动布局，只有热词位移。 */
    transform: translateX(-32px);
}
.lsc-sitehead .hotsearch a { color: var(--sh-ink2); text-decoration: none; transition: color .15s; }
.lsc-sitehead .hotsearch a:hover { color: var(--sh-main); }
/* 词与词之间的浅灰竖线（第 2 个起），中缝 = gap/2 = 10px */
.lsc-sitehead .hotsearch a + a { position: relative; }
.lsc-sitehead .hotsearch a + a::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 11px;
    background: #dcdfdf;
}

/* ===== ② 分类导航条 ===== */
.lsc-sitehead .nav-bar { background: var(--sh-main); }

.lsc-sitehead .nav-bar .wrap {
    display: flex;
    align-items: stretch;
    gap: 16px;
    height: 44px;
}

.lsc-sitehead .nav {
    display: flex;
    gap: 0;
    align-self: stretch;
    overflow: hidden;
    min-width: 0;
    /* ⛔ 2026-09-15 老板：「要移就把整个区块一起移，别只移一个字/两个字，那样很难看」
       → 整条导航左移 16px（各项的 padding 与间距完全不变），文字左边缘落在 113、与正文基准对齐。
       副作用：鼠标悬停时的高亮块会往左探出内容线 16px（导航项自带左右各 16px 内边距）。 */
    margin-left: -16px;
}

.lsc-sitehead .nav a {
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 14.5px;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s;
}
.lsc-sitehead .nav a:hover { background: rgba(0, 0, 0, .16); color: #fff; }
.lsc-sitehead .nav a.on { background: rgba(0, 0, 0, .3); color: #fff; font-weight: 700; }

/* ===== ③ 手机版「菜单」按钮 + 展开面板 =====
   2026-09-15 老板：手机版菜单栏要像老版那样 —— logo 一行 + 右上角「菜单」按钮，点开才展开。
   ⛔ 桌面端（>900px）按钮 display:none（不占网格格位）、面板 display:none，桌面体验完全不变。 */
.lsc-sitehead .menubtn { display: none; }

.lsc-sitehead .mobmenu { display: none; }

/* ⛔⛔ 2026-09-15 老板：「菜单展开应该悬浮在内容上面，怎么把 AI 软件下载中心挤下去了」
   → 面板必须 absolute + top:100% 挂在顶栏底部，**不进文档流**（不再推下面的内容）。
   定位祖先是 .lsc-sitehead（z-index:100，见文件头 .lsc-sitehead 规则）。 */

@media(max-width:900px) {
    .lsc-sitehead .menubtn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        justify-self: end;
        border: 1px solid var(--sh-line);
        background: #fff;
        color: var(--sh-ink2);
        border-radius: 8px;
        padding: 9px 12px;
        font: inherit;
        font-size: 13.5px;
        line-height: 1;
        cursor: pointer;
    }
    .lsc-sitehead .menubtn .mb-ico {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .lsc-sitehead .menubtn .mb-bar {
        display: block;
        width: 15px;
        height: 2px;
        border-radius: 2px;
        background: var(--sh-main);
    }
    /* 展开状态：按钮换**浅青绿**底 + 青绿字（2026-09-15 老板：原来实心青绿「颜色太深、有点难看」） */
    .lsc-sitehead.menu-open .menubtn { background: #E1F5EE; border-color: #9CD3C9; color: #2A8585; }
    .lsc-sitehead.menu-open .menubtn .mb-bar { background: #2A8585; }

    /* 展开面板：**悬浮**在内容上方（absolute + top:100%），浅灰底、两列
       ⛔⛔ 必须 absolute —— 原来在文档流里，一展开就把下面的 Hero 挤下去（老板 2026-09-15 截图）
       ⛔ 底色别写回实心青绿 `var(--sh-main)`（老板：「颜色太深、有点难看」）；用白/浅灰系 */
    .lsc-sitehead .mobmenu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 5;
    }
    .lsc-sitehead.menu-open .mobmenu {
        display: block;
        background: #fff;
        border-bottom: 1px solid var(--sh-line);
        box-shadow: 0 14px 28px rgba(0, 0, 0, .10);
    }
    .lsc-sitehead .mobnav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px 0;
        padding: 6px 0 10px;
    }
    .lsc-sitehead .mobnav a {
        display: block;
        padding: 12px 2px;
        font-size: 14px;
        color: #3d3d3d;
        text-decoration: none;
        border-bottom: 1px solid #eef0f1;
        transition: background .15s, color .15s;
    }
    .lsc-sitehead .mobnav a:nth-child(odd) { border-right: 1px solid #eef0f1; padding-right: 14px; }
    .lsc-sitehead .mobnav a:nth-child(even) { padding-left: 14px; }
    /* ⭐ hover 反馈要有存在感（老板 2026-09-15：「鼠标移上去不是应该有个灰色区块、有个移动效果吗？
       现在没有」—— 原来 #f4f6f7 太接近白底，等于看不见）→ 加深底色 + 文字转青绿 + 加过渡 */
    .lsc-sitehead .mobnav a:hover,
    .lsc-sitehead .mobnav a:focus {
        background: #eef2f3;
        color: #2A8585;
    }
    .lsc-sitehead .mobnav a:active { background: #e3eaec; }
    /* 当前所在项：品牌标签配色（底 #E1F5EE + 描边 #9CD3C9 + 字 #2A8585） */
    .lsc-sitehead .mobnav a.on { background: #E1F5EE; color: #2A8585; font-weight: 700; }

    /* 收起的导航条整条隐藏（入口改由上面那个按钮） */
    .lsc-sitehead .nav-bar { display: none; }
}

/* ===== 响应式 ===== */
/* ⛔⛔ 1320 以下：顶栏改用与正文**同一套百分比内边距**（原因见文件头 .wrap 注释）
   —— 不然顶栏内区比正文宽，热词/搜索框右缘会戳出正文右缘 31~36px。
   1320 = 正文刚好顶到 1200 上限的临界宽度；≥1320 仍走 max-width:1236px。
   ⚠️ 必须排在 ≤820px 那条（padding:0 12px）**前面** —— 同特异性靠先后决胜。 */
/* ⚠️ 只收 1081~1319 这一段：
   · ≥1320 → 正文是 1200 定宽居中，顶栏走 max-width:1236px 已对齐
   · ≤1080 → 正文改用定值 18px 内边距（且热词已隐藏，没有会外溢的元素）→ 保持原样别动，
             这里若也套百分比反而会把 logo 推进去 20~30px */
@media(min-width:1081px) and (max-width:1319px) {
    .lsc-sitehead .wrap { max-width: none; padding: 0 4.5455%; }
}

@media(max-width:1200px) {
    .lsc-sitehead .nav a { padding: 0 13px; font-size: 14px; }
    /* 1200 以下搜索框与热词之间只剩 ~39px（1081px 时），左移 32px 会贴上去 → 减半
       （热词 ≤1080 本来就隐藏，这里只管 1081~1200 这段） */
    .lsc-sitehead .hotsearch { transform: translateX(-16px); }
}

@media(max-width:1080px) {
    /* 热词隐藏后第三格空了 → 换成「logo | 搜索(吃满) | 按钮」三档，搜索不再被居中留空
       （2026-09-15 老板：「搜索框太窄，往 logo 那边靠一靠」） */
    .lsc-sitehead .header-main .wrap { grid-template-columns: auto minmax(0, 1fr) auto; }
    .lsc-sitehead .searchwrap { width: auto; justify-self: stretch; }
    /* ⭐ logo 图片（logonew2024.png 203×64）**右侧自带 39px 纯白边**（内容只到 x=163）
       —— 这就是老板说的「搜索框离 logo 还差一截」，不是间距设置的问题。
       本档 logo 按原尺寸显示（64px 高）→ 白边 = 39px，负 margin 吃掉 36px（留 3px 余量）。
       ⛔ 换 logo 图片要重新量白边（`_tmp` 里有量法）；≤820 档 logo 是 30px 高、白边 ≈18px，另写。 */
    .lsc-sitehead .logo img { margin-right: -36px; }
    .lsc-sitehead .hotsearch { display: none; }
    .lsc-sitehead .nav a { padding: 0 11px; font-size: 13.5px; }
}

@media(max-width:900px) {
    /* 导航改横向滚动（900~1080px 之间仍用导航条；≤900 已换成菜单按钮） */
    .lsc-sitehead .nav { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .lsc-sitehead .nav::-webkit-scrollbar { display: none; }
    /* ⛔ 2026-09-15 老板：「搜索框太窄，往 logo 那边靠一靠」
       原来 ≤1080 那条 `.searchwrap{width:420px;justify-self:center}` 会把它**居中**，
       左边跟 logo 之间空一大块 → 这里改成撑满中间列，贴着 logo 和菜单按钮。 */
    .lsc-sitehead .searchwrap { width: auto; justify-self: stretch; }
}

@media(max-width:820px) {
    /* 手机上把两侧留白收一点（18 → 12）+ logo 行去掉多余行高，
       省下来的宽度全给中间的搜索框（老板要「输入框足够长」）
       ============================================================
       2026-09-15 老板第二次调：「搜索框往老手村那边移一点、宽一点、矮一点」
       → 宽度从三处抠出来全给输入框：两侧留白 14→12（省 4）、gap 7→5（省 4）、
         logo 34→30px（省约 13）、搜索按钮 40→36（省 4）；
       高度：input 内边距 10px → 7px（38 → 32px），顶栏整体 66 → 53px。
       ⛔ 别再写回 padding:10px（老板嫌「太高、看着很窄」）。 */
    .lsc-sitehead .wrap { padding: 0 12px; }
    .lsc-sitehead .header-main { padding: 10px 0; }
    .lsc-sitehead .header-main .wrap {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 5px;
    }
    .lsc-sitehead .logo { grid-column: auto; grid-row: auto; line-height: 0; }
    .lsc-sitehead .searchwrap { grid-column: auto; grid-row: auto; width: 100%; justify-self: stretch; }
    .lsc-sitehead .menubtn { grid-column: auto; grid-row: auto; justify-self: end; }
    /* ⭐ logo 高 = 搜索框总高 **33px**（2026-09-15 老板：logo 和「菜单」都比搜索框矮，至少齐平）
       33px 高时 logo 图右白边 ≈ 20px（白边 = 高 × 40/64）→ margin-right -20px 吃掉
       （覆盖上面 ≤1080 那条 -36px；⛔ 改高度必须同步改这个负 margin） */
    .lsc-sitehead .logo img { height: 33px; margin-right: -20px; }
    .lsc-sitehead .topsearch input { padding: 7px 10px; font-size: 13.5px; }
    /* 按钮：只留放大镜图标（文字「搜索」隐藏）
       ⛔ 必须 `align-self:stretch` —— 去掉文字后按钮高度只剩图标（17px），会变成一条细青绿条 */
    .lsc-sitehead .topsearch button {
        padding: 0;
        width: 36px;
        min-width: 36px;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .lsc-sitehead .topsearch button .lsc-btn-txt { display: none; }
    .lsc-sitehead .topsearch button .lsc-mag-ico { display: block; }
    .lsc-sitehead .nav-bar .wrap { height: 40px; padding: 0 8px; }
    .lsc-sitehead .nav a { padding: 0 10px; font-size: 13px; letter-spacing: 0; }
    /* ⭐ 菜单按钮高 = 搜索框 33px（2026-09-15 老板：菜单比搜索框矮，至少齐平）
       padding 9px 上下 + 13px 行高 + 1px 边框×2 = 33px；⛔ 别写回 6px（= 27px，矮一截） */
    .lsc-sitehead .menubtn { padding: 9px; font-size: 13px; gap: 5px; }
}