/* ============================================================
 * QDJRX 专业排版优化
 * ------------------------------------------------------------
 * 目的：只改「字体、字号、行高、行宽、间距、标题层级」，
 *       不动任何布局、区块结构、配色 —— 视觉结构与原站一致，
 *       但正文的可读性与观感达到专业水准。
 *
 * 加载方式：在本主题 CSS 之后加载（见 functions.php 的 jrx_typography_css）。
 * 回退方式：删掉 assets/css/typography.css 或注释掉加载即可恢复原样。
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. 字体栈
 *    原站全站只有 Arial，中文页会用 Arial 渲染中文（字形难看且不统一）。
 * ------------------------------------------------------------ */
:root {
    /* 西文：现代系统 UI 字体栈，比 Arial 更清爽、字重层次更清晰 */
    --jrx-font-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    /* 中文：各平台最优质的中文字体，按优先级回退 */
    --jrx-font-zh: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
                   "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei",
                   sans-serif;
    /* 数字与型号：等宽更整齐，适合参数表 */
    --jrx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
                     "Liberation Mono", monospace;
}

html[lang^="en"] body,
html[lang="en-US"] body {
    font-family: var(--jrx-font-en);
}

html[lang^="zh"] body {
    font-family: var(--jrx-font-zh), var(--jrx-font-en);
}

/* 正文区域统一字体（有些片段内联了 Times New Roman，观感陈旧） */
.textLineP,
.textLineP * {
    font-family: inherit !important;
}

/* ------------------------------------------------------------
 * 2. 正文可读性：行宽 + 行高 + 段落间距
 *    原站：段落零间距（全局 reset）、行宽可达 1920px、行高写死 32px
 * ------------------------------------------------------------ */
/* 行宽：限制到约 70–78 个西文字符，中文约 36–40 字，这是长文阅读的黄金区间 */
.textLineP > p,
.textLineP > div > p {
    max-width: 46em;
}

/* 段落间距：原站完全没有，段落挤在一起 */
.textLineP p + p,
.textLineP p + ul,
.textLineP p + ol,
.textLineP ul + p,
.textLineP ol + p {
    margin-top: 1.15em !important;
}

/* 行高：改成比例（原站写死 32px，字号一变就不协调） */
.listTxt p,
.listTxt li,
.listTxt td,
.listTxt th {
    line-height: 1.8 !important;
}

/* 中文再放宽一点行高（汉字需要更松的行距才好读） */
html[lang^="zh"] .listTxt p,
html[lang^="zh"] .listTxt li {
    line-height: 1.9 !important;
    letter-spacing: 0.01em;
}

/* 段首不缩进（原站有个 firstLineIndent 开关，英文段落缩进是排版忌讳） */
.textLineP.firstLineIndent > p,
.listTxt.firstLineIndent .textLineP > p {
    text-indent: 0 !important;
}

/* ------------------------------------------------------------
 * 3. 正文内的标题层级
 *    文章里有 8 个 h2、6 个 h3，但正文容器内原先没有针对它们的样式
 * ------------------------------------------------------------ */
.listTxt h2,
.textLineP h2 {
    font-size: 1.5em !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    margin: 1.8em 0 0.7em !important;
    padding-bottom: 0.35em;
    border-bottom: 1px solid #e8ecf1;
    color: #1a2332;
}

.listTxt h3,
.textLineP h3 {
    font-size: 1.22em !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    margin: 1.5em 0 0.6em !important;
    color: #1a2332;
}

.listTxt h4,
.textLineP h4 {
    font-size: 1.08em !important;
    font-weight: 700 !important;
    margin: 1.3em 0 0.5em !important;
    color: #1a2332;
}

/* 第一个标题不要顶着上一块 */
.listTxt h2:first-child,
.listTxt h3:first-child,
.textLineP h2:first-child,
.textLineP h3:first-child {
    margin-top: 0 !important;
}

/* ------------------------------------------------------------
 * 4. 列表与表格
 * ------------------------------------------------------------ */
.listTxt ul,
.listTxt ol {
    margin: 1em 0 !important;
    padding-left: 1.5em !important;
}

.listTxt li + li {
    margin-top: 0.5em !important;
}

.listTxt table {
    margin: 1.4em 0 !important;
    border-collapse: collapse;
    width: 100%;
}

.listTxt th,
.listTxt td {
    padding: 0.7em 0.9em !important;
    border: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}

.listTxt th {
    background: #f4f7fa;
    font-weight: 700;
}

.listTxt tr:nth-child(even) td {
    background: #fafbfc;
}

