/*----------------------------------------------------------------------*/
/* Typography Enhancement for Hacker Theme
/* 针对中文长文阅读的排版优化
/*----------------------------------------------------------------------*/

/* === 1. 字体栈优化 ===
 * 原始: "Open Sans", "Lato", "Helvetica Neue", Helvetica, "Microsoft YaHei", ...
 * 问题: Open Sans/Lato 是西文字体，中文会 fallback 到 Microsoft YaHei，整体不协调
 * 优化: 使用系统原生字体栈，macOS 用苹方/冬青，Windows 用微软雅黑，保证中西文协调
 */
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "Noto Sans SC",
    "Source Han Sans SC",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 16px;         /* 原始 14px，偏小，提升到 16px */
  line-height: 1.8;        /* 保持不变，1.8 适合中文 */
  letter-spacing: 0.02em;  /* 新增：轻微字间距，中文更透气 */
  color: #333;             /* 原始 #424242 偏浅，加深一点提高对比度 */
}

/* === 2. 内容区宽度优化 ===
 * 原始: max-width: 48.125rem (约 770px)
 * 问题: 一行约 48 个汉字，超出最佳阅读范围
 * 优化: 收窄到 42rem (约 672px)，一行约 38-40 个汉字，接近最佳阅读节奏
 */
#primary {
  max-width: 42rem;
  padding: 5rem 1.5rem 1.5rem; /* 原始左右 0.625rem 太窄，移动端需要更多留白 */
}

/* === 3. 标题字体优化 ===
 * 原始: "Open Sans", "Lato", "Helvetica Neue", "Arial", serif
 * 优化: 使用与正文一致的系统字体栈，避免中西文不协调
 */
h1, h2, h3, h4, h5, h6 {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "Noto Sans SC",
    "Source Han Sans SC",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  letter-spacing: 0.01em;
  line-height: 1.4;        /* 原始 1.2 偏紧，中文标题需要更多呼吸空间 */
}

/* === 4. 段落间距优化 ===
 * 原始: margin-top: 2rem; margin-bottom: 2rem (共 4rem 段间距)
 * 问题: 段间距过大，文章显得松散，阅读节奏断裂
 * 优化: 缩减为 1.5em，与字号挂钩，保持适度的呼吸感
 */
p {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

/* === 5. 文章内容区排版精调 === */
.Article__content {
  font-size: 16px;          /* 确保正文 16px */
  line-height: 2;           /* 正文行高提升到 2，长文阅读更舒适 */
  color: #2c2c2c;           /* 正文颜色略深于 body，增强可读性 */
}

.Article__content p {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  text-align: justify;      /* 两端对齐，中文排版更规整 */
}

/* === 6. 文章摘要优化 ===
 * 原始: font-size: 16px; color: #616161
 * 优化: 保持 16px，颜色加深，改善可读性
 */
.Article__excerpt {
  font-size: 16px;
  color: #4a4a4a;
  line-height: 1.9;
}

/* === 7. 文章标题优化 === */
.Article__title {
  font-size: 1.5rem;        /* 原始 24px 固定值，改为 rem 更灵活 */
  line-height: 1.5;         /* 原始 1.3，中文标题需要更多行距 */
  letter-spacing: 0.03em;   /* 标题字间距稍大，增加庄重感 */
  font-weight: 600;
}

/* === 8. 引用块优化 ===
 * 原始: border-left 4px + padding-left 15px，比较素
 * 优化: 增加背景色和圆角，更有层次感
 */
blockquote {
  margin: 1.5em 0;
  padding: 1em 1.2em;
  border-left: 4px solid #e8b4b4;    /* 与主题红呼应，但更柔和 */
  background-color: #faf6f6;          /* 淡暖灰背景 */
  border-radius: 0 4px 4px 0;
  color: #555;
}

blockquote p {
  margin: 0.5em 0;
  line-height: 1.9;
  text-align: justify;
}

/* === 9. 代码块优化 === */
code {
  font-family:
    "SF Mono",
    "Fira Code",
    "Cascadia Code",
    "Source Code Pro",
    Menlo,
    Monaco,
    Consolas,
    monospace;
  font-size: 0.88em;
  padding: 2px 6px;
  background-color: #f5f2f0;
  border-radius: 3px;
  color: #c0392b;
  white-space: nowrap;
}

pre {
  font-family:
    "SF Mono",
    "Fira Code",
    "Cascadia Code",
    "Source Code Pro",
    Menlo,
    Monaco,
    Consolas,
    monospace;
  padding: 1.2rem;
  margin: 1.5em 0;
  background-color: #f8f6f4;
  border-radius: 6px;
  border: 1px solid #eee;
  overflow-x: auto;
  line-height: 1.6;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
  white-space: pre;
  border-radius: 0;
}

/* === 10. 链接样式微调 === */
.Article__content a {
  color: #c0392b;
  border-bottom: 1px solid rgba(192, 57, 43, 0.2);
  transition: border-color 0.2s;
}

.Article__content a:hover {
  border-bottom-color: rgba(192, 57, 43, 0.8);
}

/* === 11. 列表优化 === */
.Article__content ul,
.Article__content ol {
  padding-left: 1.8em;
  margin: 1em 0;
}

.Article__content li {
  margin-bottom: 0.4em;
  line-height: 1.9;
}

/* === 12. 文章分隔线优化 ===
 * 原始: 纯灰线
 * 优化: 加一点渐变，更柔和
 */
.Article:not(:first-child):before {
  background: linear-gradient(to right, transparent, #e0e0e0, transparent);
  height: 1px;
}

/* === 13. 页脚间距微调 === */
.site-footer {
  margin-top: 3rem;
  padding-bottom: 2rem;
}

/* === 14. 响应式补充 ===
 * 移动端进一步优化
 */
@media (max-width: 768px) {
  body {
    font-size: 15px;
    letter-spacing: 0.01em;
  }
  #primary {
    padding: 3rem 1.2rem 1rem;
  }
  .Article {
    padding: 4rem 0;
  }
  .Article__title {
    font-size: 1.3rem;
    padding: 0 0.5rem;
  }
  blockquote {
    margin: 1em 0;
    padding: 0.8em 1em;
  }
}

/* === 15. 图片优化 === */
.Article__content img {
  border-radius: 4px;
  margin: 1.5em auto;
  display: block;
}

/* === 16. 文章元信息间距 === */
.Article__topMeta {
  margin-top: 0.8rem;
  margin-bottom: 1.5rem;
}

/* === 17. 文本选中颜色微调 ===
 * 原始: 粉红色背景 #f79292
 * 优化: 更柔和的选中色
 */
::selection {
  color: #fff;
  background-color: #d4716e;
}
::-moz-selection {
  color: #fff;
  background-color: #d4716e;
}