/* ============================================
   页头样式表 header.css
   功能：顶栏 Logo/标语/快捷链接 + 桌面导航 + 搜索区
   写法：手机优先——每个模块先写移动端基础样式，
        紧跟其后的 min-width 媒体查询写桌面端增强（合写式，不开单独目录）
   断点全站统一：768 / 992 / 1200 / 1400
   变焦约定：桌面可见模块（搜索热词区）的定高框/字号/内距一律 rem（px ÷ 16）——
            <2560px 时根字号恒 16px、与原 px 完全等值；≥2560px 巨幕变焦段
            （见 base.css）随根字号整体放大。移动端专属模块（顶栏偏移、
            汉堡、移动搜索条）永远不会进入变焦段，保留 px 即可
   最后更新：2026-10-31（导航层高定死 60px=3.75rem，红线改距底定位）
   ============================================ */


/* ---------- 1. 移动端页面偏移 ---------- */
/* 手机端顶栏是 fixed 固定定位，给 body 顶部留出空间避免内容被遮挡 */
body {
  padding-top: 3.75rem;        /* 等于移动端固定顶栏高度 */
}

/* ≥768px：顶栏回归文档流，不再需要偏移 */
@media (min-width: 768px) {
  body { padding-top: 0; }
}

/* ---------- 2. 顶栏（移动端：固定顶部） ---------- */
.main-header {
  position: fixed;                       /* 移动端固定在屏幕顶部 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 610;
  background-color: var(--color-bg-light);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  padding-block: 0.625rem;
}

/* Logo + 标语 + 右侧链接 横向排列容器 */
.header-container {
  display: flex;
  align-items: center;                   /* 垂直居中 */
  justify-content: space-between;        /* Logo 靠左，链接靠右 */
  width: 100%;
}

/* ---------- 3. Logo 与标语 ---------- */
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;                        /* 防止 Logo 区被压缩 */
}

.header-logo img {
  width: auto;
  height: 2.5rem;                          /* 移动端小 Logo */
  display: block;                        /* 消除图片底部间隙 */
  object-fit: contain;                   /* 按比例缩放不变形 */
}

/* 标语：移动端隐藏，≥992px 显示（见下方媒体查询） */
.header-slogan {
  display: none;
  margin-left: 1.25rem;
  flex-direction: column;                /* 两段文字垂直排列 */
  transition: all 0.3s ease;
}

.header-slogan .slogan-1 {
  font-size: calc(var(--font-size-base) + 0.05vw);
}

.header-slogan .slogan-2 em i {
  font-size: 0.88rem;
}

/* ≥992px：显示顶部标语 */
@media (min-width: 992px) {
  .header-slogan { display: flex; }
}

/* 第二行标语前面的红色小图标（ax-iconfont 字体图标） */
.header-logo em i::before {
  content: '\e61a';
  font-family: 'ax-iconfont';
  font-size: 1rem;
  color: var(--color-primary);
}

/* ---------- 4. 顶栏右侧链接区 ---------- */
.header-tag {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 1.25rem;
}

/* 桌面端快捷链接（字体下载/订单查询/TAG标签）：移动端整组隐藏 */
.desktop-use {
  display: none;
}

.header-tag .favorite {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 1rem 0 0;                   /* 标签内部：文字到方块间距 */
  margin-right: 0.75rem;                 /* 标签外部：方块到下一个标签间距 */
  margin-left: 0.0625rem;
  color: #cd0000;
  white-space: nowrap;
  position: relative;
}
.header-tag .favorite:last-child { margin-right: 0; }

/* 链接右侧的红色小方块装饰 */
.header-tag .favorite::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  background: #cd0000;
}

/* 汉堡菜单按钮：移动端显示，≥768px 在 media 文件中隐藏 */
.mobile-toggle {
  display: block;
}

#menuDrawer i {
  color: var(--text-tertiary);
  font-size: 1.5625rem;
}

