/* ==========================================================================
   顶部导航栏：Liquid Glass
   参考 Apple HIG（Materials / Liquid Glass）：
   - 只用于导航功能层，不进入内容层
   - regular 变体：模糊 + 亮度调整，保证文字可读性
   - 边缘有高光与内折射，不做玻璃套玻璃
   - 静止时安静，指针移动时高光轻微响应
   - 支持降低透明度 / 提高对比度 / 减少动态效果
   ========================================================================== */

.header-shell {
  --glass-x: 18%;
  --glass-y: 12%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(212, 230, 255, 0.07) 44%,
      rgba(255, 255, 255, 0.18) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.46) !important;
  box-shadow:
    0 10px 30px -22px rgba(12, 51, 134, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.03) !important;
  backdrop-filter: blur(24px) saturate(180%) brightness(1.03) !important;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s,
    padding 0.3s var(--ease) !important;
}

/* 透镜高光：静止时很淡，指针经过时轻微上浮 */
.header-shell::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(170px 90px at var(--glass-x) var(--glass-y),
      rgba(255, 255, 255, 0.5), transparent 72%),
    radial-gradient(38% 74% at 12% 0%,
      rgba(255, 255, 255, 0.58), transparent 64%),
    radial-gradient(34% 78% at 90% 106%,
      rgba(255, 255, 255, 0.3), transparent 68%),
    radial-gradient(30% 56% at 68% 118%,
      rgba(12, 51, 134, 0.1), transparent 72%);
  opacity: 0.6;
  transition: opacity 0.35s var(--ease), transform 0.7s var(--ease);
}
.header-shell:hover::before,
.header-shell:focus-within::before {
  opacity: 0.76;
  transform: scale(1.025);
}

/* 边缘厚度与内折射，不叠加第二层玻璃 */
.header-shell::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 2px 3px -2px rgba(255, 255, 255, 0.85),
    inset 0 -2px 3px -2px rgba(255, 255, 255, 0.42);
}

/* 功能内容位于玻璃之上 */
.header-shell > * {
  position: relative;
  z-index: 1;
}

/* 滚动后加强 regular 变体的可读性 */
.site-header.is-scrolled .header-shell {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(232, 242, 255, 0.16) 44%,
      rgba(255, 255, 255, 0.3) 100%) !important;
  border-color: rgba(255, 255, 255, 0.54) !important;
  box-shadow:
    0 14px 34px -24px rgba(12, 51, 134, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 18px rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.04) !important;
  backdrop-filter: blur(28px) saturate(190%) brightness(1.04) !important;
}

/* 提高顶部功能层文字的振动感/可读性 */
.site-header .nav__link { color: #425066 !important; }
.site-header .nav__link:hover { color: #0c3386 !important; }
.site-header .nav__link.is-active { color: #ffffff !important; }
.site-header .header__cta { color: #ffffff !important; }
.site-header .header__cta:hover { color: #ffffff !important; }

/* 触摸目标不小于 44px，并保留清晰焦点 */
.brand { min-height: 44px; display: inline-flex; align-items: center; }
.nav-toggle { min-width: 44px; min-height: 44px; }
.nav__link { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.brand:focus-visible,
.nav__link:focus-visible,
.header__cta:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid #0c3386;
  outline-offset: 3px;
  border-radius: 999px;
}

/* 深色模式：regular 黑玻璃，文字用明亮的振动色 */
@media (prefers-color-scheme: dark) {
  .header-shell {
    background:
      linear-gradient(135deg,
        rgba(255, 255, 255, 0.085) 0%,
        rgba(255, 255, 255, 0.016) 44%,
        rgba(255, 255, 255, 0.055) 100%) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow:
      0 14px 34px -24px rgba(0, 0, 0, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 20px rgba(255, 255, 255, 0.04) !important;
    -webkit-backdrop-filter: blur(24px) saturate(165%) brightness(0.92) !important;
    backdrop-filter: blur(24px) saturate(165%) brightness(0.92) !important;
  }
  .header-shell::before {
    background:
      radial-gradient(170px 90px at var(--glass-x) var(--glass-y),
        rgba(255, 255, 255, 0.2), transparent 72%),
      radial-gradient(38% 74% at 12% 0%,
        rgba(255, 255, 255, 0.18), transparent 64%),
      radial-gradient(34% 78% at 90% 106%,
        rgba(255, 255, 255, 0.08), transparent 68%),
      radial-gradient(30% 56% at 68% 118%,
        rgba(125, 169, 255, 0.12), transparent 72%);
    opacity: 0.7;
  }
  .header-shell::after {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 2px 3px -2px rgba(255, 255, 255, 0.3),
      inset 0 -2px 3px -2px rgba(255, 255, 255, 0.12);
  }
  .site-header.is-scrolled .header-shell {
    background:
      linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.03) 44%,
        rgba(255, 255, 255, 0.08) 100%) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
  }
  .site-header .nav__link { color: #c0ccda !important; }
  .site-header .nav__link:hover,
  .site-header .nav__link.is-active { color: #ffffff !important; }
  .site-header .header__cta { color: #ffffff !important; }
  .site-header .header__cta:hover { color: #ffffff !important; }
  .brand:focus-visible,
  .nav__link:focus-visible,
  .header__cta:focus-visible,
  .nav-toggle:focus-visible { outline-color: #9db9e6; }
}

/* 减少动态：去掉过渡与高光位移 */
@media (prefers-reduced-motion: reduce) {
  .header-shell::before { transition: none; }
  .header-shell:hover::before,
  .header-shell:focus-within::before { transform: none; }
}

/* 降低透明度：退化为实色，可读性优先 */
@media (prefers-reduced-transparency: reduce) {
  .header-shell {
    background: rgba(249, 248, 248, 0.97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .header-shell::before { display: none; }
  @media (prefers-color-scheme: dark) {
    .header-shell { background: rgba(8, 9, 13, 0.97) !important; }
  }
}

/* 提高对比度 */
@media (prefers-contrast: more) {
  .header-shell {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(12, 51, 134, 0.4) !important;
  }
  .site-header .nav__link { color: #152235 !important; }
  .site-header .nav__link.is-active { color: #0c3386 !important; }
  @media (prefers-color-scheme: dark) {
    .header-shell { background: rgba(8, 9, 13, 0.95) !important; }
    .site-header .nav__link { color: #ffffff !important; }
  }
}

@media (max-width: 768px) {
  .header-shell {
    -webkit-backdrop-filter: blur(22px) saturate(175%) brightness(1.03) !important;
    backdrop-filter: blur(22px) saturate(175%) brightness(1.03) !important;
  }
  .nav-toggle { width: 44px; height: 44px; }
}

/* HIG：避免在导航功能层里叠一层实色自定义背景；
   当前项用文字色 + 小圆点表示，让液态玻璃保持完整 */
.site-header .nav__link.is-active {
  background: transparent !important;
  color: #0c3386 !important;
  box-shadow: none !important;
}
.site-header .nav__link::after { display: none !important; }
.site-header .nav__link.is-active::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
  opacity: 0.9;
}

@media (prefers-color-scheme: dark) {
  .site-header .nav__link.is-active {
    background: transparent !important;
    color: #ffffff !important;
  }
  .site-header .nav__link.is-active::before { background: currentColor; }
}

/* 不支持背景模糊的浏览器：退回实底，保证导航可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-shell {
    background: rgba(249, 248, 248, 0.96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  @media (prefers-color-scheme: dark) {
    .header-shell { background: rgba(8, 9, 13, 0.96) !important; }
  }
}