/**
 * mobile-nav.css —— 手机版导航「两排式」改造  (2026-10-15 · v2)
 *
 * 目标（用户口径）：手机上不要"汉堡 → 左侧抽屉"✗，改成
 *   第 1 行 = 原顶栏（搜索 + AI/头像 ✓）
 *   第 2 行 = **分类条**，可**左右滑动** ✓
 *
 * 做法：★ 纯 CSS，模板结构一字未动 ✓ —— 把主题的左侧抽屉 `<nav id="site-navigation.sidebar">`
 * 在手机断点内改成**静态块**（自动成为 header 第 2 行 ✓），只保留其中的分类 `<ul class="menu navbar-nav">`
 * 做成横向滚动条 ✓，其余（logo / 重复搜索框 / 侧边工具条）隐藏 ✓。桌面完全不受影响 ✓（断点内生效 ✓）。
 *
 * ★ 为什么选择器写成这么长：实测主题里有**含 id 的高特异性**规则在压 ✗
 *     `#nav{width:17.5rem;position:absolute}` · `#nav .menu{width:14.0625rem;margin:0 auto}`
 *     `#nav #menu-menu-1 li a{display:flex;height:2.5rem}`（(2,0,2) ✗）
 *   ⇒ 组件覆盖必须用**同级或更高**的选择器 ✓，关键属性加 `!important` ✓（基础/激活不要都上 ✗）
 */
@media screen and (max-width: 767.98px) {
  /* ★★ 2026-10-15（用户："浮动没有了" ⇒ 指手机顶部导航要**悬浮** ✓）：
     我把它改成两排后 `.nav-fixed` 变 static ⇒ 滚动时不跟随 ✗ ⇒ 这里让**整个 header**（上行 + 下行）
     重新 sticky 吸顶 ✓（sticky 仍在文档流 ⇒ 不会盖住正文 ✓ 也不需补 margin ✓）
     ② 下行分类条给**不透明底**（否则吸顶后会透出下面的内容 ✗） */
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
  }
  body.use-navbar .nav-fixed {
    position: static !important;   /* 顶栏本身不再 fixed（改由 header 承担 ✓ 否则两排会错位 ✗） */
    z-index: auto !important;
  }
  body.use-navbar #site-navigation.sidebar {
    background: #212322 !important;   /* 与主题顶栏同色（实测 .nav-fixed 的底色 ✓） */
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  /* ① 顶栏：不再需要汉堡 */
  #toggle-nav { display: none !important; }

  /* ②-0 外层 .nav-fixed：实测它是"脱离文档流"的容器 ⇒ 两排会**重叠** ✗
        ⇒ 手机端把它拉回文档流（block + 静态）✓，于是 顶栏 与 分类条 自然上下排 ✓ */
  body.use-navbar .nav-fixed {
    position: static !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* ② 抽屉 ⇒ 静态第 2 行 */
  body.use-navbar #site-navigation.sidebar {
    /* ★★ 实测真凶：`DIV.blog-background`（absolute, 0,54 383x112 的首页背景图 ✓）
       会**画在分类条上面** ✗ ⇒ 分类条"有尺寸有白字却看不见" ✓
       ⇒ 这里用 relative（仍在文档流 ✓）+ z-index 抬到它之上 ✓ */
    position: relative !important;
    z-index: 5 !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    z-index: 5 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
  }

  /* ②-3 可见性：主题在"抽屉未打开"时会把里面做成不可见 ✗（实测分类条有尺寸却看不见 ✓）
        ⇒ 手机端显式恢复可见 ✓ */
  body.use-navbar #site-navigation,
  body.use-navbar #site-navigation #nav,
  body.use-navbar #site-navigation #menu-menu-1,
  body.use-navbar #site-navigation #menu-menu-1 > li {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    pointer-events: auto !important;
  }
  body.use-navbar #site-navigation #menu-menu-1 > li > a {
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* ③ 内层 #nav：主题给了固定宽 + absolute + hidden ⇒ 全部解除 ✓ */
  body.use-navbar #site-navigation #nav {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ④ 分类条本体：横向滚动 ✓（触屏左右拖 ✓，滚动条隐藏 ✓） */
  body.use-navbar #site-navigation #menu-menu-1.menu.navbar-nav {
    display: flex !important;
    flex-direction: row !important;   /* ★ 主题把它设成了 column ✗ ⇒ 必须改回行 ✓ */
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    margin: 0 !important;
    padding: 0.25rem 0.5rem !important;
    gap: 0.125rem;
    background: transparent !important;
  }
  body.use-navbar #site-navigation #menu-menu-1.menu.navbar-nav::-webkit-scrollbar { display: none; }

  body.use-navbar #site-navigation #menu-menu-1.menu.navbar-nav > li {
    flex: 0 0 auto !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  /* ⑤ 链接（必须压过 #nav #menu-menu-1 li a ✗） */
  body.use-navbar #site-navigation #menu-menu-1 li a {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0.35rem 0.7rem !important;
    margin: 0 !important;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none !important;
    background: transparent !important;
    color: inherit;
  }
  /* ②-4 ★ 关键：主题给导航链接设了 -webkit-text-fill-color（渐变字手法 ✗）
      ⇒ 元素有尺寸、color 也是白的，却**画不出来** ✓ ⇒ 手机端显式指定填充色 ✓ */
  body.use-navbar #site-navigation #menu-menu-1 li a {
    -webkit-text-fill-color: currentColor !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    text-shadow: none !important;
  }
  body.use-navbar #site-navigation #menu-menu-1 li a.active,
  body.use-navbar #site-navigation #menu-menu-1 li a:hover {
    color: #1abc9c !important;
    background: transparent !important;
  }
}

