/* ============================================
 * YuFen 主题 - 文章正文排版
 * 作用：覆盖 Tailwind Typography 默认样式
 * 功能：统一标题、段落、列表、斜体的排版
 * 包含：浅色/深色模式适配、移动端响应式调整
 * 依赖：variables.css (--italic-color, --list-marker)
 * ============================================ */

/* ---------- 标题 ---------- */
.prose h1 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.75em !important;
  color: #333 !important;
}

.prose h2 {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  margin-top: 1.25em !important;
  margin-bottom: 0.5em !important;
  color: #333 !important;
}

.prose h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-top: 1em !important;
  margin-bottom: 0.5em !important;
  color: #444 !important;
}

.prose h4,
.prose h5,
.prose h6 {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-top: 0.875em !important;
  margin-bottom: 0.5em !important;
  color: #444 !important;
}

/* ---------- 段落与列表 ---------- */
.prose p {
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1em !important;
  color: #555 !important;
}

.prose ul,
.prose ol {
  margin-top: 0.5rem !important;
  margin-bottom: 0.75rem !important;
  padding-left: 2em !important;
}

.prose li {
  font-size: 0.9rem !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

/* 无序列表标记颜色 */
.prose ul > li::marker {
  color: var(--list-marker) !important;
}

/* 二级无序列表：方形标记 */
.prose ul ul {
  list-style-type: square !important;
}

/* 三级无序列表：圆形标记（循环） */
.prose ul ul ul {
  list-style-type: disc !important;
}

/* ---------- 斜体 ---------- */
/* Obsidian Border 主题：斜体橙色 */
.prose em {
  color: var(--italic-color) !important;
}

/* ---------- 深色模式 ---------- */
.dark .prose h1,
.dark .prose h2 {
  color: #e0e0e0 !important;
}

.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
  color: #d0d0d0 !important;
}

.dark .prose p {
  color: #b0b0b0 !important;
}

/* ---------- 移动端响应式 ---------- */
@media (max-width: 768px) {
  .article-title,
  .prose h1 {
    font-size: 1.25rem !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.6rem !important;
  }

  .prose h2 {
    font-size: 1.1rem !important;
    margin-top: 1rem !important;
    margin-bottom: 0.4rem !important;
  }

  .prose h3 {
    font-size: 1rem !important;
    margin-top: 0.875rem !important;
    margin-bottom: 0.4rem !important;
  }

  .prose p {
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
    margin-top: 0.4rem !important;
    margin-bottom: 0.6rem !important;
  }

  .prose ul,
  .prose ol {
    margin-top: 0.4rem !important;
    margin-bottom: 0.6rem !important;
    padding-left: 1.25rem !important;
  }

  .prose li {
    font-size: 0.85rem !important;
    margin-top: 0.2rem !important;
    margin-bottom: 0.2rem !important;
  }

  header.mb-6,
  .article-header {
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.75rem !important;
  }

  .article-meta,
  .text-sm.text-gray-400 {
    font-size: 0.75rem !important;
  }
}