/**
 * UI 统一细化层（必须最后加载）
 *
 * 本文件以「覆盖」方式实现，不改动既有样式表的规则，便于单独回滚：
 * 删掉页面里的 <link> 即可恢复原状。
 *
 *   1. 自托管中文字体：思源黑体 SC 子集，提供 400/500/700 三档真实字重。
 *   2. 字体栈与排版：拉丁走 Segoe UI，中文走自托管思源黑体，
 *      导航/页脚/区块标题统一字号与字距。
 *   3. 语言切换：本族名 + 地球图标，提高与顶栏背景的对比度和点击区。
 *   4. 二维码尺寸：页脚微信公众号二维码放大到可扫的尺寸。
 *
 * 加载顺序：tokens → base → … → site-polish → scroll-reveal → ui-refresh。
 * 依赖 base.css 里的 `box-sizing: border-box` 全局重置。
 */

/* ------------------------------------------------------------------ *
 * 1. 自托管中文字体（思源黑体 SC 子集）
 * ------------------------------------------------------------------ */

/**
 * 为什么必须自带字体：Windows 上的中文字体（微软雅黑、以及系统安装的思源黑体）
 * 通常只装了 Regular 与 Bold 两档，而本站有 200+ 处声明使用 500/600/800/900 字重。
 * 字体没有对应档位时，浏览器只能拿 Regular 的字形「合成加粗」（synthetic bold），
 * 笔画被横向撑开、边缘发虚——这正是标题与导航看起来「糊、不够高级」的根因，
 * 光调字号和字距治不了。
 *
 * 子集来源为系统安装的 Source Han Sans SC（SIL OFL 1.1，允许嵌入与再分发），
 * 只保留本站实际用到的 1100 个汉字 + 拉丁与标点，单档从 16.5 MB 压到约 400 KB。
 * 重新生成：python scripts/build_cjk_subset.py
 *
 * 字重区间刻意写成不重叠且无空隙，使 400→400档、500→500档、
 * 600/800/900→700档，任何取值都命中真实字形，不会触发合成加粗。
 */
