/* ==================== skin-blog.css ====================
   blog 皮肤专属样式 — 字体规范遵循 docs/font.md
   ======================================================= */

/* 全局基础样式：覆盖 plain.min.css 的默认 font-weight（不加 !important，
   让标题、强调等更高优先级的规则可以正常覆盖此默认值） */
* {
    font-weight: 400;
}

/* 强调元素恢复加粗，避免被上面的全局重置拉平（font.md §6.2） */
strong, b {
    font-weight: 700;
}

/* 基础字体大小变量，便于响应式缩放 */
:root {
    --blog-base-size: 1rem;          /* 默认正文 16px */
    --blog-article-size: 1.0625rem;  /* 文章正文 17px，提升可读性 */
    --blog-small-size: 0.875rem;     /* 14px，辅助/元信息 */
    --blog-meta-size: 0.75rem;       /* 12px，时间/标签小字 */
    --blog-line-height: 1.8;         /* 正文行高 */
}

/* ==================== 根字号与响应式缩放（font.md §2.1 / §13） ==================== */

html {
    font-size: 16px; /* 大屏桌面根字号 */
}

@media (max-width: 991px) {
    html { font-size: 15px; } /* 平板 */
}

@media (max-width: 767px) {
    html { font-size: 14px; } /* 大屏手机 */
    :root {
        --blog-small-size: 0.8125rem;
        --blog-meta-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    html { font-size: 13px; } /* 小屏手机 */
}

/* ==================== 中文字体栈（font.md §15） ==================== */

body {
    font-size: var(--blog-base-size);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "PingFang SC",
        "Hiragino Sans GB",
        "Microsoft YaHei",
        "WenQuanYi Micro Hei",
        sans-serif;
    line-height: 1.75; /* font.md §4.1 正文行高 */
}

/* 标题字体栈 */
h1, h2, h3, h4, h5, h6 {
    font-family:
        "PingFang SC",
        "Hiragino Sans GB",
        "Microsoft YaHei",
        "WenQuanYi Micro Hei",
        sans-serif;
}

/* 等宽字体栈（font.md §7.2） */
code, pre, kbd, samp {
    font-family:
        'JetBrains Mono',
        'Fira Code',
        'SF Mono',
        'Monaco',
        'Inconsolata',
        'Roboto Mono',
        'Source Code Pro',
        'Menlo',
        'Consolas',
        monospace;
}

/* ==================== Hero / 页面标题卡片 ==================== */

/* 首页/分类页顶部大标题（H2 级别，适度缩小） */
.blog-hero-title {
    font-size: clamp(1.25rem, 3.5vw, 1.5rem);
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    color: #111;
}

/* 顶部小字标签，如 Latest Posts / Category（font.md §9：small = 0.75rem） */
.blog-hero-label {
    font-size: var(--blog-meta-size);
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* 顶部描述文字（font.md §4：正文 1rem，行高 1.75） */
.blog-hero-desc {
    font-size: var(--blog-base-size);
    color: #666;
    line-height: 1.75;
    margin-bottom: 0;
}

/* ==================== 文章卡片 ==================== */

/* 文章卡片元信息（时间、作者、分类） */
.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    color: #777;
    font-size: var(--blog-small-size);
    margin-bottom: 0.6rem;
}

/* 文章卡片标题 h3（适度缩小） */
.blog-card-title {
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.6rem;
}

.blog-card-title a {
    color: #222;
    text-decoration: none;
}

.blog-card-title a:hover {
    color: #8a6f3c;
}

/* 置顶徽章 */
.blog-badge-top {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #222;
    color: #fff;
    font-size: var(--blog-meta-size);
    vertical-align: middle;
}

/* 文章卡片摘要 */
.blog-card-desc {
    color: #555;
    line-height: 1.7;
    margin-bottom: 0.8rem;
    font-size: var(--blog-base-size);
}

/* 阅读全文按钮增强 */
.blog-card-action {
    font-size: var(--blog-small-size);
}

/* ==================== 文章详情页 ==================== */

/* 文章详情页主标题 h1（适度缩小，阅读更舒适） */
.blog-article-header-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    margin-bottom: 0.8rem;
    line-height: 1.25;
    color: #111;
}

/* 详情页 meta 信息 */
.blog-article-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    color: #777;
    font-size: var(--blog-small-size);
}

/* 面包屑导航 */
.blog-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    color: #888;
    font-size: var(--blog-small-size);
    margin-bottom: 0.8rem;
}

.blog-breadcrumb a {
    color: #555;
    text-decoration: none;
}

.blog-breadcrumb a:hover {
    color: #8a6f3c;
}

/* 文章正文内容容器（font.md §4：article p = 1.0625rem / 行高 1.8） */
.article-content {
    font-size: var(--blog-article-size);
    line-height: var(--blog-line-height);
    color: #333;
    word-break: break-word;
}

