/* ==========================================================================
   Hengjia Machinery — pages-common.css（全站页面共用：面包屑/页脚/底部导航/区块标题/相关内容/分享按钮；1.4.15 B 档自 pages.css 拆出）
   --------------------------------------------------------------------------
   1.x = 基础组件；2.x = 历史追加的页面区块（"Missing Styles"为历史名，现已是
   正式样式）。节号沿袭历史编号，非连续。
   ========================================================================== */
.post-navigation {
  margin: 30px 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
}

.post-navigation a {
  font-size: 14px;
  color: var(--color-text-light);
  max-width: 45%;
}

.post-navigation a:hover {
  color: var(--color-accent);
}

.post-navigation .nav-previous {
  text-align: left;
}

.post-navigation .nav-next {
  text-align: right;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   1.19 Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
  padding: 12px 0;
  font-size: 13px;
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  padding: 0;
}

.breadcrumb li::before {
  content: "\203A";
  margin-right: 5px;
  color: var(--color-border);
}

.breadcrumb li:first-child::before {
  display: none;
}

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

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

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   1.20 Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-footer);
  color: var(--color-footer-text);
  font-size: 13px;
  line-height: 1.75;
}

.site-footer a {
  color: var(--color-footer-text);
}

.site-footer a:hover {
  color: #ffffff;
}

/* --- 主体四栏 --- */
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 48px;
  padding: 54px 0 46px;
}

/* 品牌栏 */
/* logo 原图是「黑字 + 橙齿轮」，直接放深灰底上黑字会看不见。
   因此不反白，改为一枚白色圆角底衬（logo 板），原样保留品牌配色。
   ⚠️ 白色的底衬尺寸随 logo 走，改 logo 尺寸时只需调 --footer-logo-h。 */
.site-footer__logo-link {
  --footer-logo-h: 34px;
  display: inline-block;
  margin-bottom: 18px;
  padding: calc(var(--footer-logo-h) * 0.32) calc(var(--footer-logo-h) * 0.47);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  line-height: 0;
  transition: var(--transition);
}

.site-footer__logo-link:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.26);
}

.site-footer__logo {
  display: block;
  height: var(--footer-logo-h);
  width: auto;
}

.site-footer__brand-name {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-footer-heading);
  letter-spacing: 0.02em;
}

.site-footer__desc {
  margin: 0;
  max-width: 34em;
  font-size: 12px;
  line-height: 1.9;
  color: #8d939c;
}

/* 栏目标题：左侧 3px 竖条 */
.site-footer__title {
  position: relative;
  margin: 0 0 20px;
  padding-left: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-footer-heading);
  letter-spacing: 0.04em;
}

.site-footer__title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 14px;
  margin-top: -7px;
  background: currentColor;
  opacity: 0.55;
}

/* 链接列表 */
.site-footer__list,
.site-footer__contacts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li {
  margin-bottom: 11px;
}

.site-footer__list li:last-child {
  margin-bottom: 0;
}

.site-footer__list a {
  display: inline-block;
  font-size: 13px;
  transition: var(--transition);
}

.site-footer__list a:hover {
  color: #ffffff;
  transform: translateX(3px);
}

/* 联系方式 */
.site-footer__contacts li {
  margin-bottom: 13px;
}

.site-footer__contacts li:last-child {
  margin-bottom: 0;
}

.site-footer__contact {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-footer-text);
}

.site-footer__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: #767c86;
}

/* --- 底部版权条 --- */
.site-footer__bottom {
  background: var(--color-footer-deep);
  border-top: 1px solid var(--color-footer-line);
}

.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
}

.site-footer__copyright,
.site-footer__icp {
  margin: 0;
  font-size: 12px;
  color: #868c94;
}

.site-footer__icp a {
  color: #868c94;
}

.site-footer__icp a:hover {
  color: #ffffff;
}

/* --- 平板：四栏折成三列，品牌栏独占一行 --- */
@media (max-width: 992px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 36px;
    padding: 44px 0 38px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }

  .site-footer__desc {
    max-width: 48em;
  }
}

/* --- 手机：单列居中 --- */
@media (max-width: 640px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 36px 0 30px;
    text-align: center;
  }

  .site-footer__logo-link {
    --footer-logo-h: 30px;
    margin-bottom: 14px;
  }

  .site-footer__desc {
    margin: 0 auto;
    max-width: 30em;
  }

  /* 竖条居中标题在单列布局下不好看，改为纯居中文字 */
  .site-footer__title {
    padding-left: 0;
    margin-bottom: 16px;
  }

  .site-footer__title::before {
    display: none;
  }

  .site-footer__contact {
    justify-content: center;
    text-align: left;
  }

  .site-footer__bottom-inner {
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   1.21 Mobile Bottom Nav
   -------------------------------------------------------------------------- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--color-primary);
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}


/* ❗1.4.26（BUG-01 修复）：类名由模板直接写在 <a> 自身（footer.php），
   原写法「.mobile-bottom-nav__item a」是后代选择器 → 恒匹配 0 个元素，
   下列展示/颜色/字号声明全部失效：图标与文字左右并排、文字回落继承色
   #333333 压在 #023793 深蓝底上（对比度 1.18:1，等于不可见）。
   选择器改为元素自身，与原 324 行规则合并。
   注：此处 gap:3px 为真实生效的 flex gap，兜底见 flexgap-fallback.css「B. 纵向容器」。 */
.mobile-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 0;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
}

.mobile-bottom-nav__item svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   1.22 Section Titles
   -------------------------------------------------------------------------- */
.section-title {
  text-align: center;
  margin-bottom: 30px;
}

.section-title h2 {
  font-size: 24px;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.section-title p {
  color: var(--color-text-light);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   1.23 Related Products / Posts
   -------------------------------------------------------------------------- */
.related-products,
.related-posts {
  margin: 30px 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.related-products h2,
.related-posts h2 {
  font-size: 20px;
  color: var(--color-primary);
  margin-bottom: 20px;
}

.related-posts__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}






/* --------------------------------------------------------------------------
   1.24 Share Buttons
   -------------------------------------------------------------------------- */
.share-buttons {
  margin: 20px 0;
  padding-top: 15px;
  border-top: 1px solid var(--color-border);
}


.share-buttons__list {
  position: relative;
  display: flex;
  gap: 10px;
}

/* 1.4.26：微信分享由 <a href="javascript:void(0)"> 改为语义化 <button>（BUG-03/08），
   故选择器需同时覆盖 button，并补 <button> 元素重置以保证二者视觉一致。
   注意 .share-buttons__item 的样式定义在 page-single-news.css（仅新闻详情加载），
   产品详情页靠本文件的全局规则兜底，故两处都要覆盖 button。 */
.share-buttons a,
.share-buttons button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: 13px;
  color: var(--color-text-light);
}

.share-buttons button {
  background: none;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.share-buttons a:hover,
.share-buttons button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* 微信分享二维码弹层（1.4.26，BUG-03）
   定位基准是 .share-buttons__list（已设 position:relative），
   默认由 hidden 属性隐藏，点击微信按钮时由 main.js 填充二维码并显示。 */
.share-qrcode {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 10px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  text-align: center;
  z-index: 20;
}

.share-qrcode[hidden] {
  display: none;
}

.share-qrcode__canvas {
  display: inline-block;
  line-height: 0;
}

.share-qrcode__canvas img,
.share-qrcode__canvas canvas {
  display: block;
  width: 140px;
  height: 140px;
}

.share-qrcode__tip {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-light);
}

/* 无障碍：仅供屏幕阅读器读取 */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}