/**
 * retech/header 块样式 —— 移植自原型 assets/css/retech.css §04 Header + §17 响应式。
 *
 * 层级:只在 retech-block / retech-responsive 内写规则。
 * 断点:原型 1240 / 1080 / 700。
 *
 * 核心机制:header 的明暗**不由滚动距离决定**,而由「header 下沿压在哪个区块上」决定。
 * 每个 section 块用 data-header="dark|light" 声明自身明暗;探针 + view.js 读取后
 * 把同名属性写到 .retech-x-header 上。因此这里所有配色都挂在
 * `.retech-x-header[data-header="light"]` 上,而不是挂在某个滚动类上。
 */

@layer retech-block {
  .retech-x-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color var(--retech-x-dur) var(--retech-x-ease-ui),
                box-shadow var(--retech-x-dur) var(--retech-x-ease-ui),
                border-color var(--retech-x-dur) var(--retech-x-ease-ui);
  }

  /* 深色态(默认):半透明深底 + 磨砂玻璃,保证压在 Hero 上时导航可读 */
  .retech-x-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17, 23, 28, .30);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: opacity var(--retech-x-dur) var(--retech-x-ease-ui);
    z-index: -1;
    opacity: 1;
  }

  /* 浅色态:纯白底 + 1px 边框 + 轻阴影 */
  .retech-x-header[data-header="light"] {
    background: var(--retech-x-white);
    border-bottom-color: var(--retech-x-line);
    box-shadow: var(--retech-x-sh-sm);
  }
  .retech-x-header[data-header="light"]::before {
    opacity: 0;
  }

  /* ── 明暗判定探针 ────────────────────────────────────────────────────────
     贴在 header 下沿的 1px 命中基准线。它是「哪一块内容正压在 header 下方」的
     判定位置,本身不可见、不可交互。位置集中在此定义 —— 改 header 高度时
     只需改 --retech-x-header-h,JS 无需改动。 */
  .retech-x-header-probe {
    position: fixed;
    top: calc(var(--retech-x-header-h) + 1px);
    left: 0;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
    z-index: 199;
  }

  .retech-x-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--retech-x-header-h);
  }

  /* ── 品牌 ─────────────────────────────────────────────────────────────── */
  .retech-x-header__brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    transition: opacity var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  .retech-x-header__brand:hover {
    opacity: .85;
  }
  /* 完整竖版 Logo —— 客户已明确不可拆分,整张图直接使用。
     素材比例 314:300 ≈ 1.047,56px 高 ≈ 59px 宽。
     ⚠️ 这个高度是按 --retech-x-header-h(72px)留上下余量定的,改 header 高度要同步改。 */
  .retech-x-header__logo {
    display: block;
    height: 56px;
    width: auto;
    flex: 0 0 auto;
  }
  /* 跟随明暗切换:深色态用白字版,浅色态用彩色版 */
  .retech-x-header__logo--color {
    display: none;
  }
  .retech-x-header[data-header="light"] .retech-x-header__logo--white {
    display: none;
  }
  .retech-x-header[data-header="light"] .retech-x-header__logo--color {
    display: block;
  }

  /* ── 主导航 ───────────────────────────────────────────────────────────── */
  .retech-x-primary-nav {
    margin-left: auto;
  }
  .retech-x-nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .retech-x-nav-item {
    position: relative;
  }

  .retech-x-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 0;
    background: none;
    border-radius: var(--retech-x-r-sm);
    color: rgba(255, 255, 255, .88);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                background-color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-nav-link:hover {
    color: #fff;
    background: var(--retech-x-w08);
  }
  .retech-x-header[data-header="light"] .retech-x-nav-link {
    color: var(--retech-x-ink-2);
  }
  .retech-x-header[data-header="light"] .retech-x-nav-link:hover {
    color: var(--retech-x-ink);
    background: var(--retech-x-b05);
  }
  .retech-x-nav-item.retech-x-current > .retech-x-nav-link {
    color: #fff;
  }
  .retech-x-header[data-header="light"] .retech-x-nav-item.retech-x-current > .retech-x-nav-link {
    color: var(--retech-x-ink);
  }

  .retech-x-nav-caret {
    width: 11px;
    height: 8px;
    flex: 0 0 11px;
    transition: transform var(--retech-x-dur) var(--retech-x-ease-ui);
  }

  /* ── 下拉面板:单一整块面板,不做复杂三级悬浮 ──────────────────────────── */
  .retech-x-nav-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: min(680px, calc(100vw - 48px));
    padding: 24px;
    border: 1px solid var(--retech-x-line-dark);
    border-radius: var(--retech-x-r-lg);
    opacity: 0;
    visibility: hidden;
    /* 深色态(默认):层次由阴影 + 1px 高光边 + 品牌微光叠加,而非单一平涂。
       实测依据:header 深色态时面板必然完全落在当前深色区块内 —— 各页深色区块
       底边最小值为 588px(Solutions Hero),面板底边约 434px。 */
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 46%),
      radial-gradient(120% 100% at 50% 0%, rgba(118, 192, 67, .07) 0%, transparent 60%),
      rgba(15, 21, 26, .94);
    box-shadow:
      0 28px 70px rgba(0, 0, 0, .55),
      0 2px 10px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
    transition: opacity var(--retech-x-dur) var(--retech-x-ease-ui),
                transform var(--retech-x-dur) var(--retech-x-ease-ui),
                visibility var(--retech-x-dur);
  }

  /* ── 面板与按钮之间的 10px 空隙 ──────────────────────────────────────────
     鼠标从按钮移向面板时会经过这段空隙,若空隙不可命中就会被判定为「离开」,
     面板随即收起(这正是之前「移向子菜单就自己关掉」的原因)。
     这里用面板的 ::before 铺一块透明桥接区,把空隙纳入面板自身的命中范围。 */
  .retech-x-nav-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px; /* 略大于 10px 间隙,留出容错 */
    height: 14px;
  }

  /* 面板内容配色 —— 浅色态保持白底 */
  .retech-x-header[data-header="light"] .retech-x-nav-panel {
    background: var(--retech-x-white);
    border-color: var(--retech-x-line);
    box-shadow: var(--retech-x-sh-lg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .retech-x-nav-panel__label {
    margin-bottom: 14px;
    color: var(--retech-x-flow);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    transition: color var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  .retech-x-header[data-header="light"] .retech-x-nav-panel__label {
    color: var(--retech-x-flow-dark);
  }

  .retech-x-nav-panel__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
  }
  .retech-x-nav-panel__list--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .retech-x-nav-panel__list li {
    flex: 1 1 46%;
    min-width: 0;
  }
  .retech-x-nav-panel__list a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--retech-x-r-sm);
    color: var(--retech-x-w90);
    font-size: 14px;
    line-height: 1.45;
    transition: background-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-nav-panel__list a:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
  }
  .retech-x-nav-panel__list a:focus-visible {
    outline: 2px solid var(--retech-x-flow);
    outline-offset: -2px;
  }
  .retech-x-header[data-header="light"] .retech-x-nav-panel__list a {
    color: var(--retech-x-ink-2);
  }
  .retech-x-header[data-header="light"] .retech-x-nav-panel__list a:hover {
    background: var(--retech-x-gray-light);
    color: var(--retech-x-ink);
  }

  .retech-x-nav-panel__cta {
    display: inline-block;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    width: 100%;
    color: var(--retech-x-flow);
    font-size: 14px;
    font-weight: 600;
    transition: color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-nav-panel__cta:hover {
    color: #fff;
  }
  .retech-x-header[data-header="light"] .retech-x-nav-panel__cta {
    border-top-color: var(--retech-x-line);
    color: var(--retech-x-flow-dark);
  }
  .retech-x-header[data-header="light"] .retech-x-nav-panel__cta:hover {
    color: var(--retech-x-flow-deep);
  }

  /* ── Header 右侧动作 ──────────────────────────────────────────────────── */
  .retech-x-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }
  .retech-x-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--retech-x-w20);
    border-radius: var(--retech-x-r-md);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-search-toggle:hover {
    background: var(--retech-x-w08);
    border-color: var(--retech-x-w40);
  }
  .retech-x-header[data-header="light"] .retech-x-search-toggle {
    color: var(--retech-x-ink-2);
    border-color: var(--retech-x-line);
  }
  .retech-x-header[data-header="light"] .retech-x-search-toggle:hover {
    background: var(--retech-x-gray-light);
  }

  /* ── 语言下拉(2026-09-23 新增;与 modern-machinery 页头同款控件)──────────
     为什么不是原生 <select>:要放地球图标 + 语言短码徽标 + 当前项勾选,
     `<select>` 这三样都做不了(options 里的内容是平台原生的)。
     ⚠️ 明暗两态都要写:页头随下方区块换肤(`data-header="dark|light"`),
     缺一边就会出现「深色页头上一块白板」。配色令牌与搜索按钮同一套。 */
  .retech-x-lang-switch {
    position: relative;
  }
  .retech-x-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--retech-x-w20);
    border-radius: var(--retech-x-r-md);
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-lang-btn:hover {
    background: var(--retech-x-w08);
    border-color: var(--retech-x-w40);
  }
  .retech-x-lang-globe { color: var(--retech-x-w60); }
  .retech-x-lang-caret { transition: transform var(--retech-x-dur-fast) var(--retech-x-ease-ui); }
  .retech-x-lang-switch.retech-x-open .retech-x-lang-caret { transform: rotate(180deg); }

  .retech-x-header[data-header="light"] .retech-x-lang-btn {
    color: var(--retech-x-ink-2);
    border-color: var(--retech-x-line);
  }
  .retech-x-header[data-header="light"] .retech-x-lang-btn:hover {
    background: var(--retech-x-gray-light);
  }
  .retech-x-header[data-header="light"] .retech-x-lang-globe { color: var(--retech-x-ink-3); }

  /* 面板:与「主导航下拉面板」同一套明暗语言(白底 + 阴影),否则深色页头
     点开会弹出一块突兀的深色卡片。 */
  .retech-x-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 210;
    min-width: 178px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--retech-x-white);
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-md);
    box-shadow: var(--retech-x-sh-md);
    /* 收起态:visibility 延迟到淡出结束;展开时把 delay 归零(下方规则)。 */
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                transform var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                visibility 0s linear var(--retech-x-dur-fast);
  }
  .retech-x-lang-switch.retech-x-open .retech-x-lang-menu {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .retech-x-lang-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--retech-x-r-sm);
    background: none;
    color: var(--retech-x-ink);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .retech-x-lang-menu button:hover {
    background: var(--retech-x-gray-light);
  }
  .retech-x-lang-short {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 20px;
    border-radius: var(--retech-x-r-sm);
    background: var(--retech-x-gray-light);
    color: var(--retech-x-ink-3);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
  }
  .retech-x-lang-menu button.retech-x-active {
    color: var(--retech-x-flow-dark);
  }
  .retech-x-lang-menu button.retech-x-active .retech-x-lang-short {
    background: var(--retech-x-flow-a20);
    color: var(--retech-x-flow-deep);
  }
  /* 当前语言打勾:纯装饰,读屏靠 aria-selected。 */
  .retech-x-lang-menu button.retech-x-active::after {
    content: "\2713";
    margin-left: auto;
    font-weight: 800;
  }

  /* ── 搜索栏 ───────────────────────────────────────────────────────────── */
  /* 搜索面板同样跟随 Header 明暗 —— 与下拉面板同一套语言,
     否则深色 Header 点开会弹出一块突兀的白板。 */
  .retech-x-search-bar {
    background: var(--retech-x-white);
    border-top: 1px solid var(--retech-x-line);
    box-shadow: var(--retech-x-sh-md);
  }
  .retech-x-search-bar[hidden] {
    display: none;
  }
  .retech-x-search-form {
    display: flex;
    gap: 12px;
    padding: 18px 0;
  }
  .retech-x-search-form input {
    flex: 1;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-md);
    background: var(--retech-x-white);
    font-family: inherit;
    font-size: 16px;
    color: var(--retech-x-ink);
    transition: border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                background-color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-search-form input::placeholder {
    color: var(--retech-x-ink-3);
  }
  .retech-x-search-form input:focus {
    outline: none;
    border-color: var(--retech-x-flow);
  }
  .retech-x-header[data-header="dark"] .retech-x-search-bar {
    background: rgba(15, 21, 26, .94);
    border-top-color: var(--retech-x-line-dark);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
  }
  .retech-x-header[data-header="dark"] .retech-x-search-form input {
    background: var(--retech-x-w08);
    border-color: var(--retech-x-line-dark);
    color: #fff;
  }
  .retech-x-header[data-header="dark"] .retech-x-search-form input::placeholder {
    color: var(--retech-x-w40);
  }
  .retech-x-header[data-header="dark"] .retech-x-search-form input:focus {
    border-color: var(--retech-x-flow);
  }

  /* ── 汉堡(移动端)────────────────────────────────────────────────────── */
  .retech-x-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0 10px;
    border: 1px solid var(--retech-x-w20);
    border-radius: var(--retech-x-r-md);
    background: transparent;
    cursor: pointer;
  }
  .retech-x-menu-toggle span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform var(--retech-x-dur) var(--retech-x-ease-ui),
                opacity var(--retech-x-dur) var(--retech-x-ease-ui),
                background-color var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  .retech-x-header[data-header="light"] .retech-x-menu-toggle {
    border-color: var(--retech-x-line);
  }
  .retech-x-header[data-header="light"] .retech-x-menu-toggle span {
    background: var(--retech-x-ink);
  }
  .retech-x-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .retech-x-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .retech-x-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 注:`.retech-x-sr-only`(搜索表单 label 用)与 `.retech-x-btn*` 的基础样式
     由全局 blocks/style-index.css 的 base 层单一属主提供 —— 它们被多个块共用。 */
}

