/* ============================================
   Header 主容器
   ============================================ */

/**
 * Header 主容器
 * 固定定位在页面顶部，白色背景
 */
.header {
  position: relative;
  width: 100%;
  background-color: var(--header-color-bg);
  border-bottom: 1px solid var(--header-color-border);
}

/**
 * Header 内容容器
 * 使用 flex 布局，限制最大宽度并居中
 */
.header__container {
  display: flex;
  align-items: stretch;
  /* max-width: var(--header-container-max-width); */
  margin: 0 auto;
  padding-left: var(--header-spacing);
  height: var(--header-height);
}

/* ============================================
   Logo 区域
   ============================================ */

/**
 * Logo 区域容器
 * 固定宽度，flex 布局居中对齐
 */
.header__logo-section {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: var(--header-spacing);
}

/**
 * Logo 链接容器
 * 包含图标和文字，使用 flex 水平排列
 */
.header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

/**
 * Logo 图标
 * 六边形 SVG 图标
 */
.header__logo-icon {
  width: 74px;
  height: 61px;
  flex-shrink: 0;
}

/**
 * Logo 文字容器
 * 垂直排列公司名称和英文名称
 */
.header__logo-text {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  /* gap: 2px; */
  overflow: hidden;
}

/**
 * Logo 中文名称
 * 大号字体，深色
 */
.header__logo-name {
  font-size: var(--header-font-size-xl);
  font-weight: 600;
  color: var(--datai-color);
  /* letter-spacing: 1px; */
  line-height: 0.9;
  padding-top: 10px;
}

/**
 * Logo 英文副标题
 * 小号字体，灰色
 */
.header__logo-subtitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--datai-color);
  /* letter-spacing: 1.2px; */
  text-transform: uppercase;
  position: relative;
  /* left: 2px; */
}

/* ============================================
   分隔线
   ============================================ */

/**
 * Logo 与功能区之间的垂直分隔线
 */
.header__divider {
  width: 1px;
  background-color: var(--header-color-border);
  /* margin: 20px 0; */
  flex-shrink: 0;
}

/* ============================================
   功能区（右侧）
   ============================================ */

/**
 * 功能区容器
 * 占据剩余空间，flex 纵向排列上下两层
 */
.header__functional-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* padding-left: var(--header-spacing); */
}

/* ============================================
   上层功能区
   ============================================ */

/**
 * 上层功能区容器
 * 包含工具栏，右对齐
 */
.header__top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--header-top-height);
  border-bottom: 1px solid var(--header-color-border);
}

/**
 * 工具栏容器
 * 包含搜索、网格、语言选择器
 */
.header__toolbar {
  display: flex;
  align-items: center;
  gap: 44px;
}

/**
 * 图标按钮基础样式
 * 搜索按钮和网格按钮共用
 */
.header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: var(--header-color-text-secondary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.header__icon-btn:hover {
  background-color: var(--header-color-hover);
  color: var(--header-color-text);
}

/**
 * 搜索按钮
 */
.header__search-btn {
  /* 继承 icon-btn 基础样式 */
}

/**
 * 网格菜单按钮
 */
.header__grid-btn {
  /* 继承 icon-btn 基础样式 */
}

/* ============================================
   语言选择器
   ============================================ */

/**
 * 语言选择器容器
 * 相对定位，用于下拉菜单绝对定位
 */
.header__language {
  position: relative;
}

/**
 * 语言选择器按钮
 * 蓝色背景，白色文字
 */
.header__language-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 30px;
  background-color: var(--header-color-accent);
  color: var(--header-color-white);
  /* border-radius: 4px; */
  font-size: var(--header-font-size-base);
  font-weight: 500;
  transition: background-color 0.2s ease;
  height: var(--header-top-height);
}

.header__language-btn:hover {
  background-color: #1d4ed8;
}

/**
 * 语言选择器箭头图标
 * 下拉状态时会旋转
 */
.header__language-arrow {
  transition: transform 0.2s ease;
}