/* ≥768px：恢复桌面顶栏布局 */
@media (min-width: 768px) {
  /* 顶栏取消固定，回归文档流 */
  .main-header {
    position: relative;
    box-shadow: none;
  }
  /* 恢复桌面大 Logo */
  .header-logo img {
    width: 18.75rem;
    height: 5rem;
  }
  /* 显示桌面快捷链接，隐藏汉堡按钮 */
  .desktop-use { display: block; }
  .mobile-toggle { display: none; }
}


/* ---------- 5. 桌面主导航（移动端整栏隐藏，≥768px 显示） ---------- */

/* 5.0 尺寸令牌：所有尺寸只在这里定义，改一处全站生效
   层高按全站变焦约定用纯 rem 定高（px ÷ 16）：
   <2560px 根字号恒 16px，层高恒 60px；≥2560px 巨幕变焦段随根字号等比放大。
   （旧写法 calc(2.9rem + 0.7vw) 在变焦段 rem 与 vw 双重放大，层高失控偏高，弃用）
   红线改为距项底定位：以后调整 --nav-h，红线自动跟随项底，无需再改这里 */
.nav.header-nav {
  --nav-h: 3.75rem;                        /* 层高 60px ÷ 16 */
  --nav-line-w: 1.75rem;                   /* 红线长度 28px */
  --nav-line-h: 0.1875rem;                 /* 红线粗细 3px */
  --nav-line-bottom: 0.4375rem;            /* 红线距项底 7px，跟随项底、与层高解耦 */

  display: none;                           /* 移动端隐藏，≥768px 打开 */
  position: sticky;                        /* 滚动到顶部时吸附 */
  top: 0;
  z-index: 600;
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 0.1rem 0 0 rgba(0, 0, 0, 0.1);
}

/* ≥768px：显示桌面主导航 */
@media (min-width: 768px) {
  .nav.header-nav { display: block; }
}

/* 横条容器：用 min-height 定高（内容再多也不会被切），子项自动撑满 */
.header-nav .container {
  display: flex;
  min-height: var(--nav-h);
}

/* 每个一级菜单项：均分宽度 + 右侧分隔线 + 内容垂直居中 */
.header-nav .ax-item {
  position: relative;                      /* 红线定位参考 */
  flex: 1 1 0;                             /* 三个值写全：文字长短不影响均分 */
  display: flex;
  align-items: center;                     /* 文字在横条内垂直居中 */
  justify-content: center;
  border-right: 1px solid var(--rgba-005);
  text-align: center;
}

.header-nav .ax-item:first-child {
  border-left: 1px solid var(--rgba-005);
}

/* 菜单文字：居中交给 flex，不再靠 line-height 硬撑导航高度 */
.header-nav .ax-item a.ax-text {
  display: block;
  width: 100%;
  color: var(--color-black);
  text-align: center;
  transition: color 200ms linear;          /* 只过渡颜色，悬停时不触发多余重排 */
}

/* 菜单项悬停：文字变红 */
.header-nav div:hover > .ax-text {
  color: var(--color-primary-hover);
}

/* 红线：绝对定位于每一项底部，默认收起，悬停 / 当前栏目时展开 */
.header-nav .ax-item .ax-line {
  position: absolute;
  left: 50%;
  bottom: var(--nav-line-bottom);
  width: var(--nav-line-w);
  height: var(--nav-line-h);
  background-color: var(--color-primary-hover);
  transform: translateX(-50%) scaleX(0);
  transition: transform 200ms linear;
  pointer-events: none;                    /* 纯装饰层，不拦截鼠标，悬停判定更稳 */
}

.header-nav .ax-item:hover .ax-line {
  transform: translateX(-50%) scaleX(1);
}

/* ---------- 5.1 当前栏目高亮（2026-10-26 新增） ----------
   二级 / 三级页面靠它告诉用户"我在哪一栏"。
   .active 由 components/header.php 自动加上：
   页面 $page['nav'] 的值与配置里 $NAV 的键相同时就加，
   所以任何页面都不用自己写 class。
   视觉沿用全站的红色主色：文字变红 + 底部红色短横线常驻 */
.header-nav .ax-item.active > .ax-text {
  color: var(--color-primary);
  font-weight: 600;
}

