/* ═══════════════════════════════════════════════════════════════════════
   华映 集团门户 · 移动端 hamburger 菜单 (共用)
   ──────────────────────────────────────────────────────────────────────
   桌面端 (>768px): 完全不显示 toggle, 桌面 nav 行内布局完全不变.
   移动端 (≤768px): toggle 显示, nav-links 从行内变为 dropdown 面板.

   HTML 约定:
     <nav class="nav">
       <a class="nav-logo">...</a>
       <button class="nav-toggle" type="button" aria-label="菜单"
               aria-expanded="false" aria-controls="primary-nav">
         <span class="nav-toggle-bar"></span>
         <span class="nav-toggle-bar"></span>
         <span class="nav-toggle-bar"></span>
       </button>
       <div class="nav-links" id="primary-nav">...</div>
     </nav>

   配合 /assets/js/mobile-nav.js (toggle 开关, 外部点击关, ESC 关, 切到桌面关).
   ═══════════════════════════════════════════════════════════════════════ */

.nav-toggle {
  display: none;                     /* 桌面端隐藏 */
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 100;
  border-radius: 2px;
  transition: background-color 200ms;
}
.nav-toggle:hover { background: rgba(31, 107, 83, 0.06); }
.nav-toggle:focus-visible {
  outline: 2px solid var(--green-main);
  outline-offset: 1px;
}
.nav-toggle .nav-toggle-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--green-deep);
  margin: 5px auto;
  transition: transform 240ms ease, opacity 240ms ease;
  border-radius: 1px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 768px) {
  /* dropdown 绝对定位 + 高 z-index 建立 stacking context, 压在 hero (position:relative) 之上.
     之前 nav-links z-index:auto, 被后于 DOM 的 .hero 内容覆盖, dropdown 被穿透. */
  .nav { position: relative; z-index: 1000; }
  .nav-toggle { display: block; }    /* hamburger 出现 */

  /* nav-links 从桌面行内布局改为 dropdown 面板 */
  .nav-links {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--bg-paper);
    border-top: 1px solid var(--green-mist);
    border-bottom: 1px solid var(--green-mist);
    box-shadow: 0 12px 24px rgba(14, 58, 46, 0.08);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 240ms ease, opacity 240ms ease;
  }
  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  /* 强制覆盖任何 display: none rule (主页之前有 .nav-links a:not(.lang-switch){display:none;}) */
  .nav-links a,
  .nav-links a:not(.lang-switch) {
    display: block !important;
    padding: 18px 28px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2.5px;
    color: var(--green-deep);
    border-bottom: 1px solid var(--green-mist);
    transition: background-color 200ms, color 200ms;
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a:hover { background: var(--bg-paper-soft); color: var(--green-main); }
  .nav-links a.active { color: var(--vermilion); background: var(--bg-paper-soft); }

  /* site-search.js 注入的搜索按钮 — 在 dropdown 里做成与链接一致的整行, 隐藏桌面 ⌘K 提示 */
  .nav-links .ss-nav-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    padding: 18px 28px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--green-mist);
    border-radius: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2.5px;
    color: var(--green-deep);
  }
  .nav-links .ss-nav-btn:hover { background: var(--bg-paper-soft); color: var(--green-main); }
  .nav-links .ss-nav-btn .ss-nav-kbd { display: none; }
}

/* 减少动效偏好: 取消 dropdown 过渡 */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle .nav-toggle-bar,
  .nav-links { transition: none !important; }
}