/*
 * Theme Name: Wanderer Minimalist
 * Theme URI: https://cai.im/blog/wanderer/
 * Description: 复刻 cai.im 的极简、优雅、单栏大留白 Typecho 响应式主题（无导航紧凑版）。
 * Author: Gemini & Jimmy Cai Design Inspired
 * Version: 1.0.1
 */

/* 基础重置 */
*, *::before, *::after {
    box-sizing: border-box;
}
body, h1, h2, h3, h4, ul, ol, p, figure {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Serif CJK SC", "Noto Sans CJK SC", serif;
    background-color: #faf8f5;
    color: #2c2a29;
    line-height: 1.8;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: #2c2a29;
    text-decoration: none;
    transition: color 0.2s ease;
    border-bottom: 1px dashed #ccc;
}
a:hover {
    color: #8c8273;
    border-bottom-style: solid;
}

/* 页面总容器 */
.container {
    max-width: 680px;
    margin: 0 auto;
    padding: 50px 24px; /* 略微收紧顶部整体边距 */
}

/* 【优化】头部区块间距调整 */
/* ==========================================================================
   【优化】头部区块样式 - 头像与名称并排居中
   ========================================================================== */
.site-header {
    margin-bottom: 50px; /* 控制整个头部与下方内容区块的间距 */
}

.site-brand {
    display: flex;
    align-items: center; /* 确保头像和文字在虚拟水平线上完美居中对齐 */
    gap: 14px;           /* 控制头像和网站名称之间的右侧间距 */
}

.avatar-link {
    border: none;        /* 移除头像外层链接可能产生的虚线 */
    display: inline-block;
    flex-shrink: 0;      /* 防止头像在极其狭窄的屏幕下被挤压变形 */
}

.site-avatar {
    width: 42px;         /* 稍微缩小了头像尺寸，使其与单行文字高度比例更协调 */
    height: 42px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}

.site-title {
    font-size: 18px;     /* 调整字体大小，使之与 42px 的头像视觉分量持平 */
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1;      /* 去除行高造成的上下多余留白 */
}

.site-title a {
    border: none;        /* 保持网站名没有底部的下划虚线 */
    color: #2c2a29;
}

/* 移动端小屏针对性优化 */
@media (max-width: 600px) {
    .site-header {
        margin-bottom: 35px; /* 移动端下稍微收紧与列表的间距 */
    }
}

/* 文章列表 (Index / Archive) */
/* ==========================================================================
   【优化】文章列表区块 (Index / Archive) - 左右两端对齐
   ========================================================================== */
.post-list {
    margin-bottom: 40px;
}

.post-item {
    display: flex;
    justify-content: space-between; /* 核心：左边推到最左，右边推到最右 */
    align-items: baseline;          /* 确保标题文字底部与日期底部完美对齐 */
    padding: 12px 0;
    border-bottom: 1px dashed #edeae6; /* 每篇文章加一条极淡的虚线，增加秩序感 */
}
.post-item:last-of-type {
    border-bottom: none;            /* 最后一篇文章去掉虚线 */
}

.post-item-title {
    font-size: 16px;
    font-weight: 400;               /* 降低粗细，使其更偏向极致极简的文青感 */
    max-width: 75%;                 /* 限制标题最大宽度，防止和右侧日期撞车 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;        /* 万一标题过长，自动在末尾显示省略号 */
}
.post-item-title a {
    border: none;
    color: #2c2a29;
}
.post-item-title a:hover {
    color: #8c8273;
}

.post-item-meta {
    font-size: 14px;
    color: #9c9a96;
    font-variant-numeric: tabular-nums; /* 确保数字等宽，日期排版更整齐 */
    flex-shrink: 0;                 /* 防止日期被挤压换行 */
}


/* ==========================================================================
   【优化】全新分页显示方式样式
   ========================================================================== */
.pagination-container {
    margin-top: 60px;
    padding-top: 20px;
}

.pagination {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;               /* 允许小屏移动端页码过多时自动换行 */
    gap: 8px;                      /* 统一控制页码之间的间距 */
    font-size: 14px;
}

.pagination li {
    display: inline-block;
}

/* 页码、文字、省略号基本样式 */
.pagination a, 
.pagination span,
.pagination .current {
    display: inline-block;
    padding: 4px 10px;
    color: #7c7a77;
    border-radius: 4px;
    transition: all 0.2s ease;
    border: none;
}

/* 悬浮与当前页状态 */
.pagination a:hover {
    background-color: #eee9e2;
    color: #2c2a29;
}

.pagination .current {
    background-color: #2c2a29;    /* 当前页采用反白深色底，显眼且克制 */
    color: #faf8f5;
    font-weight: 500;
}


/* ==========================================================================
   移动端小屏特殊适配
   ========================================================================== */
