/* ============================================================
   移动端界面统一修复 (custom inject)
   - 解决"三条杠/侧边栏菜单项底部残留线"(主题 .site-page:after 下划线)
   - 统一侧边栏各栏目视觉(卡片一致性)
   - 归档页等副级页面精简
   - 结果栏光效对齐桌面(移动端也显示边缘环+光斑)
   - 抽屉遮罩改高斯模糊磨砂玻璃(light 不压暗) + 收起动画期间导航条保持低位
      (配合 sidebar-mask.js 的 body.sb-closing 状态类)
   兼顾桌面端一致性: 规则同时作用于桌面与移动端(除明确标注 mobile 外)
   ============================================================ */

/* ============ 1. 消除 .site-page:after 残留下划线 ============
   主题在 head.styl 给 .site-page:not(.child) 加了一条 3px 彩色下划线,
   hover 时 width 0→100%。它在:
   - 桌面导航 = 有意设计(下划线 hover 特效)
   - 移动端/侧边栏抽屉(#sidebar-menus) = 触屏 :hover 粘滞残留 → 底部一条线
   因此: 全局关掉这条 :after 下划线(让桌面/移动视觉一致、无残留),
   但保留 .menus_item:hover 的文字变色(那才是导航项真正的 hover 反馈)。
   若想桌面也保留下划线特效, 可放开桌面端; 为一致性这里全局关闭。 */
.site-page:not(.child)::after {
  display: none !important;
}
/* 同时兜底: 侧边栏抽屉菜单项与导航项都不再有任何 ::after 残留 */
#sidebar #sidebar-menus .menus_item .site-page::after,
#nav #menus .menus_item .site-page::after,
#nav #toggle-menu span.site-page::after,
#sidebar-menus .site-page::after {
  display: none !important;
}

/* ============ 5. 副级/详情页(归档/标签/分类/文章)精简 ============
   目标: 移动端这些页面只保留内容本体, 隐藏与内容无关的 aside widget。
   - 列表型页面: 含 #archive / #tag / #category 容器
   - 文章页: 含 #post 容器(body-wrap 类为 post, 不是 page)
   页面容器: 主题把 class=pageType 加在 #body-wrap, 首页是 page、文章是
   post, 且首页也有 .page, 故不能用 body.page。改用 :has() 精确命中含
   内容容器的页面。
   注: 桌面端侧边栏仍有导航价值, 仅移动端精简, 避免误伤桌面布局。 */
@media (max-width: 768px) {
  #body-wrap:has(#archive) #aside-content .card-widget,
  #body-wrap:has(#tag) #aside-content .card-widget,
  #body-wrap:has(#category) #aside-content .card-widget,
  #body-wrap:has(#post) #aside-content .card-widget {
    display: none !important;
  }
  /* 列表/详情页侧边栏整体隐藏后, 主区占满更清爽 */
  #body-wrap:has(#archive) #aside-content,
  #body-wrap:has(#tag) #aside-content,
  #body-wrap:has(#category) #aside-content,
  #body-wrap:has(#post) #aside-content {
    display: none !important;
  }
}

/* ============ 6. 移动端检索结果栏光效对齐桌面 ============
   桌面端面板有 .nav-drop-edge(边缘环) + .nav-drop-glow(指针光斑),
   移动端因触屏改为"常亮 + CSS 固定居中"。问题: 移动端面板 position:fixed
   后, 光效元素若未正确居中/显示会缺失。这里补足:
   - 移动端面板光效固定居中并常亮(边缘环 + 光斑都居中)
   - 边缘环可见(alpha 由 JS 写 1, 但需 CSS 兜底可见)
   - 面板毛玻璃背景不要太浓, 让光斑透上来 */
@media (hover: none) and (pointer: coarse),
       (max-width: 768px) {
  #nav .nav-search-panel .nav-drop-edge {
    opacity: 1 !important;
  }
  #nav .nav-search-panel .nav-drop-edge-light,
  #nav .nav-search-panel .nav-drop-glow {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #nav .nav-search-panel .nav-drop-edge-light {
    opacity: .9;
  }
  #nav .nav-search-panel .nav-drop-glow {
    opacity: 1;
  }
  /* 面板居中光斑要可见, 结果列表背景不要太实(让光透上来) */
  #nav .nav-search-results {
    background: rgba(255, 255, 255, .08) !important;
  }
  html[data-theme='dark'] #nav .nav-search-results {
    background: rgba(20, 26, 42, .20) !important;
  }
}

