/* ==========================================================================
   Hengjia Machinery — layout.css（页头/导航/首页区块等骨架组件）
   --------------------------------------------------------------------------
   节号沿袭历史编号（1.3-1.10）。1.9 Sidebar 已随死样式清理移除。
   ========================================================================== */
.top-bar {
  background: var(--color-top-bar);
  padding: 8px 0;
  font-size: 13px;
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-border);
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar__links {
  display: flex;
  gap: 15px;
}

.top-bar__links a {
  color: var(--color-text-light);
}

.top-bar__links a:hover {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   1.4 Header (Logo Area)
   -------------------------------------------------------------------------- */
.header-main {
  padding: 20px 0;
}

.header-main .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-main__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-main__logo img {
  width: 400px;
  height: 67px;
}

.header-main__logo-text {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
}

.header-main__phone {
  float: right;
  background: url('../images/tel.png') no-repeat 0 center;
  background-size: 45px;
  padding-left: 65px;
  margin-top: 5px;
  color: #767676;   /* 原 #999，白底比值 2.85 不达标，改后 4.54 */
}

.header-main__phone-label {
  font-size: 16px;
  color: #767676;   /* 原 #999，同上 */
}

.header-main__phone-number {
  display: block;
  font-size: 22px;
  font-weight: 700;
  /* Impact 只覆盖数字（热线电话），缺失时落回正文字体栈，不会影响中文 */
  font-family: Impact, var(--font-family);
  line-height: 1;
  color: var(--color-primary);
}

.header-main__phone-number a {
  color: var(--color-primary);
  text-decoration: none;
}

.header-main__info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   1.5 Main Navigation
   -------------------------------------------------------------------------- */
.main-nav {
  background: var(--color-primary);
}

.main-nav .container {
  display: flex;
  align-items: center;
}

.main-nav__list {
  display: flex;
}

.main-nav__list li {
  position: relative;
}

.main-nav__list a {
  display: block;
  padding: 0 50px;
  color: #ffffff;
  font-size: 18px;
  line-height: 65px;
  transition: var(--transition);
}

.main-nav__list a:hover,
.main-nav__list .current-menu-item > a {
  background: #000000;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   1.6 Mobile Navigation
   -------------------------------------------------------------------------- */
/* ❗1.4.26（BUG-02 修复）：≤768px 时 responsive.css 把本元素改成 display:block，
   隐藏仅靠 transform 位移 —— computed visibility 仍为 visible，元素留在 Tab 焦点序列中，
   键盘用户会 Tab 进「屏幕阅读器宣告不存在、肉眼也看不见」的菜单（axe aria-hidden-focus）。
   补 visibility:hidden 使其脱离焦点序列与无障碍树；
   过渡用 0s/0.3s 延迟，滑出动画期间保持可见，动画结束才隐藏，视觉与原来一致。 */
.mobile-nav-panel {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: var(--color-primary);
  z-index: 1000;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
  overflow-y: auto;
}

.mobile-nav-panel.is-open {
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.3s ease, visibility 0s;
}

.mobile-nav-panel a {
  display: block;
  padding: 15px 20px;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.mobile-nav-overlay.is-open {
  display: block;
}

/* --------------------------------------------------------------------------
   1.7 Home Products Section（首页产品展示区）
   -------------------------------------------------------------------------- */
.home-products {
  padding: 30px 0;
}

/* 1.4.24：两栏布局由 flex 改 Grid。
   原因：flex 容器的 gap 需 Chrome 84，而 Grid 的 gap 自 Chrome 57 即可用，
   改用 Grid 可让国内内置内核（钉钉/支付宝 69、抖音 75、X5 77、UC/夸克 78）正确分栏。
   侧栏在 DOM 中位于内容之前，故第一列（220px）是侧栏。
   宽度由栅格列决定，侧栏不再需要 width/flex-shrink。 */
.home-products__layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 25px;
}

.home-products__sidebar {
  min-width: 0;
}

.home-products__content {
  flex: 1;
  min-width: 0;
}

.home-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.home-products__empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-light);
  font-size: 15px;
  background: var(--color-bg-light);
  border-radius: var(--border-radius);
}

