/* =============================================================================
   首页顶栏：悬浮磨砂胶囊
   - 仅作用于 body.home-pages（docs / privacy / news-detail 保持原样）
   - 必须最后加载；全部用 #navbar 抬高优先级，压过 style.css 里分散的多层覆盖
   - .navbar 退化为透明的定位外壳，.nav-inner 变成胶囊本体
   - 菜单打开（body.nav-open）时回到原来的通栏白底，抽屉定位逻辑保持不变
   ============================================================================= */

/* ---------- 外壳：透明、不挡点击 ---------- */
body.home-pages #navbar,
body.home-pages #navbar.is-scrolled,
html.hash-land body.home-pages #navbar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
  pointer-events: none;
}

/* ---------- 胶囊本体 ---------- */
body.home-pages #navbar .nav-inner {
  width: min(1180px, calc(100% - 2rem));
  max-width: none;
  height: 60px;
  margin: 14px auto 0;
  padding-inline: 1rem 0.75rem;
  gap: clamp(0.5rem, 1.4vw, 1.5rem);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.64);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 10px 30px -8px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  pointer-events: auto;
  transition:
    background var(--dur-3, 320ms) var(--ease-out, ease),
    box-shadow var(--dur-3, 320ms) var(--ease-out, ease);
}

body.home-pages #navbar.is-scrolled .nav-inner,
html.hash-land body.home-pages #navbar .nav-inner {
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.07),
    0 14px 36px -10px rgba(15, 23, 42, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 不支持 backdrop-filter 的浏览器：用更实的底色保证可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.home-pages #navbar .nav-inner {
    background: rgba(255, 255, 255, 0.94);
  }
}

/* ---------- 品牌：缩小以适配 60px 高度 ---------- */
body.home-pages #navbar .brand {
  gap: 0.55rem;
}

body.home-pages #navbar .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

body.home-pages #navbar .brand-name {
  font-size: 1.15rem;
}

/* ---------- 导航链接：悬停/选中是淡蓝胶囊，而不是只变色 ---------- */
body.home-pages #navbar .nav-links {
  gap: 0.15rem;
  margin-inline: 0;
}

body.home-pages #navbar .nav-links a {
  flex-shrink: 0;
  max-width: none;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: clamp(0.84rem, 0.5rem + 0.4vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #475569;
  background: transparent;
  transition:
    color var(--dur-2, 200ms) var(--ease-out, ease),
    background var(--dur-2, 200ms) var(--ease-out, ease);
}

body.home-pages #navbar .nav-links a:hover,
body.home-pages #navbar .nav-links a:focus-visible {
  color: #003fec;
  background: rgba(0, 63, 236, 0.07);
}

body.home-pages #navbar .nav-links a.is-active {
  color: #003fec;
  font-weight: 600;
  background: rgba(0, 63, 236, 0.1);
}

body.home-pages #navbar .nav-links a:focus-visible {
  outline: 2px solid #003fec;
  outline-offset: 1px;
}

/* ---------- 右侧操作区 ---------- */
body.home-pages #navbar .nav-actions {
  gap: clamp(0.3rem, 0.8vw, 0.6rem);
}

body.home-pages #navbar .lang-btn,
body.home-pages #navbar .nav-docs {
  color: #475569;
}

body.home-pages #navbar .lang-btn:hover,
body.home-pages #navbar .lang-btn:focus-visible,
body.home-pages #navbar .nav-docs:hover,
body.home-pages #navbar .nav-docs:focus-visible {
  color: #003fec;
}

/* CTA：胶囊内高度收紧；去掉悬停时向右弹出的箭头圆（它会溢出胶囊右缘） */
body.home-pages #navbar .nav-cta {
  min-height: 2.5rem;
  padding: 0.5rem 1.15rem;
  font-size: 0.9rem;
  margin-right: 0;
}

body.home-pages #navbar .nav-cta::after {
  display: none;
}

body.home-pages #navbar .nav-cta:hover,
body.home-pages #navbar .nav-cta:focus-visible {
  background: #0034c4;
  border-color: #0034c4;
  box-shadow: 0 6px 16px -6px rgba(0, 63, 236, 0.55);
}

/* 语言菜单：与胶囊底边留出同样的呼吸感 */
body.home-pages #navbar .lang-menu {
  top: calc(100% + 0.7rem);
  border-radius: var(--radius-lg, 16px);
}

/* ---------- 汉堡按钮 ---------- */
body.home-pages #navbar .nav-toggle {
  width: 44px;
  height: 44px;
}

body.home-pages #navbar .nav-toggle span {
  background: #334155;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 1024px) {
  body.home-pages #navbar .nav-inner {
    width: calc(100% - 1.25rem);
    margin-top: 10px;
    height: 56px;
    padding-inline: 0.85rem 0.45rem;
  }
}

/* ---------- 菜单打开：回到通栏白底，让抽屉与原有定位完全对齐 ---------- */
body.home-pages.nav-open #navbar .nav-inner {
  width: 100%;
  max-width: 1320px;
  height: var(--nav-h);
  margin: 0 auto;
  border-radius: 0;
  border-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

body.home-pages.nav-open #navbar {
  pointer-events: auto;
}

/* ---------- 隐藏态：胶囊整体上滑出屏 ---------- */
body.home-pages #navbar.is-hidden {
  transform: translateY(-120%);
}

@media (prefers-reduced-motion: reduce) {
  body.home-pages #navbar.is-hidden {
    transform: none;
  }
}