/* ============================================================
   sddytj 设计令牌 + 视觉统一层
   日期：2026-09-19   回滚标签：rollback-20260919-pre-hardening

   【为什么要有这个文件】
   审计发现全站并存三套互不相干的设计语言：
     · 品牌蓝：#1a4f8b（全局） / #1a2980+#26d0ce（页2556） / #3498db+#2c3e50（页2509）
     · 圆角：6px（全局） / 8px（2556） / 12px+4px（2509）
     · 断点：921/544（全局） / 768+480（2556） / 768（2509）
     · 标题体系：elementor-heading-title / entry-title / tj-title / 空 class 四种并存
   这是"看上去不统一、不舒服"的根因。

   【本文件做什么】
   1) 定义一套 Token（CSS 变量），把上述三套语言收敛为同一套可调参数；
      以后改一处即全站生效 —— 这是"可扩展性"的地基。
   2) 修复一个已定位的真实 bug（overflow-x 破坏 sticky 表头）。
   3) 做低风险的视觉增强（不改变任何页面结构与内容）。

   【设计原则】
   · 只做"收敛 + 增强"，绝不改动页面结构、文案、布局。
   · 不滥用 !important；作用域清晰，不误伤主题与其它插件。
   ============================================================ */

/* ------------------------------------------------------------
   1. 设计令牌：一套参数管全站
   ------------------------------------------------------------ */
:root {
  /* --- 品牌蓝：以现网主色 #1a4f8b 为基准向两侧衍生同色阶 ---
     页2556/2509 的异色被归入同一色阶的不同明度，
     既保留各版块个性，又消除"三种蓝打架"的观感。 */
  --tj-blue-900: #0d2a4d;
  --tj-blue-800: #14406f;
  --tj-blue-700: #1a4f8b;   /* 主品牌蓝（沿用全站既有主色） */
  --tj-blue-600: #2266ad;
  --tj-blue-500: #2f7fd0;   /* 归位：页2509 的 #3498db */
  --tj-blue-300: #7fb3e0;
  --tj-blue-100: #dbe9f7;   /* 归位：页2556 表头 #d6eaf8 */
  --tj-blue-050: #f4f8fd;

  /* --- 中性色 --- */
  --tj-ink:      #1f2933;   /* 正文主色 */
  --tj-ink-2:    #3e4c59;   /* 次级文字 */
  --tj-muted:    #7f8c8d;   /* 弱化文字（归位：2509 的 #7f8c8d） */
  --tj-line:     #e1e6ed;   /* 分隔线 / 边框 */
  --tj-surface:  #ffffff;   /* 卡片底 */
  --tj-surface-2:#f7f9fc;   /* 斑马纹 / 浅底 */

  /* --- 圆角：统一收敛为 6 / 8 / 12 三档 --- */
  --tj-r-sm: 6px;
  --tj-r:    8px;
  --tj-r-lg: 12px;

  /* --- 阴影：统一三档，色相统一为品牌蓝深色（原为纯黑，偏脏） --- */
  --tj-sh-sm: 0 1px 3px  rgba(13, 42, 77, .08);
  --tj-sh:    0 4px 16px rgba(13, 42, 77, .10);
  --tj-sh-lg: 0 10px 30px rgba(13, 42, 77, .12);

  /* --- 动效：统一过渡曲线，让交互手感一致 --- */
  --tj-ease: cubic-bezier(.4, 0, .2, 1);
  --tj-dur:  .22s;

  /* --- 间距节奏 --- */
  --tj-gap:    24px;
  --tj-gap-lg: 40px;

  /* --- 排版：流式字号，手机不挤、大屏不虚 --- */
  --tj-fs-base: 16px;
  --tj-lh-base: 1.75;
}

/* ------------------------------------------------------------
   2. BUG 修复：吸顶表头失效
   根因：perf-style.css 里 html,body{overflow-x:hidden} 会在祖先
        建立滚动容器，导致同文件给表头设的 position:sticky 失效
        —— 阶段 5 做的"表头吸顶"很可能一直没生效。
   解法：优先使用 overflow-x:clip（不建立滚动容器，不破坏 sticky），
        并保留 hidden 作为旧浏览器回退（后者覆盖在前）。
   ------------------------------------------------------------ */
html,
body {
  overflow-x: hidden;   /* 旧浏览器回退 */
  overflow-x: clip;     /* 现代浏览器：不建立滚动容器 → sticky 正常 */
}

/* sticky 表头补一层底景：滚动时下方内容不会从边缘透出 */
.entry-content table thead th,
.wp-block-table table thead th,
.elementor-widget-container table thead th {
  box-shadow: inset 0 -1px 0 var(--tj-blue-900, #0d2a4d);
}

/* ------------------------------------------------------------
   3. 标题体系统一（四种 class 收敛到同一视觉梯度）
   注意：这里只统一"通用观感"（行高/字重/换行/间距），
        不去强行覆盖字号，避免与各页面的 Elementor 设定打架。
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title,
.tj-title {
  color: var(--tj-ink);
  line-height: 1.35;
  letter-spacing: .01em;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 博客/单文模板的 .entry-title 原先与 Elementor 页观感不同（视觉断层）
   这里抹平两者：统一字重与下间距。 */
.entry-title {
  font-weight: 700;
  margin-bottom: .6em;
}

/* 长文正文小标题给足呼吸，避免段落与标题粘连 */
.entry-content h2,
.elementor-widget-text-editor h2 {
  margin-top: 1.6em;
  margin-bottom: .7em;
}
.entry-content h3,
.elementor-widget-text-editor h3 {
  margin-top: 1.4em;
  margin-bottom: .6em;
}

/* ------------------------------------------------------------
   4. 视觉增强（低风险，只增不改）
   ------------------------------------------------------------ */
/* 4.1 图片/标题圆角混用 6px 与 0 的问题：统一到 Token 的 6px */
.entry-content img,
.elementor-widget-image img,
.elementor-widget-media-carousel img {
  border-radius: var(--tj-r-sm);
}

/* 4.2 交互反馈统一：链接 hover 平滑，不再突兀跳变 */
.entry-content a,
.elementor-widget-container a,
.ast-container a {
  transition: color var(--tj-dur) var(--tj-ease),
              opacity var(--tj-dur) var(--tj-ease);
}

/* 4.3 可访问性：键盘 Tab 焦点清晰可见（此前无统一焦点样式） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tj-blue-600);
  outline-offset: 2px;
  border-radius: var(--tj-r-sm);
}

/* 4.4 媒体元素不再溢出容器（视频/iframe 常见错位源） */
.entry-content iframe,
.entry-content video,
.elementor-widget-container iframe,
.elementor-widget-container video {
  max-width: 100%;
}

/* ------------------------------------------------------------
   5. 移动端观感统一
   原三套断点（921/544、768/480、768）保留各自生效范围，
   这里只补两处观感，让小屏下的主要区块拥有一致的呼吸感。
   ------------------------------------------------------------ */
@media (max-width: 544px) {
  .entry-content h2,
  .elementor-widget-text-editor h2 {
    margin-top: 1.3em;
  }
  /* 表格首列在窄屏不过宽，减少横滑距离 */
  .entry-content table th:first-child,
  .elementor-widget-container table th:first-child {
    min-width: 96px;
  }
}