/* ============================================================
   responsive-fix.css
   统一补丁：修复各页面响应式适配中的遗漏问题
   放在 header_footer.css 之后加载，优先级高于各页面 CSS
   ============================================================ */

/* ----------------------------------------------------------
   1. 防止 iOS Safari 横屏时自动放大文字
   ---------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ----------------------------------------------------------
   2. 富文本内容防溢出：后台编辑器产生的图片、表格、iframe
      可能不带 max-width，在窄屏时撑破容器
   ---------------------------------------------------------- */
.zs-news-detail__content img,
.zs-news-detail__content video,
.zs-news-detail__content iframe,
.zs-app-detail__content img,
.zs-app-detail__content video,
.zs-app-detail__content iframe,
.zs-product-detail-specs__table-wrap img,
.zs-product-detail-specs__table-wrap iframe,
.zs-sustainability-section__body img,
.zs-privacy-policy-content__inner img {
  max-width: 100%;
  height: auto;
}

.zs-news-detail__content table,
.zs-app-detail__content table,
.zs-privacy-policy-content__inner table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* ----------------------------------------------------------
   3. 触摸设备：防止 hover 状态下拉菜单在移动端无法关闭
      990px 以下导航已切为移动端面板，桌面下拉不再需要
   ---------------------------------------------------------- */
@media (max-width: 990px) {
  .zs-nav__dropdown {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   4. 防止页面横向溢出（常见于宽表格、大图片、iframe）
   ---------------------------------------------------------- */
html,
body {
  overflow-x: hidden;
}

#main,
.zs-main-inner {
  overflow-x: hidden;
}

/* ----------------------------------------------------------
   5. 小屏幕下确保 .zs-shell 内边距不被各页面覆盖丢失
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .zs-shell {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ----------------------------------------------------------
   6. 移动端 fixed header 下的锚点跳转偏移修正
      使用更新后的 CSS 变量，确保锚点不被 header 遮挡
   ---------------------------------------------------------- */
@media (max-width: 990px) {
  [id]:target {
    scroll-margin-top: 60px;
  }
}

/* ----------------------------------------------------------
   7. 移动端表单元素：防止 iOS 缩放输入框（font-size < 16px 时触发）
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ----------------------------------------------------------
   8. search 页面在 990px 以下的 margin-top 没有被 search.css 覆盖
      search.css 用 padding-top 而非 margin-top，
      .zs-search-section__top 用 margin-top: calc(topbar+header)
      变量归零后已自动修复，但需要确保 search-page 的 padding-top 也正确
   ---------------------------------------------------------- */
@media (max-width: 990px) {
  .zs-search-page {
    padding-top: calc(var(--zs-topbar-height) + var(--zs-header-height));
  }
}

/* ----------------------------------------------------------
   9. privacy_policy 页面在 991px 只改了 padding-top，
      但 hero 的 margin-top 仍用变量计算，变量归零后自动为 48px
      补充确保 hero 在移动端不会被 padding-top 双重偏移
   ---------------------------------------------------------- */
@media (max-width: 990px) {
  .zs-privacy-policy-page {
    padding-top: 0;
  }

  .zs-privacy-policy-hero {
    margin-top: calc(var(--zs-topbar-height) + var(--zs-header-height));
  }
}

/* ----------------------------------------------------------
   10. 移动端长英文单词/URL 防溢出
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .zs-news-detail__content,
  .zs-app-detail__content,
  .zs-product-detail-specs__table-wrap,
  .zs-sustainability-section__body,
  .zs-privacy-policy-content__inner,
  .zs-faq-item__body-inner {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ----------------------------------------------------------
   11. 确保 swiper 轮播在窄屏不溢出
   ---------------------------------------------------------- */
.swiper {
  max-width: 100%;
  overflow: hidden;
}

/* ----------------------------------------------------------
   12. 移动端底部弹窗表单间距优化
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .zs-modal__dialog {
    width: min(96vw, 800px);
    max-height: 88vh;
  }
}