/* --------------------------------------------------------------------------
   1.8 Banner Slider
   -------------------------------------------------------------------------- */
.banner-slider {
  width: 100%;
  overflow: hidden;
}

.banner-slider .swiper-slide {
  height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.banner-slider .swiper-slide > a,
.banner-slider .swiper-slide > div {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-slider .swiper-pagination-bullet-active {
  background: var(--color-accent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 跳过导航链接（a11y）：平时视觉隐藏，键盘聚焦时显现。
   2026-09-13 新增，满足 WCAG 2.4.1 Bypass Blocks。 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--color-primary);
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.skip-link:focus {
  left: 0;
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* 主内容锚点偏移：站点头部非固定定位，无需 scroll-margin，
   但保留以便将来改固定头时平滑锚定。
   ⚠️ 不可在此声明 display —— #main-content 是 ID 选择器（优先级 100），
   会压过 .archive-products__layout / .single-product__layout 等类选择器上的
   display:flex，导致列表页与详情页左右栏塌成上下排列（2026-09-13 修复）。
   <main> 的浏览器默认 display 本就是 block，此声明原本也是冗余。 */
#main-content {
  scroll-margin-top: 0;
}

/* --------------------------------------------------------------------------
   1.16 减弱动效偏好（reduced motion）
   --------------------------------------------------------------------------
   2026-09-13 新增，满足 WCAG 2.3.3 / 前庭功能敏感用户需求。
   覆盖三处动效来源：① 全局 --transition 令牌 ② AOS 滚动淡入 ③ Swiper 轮播自动播放。
   注：仅"减弱"不"移除"——保留状态切换的即时反馈，仅去掉时长与自动滚动。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* AOS 滚动动画：直接置为终态，避免元素停在 opacity:0 */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Swiper：关闭过渡时长（自动播放仍由 JS 控制，见 main.js 的 prefers-reduced-motion 判定） */
  .swiper-wrapper {
    transition-duration: 0ms !important;
  }

  /* BUG-02 配合：上面的 transition-duration 不会覆盖 transition-delay，
     而抽屉面板的 visibility 带了 0.3s 延迟（为保住滑出动画）。减弱动效下
     动画本就瞬时，故把延迟一并清零，关闭即刻脱离焦点序列。 */
  .mobile-nav-panel {
    transition-delay: 0s !important;
  }
}

/* --------------------------------------------------------------------------
   1.8 Hot Keywords
   -------------------------------------------------------------------------- */
.hot-keywords {
  background: var(--color-bg-light);
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
}

.hot-keywords .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.hot-keywords__label {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-primary);
}

.hot-keywords__list {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}

.hot-keywords__list a {
  color: var(--color-text-light);
  font-size: 13px;
  line-height: 20px;
  padding: 2px 10px;
  background: transparent;
  border: 0;
}

.hot-keywords__list a:hover {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   1.8b Search Form
   -------------------------------------------------------------------------- */
.search-form {
  display: flex;
  align-items: center;
  max-width: 500px;
  margin: 20px auto;
}

.search-form__input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  font-size: 14px;
  outline: none;
}

.search-form__input:focus {
  border-color: var(--color-primary);
}

.search-form__submit {
  padding: 10px 18px;
  background: var(--color-primary);
  color: #ffffff;
  border: 1px solid var(--color-primary);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.search-form__submit:hover {
  background: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   1.10 Product Card
   -------------------------------------------------------------------------- */

.product-card {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--transition);
}

.product-card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.product-card__image {
  height: 200px;
  overflow: hidden;
  background: var(--color-bg-light);
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover .product-card__image img {
  transform: scale(1.05);
}

.product-card__title {
  padding: 12px 15px;
  text-align: center;
}

/* 产品卡片标题：用类选择器而非标签选择器，便于按上下文切换 h2/h3 语义层级 */
.product-card__title .product-card__heading {
  font-size: 15px;
  font-weight: 700;
}

.product-card a {
  display: block;
  color: var(--color-text);
}

.product-card a:hover {
  color: var(--color-text);
}