/* ================= M10_NAV_FINAL（★ 追加在**文件末尾** ⇒ 顺序上必胜 ✓ 避免"同块内先写的被后写的盖掉"这个坑 ✗）=================
   2026-10-15（用户："手机版顶部导航的浮动没有了" ⇒ 要**吸顶悬浮** ✓）：
   · header 手机端 sticky 吸顶（两排整体跟随 ✓）
   · 两排都给**不透明底**（吸顶后不能透出下面内容 ✗）
   · 桌面完全不受影响（都在手机断点内 ✓） */
@media screen and (max-width: 767.98px) {
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    background: #212322 !important;   /* 与主题顶栏同色（实测 .nav-fixed 底色 ✓） */
  }
  body.use-navbar .nav-fixed {
    position: static !important;
    background: #212322 !important;
  }
  body.use-navbar #site-navigation.sidebar {
    background: #212322 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  body.use-navbar #site-navigation #menu-menu-1.menu.navbar-nav {
    background: #212322 !important;
  }
}

/* ================= M10_NAV_TWEAK（★ 追加在文件末尾 ⇒ 顺序必胜 ✓）=================
   2026-10-15（用户："加（下滑收起/上滑出现）+ 其它微调"）：
   ① 下滑收起、上滑出现（配合 mobile-nav.js 加的 class `m10-nav-hide` ✓，过渡 .25s ✓）
   ② 分类条更紧凑（padding/gap/字号 ✓）
   ③ **当前分类 = 实心青绿胶囊 + 白字** ✓（原来只有青绿描边 ✓）
   桌面完全不受影响（都在手机断点内 ✓） */
@media screen and (max-width: 767.98px) {
  /* ① 收起/出现 */
  header {
    transition: transform 0.25s ease !important;
    will-change: transform;
  }
  header.m10-nav-hide {
    transform: translateY(-100%) !important;   /* 整条导航（两排）滑出屏幕 ✓ */
  }

  /* ② 更紧凑的分类条 */
  body.use-navbar #site-navigation ul.menu.navbar-nav {
    padding: 0.2rem 0.4rem !important;
    gap: 0.25rem !important;
  }
  body.use-navbar #site-navigation #menu-menu-1 li a {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.86rem !important;
    border-radius: 999px !important;            /* 胶囊 ✓ */
  }

  /* ③ 当前分类：实心青绿 + 白字 */
  body.use-navbar #site-navigation #menu-menu-1 li a.active,
  body.use-navbar #site-navigation #menu-menu-1 li a.active:hover {
    background: #1abc9c !important;
    color: #fff !important;
  }
  body.use-navbar #site-navigation #menu-menu-1 li a:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #1abc9c !important;
  }
}

/* ================= M10_NAV_TWEAK2（末尾追加 ✓）=================
   2026-10-15：实测"收起时只移了 50px" ✗ —— 因为主题把 `header` 盒子高定死 50px ✓，
   而两排实际约 88px ✓ ⇒ `translateY(-100%)` 不够 ⇒ 分类条会露一截 ✗。
   ⇒ 手机端让 header 高度**自适应**（把两排都算进盒子 ✓）；隐藏量改为**固定像素**兜底 ✓（更稳 ✓） */