@font-face {
  font-family: "Feisjy Sans SC";
  src: url("../assets/fonts/source-han-sans-sc-400.woff2") format("woff2");
  font-weight: 300 450;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Feisjy Sans SC";
  src: url("../assets/fonts/source-han-sans-sc-500.woff2") format("woff2");
  font-weight: 451 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Feisjy Sans SC";
  src: url("../assets/fonts/source-han-sans-sc-700.woff2") format("woff2");
  font-weight: 601 950;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ *
 * 2. 字体栈
 * ------------------------------------------------------------------ */

:root {
  /* 先列拉丁字体再列中文字体：中文字体自带的拉丁字形普遍偏方、偏旧，
     先命中 Segoe UI 可让英文与数字明显更清爽（系统字体，零下载成本）。
     中文交给自托管的思源黑体；后面的系统黑体是字体未加载完成时的兜底。 */
  --font-heading: "Segoe UI", "Feisjy Sans SC", "PingFang SC",
    "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", "Noto Sans SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-body: "Segoe UI", "Feisjy Sans SC", "PingFang SC",
    "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", "Noto Sans SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-numeric: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
}

/**
 * 文本选中高亮。
 *
 * 浏览器默认的 ::selection 是 #2563eb 实心蓝，而本站主色恰好也是 #2563eb，
 * 顶栏又是深蓝底、白字——选中导航时白字压在实心蓝上几乎看不清（老板反馈的问题）。
 * 这里改成半透明浅蓝：深色底上提亮、浅色底上仍是柔和的蓝色，
 * 两种背景下正文都保持可读，同时保留「已选中」的视觉反馈。
 */
::selection {
  background: rgba(37, 99, 235, 0.28);
  color: inherit;
}

::-moz-selection {
  background: rgba(37, 99, 235, 0.28);
  color: inherit;
}

/* 深色底（顶栏 / 页脚 / 深色区块）用更亮的半透明白，避免选中后文字与底色反差不足。 */
.site-header ::selection,
footer ::selection,
.home-immersive-hero ::selection,
.solution-entry ::selection {
  background: rgba(255, 255, 255, 0.38);
  color: inherit;
}

.site-header ::-moz-selection,
footer ::-moz-selection,
.home-immersive-hero ::-moz-selection,
.solution-entry ::-moz-selection {
  background: rgba(255, 255, 255, 0.38);
  color: inherit;
}

/**
 * 顶栏布局：把「品牌 + 导航」与「语言 + EMS」拆成左右两个独立簇，各自参与文档流。
 *
 * 原因：原布局里 `.primary-nav > .nav-actions` 是 `position:absolute; right:32px` 的
 * 悬浮块，不占文档流。实测英文页在 ≤1280px 时，导航项已经压到 actions 下面
 * （1200px 重叠 49px、1121px 重叠 87px），中文页在 1121px 也刚好卡死。
 * 将语言选项平铺展开后还需要更多横向空间，必须先把这个重叠修掉，
 * 否则放大字号只会让撞车更明显。
 *
 * 改为 flex 两簇后：导航在中间自适应（必要时换行到第二行），actions 固定在右侧，
 * 任何宽度都不会互相覆盖。
 */
@media (min-width: 1400px) {
  /**
   * 顶栏布局：品牌靠左、导航绝对居中、actions（EMS + 语言）贴右。
   *
   * 为什么用绝对定位而不是三段 grid：grid 把导航限制在中列宽度内，
   * 而导航项是 `min-width: max-content`（不可压缩），中列不够宽时导航就会
   * 溢出到第三列、压住 actions（实测 1300px 起压 21px，1121px 压 98px）。
   * 绝对定位 + `left: 50%` + `translateX(-50%)` 让导航的居中**与两侧内容宽度无关**，
   * 只要两侧给导航留足空间就不会重叠。
   *
   * 不允许换行：一旦换行 header 会从 78px 涨到约 176px，固定顶栏会盖住首屏。
   */
  .header-shell {
    display: block !important;
    position: relative;
    padding: 0 32px;
  }

  /* 品牌靠左，参与常规流 */
  .header-shell > .brand {
    display: inline-flex;
    vertical-align: middle;
  }

  /**
   * 导航：绝对定位到整行水平中心，居中性与两侧内容宽度无关。
   *
   * 关键约束：导航居中后，两侧必须各留出足够空间才不会压住品牌/actions。
   * 品牌最宽约 300px、actions 最宽约 400px，因此左右各预留 24rem(=384px)，
   * 导航可用宽度上限即 `100% - 48rem`。超过这个宽度时字号会按容器查询自动收缩
   * （见下方 1.06cqw 的字体规则），保证既居中又不重叠。
   *
   * site-polish.css 里该规则带 !important（`position: absolute !important;
   * inset: 0 0 auto !important; width: 100%`），因此覆盖必须同样带 !important，
   * 且要复位它的 inset，只保留我们自己的居中定位。
   */
  .primary-nav {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    /* 两侧各预留 25rem(=400px)：品牌最宽约 300px、actions 最宽约 400px，
       再留出安全间隙。导航超过此宽度时字号按容器查询自动收缩，
       保证「居中 + 不压两侧」。 */
    max-width: calc(100% - 54rem);
    display: flex;
    align-items: center;
    justify-content: center !important;
    flex-wrap: nowrap;
    gap: clamp(0px, 0.4vw, 10px);
    height: auto;
    max-height: none;
    overflow: visible;
    z-index: 1;
  }

  /* actions（EMS 系统 + 语言切换）绝对贴右 */
  .primary-nav > .nav-actions,
  .primary-nav .nav-actions,
  .nav-actions {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.8vw, 14px);
    margin: 0;
    padding: 0 0 0 clamp(10px, 1.2vw, 20px);
    /* 桌面端只用竖向分隔线。其他样式表给过 border-top（横向分隔），
       这里必须显式清掉，否则顶栏里会多出一条横向细线。 */
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.24);
    z-index: 2;
  }

  .primary-nav > .language-switch {
    margin-left: clamp(8px, 1vw, 16px);
  }

  /**
   * 重置抽屉期的伸缩规则。
   *
   * site-polish.css 在 `@media (max-width: 1399px)` 里把 `.ems-switch` 设为
   * `flex: 1 1 auto`（抽屉里让它占满整行）。而本站真正的抽屉断点在 900px，
   * 901–1120px 仍应走桌面横排布局——若不重置，EMS 按钮会一路撑到 539px，
   * 把导航项挤成 0 宽，看起来就是「EMS 按钮盖住了导航」。
   */
  .primary-nav .ems-switch {
    flex: 0 0 auto;
  }

  .primary-nav .language-switch {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .primary-nav .ems-switch > summary,
  .primary-nav .language-switch > .language-current {
    width: auto;
  }

  /**
   * 容器查询：以 header 自身的宽度决定字号，而不是视口宽度。
   * 顶栏是「品牌 + 导航 + 语言 + EMS」四部分共享同一行，
   * 按视口取字号会在英文文案较长时挤不下；按容器宽度取值则能连续缩放，
   * 既保证单行不换行，也避免用十几个断点硬调。
   * 第一行是 px 兜底（不支持容器查询的浏览器按 1280 断点的字号显示）。
   */
  .header-shell {
    container-type: inline-size;
    container-name: siteheader;
  }

  .primary-nav .nav-link,
  .primary-nav .nav-parent {
    font-size: clamp(13px, 1.06cqw + 1.2px, 18px);
    /* 窄宽度下压缩水平内边距，为「导航居中 + 两侧留白」腾出空间。
       内边距只影响触控区宽度，不影响文字可读性。 */
    padding: 0 clamp(6px, 0.55vw, 16px);
  }

  /**
   * 英文页的导航可用宽度更小。
   *
   * 导航绝对居中后，两侧必须各留出「品牌宽度」与「actions 宽度」。
   * 英文页 actions 明显更宽（EMS System + 中文/English/Deutsch 约 375px），
   * 因此把预留从 54rem 提到 64rem，让导航更早收缩，避免压住 actions。
   */
  html[lang="en"] .primary-nav,
  body.is-locale-en .primary-nav {
    max-width: calc(100% - 64rem);
  }

  /**
   * 英文标签明显更长（Products & Systems / About Depcellent），
   * 沿用中文那套字号会在中等宽度压到 actions。
   * 这里单独用更小的系数与上限，并把字距压到近乎为 0。
   */
  html[lang="en"] .primary-nav .nav-link,
  html[lang="en"] .primary-nav .nav-parent,
  body.is-locale-en .primary-nav .nav-link,
  body.is-locale-en .primary-nav .nav-parent {
    font-size: clamp(12px, 0.85cqw + 0.4px, 15px);
    letter-spacing: 0;
    padding: 0 clamp(4px, 0.4vw, 10px);
  }

  /* 中等宽度进一步收紧间距，保证两侧不贴边 */
  @media (max-width: 1279px) {
    .primary-nav {
      gap: 0;
    }

    .primary-nav .nav-link,
    .primary-nav .nav-parent {
      padding: 0 clamp(4px, 0.5vw, 10px);
    }
  }

  .site-header .language-menu a,
  .site-header .language-menu button {
    font-size: clamp(12.5px, 0.86cqw + 1.6px, 15.5px);
  }

  /**
   * 导航项：必须给 min-width: max-content，否则会被压成 0 宽。
   *
   * 早期这里写的是 min-width: 0，结果是空间不足时导航项全部塌成 0 宽，
   * 而不收缩的 .nav-actions（flex-shrink: 0）独吞整行宽度，
   * 表现就是「EMS 按钮盖住了导航」。改为 max-content 后，
   * 导航项永远不会被压缩到小于自身文字宽度。
   */
  .primary-nav > .nav-item {
    flex: 0 1 auto;
    min-width: max-content;
  }
}

