/**
 * 语言切换：顶栏触发按钮 + 通栏面板。
 *
 * 形态参考阳光智储（cn.sungrowpower.com）的「区域/语言」：
 * 顶栏只留一个入口，点开后在主导航上方展开通栏白色面板，导航随之下移，
 * 面板内三个语言项分三列，当前语言用圆点 + 主色标记，右下角 × 收起。
 *
 * 本次改动只涉及外观；语言名、选中态与切换行为沿用既有实现
 * （navigation.js 的 languages + i18n.js 的 LANGUAGE_LABELS / switchLocale）。
 *
 * 为什么单独一个样式表：
 *   旧实现（.language-switch / .language-menu）被 components、site-polish、
 *   reference-layout、ui-refresh 四层样式反复覆盖，规则互相纠缠。
 *   新控件换用 .lang-* 命名空间并自成一个文件，不受旧规则影响；
 *   旧规则暂未清理（涉及多断点回归，单独排期），但页面里已不再有旧结构，
 *   两套规则互不干扰。
 *
 * 加载顺序：必须在 ui-refresh.css 之后（页面里紧跟其后）。
 */

/* ------------------------------------------------------------------ *
 * 1. 顶栏触发按钮
 * ------------------------------------------------------------------ */

.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.lang-trigger:hover,
.lang-switch.is-open .lang-trigger {
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.lang-trigger:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* 地球图标：与旧版同一套线条，尺寸略放大到 18px 提高识别度 */
.lang-globe {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.lang-globe svg,
.lang-flag-globe svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 三角用 ▼(U+25BC) 压扁，字体里没有 ▾ 的小三角（见 ui-refresh.css 的说明） */
.lang-caret {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1;
  opacity: 0.8;
  transform: scaleY(0.82);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.lang-switch.is-open .lang-caret {
  transform: scaleY(0.82) rotate(180deg);
}

/* ------------------------------------------------------------------ *
 * 2. 通栏面板
 * ------------------------------------------------------------------ */

/**
 * 语言区是固定页头的第一个子节点，参与页头排版，展开时把导航向下推。
 * 正文与导航渐变背景按面板实际高度同步下移，保留原有首屏布局与配色。
 */
html.is-language-layout-active {
  overflow-anchor: none;
}

body {
  padding-top: var(--site-language-offset, 0px);
}

.site-header::before {
  top: var(--site-language-offset, 0px);
}

.lang-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 0;
  max-height: calc(100dvh - var(--lang-nav-height, 92px));
  overflow: hidden;
  color: #0f172a;
  background: #ffffff;
  box-shadow: inset 0 -1px #e6ecf5;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: height 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}

.lang-panel.is-open {
  height: var(--lang-panel-height, auto);
  overflow-y: auto;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.lang-panel-inner {
  display: grid;
  /* 避免全局减少动态效果规则给继承的 visibility 添加过渡，阻止展开时聚焦。 */
  transition: none;
  /* 三个语言项各占一列，收起按钮跟在同一行末尾（参考站的面板里 × 也在最右侧） */
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  /* 与正文容器（--max-page = 1200px）左右对齐：1200 + 两侧 32px 内边距 */
  width: min(calc(var(--max-page, 1200px) + 64px), 100%);
  margin: 0 auto;
  padding: 22px 32px;
}

.lang-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 14px;
  border-radius: 10px;
  color: #475569;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}

.lang-option:hover,
.lang-option:focus-visible {
  background: #f2f6fd;
  color: #1d4ed8;
  outline: none;
}

.lang-option.is-active {
  color: #2563eb;
  font-weight: 600;
}

/* 选中圆点：沿用阳光智储「左侧实心圆点」的标记方式 */
.lang-option.is-active::before {
  position: absolute;
  top: 50%;
  left: -8px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--color-primary, #2563eb);
  content: "";
}

.lang-flag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 18px;
  overflow: hidden;
  border-radius: 3px;
  color: #64748b;
  background: #eef2f9;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.lang-flag > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lang-flag-globe svg {
  width: 15px;
  height: 15px;
}

.lang-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-option-check {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.lang-option-check svg {
  width: 100%;
  height: 100%;
}

.lang-option.is-active .lang-option-check {
  opacity: 1;
}

/* 收起按钮：没有附加文案，只有 × 图标，跟三个语言项排在同一行末尾 */
.lang-panel-close {
  justify-self: end;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.lang-panel-close:hover,
.lang-panel-close:focus-visible {
  border-color: #bfdbfe;
  background: #f5f9ff;
  color: var(--color-primary, #2563eb);
  outline: none;
}

.lang-panel-close svg {
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------------------------ *
 * 3. 平板 / 手机：抽屉与顶栏空间有限，触发按钮收成图标
 * ------------------------------------------------------------------ */

/**
 * 手机上入口只留地球图标：语言名用「视觉隐藏」而不是 display:none，
 * 这样按钮仍然有可读名称（读屏能念出当前语言）。
 */
.lang-trigger-label {
  display: inline-block;
}

@media (max-width: 900px) {
  .lang-trigger {
    width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  }

  .lang-trigger-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .lang-caret {
    display: none;
  }

  .lang-panel {
    max-height: calc(100dvh - var(--lang-nav-height, 92px));
    -webkit-overflow-scrolling: touch;
  }

  .lang-panel-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 12px 18px 14px;
  }

  .lang-option {
    min-height: 46px;
    font-size: 15.5px;
  }

  /* 单列时收起按钮落到最后一行右侧 */
  .lang-panel-close {
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-panel {
    transition: none;
  }
}

/* ------------------------------------------------------------------ *
 * 4. 窄屏顶栏空间预算
 * ------------------------------------------------------------------ */

/**
 * 手机端顶栏一行里要放下：品牌（161px 定宽）、汉堡（44px）、EMS 胶囊（108px）、
 * 语言按钮（40px）。按 site-polish.css 的窄屏规则，顶栏内容宽 = 100vw - 64px，
 * 390px 机型只剩 326px —— 加上原先的语言控件（132px）已经溢出，
 * 旧版语言按钮被顶出视口就是这么来的（实测右缘 502px > 430px 视口）。
 *
 * 新版语言按钮只有 40px（图标形态），下面按「品牌 → 间距 → EMS 胶囊」
 * 的顺序依次收紧，把 360px 以上机型的四个控件都放回视口内，不再出现裁切。
 */
@media (max-width: 720px) {
  .site-header .header-shell {
    gap: 8px;
  }

  .site-header .brand {
    min-width: 0;
  }

  .site-header .brand img {
    width: 124px;
    max-width: 124px;
  }

  /* EMS 胶囊从「定宽 108px」改为按内容收窄 */
  .site-header .ems-switch {
    min-width: 0;
  }

  .site-header .ems-switch > summary {
    padding: 0 10px;
  }
}

@media (max-width: 640px) {
  .site-header .header-shell {
    padding: 0 12px;
  }
}

@media (max-width: 420px) {
  .site-header .brand img {
    width: 104px;
    max-width: 104px;
  }

  .lang-trigger {
    width: 36px;
    min-height: 36px;
  }
}

/* 320~340px 的老机型：品牌缩到最小，EMS 入口收进汉堡菜单之外会溢出，
   这里只保留「品牌 + 菜单 + 语言」三个控件，语言切换始终可用。 */
@media (max-width: 340px) {
  .site-header .brand img {
    width: 88px;
    max-width: 88px;
  }

  .site-header .ems-switch {
    display: none;
  }
}