/**
 * =============================================================================
 * NAVIGATION
 * =============================================================================
 * 悬浮玻璃胶囊导航
 *
 * - 始终是玻璃;滚动后 (.is-scrolled) 玻璃更实、投影更深
 * - 当前区块对应的链接高亮 (.is-active)
 * - 手机端:汉堡菜单 + 玻璃下拉面板 (.menu-open,由 js/navigation.js 切换)
 *
 * 对应 HTML:
 *   <header class="global-nav">
 *     <div class="nav-inner glass">  Logo / 链接 / 按钮 / 汉堡按钮
 *     <div class="mobile-links">     手机端下拉菜单
 */

/* 固定在顶部的外层容器 */
.global-nav {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none; /* 外层透明区域不挡点击,仅内部胶囊可点击 */
}

/* 玻璃胶囊本体 (边框、投影、模糊来自 reset.css 中的 .glass) */
.nav-inner {
  pointer-events: auto;
  height: 60px;
  max-width: calc(var(--content) + 24px); /* 比内容区略宽,视觉上"包住"内容 */
  width: calc(100% - 56px);
  margin: 0 auto;
  padding: 0 10px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.22));
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* 滚动后玻璃更实、投影更深,保证正文上方的可读性 */
.global-nav.is-scrolled .nav-inner,
.global-nav.menu-open .nav-inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.45));
  box-shadow:
    var(--glass-rim),
    0 0 0 1px rgba(15, 37, 34, 0.06),
    0 18px 40px -20px rgba(15, 60, 52, 0.4);
}

/* ===== Logo ===== */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* Logo 白色圆角底 */
.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: block;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 4px 10px -4px rgba(15, 60, 52, 0.3);
}

/* Logo 原图四周留白较多:放大并裁切到叶片部分;multiply 让白底与底板融合 */
.brand-logo img {
  display: block;
  width: 42px;
  height: 36px;
  max-width: none;
  margin-left: -3px;
  object-fit: cover;
  object-position: 50% 31%;
  mix-blend-mode: multiply;
}

/* ===== 桌面端链接 ===== */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 15px;
  color: var(--ink-soft);
  transition: color 0.25s ease, background 0.25s ease;
}

.nav-links a:hover {
  color: var(--ink);
  background: rgba(15, 37, 34, 0.05);
}

/* 当前区块:白色玻璃小胶囊 */
.nav-links a.is-active {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
  box-shadow:
    inset 0 1px 0.5px #fff,
    0 0 0 1px rgba(15, 37, 34, 0.06),
    0 4px 10px -4px rgba(15, 60, 52, 0.2);
}

/* 右侧:CTA 按钮 + 汉堡按钮 */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== 汉堡按钮 (仅手机端显示) ===== */
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.4));
  box-shadow:
    inset 0 1px 0.5px #fff,
    0 0 0 1px rgba(15, 37, 34, 0.07),
    0 4px 10px -4px rgba(15, 60, 52, 0.25);
  cursor: pointer;
}

/* 两条横线 */
.menu-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 4px auto;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease-out);
}

/* 菜单打开时,两条横线旋转成 × */
.global-nav.menu-open .menu-toggle span:first-child {
  transform: translateY(2.75px) rotate(45deg);
}

.global-nav.menu-open .menu-toggle span:last-child {
  transform: translateY(-2.75px) rotate(-45deg);
}

/* 手机端下拉菜单,桌面端隐藏 */
.mobile-links {
  display: none;
}

/* ===== 平板 (< 900px):收紧链接间距,隐藏 CTA 按钮 ===== */
@media (max-width: 900px) {
  .nav-links a {
    padding: 8px 11px;
  }

  .nav-actions .btn {
    display: none;
  }
}

/* ===== 手机 (< 650px):隐藏链接,改用汉堡菜单 ===== */
@media (max-width: 650px) {
  .global-nav {
    top: 10px;
  }

  .nav-inner {
    width: calc(100% - 20px);
    height: 56px;
    padding: 0 7px 0 10px;
  }

  .nav-links {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  /* 下拉菜单:默认高度 0、透明,打开时展开 */
  .mobile-links {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    margin: 8px auto 0;
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    opacity: 0;
    transition: max-height 0.4s var(--ease-out), padding 0.4s var(--ease-out), opacity 0.3s ease;
  }

  .global-nav.menu-open .mobile-links {
    max-height: 360px; /* 大于菜单实际高度即可,用于过渡动画 */
    padding: 6px 18px;
    opacity: 1;
    box-shadow: var(--glass-shadow);
  }

  .mobile-links a {
    padding: 15px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    color: var(--ink);
  }

  /* 最后一项 "进入 TTapi" 用品牌色强调 */
  .mobile-links a:last-child {
    border-bottom: 0;
    color: var(--teal);
    font-weight: 600;
  }
}