.header__language-btn[aria-expanded="true"] .header__language-arrow {
  transform: rotate(180deg);
}

/**
 * 语言下拉菜单
 * 默认隐藏，展开时显示
 */
.header__language-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 120px;
  background-color: var(--header-color-white);
  border: 1px solid var(--header-color-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 1000;
}

.header__language-btn[aria-expanded="true"]+.header__language-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/**
 * 语言选项
 */
.header__language-option {
  display: block;
  padding: 10px 16px;
  font-size: var(--header-font-size-base);
  color: var(--header-color-text);
  transition: background-color 0.2s ease;
}

.header__language-option:hover {
  background-color: var(--header-color-hover);
}

/**
 * 当前选中的语言选项
 */
.header__language-option--active {
  color: var(--header-color-accent);
  font-weight: 500;
}

/* ============================================
   下层导航区
   ============================================ */

/**
 * 下层导航区容器
 * 包含副标题、主导航和汉堡菜单按钮
 */
.header__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-bottom-height);
  flex: 1;
  gap: 24px;
  padding-left: 20px;
}




/**
 * 副标题/标语（下层左侧）
 * 蓝色文字，描述公司业务
 */
.header__bottom-bar .header__tagline {
  font-size: var(--header-font-size-lg);
  color: #313363;
  font-weight: bold;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  font-size: 16px;
}

/**
 * 主导航容器
 */
.header__nav {
  height: 100%;
  margin-right: 20px;
}

/**
 * 导航列表
 * 水平排列的导航项
 */
.header__nav-list {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 20px;
}




/**
 * 导航项
 * 相对定位，用于下拉菜单定位
 */
.header__nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/**
 * 带有下拉菜单的导航项
 */
.header__nav-item--has-dropdown:hover .header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/**
 * 导航链接
 */
.header__nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: var(--header-font-size-lg);
  /* color: var(--header-color-text); */
  color: #000;
  /* font-weight: 500; */
  transition: color 0.2s ease;
  white-space: nowrap;
}

.header__nav-link:hover {
  /* color: var(--header-color-accent); */
  color: var(--datai-color);
}


@media screen and (max-width: 1290px) {
  .header__nav-list {
    gap: 0px;
  }

  .header__nav-link {
    padding: 8px 8px;
  }
}


/**
 * 当前激活的导航链接
 */
.header__nav-link--active {
  color: var(--header-color-accent-2);
  font-weight: bold;
}

/**
 * 导航链接下拉箭头
 */
.header__nav-arrow {
  transition: transform 0.2s ease;
}

.header__nav-item--has-dropdown:hover .header__nav-arrow {
  transform: rotate(180deg);
}

/**
 * 下拉菜单
 */
.header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 165px;
  background-color: var(--header-color-white);
  border: 1px solid var(--header-color-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 1000;
}

/**
 * 下拉菜单链接
 */
.header__dropdown-link {
  display: block;
  padding: 12px 16px;
  font-size: var(--header-font-size-base);
  /* color: var(--header-color-text); */
  color: #000;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.header__dropdown-link:hover {
  background-color: var(--header-color-hover);
  color: var(--datai-color);
}

/* ============================================
   汉堡菜单按钮
   ============================================ */

/**
 * 汉堡菜单按钮
 * 移动端显示，桌面端隐藏
 */
.header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 6px;
}

/**
 * 汉堡菜单线条
 */
.header__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--header-color-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/**
 * 汉堡菜单展开状态
 */
.header__hamburger[aria-expanded="true"] .header__hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.header__hamburger[aria-expanded="true"] .header__hamburger-line:nth-child(2) {
  opacity: 0;
}

.header__hamburger[aria-expanded="true"] .header__hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================
   移动端菜单
   ============================================ */

/**
 * 移动端头部语言切换
 * 默认隐藏，只在移动端显示
 */
.header__mobile-header-language {
  display: none;
}

/**
 * 移动端菜单容器
 * 默认隐藏，汉堡菜单点击时展开
 */
