/* ==========================================================================
   Linkshing 官网 · 顶部导航（Header）
   桌面：Logo + 5 项菜单（业务板块 hover 下拉）+ 橙色 CTA
   移动：汉堡按钮 + 全屏抽屉（含二级展开）
   ========================================================================== */

/* ==========================================================================
   一、导航外壳
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base);
}

/* 滚动后加阴影（由 main.js 切换 is-scrolled） */
.site-header.is-scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
}

/* ==========================================================================
   一（补）、首页透明导航
   首页 Hero 为深色满幅大图，导航透明浮于图上（白字 + 白色 Logo）；
   一旦滚动，立即恢复白底深字，保证可读性。
   仅作用于 body[data-page="home"]，不影响内页。

   关键：导航本身是 sticky（占文档流 73px），若不做处理，Hero 会从 y=73 开始，
   顶部露出白底，白字导航就白底白字看不见了。
   这里用「负 margin 抵消 + 撑开 padding」把 Hero 顶到 y=0，导航浮在图片上。
   ========================================================================== */

body[data-page="home"] .site-header {
  background-color: transparent;
  border-bottom-color: transparent;
  transition: background-color var(--transition-base),
    border-color var(--transition-base), box-shadow var(--transition-base);
}

/* 让 Hero 从页面最顶端开始，导航叠在图片上方 */
body[data-page="home"] > main {
  margin-top: -73px;
}

body[data-page="home"] .hero {
  padding-top: calc(88px + 73px);
}

/* 滚动后恢复白底，此时不再需要负 margin（sticky 已吸附顶部） */
body[data-page="home"] .site-header.is-scrolled {
  background-color: var(--color-white);
  border-bottom-color: var(--color-border);
}

/* 双 Logo 基础规则：默认只显示深色版，白色版始终隐藏。
   仅「首页未滚动」时反转（见上方规则）。避免滚动后两个 Logo 同时出现。 */
.site-logo__img--light {
  display: none;
}

/* 未滚动时：白字 + 白色 Logo（两个 img 互斥显示，避免 CSS 换源带来的重下载） */
body[data-page="home"] .site-header:not(.is-scrolled) .site-logo__img--dark {
  display: none;
}

body[data-page="home"] .site-header:not(.is-scrolled) .site-logo__img--light {
  display: block;
}

body[data-page="home"] .site-header:not(.is-scrolled) .site-nav__link {
  color: rgba(255, 255, 255, .92);
}

body[data-page="home"] .site-header:not(.is-scrolled) .site-nav__link:hover,
body[data-page="home"] .site-header:not(.is-scrolled) .site-nav__link:focus-visible {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, .14);
}

body[data-page="home"] .site-header:not(.is-scrolled) .site-nav__link.is-active {
  color: var(--color-white);
}

body[data-page="home"] .site-header:not(.is-scrolled) .site-nav__link.is-active::after {
  background-color: var(--color-accent);
}

body[data-page="home"] .site-header:not(.is-scrolled) .nav-toggle {
  color: var(--color-white);
}

body[data-page="home"] .site-header:not(.is-scrolled) .nav-toggle:hover {
  background-color: rgba(255, 255, 255, .14);
}

/* 尊重动效偏好：关闭渐变过渡 */
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .site-header {
    transition: none;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 72px;
}

/* ==========================================================================
   二、Logo
   ========================================================================== */

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo__img {
  height: 44px;
  width: auto;
}

/* ==========================================================================
   三、桌面菜单
   ========================================================================== */

.site-nav {
  display: flex;
  align-items: center;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav__item {
  position: relative;
}

/* 一级菜单链接 */
.site-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background-color var(--transition-base);
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

/* 当前页高亮 */
.site-nav__link.is-active {
  color: var(--color-primary);
}

.site-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 1px;
}

/* 下拉箭头 */
.site-nav__caret {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-base);
}

.site-nav__item:hover .site-nav__caret,
.site-nav__item.is-open .site-nav__caret {
  transform: rotate(180deg);
}

/* ==========================================================================
   四、下拉子菜单
   ========================================================================== */

.site-nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: var(--space-1);
  margin-top: var(--space-1);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  /* 默认隐藏 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base),
    visibility var(--transition-base);
}

.site-nav__item:hover .site-nav__submenu,
.site-nav__item:focus-within .site-nav__submenu,
.site-nav__item.is-open .site-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__sublink {
  display: block;
  padding: 10px 14px;
  font-size: var(--fs-small);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background-color var(--transition-base);
}

.site-nav__sublink:hover,
.site-nav__sublink:focus-visible {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

/* ==========================================================================
   五、导航右侧操作区
   ========================================================================== */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ==========================================================================
   五（补）、语言切换（中文 / EN）
   位置参照参考站：导航最右侧。当前语言为纯文本（不可点），
   另一语言为链接，点击跳转到对应语言版本的同一页面。
   ========================================================================== */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-right: var(--space-1);
  font-size: var(--fs-small);
  line-height: 1;
}

.lang-switch__item {
  padding: 6px 4px;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition-base);
}

