/* 手机页头下拉菜单（2026-09-20 何生要求：手机端页头要能选电脑端那些菜单）
   只有手机宽度（≤680px）才出现：汉堡按钮在右上角，点开是一列菜单。
   独立成文件是因为杯测页不引 style.css（怕类名撞车），但它也要这个菜单。
   ⚠️ 里面用的都是新类名（.nav-toggle / .nav.open），不会跟任何页面现有的样式冲突。 */

.nav-toggle{ display:none; }

/* 平板 / 窄桌面：导航从 5 条变 6 条之后，768px 左右 logo 和第一条菜单会贴在一起，
   把间距和字号收一点，等到 680px 以下交给汉堡菜单。 */
@media (max-width:1080px){
  .nav-links{ gap:20px; font-size:13.5px; }
}
@media (max-width:860px){
  .nav-links{ gap:16px; font-size:13px; }
  .nav .status{ padding:6px 11px; font-size:11.5px; }
}

@media (max-width:820px){
  /* 这一档开始就用汉堡菜单（原来 680，导航多一条后在平板宽度会挤成一团） */
  .nav-links{ display:none; }

  /* 汉堡按钮
     ⚠️ 2026-09-20 何生反馈「看不到三条杆、但点右上角能弹出菜单」：
        原来用 flex + gap 排三条**空 span**，桌面内核没问题，但手机上（尤其微信内置浏览器）
        空元素 + gap 会塌成看不见。现在改成：不靠 gap，用 margin 排；杆子给死宽死高 + min-height；
        按钮去掉系统外观。这样在旧内核上也一定画得出来。 */
  .nav-toggle{
    -webkit-appearance:none; appearance:none;
    display:block; width:44px; height:40px; margin-left:auto; padding:0;
    background:none; border:0; cursor:pointer; color:var(--ink);
    -webkit-tap-highlight-color:transparent; position:relative;
  }
  .nav-toggle span{
    display:block; position:absolute; left:50%; width:26px; min-width:26px;
    height:2.5px; min-height:2.5px; margin-left:-13px; border-radius:2px;
    background:currentColor; transition:transform .2s, opacity .2s;
  }
  .nav-toggle span:nth-child(1){ top:12px; }
  .nav-toggle span:nth-child(2){ top:19px; }
  .nav-toggle span:nth-child(3){ top:26px; }
  .nav-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
  /* 首页首屏导航压在照片上（不是 .solid），按钮要反白；照片亮的区域加一点投影，免得看不见 */
  .nav:not(.solid) .nav-toggle{ color:#FBF8F3; }
  .nav:not(.solid) .nav-toggle span{ box-shadow:0 1px 3px rgba(0,0,0,.55); }
  .nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* 菜单面板：挂在页头下面，实底 + 描边，压在照片上也看得清 */
  .nav.open .nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px rgba(43,33,27,.12);
    padding:6px 18px 12px; max-height:calc(100vh - var(--navh)); overflow-y:auto;
  }
  .nav.open .nav-links a{
    padding:14px 2px; font-size:15.5px; color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  /* 首屏透明导航时链接是白的，面板里必须压回深色 */
  .nav.open .nav-links a:hover{ color:var(--accent); }
  .nav.open .nav-links a.on{ color:var(--accent); font-weight:700; }
  .nav.open .nav-links > a:last-of-type{ border-bottom:0; }
  .nav.open .status{ margin:12px 0 2px; align-self:flex-start; }
}