/* ------------------------------------------------------------
 * 5. 图片与图注
 * ------------------------------------------------------------ */
.listTxt img {
    border-radius: 4px;
}

.listTxt p > img,
.listTxt p > a > img {
    margin: 0.6em 0;
}

/* ------------------------------------------------------------
 * 6. 文字颜色与对比度
 *    原站正文用 rgba(38,38,38,1) 尚可，这里统一到更沉稳的深灰
 * ------------------------------------------------------------ */
.listTxt p,
.listTxt li,
.listTxt td {
    color: #2b3440;
}

/* 正文里的链接：加下划线更容易识别 */
.listTxt p a {
    color: #1a5fb4;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(26, 95, 180, 0.35);
    transition: text-decoration-color 0.2s;
}

.listTxt p a:hover {
    text-decoration-color: #1a5fb4;
}

/* ------------------------------------------------------------
 * 7. 中文标点与数字
 * ------------------------------------------------------------ */
html[lang^="zh"] .listTxt {
    /* 中文与西文混排时自动加一点间隙，观感更整齐 */
    text-spacing-trim: space-first;
}

/* 参数、型号用等宽，表格更整齐 */
.listTxt code,
.listTxt .mono {
    font-family: var(--jrx-font-mono);
    font-size: 0.92em;
}

/* ------------------------------------------------------------
 * 8. 移动端微调
 * ------------------------------------------------------------ */
@media (max-width: 960px) {
    .textLineP > p,
    .textLineP > div > p {
        max-width: 100%;
    }

    .listTxt p,
    .listTxt li {
        line-height: 1.85 !important;
    }

    .listTxt h2,
    .textLineP h2 {
        margin: 1.5em 0 0.6em !important;
    }
}

/* ------------------------------------------------------------
 * 9. 修正 H1（重要）
 * ------------------------------------------------------------
 * 主题为了 SEO 语义把标题从 <div class="textLineP"> 换成了 <h1 class="textLineP">。
 * 但原站 CSS 只给容器（如 .cveeQgaA，font-size:3rem）定了字号，
 * 浏览器对 h1 的默认 font-size:2em 会把标题放大到 2 倍，
 * 而 line-height 继承的是父级已计算的固定值 → 行与行重叠。
 * 这里让 h1 完全沿用容器的字号与字重，只补一个合理的行高。
 */
.listTxt h1,
.textLineP h1,
.listTxt > h1 {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1.32 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    letter-spacing: -0.01em;
}

/* 产品页标题同理 */
.listTxt h1 + *,
.textLineP h1 + * {
    margin-top: 0.6em;
}

/* ------------------------------------------------------------
 * 10. GEO 核心要点块
 *     放在正文最前，是 AI 搜索引擎最常直接引用的结构。
 *     视觉上做成浅色卡片，与正文区分但不喧宾夺主。
 * ------------------------------------------------------------ */
.jrx-takeaways {
    background: #f6f9fc;
    border-left: 4px solid #1a5fb4;
    border-radius: 4px;
    padding: 1.4em 1.6em;
    margin: 0 0 1.6em;
    max-width: 46em;
}

.jrx-takeaways h2 {
    font-size: 1.15em !important;
    font-weight: 700 !important;
    margin: 0 0 0.7em !important;
    padding: 0 !important;
    border: none !important;
    color: #1a365d !important;
    letter-spacing: 0.01em;
    text-transform: none;
}

.jrx-takeaways ul {
    margin: 0 !important;
    padding-left: 1.2em !important;
    list-style: disc;
}

.jrx-takeaways li {
    font-size: 0.94em !important;
    line-height: 1.7 !important;
    margin: 0 0 0.55em !important;
    color: #33414f !important;
}

.jrx-takeaways li:last-child { margin-bottom: 0 !important; }

.jrx-takeaways li strong {
    color: #1a365d;
    font-weight: 700;
}

/* 中文页要点块的间距略松 */
html[lang^="zh"] .jrx-takeaways li { line-height: 1.8 !important; }

/* ------------------------------------------------------------
 * 11. 页脚社媒图标
 * ------------------------------------------------------------ */
.jrx-social-col { display: flex; align-items: center; justify-content: flex-end; }

.jrx-social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.jrx-social-a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.22s ease, transform 0.22s ease;
    text-decoration: none !important;
}

.jrx-social-a:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.jrx-social-a svg { display: block; }

/* WhatsApp 用品牌绿，辨识度更高 */
.jrx-social-a[aria-label="WhatsApp"]:hover { background: #25d366; }

@media (max-width: 960px) {
    .jrx-social-col { justify-content: center; margin-top: 10px; }
}