.header-nav .ax-item.active .ax-line {
  transform: translateX(-50%) scaleX(1);    /* 红线常显，不再依赖悬停 */
}

/* ---------- 6. 导航二级下拉菜单 ---------- */
.ax-grade {
  position: relative;                    /* 下拉菜单定位参考 */
}

/* 下拉面板：默认隐藏，悬停展开 */
.ax-grade .ax-outer {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 3;
  display: none;
  width: 100%;
  box-sizing: border-box;
  transform: translate(-50%, 0);
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.25rem;
  text-align: left;
}

.ax-grade:hover .ax-outer {
  display: block;
}

.ax-grade ul.ax-outer li {
  line-height: 100%;
  font-size: calc(0.6rem + 0.2vw);
  transition: all 1000ms linear;
}

.ax-grade ul.ax-outer li:hover {
  color: #198cff;
  background-color: #f0f7ff;
}

.ax-grade .ax-outer a {
  display: block;
  position: relative;
  padding: calc(0.5rem + 0.2vw) calc(0.46rem + 0.3vw);
  color: var(--text-light);
  border-bottom: 1px rgba(255, 255, 255, 0.05) solid;
}

/* 下拉项右侧的小箭头图标 */
.ax-grade .ax-outer a::before {
  content: "\e76b";
  font-family: 'ax-iconfont';
  font-size: calc(0.3rem + 0.1vw);
  position: absolute;
  right: calc(0.3rem + 0.2vw);
  color: rgba(255, 255, 255, 0.4);
}

.ax-grade .ax-outer a:hover {
  color: var(--text-light);
  background: var(--color-primary-hover);
}


/* ---------- 7. 桌面搜索热词区（移动端隐藏，≥768px 显示） ----------
   本区所有定高框/字号/内距一律 rem（px ÷ 16）：<2560px 时根字号恒 16px、
   数值与 px 完全等值、外观不变；≥2560px 巨幕变焦段随根字号整体放大，
   避免"框不放大、字放大"把热词和输入框裁掉 */
.search-terms {
  display: none;                         /* 移动端隐藏 */
  height: 3.125rem;                      /* 50px ÷ 16 */
  margin: 0 auto;
  padding: 0 1.5625rem;                  /* 25px ÷ 16 */
  position: relative;
  z-index: 1;
  background-color: var(--color-bg-light);
}

/* 关键词列表统一字体（老站原有规则：防止继承成 20px 加粗默认字体） */
.search-terms ul,
.search-terms ol,
.search-terms li {
  font-size: 1rem;                       /* 16px ÷ 16，变焦段同步放大 */
  line-height: 1.5;
  font-weight: normal;
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
}

/* 左侧：热门关键词（flex 行，图标与文字垂直居中） */
.search-terms .hotkw_left {
  flex: 1 1 auto;                        /* 占满除搜索框外的剩余宽度 */
  display: flex;
  align-items: center;                   /* 图标、关键词统一垂直居中 */
  gap: 0.5rem;                           /* 图标与关键词之间的间距 */
  height: 100%;
  min-width: 0;                          /* 允许长内容省略，不撑破 */
  overflow: hidden;
  color: #777;
  font-size: 1rem;                       /* 16px ÷ 16 */
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 关键词前的红色小图标 */
.search-terms .hotkw_left i {
  display: block;
  flex: none;                            /* 不参与压缩，保持 24px 见方 */
  width: 1.5rem;                         /* 24px ÷ 16，随文字同步放大 */
  height: 1.5rem;
  overflow: hidden;
  background: url(/images/icon/ser01.svg) center / contain no-repeat;  /* 矢量图标（CDR 制作），随框等比缩放不糊 */
}

.search-terms .hotkw_left #search-keywords {
  display: flex;
  align-items: center;                   /* 关键词文字与图标同一水平中线 */
  min-width: 0;
  color: #222;
  font-size: 1.25rem;                    /* 20px ÷ 16 */
  font-weight: bold;
  line-height: 1.2;                      /* 收紧行盒，垂直居中更准 */
}

