/* ===================================================================
   article_typography_seo.css
   文章内容页排版（SEO/可读性友好）：仅作用于 .vx-prose--seo 容器
   使用方法：
   1) <link rel="stylesheet" href="/skin/css/article_typography_seo.css?v=20251014">
   2) 给正文容器加类名：<div class="vx-prose vx-post post-content vx-prose--seo">
   设计目标：
   - 清晰的标题层级、舒适的行距/字距、合理的段落间距
   - 列表/表格/代码/图片/引用等元素可读性增强
   - 更好的移动端排版与打印输出
   =================================================================== */
:root{
  --seo-text: #111827;    /* neutral-900 */
  --seo-muted:#6b7280;    /* neutral-500 */
  --seo-border:#e5e7eb;   /* neutral-200 */
  --seo-accent:#0ea5e9;   /* sky-500 */
  --seo-bg:#ffffff;
}
.vx-prose--seo{
  color:var(--seo-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
               "WenQuanYi Micro Hei", "Source Han Sans SC", sans-serif;
  /* 舒适行距：中文 1.8 左右 */
  line-height: 1.8;
  /* 兼容长链接/英文字母 */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* ===== 基础文本尺寸（流式排版） ===== */
.vx-prose--seo{
  font-size: clamp(15px, 1.6vw, 17px);
}
@media (min-width: 1180px){
  .vx-prose--seo{ font-size: 16.5px; }
}

/* ===== 段落与强调 ===== */
.vx-prose--seo p{ margin: 0.7em 0; }
.vx-prose--seo b, .vx-prose--seo strong{ font-weight: 700; }
.vx-prose--seo em, .vx-prose--seo i{ font-style: italic; }
.vx-prose--seo mark{ background: #fff3bf; padding: .1em .25em; border-radius: .25em; }

/* ===== 标题层级（仅作用于内容区内部的 h1~h4） ===== */
.vx-prose--seo h1, .vx-prose--seo h2, .vx-prose--seo h3, .vx-prose--seo h4{
  color: var(--seo-text);
  line-height: 1.35;
  margin: 1.2em 0 .6em;
  font-weight: 800;
}
.vx-prose--seo h1{ font-size: clamp(24px, 3.2vw, 30px); }
.vx-prose--seo h2{ font-size: clamp(20px, 2.5vw, 24px); padding-left:.6em; border-left: 3px solid var(--seo-text); }
.vx-prose--seo h3{ font-size: clamp(18px, 2.0vw, 20px); }
.vx-prose--seo h4{ font-size: clamp(16px, 1.8vw, 18px); color:#1f2937; }

/* 目录锚点定位更友好（顶部有固定导航/工具条时） */
.vx-prose--seo h2, .vx-prose--seo h3, .vx-prose--seo h4{ scroll-margin-top: 86px; }

/* ===== 链接 ===== */
.vx-prose--seo a{
  color: var(--seo-accent);
  text-decoration: underline;
  text-underline-offset: .1em;
  text-decoration-thickness: .08em;
}
.vx-prose--seo a:hover{ opacity:.9; }
.vx-prose--seo a:focus{ outline: 2px dashed var(--seo-accent); outline-offset: 2px; }

/* ===== 列表 ===== */
.vx-prose--seo ul, .vx-prose--seo ol{ margin: .6em 0 .8em 1.4em; padding:0; }
.vx-prose--seo li{ margin:.35em 0; }
.vx-prose--seo ul{ list-style: disc; }
.vx-prose--seo ol{ list-style: decimal; }
.vx-prose--seo li > ul, .vx-prose--seo li > ol{ margin-top:.3em; }

/* ===== 引用（支持“注释/提示/警告”语义增强） ===== */
.vx-prose--seo blockquote{
  margin: .8em 0;
  padding: .6em .9em;
  color: var(--seo-muted);
  background: #fafafa;
  border: 1px solid var(--seo-border);
  border-left: 3px solid #9ca3af;
  border-radius: 10px;
}
.vx-prose--seo blockquote[data-type="note"]    { border-left-color:#0ea5e9; }
.vx-prose--seo blockquote[data-type="tip"]     { border-left-color:#10b981; }
.vx-prose--seo blockquote[data-type="warning"] { border-left-color:#f59e0b; }
.vx-prose--seo blockquote[data-type="danger"]  { border-left-color:#ef4444; }

/* ===== 图片与图注（限制尺寸，利于 CLS 和可读性） ===== */
.vx-prose--seo img{
  display:block;
  max-width:100%;
  height:auto;
  max-height: 560px;
  margin: .6em auto;
  background:#fff;
  border-radius: 12px;
  border: 1px solid var(--seo-border);
}
.vx-prose--seo figure{ margin: 1em 0; }
.vx-prose--seo figure > img{ margin: 0; }
.vx-prose--seo figcaption{
  color: var(--seo-muted);
  text-align:center;
  font-size: .875em;
  margin-top: .4em;
}

/* ===== 表格（可读性 + 响应式容器） ===== */
.vx-prose--seo .table-wrap{
  width:100%; overflow:auto; border:1px solid var(--seo-border); border-radius:12px; background:#fff;
}
.vx-prose--seo table{
  border-collapse: collapse; width: 100%; min-width: 600px;
}
.vx-prose--seo th, .vx-prose--seo td{
  border-bottom: 1px solid var(--seo-border);
  padding: .6em .8em;
  text-align: left;
}
.vx-prose--seo thead th{
  background: #f8fafc;
  font-weight:700;
}
.vx-prose--seo tbody tr:hover{ background:#fcfcfc; }

/* ===== 代码与等宽元素 ===== */
.vx-prose--seo code, .vx-prose--seo kbd, .vx-prose--seo samp{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: #f3f4f6;
  border-radius: 6px;
  padding: .15em .45em;
  font-size: .92em;
}
.vx-prose--seo pre{
  overflow:auto; max-width:100%;
  background:#0f172a; color:#e2e8f0;
  border-radius:12px; padding: .9em 1em;
  border:1px solid #0b1220;
}
.vx-prose--seo pre code{ background:transparent; padding:0; color:inherit; }

/* ===== 其他语义元素 ===== */
.vx-prose--seo hr{ border: 0; border-top: 1px solid var(--seo-border); margin: 1.6em 0; }
.vx-prose--seo small{ color:var(--seo-muted); font-size: .875em; }
.vx-prose--seo abbr[title]{ text-decoration: underline dotted; cursor: help; }
.vx-prose--seo sup, .vx-prose--seo sub{ line-height: 0; }

/* ===== 打印优化（搜索引擎并不直接看打印样式，但利于用户保存/传播） ===== */
@media print{
  .vx-prose--seo{
    color:#000; font-size: 12pt; line-height: 1.6;
  }
  .vx-prose--seo a{
    color:#000; text-decoration: underline;
  }
  /* 打印时在链接后追加 URL，便于线下阅读 */
  .vx-prose--seo a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size: 10pt; color:#555;
  }
  /* 移除背景与多余边框，节省墨水 */
  .vx-prose--seo pre, .vx-prose--seo blockquote{ border-color:#aaa; background:#fff; }
  img{ page-break-inside: avoid; }
}

/* ===== 可选：标题自动编号（需要则给容器加 .vx-prose--numbered） ===== */
.vx-prose--seo.vx-prose--numbered{ counter-reset: h2counter; }
.vx-prose--seo.vx-prose--numbered h2{ counter-reset: h3counter; }
.vx-prose--seo.vx-prose--numbered h2::before{
  counter-increment: h2counter; content: counter(h2counter) ". ";
  color:#9ca3af; font-weight:700; margin-right:.2em;
}
.vx-prose--seo.vx-prose--numbered h3::before{
  counter-increment: h3counter; content: counter(h2counter) "." counter(h3counter) " ";
  color:#9ca3af; font-weight:700; margin-right:.2em;
}