/* ============================================================
 * 英文站专属样式 —— site-en.css
 *
 * 🔴 铁律（2026-11-10 确立）
 *   英文站与中文站是**两套独立网站**，共用同一份代码、同一套老站 CSS。
 *   任何只针对英文站的样式调整，**只允许写在本文件**。
 *
 *   隔离手段：所有规则以 `html[lang="en"]` 开头。
 *     · 英文站  <html lang="en">      → 规则生效
 *     · 中文站  <html lang="zh-CN">   → 选择器不匹配，**零影响**
 *
 *   ⚠️ 为什么用 html[lang] 而不是 body class：
 *      lang 属性是 Nuxt 已有的（layouts/default.vue 的 useHead htmlAttrs），
 *      **无需改任何 Vue 代码、无需重新构建**。
 *      新增 body class 需要动两站共用的 default.vue + 全量构建，
 *      2026-11-10 已因此出过一次线上中断事故，不走那条路。
 *
 * ❌ 禁止把英文站规则写进 legacy.css / style.css / responsive.css
 *   —— 那些文件两站共用，改一处等于改两站。
 *
 * 📌 本文件通过 Caddy 直出（/resources/* → file_server），
 *    改完**不需要重启任何进程**，仅需：
 *      ① 上传本文件
 *      ② 更新 renderer.mjs 里的 ?v= 版本号（破浏览器缓存）
 *
 * ------------------------------------------------------------
 * 变更记录
 *   2026-11-10  创建。从 legacy.css 迁出误写的「页头高度自适应」规则，
 *               原规则使用 .site-en / 全局选择器，会污染中文站。
 * ============================================================ */

/* ============================================================
 * 一、首页页头高度自适应
 *
 * 问题（英文站，1200px 以下视口）：
 *   导航条「Human Resources / News Center」下半截压在 banner 上。
 *
 * 根因（CDP 实测）：
 *   老站三段硬编码高度拼的 ——
 *     .head_cloth / .index_head  height: 113px  （预算 = head_top 40 + hn_li 73）
 *     .index_banner              position:absolute; top:0
 *     .index                     margin-top: 577px
 *   113 + 577 = 690 = banner底 650 + 40。这个等式只在
 *   「logo 与导航同一行」时成立：
 *     中文  .right_nav 848 + logo 297 = 1145 < 1200 → 同一行，页头 114px ✅
 *     英文  .right_nav 928 + logo 297 = 1225 > 1200 → 导航换行，页头 160px ❌
 *   英文菜单更长（Human Resources / News Center），两个 float 放不下。
 *   页头背景只有 113px → 113~160 这 47px 没白底，透出下方 banner。
 *
 * 做法：不动魔数，让三段回到正常文档流自行堆叠。
 * ============================================================ */

html[lang="en"] .head_cloth,
html[lang="en"] .index_head {
  height: auto;
  min-height: 113px;
}

/* 导航区自带白底：即便层级顺序变化，也不会透出下层图片 */
html[lang="en"] .index_head .head_bottom .right_nav {
  background: #ffffff;
}

/* banner 由 absolute 改回文档流，紧接页头下方 */
html[lang="en"] .index_banner {
  position: relative;
  top: auto;
  left: auto;
}

/* 取消给 absolute banner 预留的魔数留白 */
html[lang="en"] .index {
  margin-top: 0;
}

/* 平板及以下老站 responsive.css 接管为流式，释放 min-height 下限 */
@media only screen and (max-width: 1024px) {
  html[lang="en"] .head_cloth,
  html[lang="en"] .index_head {
    min-height: 0;
  }
}

/* ============================================================
 * 下拉菜单定位修复（v3 —— 以菜单项为中心展开 + 边界保护）
 *
 * 问题：hover 后下拉面板整体跑到屏幕左侧外面
 *       （英文站 About Us left=-178 / 中文站 left=-109），
 *       左侧蓝底栏 7 个二级链接完全看不见。
 *
 * 根因：老站用 hn_li1~7 类的百分比魔法数字校准位置，
 *       新站 <li> 上没有这些类 → 全落到 right:0
 *       → 565px 面板右对齐 115px 菜单项 → 左溢出约 450px。
 *
 * v3 做法：
 *   ⚠️ 关键：left 的百分比是相对**父元素（.hn_li，宽约115px）**，
 *      不是视口。所以不能用 50% 或 100vw 混算。
 *      改用 calc 把父元素宽度的一半换算成像素偏移：
 *
 *        left: calc(50% - 283px)   → 面板左边缘对齐到「菜单项中心 - 面板半宽」
 *        translateX(0)             → 不需要再偏移
 *
 *      即：面板中心 = 菜单项中心。面板宽 565px，半宽 282.5px。
 *
 *   边界保护用 :nth-child 精确处理会撞边的 3 项（实测第5/6/7项）。
 *   不追求绝对完美 —— 面板只要完整可见、链接可点即可。
 *
 *   ⚠️ 为什么不给 <li> 补 hn_li1~7 类：
 *      那要改 SiteHeader.vue（两站共用组件）+ 全量构建，
 *      2026-11-10 已因全量构建导致全站中断一次，不走老路。
 * ============================================================ */

/* ① 让面板以自身菜单项为中心展开 */
html[lang="en"] .head .right_nav .head_nav .hn_li .xiala {
  left: calc(50% - 283px);
  right: auto;
  transform: none;
  z-index: 20;
}

/* ② 靠右的菜单项：改为右对齐到菜单项右边缘，避免冲出视口 */
html[lang="en"] .head .right_nav .head_nav .hn_li:nth-child(5) .xiala,
html[lang="en"] .head .right_nav .head_nav .hn_li:nth-child(6) .xiala,
html[lang="en"] .head .right_nav .head_nav .hn_li:nth-child(7) .xiala {
  left: auto;
  right: 0;
}

/* ③ 最左两项：左对齐，避免冲出左侧
 *    第 2 项 Culture 居中展开时左边缘会越过导航区（实测 1200px 下 left=153 < 272），
 *    改为从菜单项左边缘向右展开。 */
html[lang="en"] .head .right_nav .head_nav .hn_li:first-child .xiala,
html[lang="en"] .head .right_nav .head_nav .hn_li:nth-child(2) .xiala {
  left: 0;
  right: auto;
}