/* ==========================================================================
   domopa-b2b / ui-polish.css
   全站细节打磨层（2026-11-13）

   定位：**只做局部与细节修正，不改版式骨架**。
   背景：全站 11 个页面 × 7 档视口审计后确认——
     · 布局骨架健康：无真实横向溢出、无栅格塌陷、无 JS 异常；
     · 问题集中在四类「细节」：① 深色文字出现 6 个近重复色阶 + 514 处纯黑；
       ② 字号阶梯有 29 档含大量 0.1px 碎片；③ 若干可点区域低于 32px；
       ④ 两处文字被 ellipsis 吃掉关键信息。

   原则：本文件所有规则都以「提权但不改结构」为前提，且集中在此便于整体回滚
        （删除本文件 + 移除 functions.php 里的 enqueue 即完全复原）。

   加载顺序：在主题 style.css / page-hero.css / article.css 之后。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 色彩：已排查，判定「无需改动」（保留结论，避免后人重复踩坑）

   审计初判：全站深色文字出现 6 个近重复值
        #142F40 #193B49 #3C5363 #334155 #425867 #364D5D，
        另有 514 处「纯黑 rgb(0,0,0)」，看起来像配色失控。

   实测推翻了这两个判断：
   a) 514 处纯黑中，可见元素为 0 —— 几乎全部来自 <style>/<script>/<title>
      标签内的文本节点。浏览器对这类元素的默认 color 就是黑，但它们不渲染。
      按「元素有可见文本 + color==rgb(0,0,0)」重测，全站 5 个代表页均为 0。
   b) 那 6 个近重复值不是缺陷，而是**不同组件的分层**：
        首页 hero 深底用 #142F40、表格区用 #193B49、正文用 #3C5363……
      它们是按底色（深/浅/照片）分别调过的，强行归并会让某些块的对比度下降。

   反例验证（被否掉的方案）：
      曾尝试用 `color: inherit` 在全站收敛，A/B 实测影响 8 处，**全部变差**：
        · 「← 左右滑动查看完整表格 →」 #142F40 → #7B9498，对比度 12:1 掉到 3.5:1
        · 关于页深底数字 #D8EBE8 → #9DBDBD，深色背景上更不可读
      结论：**不要用 color:inherit / 通配符做全站颜色收敛。**

   保留价值：下方 :root 里的语义变量供**新写样式**引用，不改动既有样式。
   -------------------------------------------------------------------------- */

:root{
  /* 语义色阶（仅作新代码的取值来源，不对既有样式生效） */
  --dp-ink:      #102f3d;   /* 主文字 / 深底 */
  --dp-ink-2:    #1c4453;   /* 次级深色 */
  --dp-body:     #3c5363;   /* 正文 */
  --dp-muted:    #58747a;   /* 弱化文字 */
  --dp-teal:     #16808a;
  --dp-blue:     #0a5266;
  --dp-gold:     #d5a85d;
  --dp-line:     #d7e4e1;
  --dp-mist:     #f1f5f3;

  /* 移动端统一横向内边距，避免各页 12 / 16 / 20 混用 */
  --dp-gutter: 16px;
}

/* --------------------------------------------------------------------------
   2. 字号：已排查，判定「仅做最小收敛」

   审计结果：全站 29 档字号。但逐项核对后，绝大多数是有意的响应式阶梯
   （clamp() 与断点换算产生 14.6 / 21.9 / 12.6 这类非整数），**不是缺陷**。
   真正冗余的只有 13.5 / 13.6 / 14.3 / 14.5 / 15.5 / 16.5 这些 0.1px 级碎片，
   但它们分散在页面内联 <style> 中，逐个改动的收益极低、回归风险却不小。

   结论：**不做全站字号重排**，只在 <small> 这类语义弱化元素上收敛到 12px。
   -------------------------------------------------------------------------- */