/* 富文本中各标题字号（font.md §3 桌面端，clamp 保证移动端不撑破） */
.article-content h1 { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 700; line-height: 1.25; margin-bottom: 1.5rem; }
.article-content h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 600; line-height: 1.3; margin-bottom: 1.25rem; }
.article-content h3 { font-size: clamp(1.125rem, 2.5vw, 1.25rem); font-weight: 600; line-height: 1.35; margin-bottom: 1rem; }
.article-content h4 { font-size: clamp(1rem, 2.2vw, 1.125rem); font-weight: 500; line-height: 1.4; }
.article-content h5 { font-size: clamp(0.9375rem, 2vw, 1.0625rem); font-weight: 500; line-height: 1.45; }
.article-content h6 { font-size: clamp(0.875rem, 2vw, 1rem); font-weight: 600; line-height: 1.4; }

/* 富文本段落与列表（font.md §4 / §5） */
.article-content p {
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 1.25rem;
}

.article-content ul,
.article-content ol {
    font-size: 1rem;
    line-height: 1.6;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.article-content li {
    margin-bottom: 0.5rem;
}

.article-content li li {
    font-size: 0.9375rem; /* font.md §5：嵌套列表略小 */
}

/* 引用（font.md §6：blockquote = 1.125rem / 斜体 / 行高 1.7） */
.article-content blockquote {
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.7;
    padding-left: 1.5rem;
    border-left: 4px solid #e5e5e5;
    margin: 1.5rem 0;
}

.article-content blockquote cite {
    font-size: 0.875rem;
    font-style: normal;
    color: #666;
}

/* 行内代码（font.md §7：code = 0.875em） */
.article-content code {
    font-size: 0.875em;
    background-color: #f5f5f5;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

/* 代码块（font.md §7：pre = 0.875rem / 行高 1.6） */
.article-content pre {
    font-size: 0.875rem;
    line-height: 1.6;
    padding: 1rem;
    overflow-x: auto;
    background-color: #f8f8f8;
    border-radius: 6px;
}

/* kbd 按键（font.md §7：kbd = 0.8125rem） */
.article-content kbd {
    font-size: 0.8125rem;
    background-color: #e8e8e8;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    border: 1px solid #ccc;
}

/* ==================== 相邻文章 ==================== */

.blog-adjacent-title {
    font-size: var(--blog-small-size);
    color: #888;
    margin-bottom: 0.8rem;
}

.blog-adjacent-link {
    color: #222;
    font-weight: 700;
    text-decoration: none;
    font-size: var(--blog-base-size);
}

.blog-adjacent-link:hover {
    color: #8a6f3c;
}

.blog-adjacent-date {
    color: #777;
    font-size: var(--blog-meta-size);
}

/* ==================== 移动端整体优化（font.md §3.2 移动端字号） ==================== */

@media (max-width: 767px) {
    /* H3 移动端 */
    .blog-card-title {
        font-size: 1.1rem;
    }

    /* H1 移动端 */
    .blog-article-header-title {
        font-size: 1.5rem;
    }

    /* 文章正文移动端：1rem */
    .article-content {
        font-size: 1rem;
        max-width: none; /* 小屏取消 75ch 限制 */
    }

    /* 小屏下文章详情页容器减少内边距，提升可用宽度 */
    .blog-article-detail {
        padding: 1rem;
    }
}

/* ==================== 富文本中的表格样式 ==================== */

/* 表格外层滚动容器：处理宽表格的横向溢出，避免撑破布局 */
.article-content .table-wrapper {
    overflow-x: auto;
    max-width: 100%;
    margin: 1.2rem 0;
    border: 1px solid #e0ddd8;
    border-radius: 0.375rem;
}

/* 包裹在 .table-wrapper 内的 table 去除额外边距与圆角 */
.article-content .table-wrapper table {
    margin: 0;
    border: none;
    border-radius: 0;
}

/* 富文本中直接出现的 table（font.md §8：table = 0.9375rem） */
.article-content table {
    display: block;             /* 配合 overflow-x 实现自身横向滚动 */
    overflow-x: auto;           /* 宽表格自动出现横向滚动条，不撑破父容器 */
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;       /* font.md §8 表格字号 */
    background: #fff;
    margin: 1.2rem 0;
    border: 0px solid #e0ddd8;  /* 整体外框，使表格有明显轮廓 */
    border-radius: 0.375rem;
    overflow: hidden;           /* 配合 border-radius 裁剪四角 */
}

/* th 通用样式（font.md §8：th = 0.875rem / 600） */
.article-content th {
    background: #f5f3ef;        /* 浅暖灰色表头，与 blog 皮肤整体色调一致 */
    color: #222;
    font-size: 0.875rem;        /* font.md §8 表头字号 */
    font-weight: 600;
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid #d8d4cc;
    white-space: nowrap;        /* 表头不换行，保持列宽清晰 */
}

/* td 通用样式（font.md §8：td = 0.9375rem / 400） */
.article-content td {
    font-size: 0.9375rem;       /* font.md §8 数据单元格字号 */
    padding: 0.75rem 1rem;
    border: 1px solid #eceae4;  /* 每个单元格加边框，使表格结构一目了然 */
    vertical-align: top;
    color: #444;
}

/* 斑马纹：偶数行轻微背景区分，提升长表格可读性 */
.article-content tr:nth-child(even) td {
    background-color: #faf9f7;
}

/* 悬停高亮 */
.article-content tr:hover td {
    background-color: #f0ede7;
}