/* =========================================================
   nav.css —— 顶部导航栏（悬浮于星空之上）
   1. 变量
   2. 容器
   3. 菜单与链接
   4. 响应式
   ========================================================= */

/* ---------- 1. 变量 ---------- */
:root {
  --nav-h: 60px;

  /* 链接字号：比正文略大一点，撑得起固定导航栏 */
  --nav-font-size: 15px;

  /*
   * 两个选项之间的间距。
   * 原来最小 14px / 最大 32px，挤在一起显得局促；
   * 现在整体放大，并在窄屏用 clamp 自动收窄，不需要额外写媒体查询。
   */
  --nav-gap: clamp(28px, 5vw, 56px);

  --nav-text: rgba(255, 255, 255, .72);
  --nav-text-hover: #ffffff;
  --nav-line: rgba(255, 255, 255, .08);
  --nav-accent-a: #7cc4ff;
  --nav-accent-b: #b18cff;
  --nav-font: system-ui, -apple-system, "Segoe UI", "PingFang SC",
              "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ---------- 2. 容器 ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  display: flex;
  align-items: center;

  /*
   * 品牌区（圆点 + 星云星空）已移除，导航只剩菜单一项。
   * 用 flex-start 让它贴左，而不是被 space-between 或 auto margin 推走。
   */
  justify-content: flex-start;

  height: var(--nav-h);
  padding: 0 clamp(16px, 4vw, 40px);

  font-family: var(--nav-font);
  font-size: var(--nav-font-size);

  background: rgba(8, 12, 28, .35);
  border-bottom: 1px solid var(--nav-line);

  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

/* ---------- 3. 菜单与链接 ---------- */
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);

  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 4px 2px;

  font-size: var(--nav-font-size);
  color: var(--nav-text);
  letter-spacing: .08em;
  transition: color .2s ease;
}

.nav__link:hover {
  color: var(--nav-text-hover);
}

/* 当前页高亮 */
.nav__link.is-active {
  color: var(--nav-text-hover);
  font-weight: 600;
}

/* 下划线（hover 与当前页展开） */
.nav__link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nav-accent-a), var(--nav-accent-b));
  transform: translateX(-50%);
  transition: width .25s ease;
}

.nav__link:hover::after,
.nav__link.is-active::after {
  width: 100%;
}

/* ---------- 4. 响应式 ---------- */
/*
 * 间距由 --nav-gap 的 clamp 自适应（窄屏收到 28px），
 * 两侧留白由 .nav 的 padding clamp 处理，所以这里不再需要断点覆盖。
 */
@media (max-width: 360px) {
  :root {
    --nav-gap: 22px;
    --nav-font-size: 14px;
  }
}