.header__mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--header-color-white);
  border-bottom: 1px solid var(--header-color-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.header__mobile-menu--open {
  max-height: 400px;
}

/**
 * 移动端导航列表
 */
.header__mobile-nav-list {
  padding: 16px;
}

/**
 * 移动端导航项
 */
.header__mobile-nav-item {
  border-bottom: 1px solid var(--header-color-border);
}

.header__mobile-nav-item:last-child {
  border-bottom: none;
}

/**
 * 移动端导航链接
 */
.header__mobile-nav-link {
  display: block;
  padding: 16px 0;
  font-size: var(--header-font-size-lg);
  color: var(--header-color-text);
  font-weight: 500;
  transition: color 0.2s ease;
}

.header__mobile-nav-link:hover {
  color: var(--header-color-accent);
}

/* ============================================
   响应式适配
   ============================================ */

/**
 * 平板端适配 (768px - 1023px)
 */
@media screen and (max-width: 1023px) {
  :root {
    /* --header-height: 135px;
    --header-top-height: 55px;
    --header-bottom-height: 60px;
    --header-spacing: 16px; */
  }

  /* .header__logo-icon {
    width: 40px;
    height: 40px;
  } */

  /* .header__logo-name {
    font-size: 18px;
  } */

  .header__nav-link {
    padding: 8px 12px;
    font-size: var(--header-font-size-lg);
  }

  .header__tagline {
    font-size: 13px;
  }

  .header__toolbar {
    gap: 20px;
  }

  .header__bottom-bar {
    padding-left: 0px;
  }

  .header__bottom-bar .header__tagline {
    display: none;
  }


}

/**
 * 移动端适配 (< 768px)
 */
@media screen and (max-width: 767px) {
  :root {
    --header-height: 60px;
  }

  .header__container {
    align-items: center;
    height: var(--header-height);
    padding: 0 16px;
  }

  /* 隐藏桌面端完整功能区 */
  .header__functional-area {
    display: none;
  }

  /* 隐藏分隔线 */
  .header__divider {
    display: none;
  }

  /* Logo 区域左对齐 */
  .header__logo-section {
    flex: 1;
    justify-content: flex-start;
    padding-right: 0;
  }

  .header__logo-icon {
    width: 40px;
    height: 40px;
  }

  .header__logo-name {
    font-size: 28px;
  }

  .header__logo-subtitle {
    font-size: 9px;
  }

  .header__logo {
    gap: 4px;
  }

  .header__logo-text {
    align-items: flex-start;
  }

  /* 显示移动端头部语言切换 */
  .header__mobile-header-language {
    display: flex;
    align-items: center;
    /* gap: 8px; */
    margin-left: auto;
    /* margin-right: 12px; */
  }

  .header__mobile-header-language-link {
    font-size: 13px;
    color: var(--header-color-accent);
    transition: color 0.2s ease;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
  }

  .header__mobile-header-language-link:hover {
    color: var(--header-color-accent);
  }

  .header__mobile-header-language-link--active {
    color: var(--header-color-accent);
    font-weight: 500;
    /* background-color: rgba(37, 99, 235, 0.08); */
  }

  .header__mobile-header-language-divider {
    color: var(--header-color-border);
    font-size: 13px;
  }

  /* 显示汉堡菜单按钮 */
  .header__hamburger {
    display: flex;
    width: 40px;
    height: 40px;
  }

  /* 移动端菜单样式优化 */
  .header__mobile-menu {
    display: block;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: var(--header-color-white);
    border-bottom: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-height: 0;
    overflow-y: auto;
    transition: max-height 0.35s ease;
    z-index: 999;
  }

  .header__mobile-menu--open {
    max-height: calc(100vh - var(--header-height));
  }

  /* 移动端导航列表 */
  .header__mobile-nav-list {
    padding: 8px 0;
  }

  /* 移动端导航项 */
  .header__mobile-nav-item {
    border-bottom: 1px solid var(--header-color-border);
  }

  .header__mobile-nav-item:last-child {
    border-bottom: none;
  }

  /* 移动端导航链接 */
  .header__mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-size: 16px;
    color: var(--header-color-text);
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .header__mobile-nav-link:hover,
  .header__mobile-nav-link:active {
    background-color: var(--header-color-hover);
    color: var(--header-color-accent);
  }

  /* 移动端激活状态 */
  .header__mobile-nav-link--active {
    color: var(--header-color-accent);
    background-color: rgba(37, 99, 235, 0.05);
  }

  /* 移动端语言切换 */
  .header__mobile-language {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    border-top: 1px solid var(--header-color-border);
    margin-top: 8px;
  }

  .header__mobile-language-link {
    font-size: 14px;
    color: var(--header-color-text-secondary);
    transition: color 0.2s ease;
    padding: 8px 16px;
    border-radius: 4px;
  }

  .header__mobile-language-link:hover {
    color: var(--header-color-accent);
  }

  .header__mobile-language-link--active {
    color: var(--header-color-accent);
    font-weight: 500;
    background-color: rgba(37, 99, 235, 0.08);
  }

  .header__mobile-language-divider {
    color: var(--header-color-border);
    font-size: 14px;
  }
}

/**
 * 小屏幕移动端适配 (< 480px)
 */
@media screen and (max-width: 479px) {
  .header__logo-icon {
    width: 43px;
    height: 36px;
  }

  .header__logo-name {
    font-size: 20px;
    padding-top: 0px;
  }

  .header__logo-subtitle {
    font-size: 10px;
    letter-spacing: 1px;
  }
}

/* ============================================
   吸顶效果 - 向下滚动时固定
   ============================================ */

/**
 * 吸顶状态 - 向下滚动时 header 固定在顶部
 */
.header--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  animation: headerSlideDown 0.3s ease;
}