/* ------------------------------------------------------------------ *
 * 3. 导航（题目标录）排版
 * ------------------------------------------------------------------ */

/**
 * 桌面端导航排版。
 *
 * 字号**只由上面那条容器查询**（`clamp(13px, 1.06cqw + 1.2px, 18px)`）决定，
 * 这里不再重复声明 font-size——否则会覆盖容器查询、失去连续缩放能力。
 * 宽屏的 18px 上限同样由 clamp 给出（≥1560px 时容器宽度足够）。
 *
 * 中文没有词间空格，字距为 0 时笔画会互相挤压，因此给 0.03em 字距；
 * 字重 500 命中自托管的 Medium 档，是真实字形而非合成加粗。
 */
@media (min-width: 1400px) {
  .primary-nav .nav-link,
  .primary-nav .nav-parent {
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  html[lang="en"] .primary-nav .nav-link,
  html[lang="en"] .primary-nav .nav-parent,
  body.is-locale-en .primary-nav .nav-link,
  body.is-locale-en .primary-nav .nav-parent {
    font-weight: 500;
    letter-spacing: 0.015em;
  }

  /* 下拉箭头：统一成小一号的细箭头，避免和中文正文抢视线。 */
  .primary-nav .nav-parent > span[aria-hidden="true"] {
    font-size: 11px;
    opacity: 0.72;
    transform: translateY(-1px);
  }

  /**
   * 当前页 / 展开中的一级菜单：白底 + 主题蓝字。
   *
   * 之前的浅色半透明胶囊在白字上对比度不足，当前项不够醒目；
   * 改为实心白底 + 蓝字，与顶栏语言切换的选中样式保持一致，
   * 在深蓝顶栏上形成明确的选中标识。
   * 悬停态保持半透明白底 + 白字，与选中态区分开。
   */
  .primary-nav .nav-link.is-active,
  .primary-nav .nav-link[aria-current="page"],
  .primary-nav .nav-parent.is-active,
  .primary-nav .nav-item.is-open > .nav-parent {
    color: var(--color-primary, #2563eb);
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(2, 6, 23, 0.18);
  }

  /* 选中项内的下拉箭头跟随蓝字，避免仍是白色看不清 */
  .primary-nav .nav-link.is-active span[aria-hidden="true"],
  .primary-nav .nav-item.is-open > .nav-parent span[aria-hidden="true"] {
    color: inherit;
    opacity: 0.85;
  }

  /* 悬停：半透明白底 + 白字（与选中态区分） */
  .primary-nav .nav-link:hover:not(.is-active),
  .primary-nav .nav-parent:hover:not(.is-active),
  .primary-nav .nav-item:not(.is-open) > .nav-parent:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  }
}

/**
 * 窄桌面区间（1121–1279px）把字号上限收到 16px。
 *
 * 导航要让出空间保证「居中 + 两侧不重叠」：品牌约 300px、actions 约 380px，
 * 导航可用宽度约 `100% - 48rem`。18px 下导航项总宽约 528px，在 1272px 视口
 * 会超出可用宽度并压到 actions（实测压 23px）；收到 16px 后约 470px，安全。
 * 宽屏不受影响，仍由容器查询给到 18px。
 */
@media (min-width: 1400px) and (max-width: 1439px) {
  .primary-nav .nav-link,
  .primary-nav .nav-parent {
    font-size: clamp(13px, 1.06cqw + 1.2px, 16px);
  }
}

/* 品牌字标：中文名收紧字距，英文副标题拉开字距并转为大写观感。 */
.brand strong {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand small {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* 页脚与区块标题：统一字重与字距，与导航同一套排版语言。 */
.footer-grid h2,
.footer-grid h3 {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nav-group-title,
.nav-panel .nav-group-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* ------------------------------------------------------------------ *
 * 3. 语言切换：本族名 + 地球图标 + 更高对比度
 * ------------------------------------------------------------------ */

/**
 * 语言切换的标记已由 <details>/<summary> 改为 <div>/<span class="language-current">。
 * 闭合的 <details> 会让 UA 样式给非 summary 内容加 content-visibility: hidden，
 * 平铺展开时菜单点不到，因此换成普通元素 + .is-open 类控制展开。
 *
 * 两种形态：
 *   - 桌面（≥1121px）：三种语言平铺为分段控件，一键切换，.language-current 隐藏。
 *   - 移动/平板：显示 .language-current 按钮，点击展开 .language-menu 下拉。
 */
.language-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  min-width: 132px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-control, 8px);
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.language-current:hover,
.language-switch.is-open .language-current {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.34);
  color: #ffffff;
}

.language-switch.is-open .language-chevron {
  transform: rotate(180deg);
}

html[lang="en"] .language-current,
body.is-locale-en .language-current {
  min-width: 148px;
}

/* 地球图标：CSS 画不出带经纬线的地球，这里用内联 SVG（见各页 HTML）。 */
.language-globe {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.language-globe svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.language-chevron {
  /* 字体不含小型三角 ▾(U+25BE)，统一改用思源黑体含有的 ▼(U+25BC)，
     再缩放成原来的视觉大小。transform 同时供展开动画使用。 */
  display: inline-block;
  font-size: 0.66em;
  line-height: 1;
  opacity: 0.78;
  transition: transform 0.18s ease;
  transform-origin: center;
}

/**
 * 各处下拉箭头统一缩放为「小型三角」的观感。
 * 选择器覆盖：导航父项、顶栏 EMS、语言切换、以及正文里的 details/summary。
 */
.primary-nav .nav-parent > span[aria-hidden="true"],
.primary-nav .nav-parent > span.ems-chevron,
.ems-chevron,
.language-chevron,
.nav-item .nav-parent > span[aria-hidden="true"] {
  display: inline-block;
  font-size: 0.62em;
  line-height: 1;
  transform: scaleY(0.82);
  transform-origin: center;
}

/* 展开状态下的旋转：保留 scaleY 一起变换 */
.language-switch.is-open .language-chevron,
.ems-switch[open] .ems-chevron,
.nav-item.is-open > .nav-parent > span[aria-hidden="true"] {
  transform: scaleY(0.82) rotate(180deg);
}

/* 下拉菜单：选项显示本族名，选中项用主题色 + 左侧竖条标记。 */
.language-menu {
  min-width: 152px;
  padding: 6px;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

.language-menu a,
.language-menu button {
  min-height: 42px;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 8px;
}

.language-menu a::before,
.language-menu button::before {
  display: block;
  width: 3px;
  height: 0;
  border-radius: 999px;
  background: var(--color-primary);
  content: "";
  transition: height 0.16s ease;
}

.language-menu a.is-active::before,
.language-menu button.is-active::before {
  height: 18px;
}

/* ------------------------------------------------------------------ *
 * 3b. 桌面端：语言选项平铺为分段控件（华为等官网的通行做法）
 * ------------------------------------------------------------------ */

/**
 * 原来语言切换是一个下拉：先点「🌐 中文 ▾」展开，再点目标语言，两次点击。
 * 桌面端改为把三种语言直接平铺在顶栏，一眼可见、一键切换，不用展开。
 *
 * 实现要点：
 *   - 桌面端隐藏 .language-current（按钮），直接把 .language-menu 平铺展示。
 *   - 标记是普通 div，不需要跟 <details> 的 UA 行为对抗，布局与命中测试都正常。
 *   - 选中项用白底 + 主题色文字，未选中项为半透明白字。
 */
@media (min-width: 1400px) {
  .site-header .primary-nav .language-switch,
  .site-header .language-switch {
    margin-left: 0;
    display: flex;
    align-items: center;
  }

  .site-header .language-switch > .language-current {
    display: none;
  }

  .site-header .primary-nav .language-menu,
  .site-header .language-menu {
    position: static;
    display: flex;
    align-items: center;
    visibility: visible;
    pointer-events: auto;
    height: auto;
    min-height: 0;
    min-width: 0;
    max-width: none;
    padding: 3px;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    opacity: 1;
    transform: none;
    overflow: visible;
  }

  .site-header .language-menu a,
  .site-header .language-menu button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    min-width: 62px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease;
  }

  /* 平铺形态下不需要左侧竖条标记，用底色区分选中项即可 */
  .site-header .language-menu a::before,
  .site-header .language-menu button::before {
    display: none;
  }

  .site-header .language-menu a:hover,
  .site-header .language-menu button:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
  }

  .site-header .language-menu a.is-active,
  .site-header .language-menu button.is-active {
    color: var(--color-primary-dark, #1d4ed8);
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.22);
  }

  /* 宽屏再放大一档，与导航字号同步（外层已是 min-width: 1281px） */
  @media (min-width: 1560px) {
    .site-header .language-menu a,
    .site-header .language-menu button {
      min-width: 72px;
      min-height: 40px;
      padding: 0 18px;
      font-size: 16px;
    }
  }
}

/**
 * 移动端 / 平板（≤1120px）：恢复为「按钮 + 下拉」形态。
 *
 * 桌面端平铺的分段控件在这里改回：默认收起，点击 .language-current 展开，
 * 由 .language-switch.is-open 控制（见 staticLocale.js 的绑定）。
 * 抽屉内整行分段条的既有样式在 site-polish.css 中，仍按其优先级生效。
 */
@media (max-width: 1399px) {
  .site-header .language-switch .language-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
  }

  /* 未展开时不显示下拉 */
  .site-header .language-switch:not(.is-open) .language-menu {
    display: none;
  }

  .site-header .language-switch.is-open .language-menu {
    display: flex;
    flex-direction: column;
  }
}

/* ------------------------------------------------------------------ *
 * 4. 二维码尺寸
 * ------------------------------------------------------------------ */

/**
 * 页脚微信公众号二维码 + 图注。
 *
 * 演进：72px（原始，含 6px 白边，可扫码面仅约 60px）→ 104px → 140px → 现在的 196px。
 * 104px / 140px 两档实测仍被反馈「很小」：一是页脚中栏宽 305px 本就留有余量，
 * 二是二维码四周还有白边与圆角，实际扫码面远小于外框。196px 时（白边 8px）
 * 有效扫码面约 180px，桌面上一眼可见，也远高于主流相机约 80~100px 的识别下限。
 * 素材原始分辨率为 740×739，放大到 196px 依然清晰。
 *
 * 布局同步改为「二维码在上、图注在下」的居中堆叠（原为 140px 二维码 + 右侧文字）：
 * 横排时中栏 305px 只剩 147px 给文字，"WeChat Official Account" 被迫折成两行、
 * 右缘几乎贴到「联系我们」栏，重心偏左也不易读。竖排后两者共用中栏 305px 宽度，
 * 图注可整行显示，视觉重心回到中栏中心。
 */
.footer-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.footer-qr {
  width: 196px;
  height: 196px;
  padding: 0;
  border: 8px solid #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.46);
}

/* 顶栏 EMS 下拉里的「飞储APP下载 / 小程序」二维码同步放大。 */
.ems-qr-item img {
  width: 116px;
  height: 116px;
  flex: 0 0 116px;
  border: 5px solid #fff;
  border-radius: 8px;
}

.ems-menu {
  min-width: 272px;
}

/**
 * 桌面横排顶栏（≥1121px）的 EMS 下拉：两张二维码并排成大号扫码卡。
 *
 * 之前的横排「文字在左、二维码在右」把菜单宽度切成两半，二维码只能做到
 * 116px（素材四周自带约 10% 白边，实际扫码面只有 85px 左右），老板反馈
 * 「二维码太小」。这里改成登录按钮通栏 + 两张并排卡片的版式：
 * 二维码 150px（有效扫码面约 112px），文字在图下方居中，菜单 394px 宽，
 * 高度与原来的 318px 基本持平，不遮挡导航。
 *
 * 只作用于 ≥1121px：更窄的 901–1120px 顶栏会折成「品牌一行 + 操作区靠左」
 * （EMS 按钮在 x≈44），394px 的菜单会顶出屏幕左侧，那里继续沿用紧凑版式；
 * ≤900px 是抽屉里的小缩略图（点了弹大图），版式另有一套，不加媒体查询会把
 * 抽屉布局一起改掉。
 */
@media (min-width: 1121px) {
  .ems-menu {
    min-width: 394px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .ems-menu > a {
    grid-column: 1 / -1;
    min-height: 42px;
    padding: 8px 12px;
  }

  .ems-qr-item {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 8px;
    text-align: center;
    background: #f8fafc;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
  }

  .ems-qr-item span {
    line-height: 1.4;
    font-size: 13px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .ems-qr-item img {
    width: 150px;
    height: 150px;
    max-width: 100%;
    flex: 0 0 auto;
    border: 6px solid #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  }
}

/* 右侧悬浮面板的「扫码获取方案」二维码，保持最大一档。 */
.floating-panel-row.is-qr .floating-qr,
.floating-qr {
  width: 150px;
  height: 150px;
}

/* 1120px 以下页脚折叠为两栏，中栏变宽；更窄的整页单栏场景再把二维码回调一档，
   但仍明显大于原始 72px，图注同样保持竖排居中。 */
@media (max-width: 1399px) {
  .footer-action {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .footer-qr {
    width: 168px;
    height: 168px;
    border-width: 7px;
  }
}

/* 图注文字与二维码的视觉重量匹配，字号跟页脚正文对齐（17.5px），
   避免 <p> 与 <strong> 取值不一致导致实际字号来回跳。 */
.footer-action p,
.footer-action strong {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-align: center;
}

/* 页脚正文与联系方式：原继承 body 的 16px，在深色底上偏小，统一提到 17.5px
   并放宽行高，地址与电话更好读。 */
.footer-grid > section > p,
.footer-grid address,
.footer-grid p {
  font-size: 17.5px;
  line-height: 1.75;
}

.footer-grid address {
  font-style: normal;
}

.footer-grid h2,
.footer-grid h3 {
  font-size: 19px;
}

/* 版权行同样放大，避免整块页脚「头重脚轻」。 */
.site-footer .copyright {
  font-size: 15px;
}

/* ------------------------------------------------------------------ *
 * 5. 正文可读性（老板反馈「字体太小」）
 * ------------------------------------------------------------------ */

/**
 * 正文基准字号从 16px 提到 16.5px，并给出更大的行高。
 *
 * 刻意只加 0.5px：正文在 84 个页面上密集排布，卡片、表格、时间线都是
 * 按 16px 调好的，一次提太多会把已有布局撑变形。配合上面导航（最大 18px）
 * 与页脚（17.5px）的放大，整体观感已经明显变大，同时不牺牲版面稳定。
 */
body {
  font-size: 16.5px;
}

/* 区块小标题与列表项同步放大，避免正文变大后层级感反被压平。 */
.site-footer,
.nav-panel a,
.nav-panel strong {
  font-size: 1em;
}