.search-terms .hotkw_left #search-keywords ul {
  display: flex;
  gap: 0.75rem;                          /* 12px ÷ 16 */
}

.search-terms .hotkw_left #search-keywords ul li {
  display: inline-block;
}

.search-terms .hotkw_left a:hover {
  color: #c10326;
}

/* 右侧：搜索框 + 按钮（flex 行，输入框与按钮垂直居中） */
.search-terms .search_right {
  flex: 0 0 40%;                         /* 固定占 40%，不随关键词长短变化 */
  display: flex;
  align-items: center;                   /* 输入框、按钮垂直居中 */
  height: 1.875rem;                      /* 30px ÷ 16 */
  padding-right: 3.125rem;               /* 50px ÷ 16，给搜索按钮留位 */
  overflow: hidden;
  position: relative;
}

.search-terms .search_right .sc_ipt {
  flex: 1 1 auto;
  width: 100%;
  height: 1.875rem;                      /* 30px ÷ 16 */
}

.search-terms .search_right .sc_ipt input {
  display: block;
  width: 100%;
  height: 1.875rem;                      /* 30px ÷ 16 */
  line-height: 1.875rem;                 /* 30px ÷ 16，与框高取齐防裁字 */
  padding: 0 0.5625rem 0 1.0625rem;      /* 9px / 17px ÷ 16 */
  border: 1px solid var(--color-gray);
  outline: none;
  color: var(--text-secondary);
  font-size: 1rem;                       /* 16px ÷ 16，变焦段同步放大 */
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-terms .search_right .sc_ipt input:focus {
  color: var(--text-dark);
}

.search-terms .search_right .sc_ipt input::placeholder {
  color: var(--text-secondary);
}

/* 红色搜索按钮（放大镜图标） */
.search-terms .search_right .sc_btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 3.125rem;                       /* 50px ÷ 16 */
  height: 1.875rem;                      /* 30px ÷ 16 */
}

.search-terms .search_right .sc_btn input {
  display: block;
  width: 100%;
  height: 1.875rem;                      /* 30px ÷ 16 */
  border: none;
  outline: none;
  cursor: pointer;
  background: #c10326 url(/images/icon/top_ss.svg) no-repeat center center;
  background-size: 1.375rem 1.375rem;    /* 22px ÷ 16，放大镜图标随按钮同步放大（2026-10-30 换为 SVG 矢量） */
}


/* ≥768px：显示桌面搜索热词区（内部各元素统一垂直居中） */
@media (min-width: 768px) {
  .search-terms {
    display: flex;
    align-items: center;                 /* 左关键词组与右搜索框同处一条水平中线 */
  }
}

/* ---------- 8. 移动端搜索条（移动端显示，≥768px 隐藏） ---------- */
.search-bar {
  display: flex;
  align-items: center;                   /* 输入框与按钮垂直居中 */
  justify-content: space-between;
  width: 100%;
  height: 2.5rem;
  padding: 0.3125rem 5%;
  box-sizing: border-box;
  background-color: var(--color-bg-light);
  border-top: 1px solid var(--color-border-gray-light);
}

/* 输入框容器：占满剩余空间 */
.search-bar .sc_ipt {
  flex: 1;
  height: 1.875rem;
}

.search-bar .sc_ipt input {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1.875rem;
  padding: 0 0.9375rem;
  box-sizing: border-box;
  border: 1px solid #ddd;
  outline: none;
}

.search-bar .sc_ipt input:focus {
  border-color: #aaa;
}

/* 红色搜索按钮 */
.search-bar .sc_btn {
  width: 3.125rem;
  height: 1.875rem;
  flex-shrink: 0;
}

.search-bar .sc_btn input {
  width: 100%;
  height: 100%;
  border: none;
  cursor: pointer;
  background: #c10326 url(/images/icon/top_ss.svg) no-repeat center center;
  background-size: 1.375rem 1.375rem;    /* 22px，与原 png 位图固有尺寸一致（SVG 固有 88px，不指定会放大溢出） */
}

/* ≥768px：隐藏移动端搜索条 */
@media (min-width: 768px) {
  .search-bar { display: none; }
}