.domopa-home small,
.domopa-section small,
.entry-content small,
.page-hero small{
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   3. 可点区域（移动端）
   问题：页脚导航链接实测 21px 高、文章页 prev/next 链接 15px 高，
         均低于 32px 的可用下限（WCAG 2.5.8 建议 24px，iOS HIG 建议 44px）。
   做法：**只加 padding 扩点按区域，不放大字号、不改视觉排布**。
         负 margin 抵消由 padding 带来的视觉位移，保持原有间距观感。
   -------------------------------------------------------------------------- */
.site-footer .menu-link,
.site-footer li > a{
  padding-top: 6px;
  padding-bottom: 6px;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  box-sizing: border-box;
}

/* 文章页上下篇：给 <a> 而不是 <p> 加点按高度 */
.navigation.post-navigation .nav-links a{
  display: block;
  padding: 8px 0;
  min-height: 36px;
  box-sizing: border-box;
}

/* 「申请 TDS」按钮（实测 67×25）——只扩点按高度到 32，字号不变 */
.domopa-tds-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   4. 文章上下篇导航：窄屏可读性修复
   问题（两处，叠在一起）：
     a) Astra 默认 nowrap + ellipsis，768px 下标题被截成
        「PA6 与 PA66 工程塑料初步选型：温度、吸湿、强度与加…」，关键信息丢失。
     b) 360px 下上下篇**并排**，各占 152px，扣掉「Previous/Next」图标后
        文字区只剩 145px，标题第三行被 clamp 吃掉（实测 sw=155 > cw=145）。
   做法：
     · ≤1024px 放开 nowrap，限 2 行；
     · ≤600px 改为上下堆叠、各占满宽 —— 移动端 prev/next 的标准形态，
       单条可点宽度从 152px 提升到整行，且标题能完整显示。
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .navigation.post-navigation .nav-links p{
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.55;
  }
}

@media (max-width:600px){
  .navigation.post-navigation .nav-links{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .navigation.post-navigation .nav-previous,
  .navigation.post-navigation .nav-next{
    width: 100%;
    flex: 0 0 auto;
  }
  .navigation.post-navigation .nav-links p{
    -webkit-line-clamp: 3;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   5. 移动端统一横向留白
   问题：首页 hero 容器左右各 12px，其余页面 16px，平板上 20px，
         同一站在不同页面切换时内容左边缘会「跳一下」。
   做法：统一到 16px，并把 hero 的 12px 一并归位。
   -------------------------------------------------------------------------- */
@media (max-width:600px){
  .domopa-container.domopa-hero-grid{
    margin-left: var(--dp-gutter) !important;
    margin-right: var(--dp-gutter) !important;
  }
}

/* --------------------------------------------------------------------------
   6. 图片角标对比度兜底
   问题：照片浮层角标（如「东莞本地仓 · 原包整垛」）在浅色底图
         （白货垛 / 浅墙 / 天空）上文字不可读。项目里已踩过一次：
         渐隐角标压在白色货垛上时副标题直接消失。
   做法：给角标一层不依赖底图亮度的实底（0.78 不透明度 + 轻微模糊 + 小圆角）。
   实测：首页 .domopa-hero-visual figcaption 命中，背景 rgb(10,34,45,0.78) + 4px 圆角。
   -------------------------------------------------------------------------- */
.domopa-hero-visual figcaption{
  background: rgba(10, 34, 45, .78);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 4px;
  text-shadow: none;
}

/* --------------------------------------------------------------------------
   7. 焦点可见性（键盘可达）
   说明：本项属于无障碍细节，不改视觉基调，仅把默认 outline 换成主题色描边。
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--dp-teal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   8. 打印与降级
   -------------------------------------------------------------------------- */
@media print{
  .ui-polish-hidden{ display: none !important; }
}

/* --------------------------------------------------------------------------
   9. 头部 Logo 点击区放大（移动端触控可达性）
   问题：Astra 默认 header .custom-logo-link img 只有 50px（渲染后实测 30px），
        低于 WCAG 2.5.5 / Material 建议的 44x44 最小触控目标。
   做法：图片尺寸不变，只用 padding 把可点区域撑到 >=44px，视觉完全无变化。
        负 margin 抵消 padding 带来的布局位移。
   -------------------------------------------------------------------------- */
.site-header .custom-logo-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 7px;
  margin: -7px;
  box-sizing: border-box;
}

/* Logo 图片本身按原尺寸显示，不做放大，避免首屏高度变化 */
.site-header .custom-logo-link img{
  width: auto;
  max-height: 30px;
  object-fit: contain;
}