/* 音乐教程页移动端导航与横向溢出修复（2026-10-08）
 *
 * 问题：tutorials/*.html 用 .pj-nav（内容页导航），pages.160400.css 只在 720px
 *      让 nav 换行，但 .pj-drop（下拉）是 absolute + translate(-50%) 定位，
 *      9 个 tab 折行后仍会横向溢出（实测 320px +11px、768px +15px）。
 *      且内容页没有汉堡按钮，窄屏下导航会挤成多行。
 *
 * 方案（只作用于 .pj-page，不影响官网主导航与产品页）：
 *   1. ≤900px：.pj-nav__links 改为单行横向滚动，不再折行 → 消除溢出
 *   2. ≤900px：.pj-drop 默认隐藏，仅 hover/focus 时显示（避免常显占位）
 *   3. .pj-nav__cta 在窄屏独占一行，保持可点
 *   4. html/body 兜底 overflow-x: hidden，防止子元素偶发溢出撑宽
 *
 * 独立新文件，不改 pages.160400.css / nav-mobile.003000.css（静态资源 7 天强缓存）
 */

@media (max-width: 900px) {
  html, body.pj-page { overflow-x: hidden; max-width: 100%; }

  .pj-page .pj-nav { height: auto; position: relative; }
  .pj-page .pj-nav__inner { flex-wrap: wrap; gap: 8px; padding: 10px 14px; align-items: center; }
  .pj-page .pj-logo { flex: none; }

  /* 导航项单行横滑，不折行 —— 这是消除横向溢出的关键 */
  .pj-page .pj-nav__links {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .pj-page .pj-nav__links::-webkit-scrollbar { display: none; }

  .pj-page .pj-nav__item { flex: none; position: relative; }
  .pj-page .pj-nav__item > a {
    display: inline-block;
    white-space: nowrap;
    padding: 7px 11px;
    font-size: 13px;
  }

  /* 下拉在窄屏改为纵向展开，避免 translate(-50%) 定位溢出 */
  .pj-page .pj-drop {
    display: none;
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none;
    background: transparent;
    border: 0;
    padding: 0 0 0 8px;
    flex-direction: column;
  }
  .pj-page .pj-nav__item:hover .pj-drop,
  .pj-page .pj-nav__item:focus-within .pj-drop { display: flex; }
  .pj-page .pj-drop a { white-space: nowrap; font-size: 12.5px; padding: 5px 8px; }

  /* CTA 独占一行，保持可点 */
  .pj-page .pj-nav__cta {
    flex: none;
    align-self: flex-start;
    margin-top: 2px;
  }

  /* 长表格/代码块兜底：不撑宽页面 */
  .pj-page table,
  .pj-page pre,
  .pj-page .code-block { max-width: 100%; overflow-x: auto; }
  .pj-page img { max-width: 100%; height: auto; }
}

@media (max-width: 480px) {
  .pj-page .pj-nav__inner { padding: 9px 11px; }
  .pj-page .pj-nav__item > a { padding: 6px 9px; font-size: 12.5px; }
  .pj-page .toc a { font-size: 12.5px; padding: 8px 11px; }
}