/* ============================================================
   移动端汉堡菜单修复
   ============================================================
   症状（按发现顺序）
   ----------------
   1. 点开菜单后主页面被锁死，必须先点关闭按钮才能滚动
   2. 菜单显示不全、边界不清
   3. 主题切换按钮点不到

   根因与修复
   ----------
   A. 滚动锁（对应症状 1）
      navigation.js 的 openMenu() 设了 body.style.overflow = 'hidden'，
      主页面被锁死。已在 JS 中移除，并加 scroll / touchmove 监听，
      滑动即自动收起。

   B. 包含块被 backdrop-filter 截断（对应症状 2、3）★ 实测确认
      .navbar 有 backdrop-filter: blur(20px)。按规范，带 backdrop-filter
      的元素会成为其 fixed 定位后代的包含块。.navbar__menu 是
      position: fixed; inset: 0，本应铺满视口，却因此改为相对 .navbar
      定位——而移动端 navbar 只有 60px 高。

      实测：菜单高度仅约占视口 6%（~53px），色块对比实验确认。
      后果：菜单被压成一条、菜单项溢出显示不全；遮罩只剩顶部一条
      导致边界不清；遮罩盖住 navbar 整条，主题按钮被压在下面点不到。

      修复：移动端去掉 navbar 的 backdrop-filter，解除包含块，
      菜单恢复相对视口全屏；用 97% 实底补偿毛玻璃观感。
      复测：菜单高度占比 100%，色块实验转绿。

   C. 全屏模糊 + 持续重绘（性能，仍予保留）
      .navbar__menu 原有 backdrop-filter: blur(30px)，叠加粒子画布
      持续重绘，会让移动端每帧重模糊整屏。虽经实测并非卡死主因，
      仍一并去掉以降低耗电与掉帧：
        a) 移动端去掉该遮罩的 backdrop-filter，底色改为 97% 实底
        b) transition 由 all 收窄为 opacity
        c) 菜单展开时隐藏粒子画布，并在 JS 中暂停其重绘循环

   D. 汉堡按钮层级加固
      components.css 只给了 .hamburger { z-index: 1001 } 而没有
      position，Safari 等实现可能不生效。补 position: relative 并
      抬到 z-index: 1002（高于遮罩的 1000）。

   回退
   ----
   删除本文件与 index.html 中对应的 <link>，再撤掉 navigation.js /
   particles.js 中标注「移动端菜单」的几处改动即可。
   ============================================================ */

@media (max-width: 768px) {
  /* ---- a) + b) 全屏遮罩：去模糊、收窄过渡 ---- */
  .navbar__menu {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(8, 5, 16, 0.97);
    transition: opacity var(--transition-base);
  }

  [data-theme="light"] .navbar__menu {
    background: rgba(240, 236, 245, 0.97);
  }

  /* ---- c) 展开菜单时隐藏粒子画布 ---- */
  html.nav-open .hero__canvas {
    visibility: hidden;
  }

  /* ---- d) 关键修复：navbar 的 backdrop-filter 会让菜单「被压扁」 ----
     按 CSS 规范，带 backdrop-filter（值非 none）的元素会成为其
     fixed / absolute 定位后代的「包含块」。

     .navbar__menu 是 .navbar 的后代，且 position: fixed; inset: 0，
     原本应相对视口铺满全屏；但 .navbar 有 backdrop-filter: blur(20px)，
     于是菜单改为相对 .navbar 定位——而 navbar 在移动端只有 60px 高。

     后果（实测：菜单高度仅约占视口 6%，即 ~53px）：
       · 菜单被压成一条 → 菜单项溢出、显示不全
       · 遮罩只剩顶部一条 → 边界不清，与页面内容混在一起
       · 遮罩盖住 navbar 整条 → 主题按钮被压在下面点不到

     移动端去掉 navbar 的 backdrop-filter 即可解除包含块，
     菜单恢复相对视口全屏；用更实的底色补偿失去的毛玻璃观感。 */
  .navbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(8, 5, 16, 0.97);
  }

  [data-theme="light"] .navbar {
    background: rgba(240, 236, 245, 0.97);
  }

  /* ---- e) 确保汉堡按钮永远能点到 ----
     components.css 只给了 .hamburger { z-index: 1001 } 而没有 position。
     按规范，flex 子项即使不定位也应生效 z-index，但 Safari 等浏览器
     在这一点上实现不一致——真机上可能出现「按钮看得见却点不到」。
     这里补 position: relative，并把层级明确抬到遮罩（1000）之上。 */
  .hamburger {
    position: relative;
    z-index: 1002;
  }
}