/* ===========================================================================
   夏三七 · 导航条（独立版）   nav.css     2026-10-02
   ---------------------------------------------------------------------------
   ⚠ 这个文件为什么单独存在：

     新门户用 portal.css，老页面（学生中心 / 模特 / 档期 / 课程）用 site.css。
     两个文件的 .wrap、.section、.card、body 背景都不一样 —— 一起加载会互相覆盖。

     但两边都想要「同一条顶栏」。所以把顶栏这一小块单独抽出来，
     谁都能引，引了也不会动到对方别的地方。

     ⚠ 只包含 .nav 相关样式。别往这里加别的东西。
   =========================================================================== */

:root {
  /* ⚠ 顶栏宽度必须跟当前页面的内容宽度一致，否则左边对不齐 ——
     老页面（site.css）内容宽 880px，新门户（portal.css）是 1180px。
     这里读 --max（site.css 有定义）优先，没有才退回 1180px。 */
  --nav-max: var(--max, 1180px);
  --nav-h: 64px;

  /* ⚠ 2026-10-02 全站改亮色，这几个色跟着换成苹果系统色那一路。
     单独引 nav.css 的页面（万一没引 portal.css）就靠这里的兜底值。 */
  --c-studio:  #ff9500;
  --c-online:  #0071e3;
  --c-offline: #00a862;
  --c-plugin:  #a44fd4;
  --c-student: #ff2d55;
  --accent: #0071e3;

  --serif: Georgia, "Times New Roman", "Songti SC", "STSong", serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
          "PingFang SC", "Microsoft YaHei", sans-serif;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* 白底半透明 + 毛玻璃 —— 苹果官网导航就是这条 */
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms cubic-bezier(.4, 0, .2, 1),
              background 240ms cubic-bezier(.4, 0, .2, 1);
}
.nav.is-stuck {
  border-bottom-color: var(--ink-200, #e4e4e9);
  background: rgba(255, 255, 255, .88);
}

.nav-in {
  width: 100%;
  /* 跟当前页面的 .wrap 对齐：老页面 880px / 门户 1120px */
  max-width: var(--nav-max);
  margin: 0 auto;
  /* ⚠ 左右内边距也得跟 .wrap 一致 —— 老页面是 14px（--gap），门户是 22px（--gap-lg）。
     portal.css 会把 --nav-pad 覆盖成 22px；老页面用这里的 14px 兜底。 */
  padding: 0 var(--nav-pad, 14px);
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-brand {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-900, #000000);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.15;
}
.nav-brand small {
  display: block;
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--ink-500, #86868b);
  margin-top: 2px;
}

.nav-links {
  display: flex;
  gap: 2px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
  position: relative;
  display: block;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--ink-600, #6e6e73);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  transition: color 240ms cubic-bezier(.4, 0, .2, 1),
              background 240ms cubic-bezier(.4, 0, .2, 1);
}
.nav-links a:hover {
  color: var(--ink-900, #000000);
  background: rgba(0, 0, 0, .05);
}
.nav-links a[aria-current="page"] {
  color: var(--ink-900, #000000);
  background: rgba(0, 0, 0, .06);
  font-weight: 500;
}
/* 当前页下划线用该业务的渐变 */
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 2px;
  background: linear-gradient(90deg, var(--tint-a, var(--accent)), var(--tint-b, var(--accent)));
  border-radius: 2px;
}

.nav-links a.n-studio  { --tint-a: #ff9500; --tint-b: #ff2d55; }
.nav-links a.n-online  { --tint-a: #0071e3; --tint-b: #5e5ce6; }
.nav-links a.n-offline { --tint-a: #00a862; --tint-b: #30b0c7; }
.nav-links a.n-plugin  { --tint-a: #a44fd4; --tint-b: #5e5ce6; }
.nav-links a.n-student { --tint-a: #ff2d55; --tint-b: #ff9f0a; }