/**
 * 吸顶动画 - 从上方滑入
 */
@keyframes headerSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/**
 * 吸顶时的阴影效果
 */
.header--sticky {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/**
 * 页面内容偏移 - 避免 header 吸顶时内容跳动
 * 需要在 body 或主内容容器上添加此类
 */
.body--header-sticky {
  padding-top: var(--header-height);
}

/* ============================================
   企业二维码弹窗
   ============================================ */

/**
 * 二维码弹窗容器
 * 固定定位覆盖全屏，默认隐藏
 */
.header__qr-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/**
 * 二维码弹窗显示状态
 */
.header__qr-modal--show {
  opacity: 1;
  visibility: visible;
}

/**
 * 二维码弹窗遮罩层
 * 半透明黑色背景
 */
.header__qr-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

/**
 * 二维码弹窗内容区域
 * 白色背景，圆角，阴影
 */
.header__qr-content {
  position: relative;
  background-color: var(--header-color-white);
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease;
  max-width: 90%;
  width: 320px;
}

/**
 * 弹窗显示时内容缩放动画
 */
.header__qr-modal--show .header__qr-content {
  transform: scale(1);
}

/**
 * 二维码关闭按钮
 * 右上角定位
 */
.header__qr-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--header-color-text-secondary);
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.header__qr-close:hover {
  background-color: var(--header-color-hover);
  color: var(--header-color-text);
}

/**
 * 二维码内容体
 * 居中显示
 */
.header__qr-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/**
 * 二维码图片
 */
.header__qr-image {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius: 8px;
}

/**
 * 二维码提示文字
 */
.header__qr-text {
  font-size: var(--header-font-size-base);
  color: var(--header-color-text-secondary);
  text-align: center;
  margin: 0;
}

/**
 * 二维码弹窗移动端适配
 */
@media screen and (max-width: 767px) {
  .header__qr-content {
    padding: 32px 24px;
    width: 280px;
  }

  .header__qr-image {
    width: 160px;
    height: 160px;
  }

  .header__qr-text {
    font-size: var(--header-font-size-sm);
  }
}