/* fastener.hk — 性能 / 可访问性修复层
   独立文件，放在 style.css 之后加载，覆盖原主题中的问题样式。
   不写进 style.css，避免被主题更新覆盖。 */

/* ---------- 1. 首屏图片预留占位，消除 CLS ---------- */
.flash .bxslider > li > img,
.flash .bxslider > li > a > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 600;
  display: block;
}
img.logo { aspect-ratio: 270 / 53; }
.about_img { aspect-ratio: 502 / 236; }

/* 轮播几何尺寸在 JS 初始化前后保持一致（两张图均为 1920×600） */
.flash .bx-viewport { height: 31.25vw !important; max-height: 600px; min-height: 150px; }
.flash .bxslider > li > a { display: block; height: 100%; }
.flash .bxslider > li > img,
.flash .bxslider > li > a > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 2. 触控目标 ≥ 24×24（滑块指示点） ---------- */
.bx-wrapper .bx-pager.bx-default-pager a {
  width: 22px;
  height: 22px;
  margin: 0 4px;
}

/* ---------- 3. 文字对比度（WCAG AA 4.5:1） ---------- */
.top_menu,
.top_name,
.top_lang { color: #6b6b6b; }

/* 承载文字的品牌橙底由 #FF6633 加深到 #cc440f：白字对比度 2.91 → 4.77
   纯装饰性线条 / hover 仍沿用原来的 #FF6633 */
.navbar { background-color: #cc440f; }
.process { background-color: #cc440f; }

.product_head p,
.about_head p,
.case_head p,
.news_head p { color: #6b6b6b; }

.about_content,
.about_contents { color: #6b6b6b; }

.product_title a:hover,
.product_title a:focus { color: #c0350a; }

a.about_btn { color: #c0350a; border-color: #c0350a; }
a.about_btn:hover,
a.about_btn:focus { color: #fff; background-color: #c0350a; border-color: #c0350a; }

.foot_nav,
.foot_nav a,
.foot_nav button { color: #6b6b6b; }

/* 正文内链接不能只靠颜色区分 */
.top_lang a { text-decoration: underline; }

/* ---------- 4. 标题层级（定制流程 h4 → h3 后保持原视觉） ---------- */
.process_col h3 {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  margin: 10px 0;
  color: #fff;
}

/* ---------- 5. 首页 H1 导语区块 ---------- */
.idx-intro { padding: 30px 0 8px; background: #fff; }
.idx-intro h1 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
  color: #262626;
}
.idx-intro p {
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  color: #5a5a5a;
}
@media (min-width: 768px) {
  .idx-intro { padding: 38px 0 10px; }
  .idx-intro h1 { font-size: 27px; }
  .idx-intro p { font-size: 15.5px; }
}

/* ---------- 6. 尊重「减少动态效果」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  [style*="transform"],
  [style*="opacity"] { transition: none !important; transform: none !important; opacity: 1 !important; }
  .process_col img:hover { transform: none !important; }
}

/* ---------- 7. 产品 / 品牌图占位（1:1，消除懒加载 CLS） ---------- */
.product_list .product_img img,
.case_list .product_img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}


/* bxslider 初始化前 <ul> 未被 .bx-viewport 包裹，多张图会纵向堆叠造成首绘后位移；
   预先给 <ul> 与 .bx-viewport 相同的固定高度并裁切（比例与 1920×600 一致） */
.flash ul.bxslider { height: 31.25vw !important; max-height: 600px; min-height: 150px; overflow: hidden; margin: 0; }