@media (max-width: 600px) {
    .post-item {
        padding: 10px 0;           /* 移动端稍微收紧上下间距 */
    }
    .post-item-title {
        font-size: 15px;           /* 移动端字号稍微缩小，防止长标题被截断太多 */
        max-width: 70%;
    }
    .post-item-meta {
        font-size: 13px;
    }
    .pagination {
        font-size: 13px;           /* 移动端分页字号缩小，更容易单行排开 */
        gap: 4px;
    }
    .pagination a, .pagination span, .pagination .current {
        padding: 4px 6px;          /* 减小内边距，防止移动端放不下 */
    }
}


/* 文章内页 (Post / Page) */
.article-header {
    margin-bottom: 35px;
}
.article-title {
    font-size: 26px;
    line-height: 1.4;
    font-weight: 600;
    color: #1c1a19;
    margin-bottom: 8px;
}
.article-meta {
    font-size: 14px;
    color: #8c8a86;
}
.article-content {
    font-size: 16px;
    color: #2c2a29;
    word-wrap: break-word;
}
.article-content p {
    margin-bottom: 24px;
    text-align: justify;
}
.article-content h2 {
    font-size: 20px;
    margin: 35px 0 15px 0;
    font-weight: 600;
}
.article-content h3 {
    font-size: 18px;
    margin: 25px 0 12px 0;
    font-weight: 600;
}
.article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 25px auto;
    border-radius: 4px;
}

/* ==========================================================================
   【优化】文章内页 - “代码区块”极简高级感样式
   ========================================================================== */
/* 针对多行代码块的容器 */
.article-content pre {
    position: relative;          /* 用于左上角“<”符号的绝对定位参照 */
    background-color: #f2ede4;   /* 略深于网页背景的温暖灰泥色，提供极佳的对比度 */
    border-radius: 8px;          /* 完美的现代圆角方框包裹 */
    padding: 40px 20px 20px 20px;/* 顶部留出 40px 的高额空间，给左上角符号和呼吸感 */
    margin: 30px 0;              /* 上下段落间距 */
    overflow-x: auto;            /* 当代码过长时，移动端自动开启横向滚动条 */
    border: 1px solid #ede5d9;   /* 极淡的精致边框，锁定边界感 */
}

/* 代码块内部的字体排版 */
.article-content pre code {
    font-family: "Fira Code", "Consolas", "Monaco", "Courier New", monospace; /* 选用优秀的等宽字体 */
    font-size: 14px;             /* 代码字号稍微缩小，更显精致 */
    color: #4a4744;              /* 深炭灰色，看代码不刺眼 */
    line-height: 1.6;
    display: block;
    background: none;            /* 清除可能存在的行内代码背景 */
    padding: 0;
    border-radius: 0;
}

/* 【核心】左上角增加“<”符号表示代码区块 */
.article-content pre::before {
    content: "<";                /* 使用尖括号符号 */
    position: absolute;
    top: 12px;                   /* 完美居于左上角 */
    left: 18px;
    font-family: "Consolas", "Monaco", monospace; /* 强制等宽代码体，保持符号硬朗 */
    font-size: 18px;             /* 适中的字号 */
    font-weight: 600;            /* 加粗使其更醒目 */
    color: #bfae99;              /* 极淡的沙滩金褐色，优雅不夺主 */
    line-height: 1;
}

/* 补充优化：单行行内代码（如文章中穿插的 `code`） */
.article-content :not(pre) > code {
    background-color: #f2ede4;   /* 与大代码块保持同色系 */
    color: #bd5151;              /* 行内代码文字给一抹克制的暗红色提示 */
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    font-family: "Fira Code", "Consolas", monospace;
    word-break: break-word;
}

/* 移动端小屏针对性微调 */
@media (max-width: 600px) {
    .article-content pre {
        padding: 35px 14px 14px 14px; /* 移动端适当收紧内边距 */
        margin: 20px 0;
        border-radius: 6px;
    }
    .article-content pre code {
        font-size: 13px;         /* 移动端代码字号微调，减少换行 */
    }
    .article-content pre::before {
        font-size: 16px;
        top: 10px;
        left: 14px;
    }
}

/* ==========================================================================
   【优化】文章内页 - “引用区块”高级杂志感样式
   ========================================================================== */
.article-content blockquote {
    position: relative;          /* 用于左上角大引号的绝对定位参照 */
    background-color: #f5f2ec;   /* 比网页背景稍微深一点的温暖灰褐色，低调内敛 */
    border-radius: 8px;          /* 完美的现代圆角方框包裹 */
    padding: 30px 24px 20px 45px;/* 调整内边距，左侧多留出空间（45px）给大引号 */
    margin: 30px 0;              /* 上下与其他正文段落拉开呼吸感间距 */
    color: #5c5a56;              /* 引用文字颜色稍淡，与普通正文做视觉区分 */
    font-style: normal;          /* 移除中文斜体的不适感，依靠布局来体现引用 */
    border-left: none;           /* 移除旧版单调的左侧边框线 */
}

