/* ==========================================================================
 * Evolta 标题排版（evolta-compat 提供）
 *
 * 来源：主题 style-main.css 的 "Headings" 一节，数值一字未改。
 *
 * ── 为什么需要 ──────────────────────────────────────────────────────────
 * 模板站的标题尺寸来自主题 style-main.css：
 *     h4 { font-size: var(--h4-font-size);        /* 1.5rem = 24px *\/
 *          line-height: var(--headings-line-height-smaller);  /* 1.5 *\/ }
 * 本站用的是 Hello 主题 + Elementor 站点设置，H4 的全局排版是
 *     16px / 700 / 行高 1.3em
 * 两边差了整整一号字。
 *
 * 这个差异会连带把组件内部的对齐打歪。以 Service Block 为例：
 *     .btn-more { font-size: 20px; position: relative; top: 5px; }
 * 这里的 20px 字号和 top: 5px 偏移都是按 24px 标题调的。标题缩到 16px 后
 * 文字变矮，箭头仍按 20px 摆放，于是看起来比标题低了一截 —— 也就是
 * 「绿色 icon 和标题没对齐」。把标题恢复成主题的字号/行高，箭头自然归位。
 *
 * ── 作用范围 ────────────────────────────────────────────────────────────
 * 只作用于 mascot 组件内部。Elementor 给每个组件的外层加了一个
 * .elementor-widget-tm-ele-xxx 类，本文件用它做作用域，
 * 不影响站点其它位置（原生 Elementor 组件、文章正文等）的标题。
 *
 * ── 权重设计（重要，改之前先读） ─────────────────────────────────────────
 * 这里刻意拆成两段，因为两类属性的"对手"不同：
 *
 * ① 颜色 / 上下间距 → 用 :where() 把权重压到最低（0,0,1）
 *    组件自带的 .service-title { margin: 0 } 之类（0,1,0）必须能盖过它，
 *    否则卡片里标题的位置会被推开。
 *
 * ② 字号 / 行高 / 字重 → 用普通选择器（0,1,1）
 *    因为 Elementor 站点设置里有 .elementor-kit-xxx h4 { font-size: var(...) }
 *    也是 (0,1,1)，权重太低根本盖不住。同级时按加载顺序取胜，
 *    所以本文件由插件在 wp_enqueue_scripts 的 999 优先级加载，排在
 *    Elementor 生成的所有样式之后。
 *    仍低于「元素级」设置（.elementor-element-xxx .service-title，0,2,0），
 *    所以你在 Elementor 面板里给某个元素单独调字号，依然优先。
 *
 * ── 字体 ────────────────────────────────────────────────────────────────
 * 没有设置 font-family —— 沿用当前站点字体（当前是 Sarabun），
 * 避免站内出现两套字体。若要与模板站完全一致（Wix Madefor Display），
 * 取消下面标注处的注释，并在插件里加载该字体。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * ① 颜色与间距（最低权重，任何类规则都能覆盖它）
 * -------------------------------------------------------------------------- */
:where([class*="elementor-widget-tm-ele-"]) h1,
:where([class*="elementor-widget-tm-ele-"]) h2,
:where([class*="elementor-widget-tm-ele-"]) h3,
:where([class*="elementor-widget-tm-ele-"]) h4,
:where([class*="elementor-widget-tm-ele-"]) h5,
:where([class*="elementor-widget-tm-ele-"]) h6 {
  color: var(--headings-color);
  margin-top: 0.75rem;
  margin-bottom: 1rem;

  /* 复刻模板站字体时取消注释（需同时加载 Wix Madefor Display）：
  font-family: var(--heading-font-family);
  */
}

/* --------------------------------------------------------------------------
 * ② 字号 / 行高 / 字重（与 Elementor 全局排版同级，靠加载顺序取胜）
 * -------------------------------------------------------------------------- */

/* h1 */
[class*="elementor-widget-tm-ele-"] h1 {
  font-size: var(--h1-font-size);
  font-weight: var(--headings-font-weight-h1);
  line-height: var(--headings-line-height);
}

/* h2 */
[class*="elementor-widget-tm-ele-"] h2 {
  font-size: var(--h2-font-size);
  font-weight: var(--headings-font-weight-h2);
  line-height: var(--headings-line-height);
}

/* h3 */
[class*="elementor-widget-tm-ele-"] h3 {
  font-size: var(--h3-font-size);
  font-weight: var(--headings-font-weight-h3);
  line-height: var(--headings-line-height);
}

/* h4 */
[class*="elementor-widget-tm-ele-"] h4 {
  font-size: var(--h4-font-size);
  font-weight: var(--headings-font-weight-h4);
  line-height: var(--headings-line-height-smaller);
}

/* h5 */
[class*="elementor-widget-tm-ele-"] h5 {
  font-size: var(--h5-font-size);
  font-weight: var(--headings-font-weight-h5);
  line-height: var(--headings-line-height-smaller);
}

/* h6 */
[class*="elementor-widget-tm-ele-"] h6 {
  font-size: var(--h6-font-size);
  font-weight: var(--headings-font-weight-h6);
  line-height: var(--headings-line-height-smaller);
}

/* --------------------------------------------------------------------------
 * 移动端字号
 * 主题只在 767.98px 以下覆盖 h2 一档（h1、h3~h6 全站不缩），这里保持一致，
 * 不要"顺手"给 h1 也加一条 —— 那样反而和模板站不一样。
 * -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  [class*="elementor-widget-tm-ele-"] h2 {
    font-size: var(--h2-font-size-mob);
  }
}