@media screen and (max-width: 767.98px) {
  header {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  header.m10-nav-hide {
    transform: translateY(-140px) !important;   /* 两排(≈88) + 余量 ⇒ 一定完全移出 ✓ */
  }
}

/* ================= M10_NAV_TAILPAD（末尾追加 ✓）=================
   2026-10-15（用户："激活的分类要在屏幕中间可见" ✓）：
   实测靠后的分类**滚到最右也到不了中间** ✗（列表尾部没有余量 ✓）
   ⇒ 给分类条加**尾部留白 ≈ 半屏** ⇒ 任何一项都能滚到正中 ✓（主流 App 的常见做法 ✓） */
@media screen and (max-width: 767.98px) {
  body.use-navbar #site-navigation #menu-menu-1.menu.navbar-nav {
    padding-right: 45vw !important;   /* 尾部余量：让最后一项也能居中 ✓ */
  }
}

/* ================= M10_NAV_POLISH（末尾追加 ✓）=================
   2026-10-15（用户四条）：
   ② 「首页」单独放出来、**不管哪一屏第一个位置都是首页** ⇒ 首项 `position:sticky; left:0` ✓
      （纯 CSS ✓ 不动模板结构 ✓；给不透明底 + 右侧细分隔，视觉上就是"钉住的第一格" ✓）
   ③ 分类栏**字体太粗** ⇒ 统一 `font-weight: 400` ✓（主题默认 700 ✗）
   ④ 「最后一屏不用定到中间」⇒ **撤掉尾部留白**（M10_NAV_TAILPAD 的 45vw ✓）
      ⇒ 靠后的项滚到最右就到最右（自然夹取 = "在哪里就是哪里" ✓），只有**能居中**的才居中 ✓
   桌面不受影响（都在手机断点内 ✓） */
@media screen and (max-width: 767.98px) {
  /* ② 首页：钉在最左（不随分类滚动 ✓） */
  body.use-navbar #site-navigation #menu-menu-1 > li:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    background: #212322 !important;
    padding-right: 0.25rem !important;
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.55);   /* 右侧淡淡阴影 ⇒ 一眼看出"钉住" ✓ */
  }
  body.use-navbar #site-navigation #menu-menu-1 > li:first-child > a {
    background: rgba(255, 255, 255, 0.06) !important; /* 与其它项区分 ✓ */
    color: #fff !important;
  }

  /* ③ 字体变细 */
  body.use-navbar #site-navigation #menu-menu-1 li a {
    font-weight: 400 !important;
    letter-spacing: 0.01em;
  }
  body.use-navbar #site-navigation #menu-menu-1 li a.active {
    font-weight: 500 !important;   /* 当前项略重一点，但不过分 ✓ */
  }

  /* ④ 撤掉尾部留白（最后一屏不强制居中 ✓） */
  body.use-navbar #site-navigation #menu-menu-1.menu.navbar-nav {
    padding-right: 0.4rem !important;
  }
}

/* ================= M10_NAV_CALM（末尾追加 ✓）=================
   2026-10-15（用户：「这个导航栏随着上下滑动，它的抖动现象太明显了」✗）
   ★ 诊断：主题自带 Headroom 式"头部自动隐藏" ✓ —— 滑动时会翻转 body 上的
     `auto-hide-show` / `auto-hide-hide` / `headroom--*` ✓，并把顶栏做位移 ✗；
     而我这边是 `sticky` + `transition: transform .25s` ✗ ⇒ **两套动画互相打架** = 抖动 ✓
   ★ 修法：手机端**关掉主题那套位移**（把 transform 恒定为 none ✓ + 去掉过渡 ✗）
     ⇒ 顶栏只会"老老实实吸顶" ✓，没有任何二次动画 ✓ */