/* 引用区块里的段落缩进处理 */
.article-content blockquote p {
    margin-bottom: 0;            /* 消除引用块内部段落的多余底部边距 */
    font-size: 15px;             /* 引用字号稍微缩小一码，更显精致 */
    text-align: justify;
}

/* 【核心】左上角增加“优雅的巨型引号”表示引用 */
.article-content blockquote::before {
    content: "“";                /* 使用中文大双引号作为符号 */
    position: absolute;
    top: 10px;                   /* 定位到左上角 */
    left: 14px;
    font-size: 48px;             /* 极具视觉冲击力的大字号 */
    font-family: "Georgia", serif; /* 强制使用经典衬线体，让引号线条呈现优雅的弧度 */
    color: #ccbead;              /* 引号颜色极淡，高级、不突兀，不干扰视线 */
    line-height: 1;
}

/* 移动端小屏针对性微调 */
@media (max-width: 600px) {
    .article-content blockquote {
        padding: 24px 16px 16px 36px; /* 移动端适当缩小内边距，防止方框显得太拥挤 */
        margin: 20px 0;
    }
    .article-content blockquote::before {
        font-size: 38px;         /* 移动端缩小引号字号 */
        top: 8px;
        left: 10px;
    }
    .article-content blockquote p {
        font-size: 14px;         /* 移动端引用字体自适应缩小 */
    }
}


/* 页脚样式 */
.site-footer {
    margin-top: 80px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #9c9a96;
    text-align: center;
}
.site-footer a {
    border: none;
    color: #7c7a77;
}

/* 移动端小屏极致适配优化 */
@media (max-width: 600px) {
    .container {
        padding: 35px 20px;
    }
    .site-header {
        margin-bottom: 30px; /* 移动端下间距进一步收紧，避免首屏空白过多 */
    }
    .article-title {
        font-size: 22px;
    }
    .article-content {
        font-size: 15px;
    }
}
/* ==========================================================================
   【新增】404 错误页面样式
   ========================================================================== */
.error-container {
    min-height: 40vh;    /* 让错误内容在垂直方向上占据合适的高度，保持视觉居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 0;
}

.error-body {
    max-width: 400px;
}

.error-code {
    font-size: 64px;     /* 大字号但选用柔和的颜色，高级而不刺眼 */
    font-weight: 300;
    color: #ccbead;      /* 淡淡的泥土沙滩色 */
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.error-message {
    font-size: 15px;
    color: #7c7a77;      /* 与正文接近的灰色 */
    margin-bottom: 35px;
    letter-spacing: 0.5px;
}

/* 返回主页的优雅按钮 */
.back-home-btn {
    display: inline-block;
    padding: 8px 24px;
    font-size: 14px;
    color: #faf8f5;
    background-color: #2c2a29; /* 经典的克制黑底 */
    border: none;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.back-home-btn:hover {
    background-color: #4a4744;
    color: #faf8f5;
    transform: translateY(-1px); /* 轻微的悬浮上升反馈 */
}

/* 移动端 404 微调 */
@media (max-width: 600px) {
    .error-container {
        min-height: 35vh;
    }
    .error-code {
        font-size: 48px;
    }
    .error-message {
        font-size: 14px;
        padding: 0 10px;
    }
}

/* ==========================================================================
   【新增】自定义归档页面样式（层级缩进）
   ========================================================================== */
/* ==========================================================================
   【修正】自定义归档页面样式（精准阶梯缩进版）
   ========================================================================== */
.archive-timeline {
    margin-bottom: 60px;
}

.timeline-container {
    margin-top: 30px;
}

/* 一级：年份（不缩进） */
.archive-year {
    font-size: 20px;
    font-weight: 600;
    color: #1c1a19;
    margin: 40px 0 15px 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* 二级：月份（相对年份缩进 20px，月份彼此垂直对齐） */
.archive-month {
    font-size: 15px;
    font-weight: 500;
    color: #8c8273;          /* 优雅的沙滩灰褐色 */
    margin: 20px 0 10px 0;
    padding-left: 20px;      /* 核心缩进 */
}

/* 三级：文章条目（相对月份再缩进 20px，即总共缩进 40px） */
.archive-post-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    margin-left: 40px;       /* 核心缩进 */
    border-bottom: 1px dashed #f1eee9;
}
.archive-post-item:last-of-type {
    border-bottom: none;
}

.archive-post-title {
    font-size: 15px;
    color: #2c2a29;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
}
.archive-post-title:hover {
    color: #8c8273;
}

.archive-post-date {
    font-size: 13px;
    color: #9c9a96;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* 移动端针对性微调：稍微收窄缩进，给小屏幕标题留出空间 */
@media (max-width: 600px) {
    .archive-year {
        font-size: 18px;
    }
    .archive-month {
        padding-left: 14px;  /* 移动端一级缩进 */
    }
    .archive-post-item {
        margin-left: 28px;   /* 移动端二级缩进 */
        padding: 10px 0;     /* 稍微扩大触控间距 */
    }
    .archive-post-title {
        font-size: 14px;
        max-width: 72%;
    }
}