/* 可点击的语言：主色 + 下划线暗示可切换 */
a.lang-switch__item {
  color: var(--color-primary);
}

a.lang-switch__item:hover,
a.lang-switch__item:focus-visible {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* 当前语言：不加下划线，读者一眼可辨 */
.lang-switch__item.is-active {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  cursor: default;
}

.lang-switch__sep {
  color: var(--color-border);
  -webkit-user-select: none;
  user-select: none;
}

/* 首页未滚动（深色满幅 Hero 上）：整体转白，保证对比度 ≥4.5:1 */
body[data-page="home"] .site-header:not(.is-scrolled) .lang-switch__item {
  color: rgba(255, 255, 255, .8);
}

body[data-page="home"] .site-header:not(.is-scrolled) a.lang-switch__item {
  color: rgba(255, 255, 255, .95);
}

body[data-page="home"] .site-header:not(.is-scrolled) a.lang-switch__item:hover,
body[data-page="home"] .site-header:not(.is-scrolled) a.lang-switch__item:focus-visible {
  color: var(--color-white);
}

body[data-page="home"] .site-header:not(.is-scrolled) .lang-switch__item.is-active {
  color: var(--color-white);
}

body[data-page="home"] .site-header:not(.is-scrolled) .lang-switch__sep {
  color: rgba(255, 255, 255, .45);
}

/* 抽屉内的语言切换（移动端，白底深字） */
.lang-switch--drawer {
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-3);
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-body);
}

.lang-switch--drawer .lang-switch__item {
  font-size: var(--fs-body);
  padding: 8px 10px;
}

/* ==========================================================================
   六、汉堡按钮（移动端）
   ========================================================================== */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  transition: background-color var(--transition-base);
}

.nav-toggle:hover {
  background-color: var(--color-bg);
}

/* 三横线（用伪元素绘制，便于动画） */
.nav-toggle__bar {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: background-color var(--transition-base);
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform var(--transition-base);
}

.nav-toggle__bar::before {
  top: -7px;
}

.nav-toggle__bar::after {
  top: 7px;
}

/* 打开状态：变叉 */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   七、移动端抽屉
   ========================================================================== */

/* 遮罩 */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background-color: rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* 抽屉面板 */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: calc(var(--z-drawer) + 1);
  width: min(84vw, 360px);
  height: 100%;
  padding: var(--space-3) var(--space-3) var(--space-4);
  background-color: var(--color-white);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  /* 关闭时彻底移出焦点树与可访问性树（键盘不可达） */
  visibility: hidden;
  /* visibility 不做过渡：打开时立即变为 visible，确保 closeBtn.focus() 生效；
     关闭时通过 transition-delay 等位移动画结束再隐藏（见下方 .is-open 规则） */
  transition: transform var(--transition-base), visibility 0s linear var(--transition-base);
}

.nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--transition-base), visibility 0s linear 0s;
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.nav-drawer__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 24px;
  line-height: 1;
}

.nav-drawer__close:hover {
  background-color: var(--color-bg);
}

/* 抽屉列表 */
.nav-drawer__list {
  display: flex;
  flex-direction: column;
}

.nav-drawer__item {
  border-bottom: 1px solid var(--color-border);
}

.nav-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 4px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  text-align: left;
}

.nav-drawer__link.is-active {
  color: var(--color-primary);
}

.nav-drawer__caret {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-base);
}

.nav-drawer__item.is-open .nav-drawer__caret {
  transform: rotate(180deg);
}

/* 抽屉二级菜单（默认折叠） */
.nav-drawer__submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base);
}

.nav-drawer__item.is-open .nav-drawer__submenu {
  max-height: 240px;
}

.nav-drawer__sublink {
  display: block;
  padding: 12px 4px 12px 20px;
  font-size: var(--fs-small);
  color: var(--color-text);
}

.nav-drawer__sublink.is-active {
  color: var(--color-primary);
}

/* 抽屉底部 CTA */
.nav-drawer__cta {
  margin-top: var(--space-4);
}

/* 抽屉打开时锁定滚动 */
body.is-locked {
  overflow: hidden;
}

/* ==========================================================================
   八、响应式
   ========================================================================== */

/* 平板及以下：切换为汉堡菜单 */
@media (max-width: 1023px) {
  .site-nav,
  .site-header__actions .btn {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

/* 手机窄屏：顶部语言切换收窄，避免与汉堡按钮争空间 */
@media (max-width: 479px) {
  .site-header__actions {
    gap: var(--space-1);
  }

  .site-header__actions .lang-switch {
    gap: 4px;
    padding-right: 0;
  }

  .site-header__actions .lang-switch__item {
    padding: 6px 2px;
  }

  .site-header__inner {
    min-height: 64px;
  }

  .site-logo__img {
    height: 34px;
  }

  /* 手机端导航更矮，负 margin 同步调整 */
  body[data-page="home"] > main {
    margin-top: -65px;
  }

  body[data-page="home"] .hero {
    padding-top: calc(56px + 65px);
  }
}