/* 5.1 顶部导航 */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--text);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease),
    backdrop-filter 0.5s var(--ease), color 0.5s var(--ease);
}

.site-header.is-scrolled {
  background: var(--glass-header);
  backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
}

.header__inner {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  overflow: hidden;
}

.brand__logo img {
  width: auto;
  height: 40px;
  max-width: 56vw;
  object-fit: contain;
}

.brand__fallback {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.brand__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 内页后加载的旧样式里有 .iconfont{font-family:"iconfont"!important}，
   这里用更高优先级锁定新主题的图标字体，避免搜索/语言图标变成旧字体的字形 */
.site-header .iconfont {
  font-family: "wf-iconfont" !important;
}

/* 旧样式 css/main.css 在 ≤1200px 时有 .icon{display:none!important}，
   会连带隐藏新主题头部的所有 SVG 图标（汉堡菜单、箭头等），此处提高优先级恢复显示 */
.site-header .icon {
  display: block !important;
}

.nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
}

.nav__item {
  position: relative;
}

.nav__link,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-muted);
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.nav__link:hover,
.nav__trigger:hover,
.nav__item.is-open > .nav__trigger {
  color: var(--text);
  background: var(--surface);
}
.nav__link_active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.3);
}
.site-header.is-scrolled .nav__link_active {
  background: rgba(107, 107, 107, 0.5);
}
.nav__caret {
  transition: transform var(--duration) var(--ease);
}

.nav__item:hover .nav__caret {
  transform: rotate(180deg);
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  /* width: 288px; */
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.nav__panel {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--glass-header);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.nav__sublink {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-active);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.nav__sublink:hover {
  background: var(--surface);
  color: #60a5fa;
}

.nav__subdesc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
}

/* 级联子菜单：一级项 hover / 聚焦后向右侧展开三级 */
.nav__group {
  position: relative;
}

.nav__sublink--parent {
  position: relative;
  padding-right: 36px;
  width: max-content;
}

.nav__subcaret {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--text-dim);
  transition: color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.nav__sublink--parent:hover .nav__subcaret,
.nav__group:focus-within .nav__subcaret {
  color: #60a5fa;
  transform: translateY(-50%) translateX(2px);
}

.nav__submenu {
  position: absolute;
  top: -4px;
  left: 100%;
  z-index: 10;
  /* width: 224px; */
  padding-left: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.nav__group:hover .nav__submenu,
.nav__group:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.nav__subpanel {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--glass-header);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.nav__leaf {
  display: block;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-active);
  width: max-content;
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.nav__leaf:hover {
  color: #60a5fa;
  background: var(--surface);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.icon-btn:hover {
  color: var(--text);
  background: var(--surface);
}

.lang-btn {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-muted);
}

.lang-btn:hover {
  color: var(--text);
  background: var(--surface);
}

/* 搜索：点击图标后，输入框以图标右缘为原点向左展开 */
.search {
  display: none;
  position: relative;
  align-items: center;
}

.search__input {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  width: 0;
  height: 36px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  transform: translateY(-50%);
  transform-origin: right center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: width 0.35s var(--ease), opacity 0.25s var(--ease),
    padding 0.35s var(--ease), border-color 0.35s var(--ease),
    background-color 0.35s var(--ease);
}

.search__input::placeholder {
  color: var(--text-dim);
}

.search.is-open .search__input {
  width: 220px;
  padding-inline: 12px;
  border-color: var(--border-strong);
  background: var(--glass);
  backdrop-filter: blur(12px);
  opacity: 1;
  pointer-events: auto;
}

.search__input:focus {
  outline: none;
  border-color: var(--brand);
}

.search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.search__btn:hover,
.search.is-open .search__btn {
  color: var(--text);
  background: var(--surface);
}

.menu-btn {
  display: none;
  padding: 8px;
  color: var(--text);
}

/* 移动端菜单 */
.mobile-nav {
  display: grid;
  grid-template-rows: 0fr;
  max-height: 80vh;
  overflow: hidden;
  background: transparent;
  border-top: 1px solid transparent;
  transition: grid-template-rows 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.mobile-nav.is-open {
  grid-template-rows: 1fr;
  overflow-y: auto;
  background: var(--glass-header);
  backdrop-filter: blur(20px);
  border-top-color: var(--border);
}

.mobile-nav__inner {
  min-height: 0;
  padding-block: 0;
}

.mobile-nav.is-open .mobile-nav__inner {
  padding-block: 8px;
}

.mobile-nav__link {
  display: block;
  padding: 12px 24px;
  font-weight: 500;
  color: #d1d5db;
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.mobile-nav__link:hover {
  color: var(--text);
  background: var(--surface);
}

.mobile-nav__sublink {
  display: block;
  padding: 8px 40px;
  font-size: 14px;
  color: var(--text-dim);
}

.mobile-nav__sublink:hover {
  color: #d1d5db;
}

/* 移动端级联子菜单：点击一级项展开三级 */
.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 40px;
  font-size: 14px;
  text-align: left;
  color: var(--text-dim);
  transition: color var(--duration) var(--ease);
}

.mobile-nav__toggle[aria-expanded='true'] {
  color: #d1d5db;
}

.mobile-nav__caret {
  flex: none;
  transition: transform var(--duration) var(--ease);
}

.mobile-nav__toggle[aria-expanded='true'] .mobile-nav__caret {
  transform: rotate(180deg);
}

.mobile-nav__sub {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s var(--ease);
}

.mobile-nav__sub.is-expanded {
  grid-template-rows: 1fr;
}

.mobile-nav__sub-inner {
  min-height: 0;
}

.mobile-nav__leaf {
  display: block;
  padding: 8px 56px;
  font-size: 13px;
  color: var(--text-dim);
}

.mobile-nav__leaf:hover {
  color: #d1d5db;
}

.header-nav {
  height: var(--header-h);
  background-color: #ffffff;
}

@media (max-width: 1199px) {
  .site-header,
  .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }

  /* 白底之上文字 / 图标统一转深色，保证对比度 */
  .site-header,
  html.light .site-header:not(.is-scrolled) {
    --text: #1a1a2e !important;
    --text-active: #1a1a2e !important;
    --text-muted: #64748b !important;
    --surface: rgba(0, 0, 0, 0.05) !important;
    --border: rgba(0, 0, 0, 0.08) !important;
  }

  /* 展开的移动菜单面板同样白底，整体保持一致 */
  .mobile-nav.is-open {
    background: rgba(255, 255, 255, 0.72);
    border-top-color: rgba(0, 0, 0, 0.08);
  }

  .mobile-nav__link {
    color: #1a1a2e;
  }

  .mobile-nav__link:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  .mobile-nav__sublink,
  .mobile-nav__toggle,
  .mobile-nav__leaf {
    color: #64748b;
  }

  .mobile-nav__sublink:hover,
  .mobile-nav__leaf:hover {
    color: #1a1a2e;
  }

  /* 搜索框在白底上用深色文字 + 更清晰描边 */
  .search__input,
  .search.is-open .search__input {
    color: #1a1a2e;
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.92);
  }

  /* 汉堡菜单按钮：≤1199px（H5 / pad）才显示，桌面端（≥1200px 用完整导航 .nav）保持隐藏 */
  .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}