/* ==========================================================================
   Header 导航栏
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center; /* Tab 组因换行变高时，与 Logo 组在同一行内垂直居中对齐 */
  flex-wrap: nowrap; /* Header 本身永远不整体换行——Logo 组永远和 Tab 组同一行，绝不会掉到下一行 */
  justify-content: flex-start;
  column-gap: 0; /* 不再由 CSS 强制最小间距——30px 只是 nav.js 里"是否触发换行"的判定阈值，
                    进入换行态之后间距允许继续压到 30px 以下、直至 0，所以这里必须是 0，
                    实际间距完全由 nav.js 计算 wrapper 宽度 + Logo 组 margin-left:auto 决定 */
  padding: 16px var(--header-padding-x); /* 上下16，左右16，四边一致，任何自适应状态下都不变 */
  background: #FFFFFF; /* 导航栏容器底色，与页面背景 F5F5F5 区分开，避免和 Tab 默认态灰色融合 */
  /* 不再写死最小宽度：Header 现在随视口宽度自适应，宽度上限仍是设计稿的 1425 */
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.06);
}

.nav-tabs-wrapper {
  flex-shrink: 0;
  overflow: visible;
}

.nav-tabs {
  display: flex;
  align-items: center;
  gap: 10px; /* 初始值；nav.js 会按当前所处阶段重新写死成真实像素值 */
  flex-wrap: wrap; /* 单行放得下时天然单行；放不下时由 nav.js 收窄 width 触发自然换行——
                       不强制固定的每行数量，几个 Tab 换到第二行完全由当前宽度和当前
                       缩放比例自然决定 */
  width: max-content; /* 单行态按自身内容真实宽度；换行态由 nav.js 改写为具体像素值 */
}

.nav-tab {
  font-family: var(--font-nav);
  font-size: 16px; /* 设计稿基准值——nav.js 每次都会先重置回这个基准值再重新测量，
                       用来算出"固定显示比例"，所以这里必须保留真实的基准，不能省略 */
  font-weight: 500; /* Medium：默认态 */
  color: rgba(0, 0, 0, 0.5); /* 默认态文字透明度50% */
  background: var(--color-tab-default-bg);
  border-radius: 5px;
  padding: 11px 12px; /* 设计稿基准值，理由同上 */
  box-shadow: 0px 0px 6px 0px rgba(128, 128, 128, 0.2); /* 808080 20% */
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
  /* nav.js 会基于以上基准值算出"固定显示比例"（对应设计稿 931px 宽度上限），
     换算成真实像素值后用内联样式覆盖——这套比例任何视口宽度下都不变，
     确保组内 8 个 Tab 的间距/尺寸"始终不变"，只有整组换不换行会变化 */
}

.nav-tab:hover,
.nav-tab:focus-visible {
  background: var(--color-tab-active-bg);
  color: rgba(0, 0, 0, 1); /* hover 时文字恢复100%不透明 */
  font-weight: 600; /* SemiBold */
}

.nav-tab.is-active {
  background: var(--color-tab-active-bg);
  color: rgba(0, 0, 0, 1); /* 选中/响应态文字恢复100%不透明 */
  font-weight: 600; /* SemiBold */
}

.header-logos {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* 始终保持一行四个，任何宽度下都不换行——放不下时先整体等比缩小，
                         缩到与 Tab 组单行高度一致后，改由 nav.js 整体隐藏（display:none） */
  gap: var(--logo-gap);
  flex-shrink: 0;
  margin-left: auto; /* 始终靠右贴边：把 Tab 组与 Logo 组之间的多余空间让出来，形成间距效果 */
}

.header-logos img {
  height: 40px; /* 初始值；实际展示尺寸由 nav.js 按需改写为真实缩放后的像素值（非 transform） */
  width: auto;
  object-fit: contain;
}

.header-logos .logo-eksig   { height: 44px; }
.header-logos .logo-drs     { height: 32px; }
.header-logos .logo-di      { height: 34px; }
.header-logos .logo-sfc     { height: 46px; }

/* ==========================================================================
   Hero 区域
   ========================================================================== */

/* 2026-09 用户明确要求：Hero区内容替换为一张完整图片（5700×2588，Figma
   4x导出，宽高比与原1425×647一致），响应式规则改为"图片宽度始终等于
   窗口宽度，高度按图片自身比例等比缩放"——不再有固定1425px、不再裁切、
   不再有<=500px单独的transform缩放档。窗口<500px时整个网页(body)本身
   冻结在min-width:500px，Hero跟随body宽度，同样是等比。 */
.hero-scale-shim {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-section {
  position: relative;
  width: 100%;
}

/* pointer-events:none 让点击穿透，图片本身不接收任何鼠标事件——比
   oncontextmenu更彻底的防右键/防拖拽手段，img标签上保留的
   draggable/oncontextmenu属性是双重保险 */
.hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none; /* 覆盖全局 img{max-width:100%} */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Header 不做响应式适配的说法已过时——nav.js 里的四段式布局逻辑早已让
   Header 自身能连续缩放/换行；真正"固定1425px不压缩"的只有 Hero 区域，
   >500px时超出视口的部分直接被 .hero-scale-shim 的 overflow:hidden 裁掉，
   不提供横向滚动；<=500px时改由 body 级别的 overflow 处理整页横向滑动。 */