/* ============================================================
   悬浮胶囊导航条
   - 布局固定不变：logo + 菜单始终收拢居中成一条（宽度贴合内容）
   - 顶部（未滚动）：与胶囊布局完全一致，只是背景透明不可见
   - 下拉滚动后：浮现半透明毛玻璃胶囊背景
   仅桌面端生效；移动端保持原有抽屉菜单样式
   ============================================================ */
@media (min-width: 769px) {
  /* 导航容器本身始终透明，背景一律由内层胶囊提供 */
  .navbar,
  .navbar.navbar-home,
  .navbar.navbar-scrolled {
    left: 0;
    right: 0;
    padding: 14px 16px 0;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    /* 关键：页面自带的 will-change: backdrop-filter 会创建独立的背景根，
       导致内层胶囊的毛玻璃模糊失效，必须关掉 */
    will-change: auto !important;
  }

  /* 胶囊条本体：宽度贴合 logo + 文字，整体居中，任何滚动状态布局一致 */
  .nav-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: 0 auto;
    padding: 10px 36px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    transition:
      background 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
      box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
      border-color 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  /* 滚动后：透明胶囊 + 毛玻璃，无白色底 */
  .navbar.navbar-scrolled .nav-content {
    background: transparent;
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 6px 24px rgba(20, 45, 56, 0.08);
  }

  /* 菜单在胶囊内不再额外右侧留白 */
  .nav-menu {
    margin-right: 0;
  }

  /* 胶囊内链接恢复常规配色（覆盖首页顶部透明态的黑色文字强制） */
  .navbar .nav-menu a {
    color: var(--text-color, #333333);
    text-shadow: none;
  }

  .navbar .nav-menu a.router-link-active {
    color: var(--primary-color, #1B4D5D);
    font-weight: 600;
  }

  /* ============================================================
     深色横幅页（产品目录 / 行业应用）：未滚动时横幅图是深色的，
     导航文字全部用白色；滚动后（毛玻璃胶囊浮现）恢复深色文字
     ============================================================ */
  .navbar-dark-hero:not(.navbar-scrolled) .nav-menu a,
  .navbar-dark-hero:not(.navbar-scrolled) .nav-menu a.router-link-active {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  }

  .navbar-dark-hero:not(.navbar-scrolled) .nav-menu a:hover {
    color: #ffffff;
    opacity: 0.85;
  }

  .navbar-dark-hero:not(.navbar-scrolled) .nav-menu a.router-link-active::after {
    background: #ffffff;
  }

  .navbar-dark-hero:not(.navbar-scrolled) .lang-toggle-btn {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
  }
}