/* ============ 2. 侧边栏抽屉统一视觉 + 卡片同款玻璃 (移动端专属) ============
   移动端点三条杠打开的 #sidebar-menus 抽屉。当前视觉割裂:
   - 抽屉背景 var(--sidebar-bg) 实色无圆角, 头像/数据区直接坐在上面
   - 菜单卡 var(--sidebar-menu-bg) 独立白卡圆角, 与抽屉脱节
   - 抽屉自带 padding-left:5px → 左侧漏出一条页面背景竖边
   统一做法: 让抽屉整体呈现【一张与页面卡片同款的高斯模糊/磨砂玻璃卡】,
   头像/数据区/菜单卡透明融入:
   - 抽屉本体背景改为与 .card-widget 一致的半透明玻璃渐变 + backdrop-filter
     blur(与 theme-glass.css 卡片同款: light 通透玻璃 / dark 磨砂玻璃)
   - 菜单卡用 !important 强置透明, 彻底压掉主题 --sidebar-menu-bg 色块
   - 菜单项统一圆角, hover/active 淡光光带 + 微位移
   注: #toggle-menu 移动端才显示、抽屉移动端才打开, 桌面用 aside 卡片,
   故限定在移动端媒体查询内, 不影响桌面端。 */
@media (max-width: 768px) {
  /* 抽屉本体: 与页面卡片同款玻璃背景 + 左侧圆角; 负 margin 抵消主题
     padding-left:5px, 去除左侧漏出的背景竖边。
     backdrop-filter 模糊其背后 .bg-liquid 光斑 → 玻璃感与卡片一致。 */
  #sidebar #sidebar-menus {
    background: linear-gradient(
      155deg,
      rgba(255, 255, 255, .10) 0%,
      rgba(255, 255, 255, .04) 50%,
      rgba(255, 255, 255, .08) 100%
    ) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border-radius: 14px 0 0 14px !important;
    box-shadow:
      0 0 0 1px rgba(180, 200, 235, .20),
      0 0 18px rgba(140, 180, 235, .10),
      0 8px 20px -8px rgba(48, 66, 104, .18),
      inset 0 1px 0 rgba(255, 255, 255, .40) !important;
    padding-left: 0 !important;
    margin-left: -5px !important;
  }

  /* dark: 磨砂玻璃(与卡片 dark 同款) */
  html[data-theme='dark'] #sidebar #sidebar-menus {
    background: linear-gradient(
      160deg,
      rgba(30, 36, 54, .16) 0%,
      rgba(16, 20, 34, .12) 52%,
      rgba(24, 30, 46, .16) 100%
    ) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow:
      0 0 0 1px rgba(150, 180, 240, .16),
      0 0 18px rgba(110, 150, 220, .12),
      0 8px 20px -8px rgba(0, 0, 0, .40),
      inset 0 1px 0 rgba(255, 255, 255, .14) !important;
  }

  /* 头像与站点数据区: 透明融入抽屉 */
  #sidebar #sidebar-menus > .avatar-img {
    margin: 22px auto 10px !important;
  }
  #sidebar #sidebar-menus .site-data {
    padding: 0 20px 10px !important;
    background: transparent !important;
  }

  /* 菜单卡: 强置透明融入抽屉, 去掉主题 --sidebar-menu-bg 的独立色块 */
  #sidebar #sidebar-menus .menus_items {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 4px 14px 20px !important;
    padding: 4px 0 !important;
  }

  /* 菜单项: 统一圆角, 常规透明, 无常驻色块 */
  #sidebar #sidebar-menus .menus_items .site-page {
    border-radius: 8px !important;
    padding: 9px 14px !important;
    margin: 2px 0 !important;
    background: transparent !important;
  }
  /* 仅 hover/active 时给淡光光带 + 微位移; 触屏 (hover:none) 用 :active 反馈 */
  #sidebar #sidebar-menus .menus_items .site-page:hover,
  #sidebar #sidebar-menus .menus_items .site-page.active {
    background: var(--text-bg-hover) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important;
    transform: translateX(3px);
  }
  /* 触屏无 hover: 点击瞬间用 :active 给反馈, 松开即消失, 不残留色块 */
  @media (hover: none) {
    #sidebar #sidebar-menus .menus_items .site-page:active {
      background: var(--text-bg-hover) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important;
      transform: translateX(3px);
    }
  }
  html[data-theme='dark'] #sidebar #sidebar-menus .menus_items .site-page:hover,
  html[data-theme='dark'] #sidebar #sidebar-menus .menus_items .site-page.active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35) !important;
  }
}

