/* ===================================================================
   移动端导航补丁 r14（2026-10-13）
   修复：原 @media(max-width:768px) 里只有 .nav nav{display:none}，
   导致移动端整条分类菜单消失且无任何替代入口。
   方案：新增汉堡按钮 + 下滑抽屉菜单 + 遮罩 + 无JS降级(<details>)
   =================================================================== */

/* --- 汉堡按钮：桌面端隐藏 --- */
.nav-burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  gap: 5px;
  flex-direction: column;
  background: rgba(96,165,250,.08);
  border: 1px solid rgba(96,165,250,.28);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span {
  display: block;
  width: 19px; height: 2px;
  border-radius: 2px;
  background: #cfe3ff;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 移动端抽屉容器 --- */
.nav-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  pointer-events: none;
}
.nav-drawer.open { pointer-events: auto; }
.nav-drawer-mask {
  position: fixed; inset: 0;
  background: rgba(2,5,12,.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .25s ease;
}
.nav-drawer.open .nav-drawer-mask { opacity: 1; }
.nav-drawer-panel {
  position: relative;
  margin-top: 68px;
  background: linear-gradient(180deg, rgba(9,14,26,.99), rgba(6,10,20,.99));
  border-bottom: 1px solid rgba(96,165,250,.22);
  box-shadow: 0 18px 48px rgba(0,0,0,.6);
  transform: translateY(-14px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.open .nav-drawer-panel { transform: translateY(0); opacity: 1; }
.nav-drawer-panel ul { list-style: none; margin: 0; padding: 8px 0 12px; }
.nav-drawer-panel li { border-bottom: 1px solid rgba(96,165,250,.08); }
.nav-drawer-panel li:last-child { border-bottom: 0; }
.nav-drawer-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  font-size: 15.5px;
  color: #c6d6ec;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.nav-drawer-panel a:hover, .nav-drawer-panel a:active { background: rgba(96,165,250,.1); color: #7dd3fc; }
.nav-drawer-panel a.active {
  color: #7dd3fc;
  background: rgba(96,165,250,.13);
  box-shadow: inset 3px 0 0 #38bdf8;
  font-weight: 500;
}
.nav-drawer-panel a .arw { color: #64809f; font-size: 12px; }
.nav-drawer-cta {
  display: block;
  margin: 4px 16px 18px;
  padding: 13px 16px;
  text-align: center;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #04121f !important;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  box-shadow: 0 6px 20px rgba(56,189,248,.28);
}
.nav-drawer-cta:hover { color: #04121f !important; }

/* --- 无 JS 降级：<details> 方案（JS 失败时仍可展开） --- */
.nav-fallback { display: none; }

/* ============ 移动端生效 ============ */
@media (max-width: 768px) {
  .nav-burger { display: flex; }
  .nav-drawer { display: block; }
  .nav .wrap { height: 68px; }
  /* 桌面 nav 继续隐藏，但汉堡作为入口 */
  .nav nav { display: none; }
  .nav .cta { display: none; }   /* 顶部按钮位让给汉堡，抽屉里已有大CTA */
}
@media (min-width: 769px) {
  .nav-drawer { display: none !important; }
}

/* --- 极窄屏微调 --- */
@media (max-width: 360px) {
  .nav .wrap { height: 60px; }
  .nav-drawer-panel { margin-top: 60px; max-height: calc(100vh - 60px); }
  .nav-drawer-panel a { padding: 13px 16px; font-size: 15px; }
}

/* --- 无障碍：键盘焦点 --- */
.nav-burger:focus-visible,
.nav-drawer-panel a:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* --- 尊重降低动效偏好 --- */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer-panel, .nav-drawer-mask, .nav-burger span { transition: none !important; }
}