/* ============================================================================
   作用域说明（2026-09-19 修改）
   ----------------------------------------------------------------------------
   本文件原先使用全局选择器 `body, div, p, td, th`，会越过正文区域污染
   页头（顶菜单）与左侧栏：这 4 个详情页因此把顶菜单 ul 从 16px 压成 14px、
   并把字体族从站点 Tahoma 字体栈换成 Arial，阿拉伯语看起来就变小了。

   现把全部规则限定到正文列内：
       .inner-page-r      正文列（product / news / resources / certifications）
       .process_box        产品页底部的流程块（页面级）

   祖先部分统一用 `:where()` 包裹 —— `:where()` 不贡献特异性，
   所以 `:where(...) p` 与原来的 `p` 特异性完全相同，
   规则的层叠关系被原样保留（例如 .cta-note 仍保持 13px）。

   页头与左侧栏恢复到站点统一样式，正文区域样式保持不变。
   ============================================================================ */

/* 全局样式，应用于 body、div、p、td 和 th */
:where(.inner-page-r, .process_box),
:where(.inner-page-r, .process_box) div,
:where(.inner-page-r, .process_box) p,
:where(.inner-page-r, .process_box) td,
:where(.inner-page-r, .process_box) th {
  font-size: 14px; /* 设置字体大小为14像素 */
  line-height: 20px; /* 设置行高为20px */
  font-family: Arial, sans-serif; /* 设置字体为 Arial */
  color: #646464; /* 设置字体颜色为 #646464 */
   overflow-wrap: break-word !important; /* 允许在必要时在单词内断行，以避免内容溢出其容器 */
   word-break: normal !important; /* 允许在空格或连字符处换行 */
   white-space: normal !important; /* 允许文本正常换行 */
   min-width: 0;  /* 允许内容收缩 */
}



/* 标题样式，应用于 h1、h2 和 h3 */
:where(.inner-page-r, .process_box) h1 {
  font-size: 18px;
  font-weight: bold;
  color: #39C; /* 标题主色调 */
  line-height: 1.3;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, sans-serif;
}

:where(.inner-page-r, .process_box) h2 {
  font-size: 16.5px;
  font-weight: bold;
  color: #ac7746; /* 标题主色调 */
  line-height: 1.4;
  margin-top: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, sans-serif;
}

:where(.inner-page-r, .process_box) h3 {
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  color: #7F8C8D; /* 标题主色调 */
  line-height: 1.5;
  margin-top: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, sans-serif;
}

/* 响应式调整 - 小屏幕设备 */
@media (max-width: 768px){
  :where(.inner-page-r, .process_box) h1 {
    font-size: 17px;

  }
  
  :where(.inner-page-r, .process_box) h2 {
    font-size: 15.5px;
    margin-top: 15px;
  }
  
  :where(.inner-page-r, .process_box) h3 {
    font-size: 14px;
    margin-top: 7px;
  }
}

/* 响应式调整 - 超小屏幕设备 */
@media (max-width: 480px){
  :where(.inner-page-r, .process_box) h1 {
    font-size: 16px;

  }
  
  :where(.inner-page-r, .process_box) h2 {
    font-size: 15px;
    margin-top: 14px;
  }
  
  :where(.inner-page-r, .process_box) h3 {
    font-size: 14px;
    margin-top: 7px;
  }
}



/* 表格样式 */
:where(.inner-page-r, .process_box) table {
  border-collapse: collapse; /* 合并表格单元格的边框 */
  border-spacing: 0; /* 设置单元格之间的间距为 0 */
  width: 100%; /* 设置表格宽度为父容器的 100% */
 -webkit-border-collapse: collapse; /* Safari兼容 */
}

:where(.inner-page-r, .process_box) table tr {
  height: 40px; /* 设置每行行高为 40 像素 */
}

/* 表头样式 */
:where(.inner-page-r, .process_box) table thead tr {
  background-color: #ffffff; /* 设置表头的背景色 */
}

/* 表格奇偶行背景颜色 */
:where(.inner-page-r, .process_box) table tbody tr:nth-child(odd) {
  background-color: #d0d0d0; /* 奇数行背景色 */
}

:where(.inner-page-r, .process_box) table tbody tr:nth-child(even) {
  background-color: #ffffff; /* 偶数行背景色 */
}

/* 表格单元格样式 */
:where(.inner-page-r, .process_box) table td {
  padding-left: 0.4em; /* 设置单元格左侧内边距为 0.4em */
  vertical-align: middle; /* 设置单元格内容垂直居中 */
}




/* 确保图片在网页中居中显示、不溢出容器、且能自动缩放以适应容器大小 */
:where(.inner-page-r, .process_box) .image-container {
    text-align: center; /* 水平居中 */
    overflow: hidden;   /* 隐藏溢出容器的部分 */
    width: 100%;        /* 容器宽度设为100%，可根据需要调整 */
    max-width: some-value; /* 可选：设置容器的最大宽度，防止过大 */
    height: auto;       /* 高度自适应，保持宽高比 */
    display: inline-block; /* 或使用 block，但 inline-block 更灵活 */
    /* 可选：添加padding或margin来调整容器内间距 */
}

:where(.inner-page-r, .process_box) .image-container img {
    max-width: 100%;    /* 图片最大宽度为容器宽度 */
    height: auto;       /* 图片高度自适应，保持宽高比 */
    display: block;     /* 将图片设为块级元素，以便应用margin: 0 auto;居中 */
    margin: 0 auto;     /* 图片水平居中，垂直margin为0 */
}


/* 图片全局居中方案 */
:where(.inner-page-r, .process_box) img {
  display: block;
  margin: 0 auto;
  max-width: 100%;  /* 防止响应式问题 */
  height: auto;     /* 保持宽高比 */
}



/* 如果图片是背景图，而不是<img>标签，则使用以下样式 */
:where(.inner-page-r, .process_box) .background-image-container {
    background-image: url('your-image-url.jpg'); /* 设置背景图片 */
    background-size: contain; /* 图片缩放以适应容器，不裁剪 */
    background-repeat: no-repeat; /* 图片不重复 */
    background-position: center; /* 图片居中 */
    width: 100%; /* 容器宽度设为100% */
    height: 0; /* 高度初始为0，通过padding-bottom技巧设置比例 */
    padding-bottom: 56.25%; /* 假设图片宽高比为16:9，则(9/16)*100=56.25% */
    position: relative; /* 为绝对定位的子元素提供参照 */
    overflow: hidden; /* 隐藏溢出容器的部分（虽然这里通常不需要） */
}

/* 注意：使用padding-bottom技巧时，.background-image-container内不应有子元素或需设置额外样式 */