@layer retech-responsive {
  /* ── 悬停展开(桌面,仅真 hover 设备)────────────────────────────────────
     :hover 与 :focus-within 双条件:
       · :hover        —— 指针在按钮或面板任意位置都保持展开(面板是 .nav-item
                          的后代,指针在面板上也属于 hover)
       · :focus-within —— 键盘 Tab 进入时同样展开,不依赖 JS
     与下面的 max-width:1080px 分支互斥(1081px 起 vs 1080px 止),不会打架。
     触摸设备即使宽度够也不启用 hover 展开,改由点击(移动端分支)驱动。 */
  @media (hover: hover) and (min-width: 1081px) {
    .retech-x-nav-item--panel:hover .retech-x-nav-panel,
    .retech-x-nav-item--panel:focus-within .retech-x-nav-panel {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    .retech-x-nav-item--panel:hover .retech-x-nav-caret,
    .retech-x-nav-item--panel:focus-within .retech-x-nav-caret {
      transform: rotate(180deg);
    }
  }

  /* ── Laptop:导航字距压缩 + Logo 收一档 ───────────────────────────────── */
  @media (max-width: 1240px) {
    .retech-x-nav-link {
      padding: 10px 9px;
    }
    .retech-x-primary-nav {
      margin-left: 12px;
    }
    /* 原型 retech.css:2203-2205 —— ≤1240px 时 `.logo-img { height: 48px }`
       (基座 56px 见 retech.css:398)。⚠️ 必须留在 1240 档:原型就写在
       `@media (max-width: 1240px)` 里;若挪到 1080,1081–1240px 区间的页头 Logo
       会一直停在 56px,顶破 --retech-x-header-h 的上下余量。 */
    .retech-x-header__logo {
      height: 48px;
    }
  }

  /* ── Tablet:移动导航接管 ─────────────────────────────────────────────── */
  @media (max-width: 1080px) {
    /* ⚠️ `--retech-x-header-h: 66px` 的宿主是 `:root`(见 blocks/style-index.css 的
       `retech-responsive` 层),**不在这里** —— 原型 `retech.css:1854` 就是这个写法。
       写在本组件作用域里会漏掉页头之外的全部消费者(hero 的
       `padding-top: calc(var(--header-h) + 56px)`、toc / article-body 的 sticky
       `top`、`section[id]` 的 `scroll-margin-top`),实测 hero 顶部多 6px。 */
    .retech-x-menu-toggle {
      display: flex;
    }
    .retech-x-header__cta {
      display: none;
    }

    /* 移动端折叠菜单 */
    .retech-x-primary-nav {
      position: fixed;
      inset: var(--retech-x-header-h) 0 0 0;
      margin: 0;
      padding: 20px 24px 40px;
      background: var(--retech-x-white);
      overflow-y: auto;
      transform: translateX(-100%);
      transition: transform var(--retech-x-dur) var(--retech-x-ease-ui);
      z-index: 190;
    }
    .retech-x-primary-nav.retech-x-open {
      transform: translateX(0);
    }
    .retech-x-nav-list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
    .retech-x-nav-item {
      border-bottom: 1px solid var(--retech-x-line);
    }
    .retech-x-nav-link {
      width: 100%;
      justify-content: space-between;
      padding: 17px 4px;
      color: var(--retech-x-ink);
      font-size: 16px;
      font-weight: 600;
      border-radius: 0;
    }
    .retech-x-nav-link:hover {
      background: transparent;
    }
    /* 面板在移动端改为内联展开 */
    .retech-x-nav-panel {
      position: static;
      width: auto;
      transform: none;
      padding: 0 0 16px;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      opacity: 1;
      visibility: visible;
      display: none;
      background: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .retech-x-nav-item.retech-x-open .retech-x-nav-panel {
      display: block;
      transform: none;
    }
    .retech-x-nav-item.retech-x-open .retech-x-nav-caret {
      transform: rotate(180deg);
    }
    .retech-x-nav-panel__list,
    .retech-x-nav-panel__list--two-col {
      display: grid;
      grid-template-columns: 1fr;
    }
    .retech-x-nav-panel__list a {
      padding: 11px 12px;
      font-size: 14px;
    }
    .retech-x-nav-panel__cta {
      margin-top: 10px;
      padding-top: 12px;
    }

    /* ⚠️ 移动端面板内联展开在「白底菜单」里,必须覆盖桌面深色态配色。
       桌面深色态用了 `.retech-x-header[data-header="dark"] .retech-x-nav-panel__list a`
       这样的高特异性选择器,不覆盖会出现白字压白底。 */
    .retech-x-header[data-header="dark"] .retech-x-nav-panel,
    .retech-x-header[data-header="light"] .retech-x-nav-panel {
      background: transparent;
      border: 0;
      box-shadow: none;
    }
    .retech-x-header[data-header="dark"] .retech-x-nav-panel__list a,
    .retech-x-header[data-header="light"] .retech-x-nav-panel__list a {
      color: var(--retech-x-ink-2);
    }
    .retech-x-header[data-header="dark"] .retech-x-nav-panel__list a:hover,
    .retech-x-header[data-header="light"] .retech-x-nav-panel__list a:hover {
      background: var(--retech-x-gray-light);
      color: var(--retech-x-ink);
    }
    .retech-x-header[data-header="dark"] .retech-x-nav-panel__label,
    .retech-x-header[data-header="light"] .retech-x-nav-panel__label {
      color: var(--retech-x-flow-dark);
    }
    .retech-x-header[data-header="dark"] .retech-x-nav-panel__cta,
    .retech-x-header[data-header="light"] .retech-x-nav-panel__cta {
      border-top-color: var(--retech-x-line);
      color: var(--retech-x-flow-dark);
    }
    .retech-x-header[data-header="dark"] .retech-x-nav-panel__cta:hover,
    .retech-x-header[data-header="light"] .retech-x-nav-panel__cta:hover {
      color: var(--retech-x-flow-deep);
    }
    .retech-x-nav-item.retech-x-current > .retech-x-nav-link {
      color: var(--retech-x-flow-dark);
    }
  }

  /* ── Mobile:Logo 再收一档 + 搜索栏改纵向 ──────────────────────────────── */
  @media (max-width: 700px) {
    /* 原型 retech.css:2206-2208 —— ≤700px 时 `.logo-img { height: 42px }`。
       ⚠️ 原实现写 46px(无出处),比原型大 4px,手机页头 Logo 会顶破
       --retech-x-header-h:66px 的上下余量。已按原型改回 42px。 */
    .retech-x-header__logo {
      height: 42px;
    }
    /* 原型 solutions.css:2108-2109 —— ≤700px 时 `.site-search { flex-direction: column }`
       (基座 `display:flex; gap:12px` 见 solutions.css:2068)。本块的
       `.retech-x-search-form` 对应原型 `.site-search`,所以这里要换的是**主轴方向**,
       不是 `flex-wrap: wrap`。⚠️ 原型从未在搜索栏上用过 wrap:写成 wrap 时输入框
       与按钮的换行行为、按钮宽度都与原型不一致。 */
    .retech-x-search-form {
      flex-direction: column;
    }
    /* 注:原先这里的 `.retech-x-header__inner { gap: 12px }` 已删 ——
       原型 `.header-inner`(retech.css:354)只声明 `gap: 24px`,任何断点都没有
       覆盖;那条 12px 无出处,会让手机页头各元素贴得过紧。 */
  }

  /* ── 语言下拉的窄屏收敛 ─────────────────────────────────────────────────
     ≤1080:CTA 已隐藏(见上),语言下拉保留 —— 多语言站点的语言入口在手机上
     必须可达,否则访客没法切回看得懂的语言。只压缩内边距。
     ≤700:一行里同时挤着 Logo + 语言下拉 + 汉堡按钮,收起语言名与箭头只留地球;
     按钮落到 40×40,与搜索/汉堡按钮同尺寸,视觉上仍是同一组控件。
     当前语言不靠按钮文字提示,而是靠打开面板后的勾选态(aria-selected + ::after)。 */
  @media (max-width: 1080px) {
    .retech-x-lang-btn {
      min-height: 36px;
      padding: 0 9px;
    }
  }
  @media (max-width: 700px) {
    .retech-x-lang-label,
    .retech-x-lang-caret {
      display: none;
    }
    .retech-x-lang-btn {
      width: 40px;
      justify-content: center;
      gap: 0;
      padding: 0;
    }
  }
}