/* ===== 顶部导航修复（nav-fix.css） =====
   目标：让页头与参考设计一致 —— 透明页头叠在全屏 hero 之上，
   logo 居左（红色），菜单整体靠右、各项间距均匀、与 logo 留明显间隔。

   根因说明：
   1) 主题原 .l-subheader.at_middle .l-subheader-h 的 display:flex 规则被剥离为空，
      导致 logo 与导航没有横向布局基准，菜单在窄容器内 float 排布错乱/溢出。
   2) 主题把 .l-subheader.at_middle 背景强制为透明(!important)，hero 大图（含英文/图形，
      如 SOCIAL NETWORK 幻灯片）会透出到导航后面，文字显乱、与背景图碰撞。
      解决：用“顶部深色渐变”覆盖页头区域——既保留“透明叠在 hero 上”的观感，
      又保证白色导航文字在任意幻灯片下都清晰、不与背景图形碰撞。

   注意：本文件为全新文件名(非版本号)，以强制浏览器重新拉取，避免缓存导致“看着还是旧的”。 */

/* 基础布局：所有宽度下都建立 flex 行（移动端靠下方媒体查询换行） */
.l-subheader.at_middle .l-subheader-h {
  display: flex !important;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* 页头：透明叠在 hero 上 + 顶部深色渐变，保证导航文字清晰、不与背景图碰撞 */
.l-subheader.at_middle {
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, 0.55) 0%,
              rgba(0, 0, 0, 0.30) 55%,
              rgba(0, 0, 0, 0.00) 100%) !important;
  box-shadow: none;
  min-height: 66px;
}

/* logo 居左，靠 margin-right:auto 把导航整体推到右侧（与参考设计一致：菜单靠右） */
.l-subheader.at_middle .w-logo {
  flex: 0 0 auto;
  margin-right: auto;
  float: none;
}

/* logo 图片限高并垂直居中，避免贴边/裁切 */
.l-subheader.at_middle .w-logo-img {
  height: 44px;
  width: auto;
  display: block;
}

/* 导航容器：不拉伸、不浮动，跟随 logo 之后靠右 */
.l-subheader.at_middle .w-nav {
  flex: 0 0 auto;
  min-width: 0;
  float: none;
}

/* 始终隐藏主题的移动端汉堡按钮，改用语义清晰的横排菜单 */
.l-subheader.at_middle .w-nav-control {
  display: none !important;
}

/* 一级菜单：横向排列、整体靠右、各项间距均匀（gap），不换行 */
.l-subheader.at_middle .w-nav-list.level_1 {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: flex-end;   /* 菜单整体靠右，与 logo 拉开明显间隔 */
  align-items: center;
  gap: 40px;                   /* 菜单项之间均匀间距 */
  width: 100%;
  padding-top: 0;
}

.l-subheader.at_middle .w-nav-item.level_1 {
  flex: 0 0 auto;
  float: none;
}

.l-subheader.at_middle .w-nav-anchor.level_1 {
  padding: 0;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  color: #ffffff;
}

/* 一级菜单 hover / 当前页 高亮（与参考设计一致：当前页用主题色，hover 提亮） */
.l-subheader.at_middle .w-nav-anchor.level_1:hover {
  color: #ff5a4d;
}

/* 二级下拉（核心产品 -> 4 个医药子系统）：桌面端 hover 显示，定位在一级项下 */
.l-subheader.at_middle .w-nav-item.level_1.has_children .w-nav-list.level_2 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(22, 24, 29, 0.96);
  min-width: 180px;
  padding: 8px 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 999;
}
.l-subheader.at_middle .w-nav-item.level_1.has_children:hover .w-nav-list.level_2 {
  display: block;
}
.l-subheader.at_middle .w-nav-list.level_2 .w-nav-anchor.level_2 {
  display: block;
  padding: 10px 20px;
  color: #e8e8e8;
  font-size: 14px;
  white-space: nowrap;
}
.l-subheader.at_middle .w-nav-list.level_2 .w-nav-anchor.level_2:hover {
  color: #ff5a4d;
  background: rgba(255, 255, 255, 0.06);
}

/* 平板：容器略窄，间距收紧，仍保持单行靠右 */
@media (max-width: 1199px) {
  .l-subheader.at_middle .l-subheader-h {
    max-width: 100%;
    padding: 0 16px;
  }
  .l-subheader.at_middle .w-nav-list.level_1 {
    gap: 26px;
  }
  .l-subheader.at_middle .w-nav-anchor.level_1 {
    font-size: 14px;
  }
}

/* 窄屏：菜单换行居中，避免挤压溢出（强制横向换行，覆盖主题移动端折叠成整行/竖排的行为） */
@media (max-width: 991px) {
  .l-subheader.at_middle .l-subheader-h {
    flex-wrap: wrap;
    padding: 8px 16px;
  }
  .l-subheader.at_middle .w-logo {
    margin-right: 0;
    flex-basis: 100%;
  }
  .l-subheader.at_middle .w-nav {
    flex-basis: 100%;
    width: 100%;
  }
  .l-subheader.at_middle .w-nav-list.level_1 {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 6px 18px;
  }
  .l-subheader.at_middle .w-nav-item.level_1 {
    flex: 0 0 auto !important;
    width: auto !important;
    float: none;
  }
  /* 窄屏下主题会切到 touch_enabled 把二级菜单展开成竖排面板，
     这里强制二级菜单保持隐藏，只保留顶层菜单横向换行排列 */
  .l-subheader.at_middle .w-nav.touch_enabled .w-nav-list.level_2,
  .l-subheader.at_middle .w-nav-list.level_2 {
    display: none !important;
    position: absolute !important;
  }
  .l-subheader.at_middle .w-nav.touch_enabled .w-nav-list.level_1 {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center;
  }
  .l-subheader.at_middle .w-nav-anchor.level_1 {
    font-size: 14px;
    padding: 6px 8px;
  }
}