/* 导航「关于我们」下拉菜单（2026-10-02 加）
   背景：原来「常见问题」和「联系我们」是两个并列一级导航，随着内容增多需要收拢。
   做成独立文件的原因：站上有 4 套导航（Astro 内页 / 手写首页 / 服务端渲染的 /news/ / 学员中心），
   样式只写一份，4 处 <link> 引用即可，避免改漏。

   颜色一律带 fallback —— 4 套页面的 CSS 变量名不完全一致（--gold / --line / --card 等），
   用 fallback 保证在任何一套里都不至于变成透明块。 */

.navdrop { position: relative; display: inline-block; }

/* 父项：<a>（可点）或 <span class="navdrop-t">（不可点，只悬停展开）
   现在统一是 span —— 点击「关于我们」不该跳走。 */
.navdrop > a,
.navdrop > .navdrop-t {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: default; user-select: none;
}

/* 小三角：用 CSS 画的，跟随文字颜色 */
.navdrop .ncar {
  width: 0; height: 0; display: inline-block;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .55; transition: transform .2s ease; margin-top: 1px;
}
.navdrop:hover .ncar, .navdrop:focus-within .ncar { transform: rotate(180deg); opacity: .9; }

/* 下拉面板
   ⚠️ 2026-10-02 实测修正：初版用 var(--card) 做底色、var(--ink) 做文字色，
   在**深色主题的首页**上渲染成「白底 + 浅色字」——完全看不清。
   原因是不同页面的变量语义不一致（首页 --ink 是浅色，而 --card 给了白）。
   改为**不依赖变量的深色浮层**：深色底 + 浅色字，在深/浅主题下都可读，
   也与站点主体的暗色调协调（浮层用深色是常见做法）。 */
.navdrop-p {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(26, 26, 28, .97);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  padding: 6px;
  min-width: 140px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 80;
}
/* 面板与导航之间留一条「隐形桥」，鼠标移过去不会断 */
.navdrop-p::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.navdrop:hover .navdrop-p,
.navdrop:focus-within .navdrop-p {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.navdrop-p a {
  display: block; padding: 9px 14px; border-radius: 7px;
  white-space: nowrap; font-size: 14px; line-height: 1.35;
  color: #f0f0f2; text-decoration: none;
  transition: background .15s, color .15s;
}
.navdrop-p a:hover {
  background: rgba(230, 0, 20, .22);
  color: #ffffff;
}

/* 触摸设备：hover 不可靠，点一下也能开（配合 navdrop.js 的 class 切换） */
.navdrop.open .navdrop-p {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 窄屏如果还显示顶部导航：下拉改成静态展开，靠 .open 控制（避免超出屏幕） */
@media (max-width: 860px) {
  .navdrop-p {
    position: static; transform: none; box-shadow: none;
    border: none; padding: 4px 0 4px 12px; min-width: 0; display: none;
  }
  .navdrop.open .navdrop-p { display: block; opacity: 1; visibility: visible; pointer-events: auto; }
}