@media screen and (max-width: 767.98px) {
  /* ① 恒定吸附：任何 auto-hide/headroom 状态都不再位移 ✓ */
  html body.use-navbar header,
  html body.use-navbar header .nav-fixed,
  html body.use-navbar #ai-navigation-container,
  html body.use-navbar .nav-fixed,
  html body.auto-hide-hide header,
  html body.auto-hide-hide .nav-fixed,
  html body.auto-hide-hide #ai-navigation-container,
  html body.headroom--unpinned header,
  html body.headroom--unpinned .nav-fixed {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  /* ② 首页那块必须**不透明**（否则钉住时会透出下面滑过的分类 ✗） */
  body.use-navbar #site-navigation #menu-menu-1 > li:first-child {
    background: #212322 !important;
  }
  body.use-navbar #site-navigation #menu-menu-1 > li:first-child > a,
  body.use-navbar #site-navigation #menu-menu-1 > li:first-child > a.active,
  body.use-navbar #site-navigation #menu-menu-1 > li:first-child > a:hover {
    background: #2a2e2d !important;   /* 比条形底略亮一点 ⇒ 一眼是"独立的第一格" ✓ */
    color: #fff !important;
  }
}

/* ================= M10_NAV_CALM2（末尾追加 ✓）=================
   2026-10-15：★ 一个"特异性"细节 ✗✓ ——
   我前面那条给**所有** li 设 `background:transparent !important` 的规则，
   选择器里带了 `.menu.navbar-nav`（比"首页那条"多 1 个类 ✓）⇒ 反而把首页的底色压掉了 ✗。
   ⇒ 这里用**同等且更高**的选择器（带 `:first-child` ✓ 且带上 `.menu.navbar-nav` ✓）来定首页底色 ✓ */
@media screen and (max-width: 767.98px) {
  body.use-navbar #site-navigation #menu-menu-1.menu.navbar-nav > li:first-child {
    background: #212322 !important;
  }
  body.use-navbar #site-navigation #menu-menu-1.menu.navbar-nav > li:first-child > a,
  body.use-navbar #site-navigation #menu-menu-1.menu.navbar-nav > li:first-child > a.active,
  body.use-navbar #site-navigation #menu-menu-1.menu.navbar-nav > li:first-child > a:hover {
    background: #2a2e2d !important;
    color: #fff !important;
  }
}

/* ================= M10_NAV_SIZE（末尾追加 ✓）=================
   2026-10-15（用户两条）：
   ① 「"首页"激活时底色没了」✗ —— 是我上一轮给"钉住的第一格"设底色时，
      **把它的 .active 状态也一起覆盖了** ✗（变成深灰 #2a2e2d 而不是青绿 ✓）
      ⇒ 这里把"第一格**激活时**"改回**青绿底 + 白字**（与其它分类的激活态一致 ✓）；
         "第一格**未激活时**"仍是略亮的深灰（体现"钉住/独立"✓）—— 两条规则的先后顺序很关键 ✓
   ② 「分类栏再高点，分类字号再大点」⇒ 条内 padding ↑、项 padding/字号 ↑ ✓ */
@media screen and (max-width: 767.98px) {
  /* ① 第一格激活态 = 青绿（★ 必须排在"钉住底色"之后 ✓） */
  body.use-navbar #site-navigation #menu-menu-1.menu.navbar-nav > li:first-child > a.active,
  body.use-navbar #site-navigation #menu-menu-1.menu.navbar-nav > li:first-child > a.active:hover {
    background: #1abc9c !important;
    color: #fff !important;
  }

  /* ② 分类栏更高 */
  body.use-navbar #site-navigation ul.menu.navbar-nav {
    padding: 0.4rem 0.5rem !important;
  }
  /* ② 分类字号更大、内距更大 */
  body.use-navbar #site-navigation #menu-menu-1 li a {
    padding: 0.45rem 0.8rem !important;
    font-size: 0.98rem !important;
  }
}

/* ================= M10_NAV_SIZE2（末尾追加 ✓）=================
   2026-10-15：用户要"再高点、再大点" ⇒ 上一档幅度偏小（高 46 / 字号 15.68px ✓）
   ⇒ 这一档明显放大：字号 ≈17px、项内距更大、条内距更大 ✓（吸顶/钉住/居中都不受影响 ✓） */
@media screen and (max-width: 767.98px) {
  body.use-navbar #site-navigation ul.menu.navbar-nav {
    padding: 0.45rem 0.55rem !important;
  }
  body.use-navbar #site-navigation #menu-menu-1 li a {
    padding: 0.5rem 0.9rem !important;
    font-size: 1.06rem !important;
  }
  /* 当前项字号跟随（略重仍保留 ✓） */
  body.use-navbar #site-navigation #menu-menu-1 li a.active,
  body.use-navbar #site-navigation #menu-menu-1 li a.active:hover {
    font-weight: 500 !important;
  }
}