/* ============ 3. 抽屉打开/收起全程隐藏顶部导航, 消除割裂 ============
   自定义导航 nav-apple.css 把 #nav z-index 提到 999 (高于抽屉 103 与遮罩
   102)。移动端点三条杠打开抽屉时, 顶部那条亮色毛玻璃导航条会一直压在
   最上层, 头像区被它顶出一块 → 视觉割裂。
   抽屉需要盖住 #nav 的两个时段:
   - 抽屉打开(保持 .open): #sidebar-menus.open 存在期间, :has() 命中;
   - 抽屉收起(正在滑出): 主题 JS 关闭时【立即移除 .open】, 抽屉还要过渡
     .5s 才完全离屏。若 #nav 此刻立刻回到 999, 就会浮到还没收起的抽屉
     之上。由 sidebar-mask.js 在 .open 被移除的【同一时刻】(MutationObserver)
     给 body 标 .sb-closing, 过渡结束再移除 → 收起全程 #nav 保持隐藏。
   实现: 直接隐藏(opacity:0 + visibility:hidden)而非压 z-index + 半透明:
   - 若只压 z + 保留 .85 透明度, 收起时 .open 移除 → :has() 失效的瞬间
     #nav 会先浮回 999、再被 .sb-closing 压回, z 弹跳 + opacity 来回过渡
     → 顶部区域"抽搐闪烁一下";
   - 隐藏则无论层叠怎么弹, #nav 都不可见, 无闪烁; 抽屉完全滑出后
     #nav 以自身 opacity 过渡平滑淡入(移动端收紧到 .12s, 见下)。
   点遮罩即可关闭抽屉(主题默认行为)。 */
@media (max-width: 768px) {
  body:has(#sidebar-menus.open) #nav,
  body.sb-closing #nav {
    z-index: 101 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* 光效层同步熄灭(与 #nav 一起隐藏, 避免残余辉光) */
  body:has(#sidebar-menus.open) #nav .nav-drop-edge,
  body:has(#sidebar-menus.open) #nav .nav-edge,
  body.sb-closing #nav .nav-drop-edge,
  body.sb-closing #nav .nav-edge {
    opacity: 0 !important;
  }
  /* 抽屉开合全程锁定背景滚动: 背后页面不可被滑动。主题 open() 只做了
     滚动条消失的 padding 补偿(overflowPaddingR), 没有锁滚动; 抽屉展开
     后手指在遮罩/背景上滑动仍会滚走页面 → 这里 overflow:hidden 锁住。
     .open 移除瞬间由 .sb-closing 接续锁到抽屉完全滑出(与导航隐藏同一
     状态类), 滑出途中背景同样不可滚。抽屉自身 fixed + overflow-y:
     scroll 不受影响, 内部菜单仍可正常滚动。 */
  html:has(#sidebar-menus.open),
  html.sb-closing,
  body:has(#sidebar-menus.open),
  body.sb-closing {
    overflow: hidden !important;
  }
  /* 收尾导航淡入提速: nav-apple.css 给 #nav 的透明度过渡是 .3s,
     抽屉滑出(0.5s)后再淡入 .3s 显得"导航出现慢"; 移动端收紧到 .12s,
     收起后导航更快回到眼前(打开抽屉时的淡出同样更干脆)。 */
  #nav {
    transition: opacity .12s ease !important;
  }
}

/* ============ 4. 抽屉遮罩改"磨砂玻璃": 高斯模糊 + 不压暗 ============
   主题 #menu-mask 开态 rgba(0,0,0,.8) 几乎全黑; 此前降到 .38 仍是
   "整体压暗" —— light 模式下白色磨砂抽屉背后被压成灰暗, 效果不佳。
   现改为全屏【高斯模糊磨砂玻璃】(遮罩只盖住抽屉之外 = 抽屉没遮到的
   页面区域; 抽屉 z-index 更高, 保持清晰):
   - light: 白雾(不压暗), 背后页面/光斑被模糊成柔和雾面, 与卡片、
     抽屉的毛玻璃语言一致 —— 侧边栏展开不再"变黑";
   - dark:  深灰雾 + 模糊, 保留层次。
   样式写在 #menu-mask 本体(仅抽屉打开时 display:block, 主题 JS 控制),
   不依赖 .open —— 否则滑出动画中途(无 .open 但遮罩仍在淡出)会瞬间
   跳回主题默认的全黑。
   模糊半径 14px: 与卡片/抽屉玻璃同档(theme-glass 卡片主力 12~18px),
   全屏遮罩用 24px 会糊成一片, 降到此档保留轮廓又足够雾面。
   注: 全屏 backdrop-filter 在低端移动设备有合成开销, 若真机卡顿可
   下调 blur 半径或改回纯色遮罩。 */
@media (max-width: 768px) {
  #menu-mask {
    background: rgba(243, 247, 252, .34) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
  html[data-theme='dark'] #menu-mask {
    background: rgba(8, 12, 22, .42) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}