/* --- 1. 基础重置与字体 --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background-color: #f7f9fe; /* 清爽的浅色背景 */
    color: #333;
    font-family: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", sans-serif; /* 之前说的思源宋体 */
    line-height: 1.6;
}

/* --- 2. 核心 CSS Grid 网格布局 --- */
.main-container {
    display: grid;
    /* 划重点：左栏 240px，中间自适应剩下的空间，右栏 240px */
    grid-template-columns: 200px 1fr 220px; 
    gap: 30px; /* 三栏之间的间距 */
    max-width: 1350px; /* 网站最大宽度 */
    margin: 40px auto; /* 上下留白，左右居中 */
    padding: 0 20px;
    align-items: start; /* 让左右侧边栏能在顶部对齐 */
}

/* --- 3. 左右侧边栏的通用样式 --- */
.sidebar-left, .sidebar-right {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 加一点优雅的微阴影 */
    /* 精髓：向下滚动时，侧边栏会吸附在屏幕上，不会滚走 */
    position: sticky; 
    top: 40px; 
}

/* 简单的左侧内部样式预览 */
.avatar { width: 100px; height: 100px; border-radius: 50%; display: block; margin: 0 auto; }
.author-name { text-align: center; margin-top: 10px; font-size: 1.2rem; }
.site-nav { display: flex; flex-direction: column; margin-top: 20px; gap: 10px; text-align: center; }
.site-nav a { text-decoration: none; color: #555; }
.site-nav a:hover { color: #000; font-weight: bold; }

/* 简单的中间区样式预览 */
.content-mid {
    background: #fff;
    border-radius: 12px;
    /* 原来是 padding: 40px; 可以改成上下 40px，左右 30px */
    padding: 40px 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    min-height: 80vh; /* 保证高度足够好看 */
}

/* --- 4. 移动端适配 (响应式) --- */
@media (max-width: 900px) {
    .main-container {
        /* 当屏幕变窄（手机/平板），直接变成单列排列：左 -> 中 -> 右 */
        grid-template-columns: 1fr; 
    }
    .sidebar-left, .sidebar-right {
        position: static; /* 取消吸附效果 */
    }
}

/* --- 首页文章卡片样式 --- */
.post-card {
    background: #fff;
    padding: 30px 0;
    border-bottom: 1px solid #eee; /* 文章之间加一条浅色分割线 */
}
.post-card:last-child {
    border-bottom: none;
}
.post-title a {
    color: #222;
    text-decoration: none;
    font-size: 1.6rem;
    transition: color 0.3s ease;
}
.post-title a:hover {
    color: #d84b6b; /* 悬浮时变成喵神博客那种暗红色 */
}
.post-meta {
    color: #999;
    font-size: 0.9rem;
    margin: 10px 0 15px 0;
}
.post-excerpt {
    color: #555;
    margin-bottom: 20px;
}
.read-more {
    display: inline-block;
    padding: 8px 16px;
    background: #f4f4f4;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.3s;
}
.read-more:hover {
    background: #333;
    color: #fff;
}

/* --- 翻页组件样式 --- */
.paginator {
    margin-top: 40px;
    text-align: center;
}
.paginator a, .paginator span {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    background: #fff;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
}
.paginator .current {
    background: #333;
    color: #fff;
}

/* --- 文章详情页样式 --- */
.post-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.post-header .post-title {
    font-size: 2rem;
    margin-bottom: 15px;
}
/* =========================================================
   美化左侧边栏 (头像与导航)
========================================================= */
.avatar-box {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eee;
}
.avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.5s ease;
}
.avatar:hover {
    transform: rotate(360deg); /* 悬浮时头像转圈小动画 */
}
.author-name {
    margin-top: 15px;
    font-size: 1.3rem;
    color: #222;
    font-weight: bold;
}
.author-bio {
    margin-top: 5px;
    font-size: 0.85rem;
    color: #888;
}

.site-nav {
    display: flex;
    flex-direction: column;
    margin-top: 15px; /* 稍微缩小顶部间距 */
    gap: 4px;        /* 缩小项与项之间的间距，防止列表过长溢出容器 */
}

.site-nav a {
    display: flex;
    align-items: center;
    padding: 8px 15px; /* 缩小上下内边距 */
    color: #555;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 0.9rem; /* 稍微调小一点字号，看起来更精致 */
}

/* 如果菜单实在太多，可以让侧边栏内部产生滚动条 */
.sidebar-left {
    max-height: calc(100vh - 80px); /* 限制高度为屏幕高度减去边距 */
    overflow-y: auto;               /* 内容多时自动出现滚动条 */
}

/* 隐藏侧边栏那条丑陋的滚动条，但保留滚动功能 */
.sidebar-left::-webkit-scrollbar {
    width: 0px;
}
.site-nav a span {
    margin-right: 12px;
    font-size: 1.1rem;
}
.site-nav a:hover {
    background: #f4f6f9;
    color: #d84b6b; /* 悬浮变色 */
    transform: translateX(5px); /* 悬浮时菜单稍微向右位移，增加互动感 */
}

.social-links {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 15px;
}
.social-links a {
    font-size: 0.85rem;
    color: #fff;
    background: #444;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.3s;
}
.social-links a:hover {
    background: #d84b6b;
}

/* =========================================================
   友链页面网格样式 (取代你原来的行内 Style)
========================================================= */
.link-navigation {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.link-card-wrap {
    text-decoration: none;
    display: block;
}
.card {
    border: 1px solid #f0f0f0;
    padding: 20px 15px;
    border-radius: 12px;
    transition: all 0.3s;
    text-align: center;
    background: #fff;
    height: 100%;
}
.card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transform: translateY(-5px);
    border-color: #d84b6b;
}
.card img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 15px;
    object-fit: cover;
}
.card-text h4 {
    margin: 0 0 5px;
    color: #333;
    font-size: 1.1rem;
}
.card-text p {
    font-size: 0.85rem;
    color: #777;
    margin: 0;
    /* 超出两行显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================
   右侧挂件通用样式
========================================================= */
.widget {
    margin-bottom: 25px;
}
.widget h3 {
    font-size: 1rem;
    color: #444;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
}
.widget h3 i {
    margin-right: 8px;
}

/* --- 文章目录 TOC 特化样式 --- */
.toc-content {
    max-height: 70vh;
    overflow-y: auto;
}
.toc-content .toc {
    padding: 0;
    list-style: none;
}
.toc-content .toc-item {
    margin: 5px 0;
}
.toc-content .toc-link {
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s;
    display: block;
    line-height: 1.4;
}
.toc-content .toc-link:hover {
    color: #d84b6b;
    padding-left: 5px;
}
/* 层级缩进 */
.toc-child {
    padding-left: 15px;
    list-style: none;
}

/* --- 标签云样式 --- */
.tags-cloud a {
    display: inline-block;
    margin: 4px;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 4px;
    transition: transform 0.2s;
}
.tags-cloud a:hover {
    transform: scale(1.1);
    background: #f0f0f0;
}

/* --- 极简日历样式 --- */
.calendar-container {
    background: #fff;
    text-align: center;
}
.calendar-header {
    font-weight: bold;
    margin-bottom: 10px;
    color: #d84b6b;
}
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 5px;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.calendar-grid span {
    font-size: 0.85rem;
    padding: 5px 0;
    border-radius: 4px;
}
.calendar-grid .today {
    background: #d84b6b;
    color: #fff;
    font-weight: bold;
}

/* =========================================================
   文章内代码高亮 (Highlight.js) 深度美化
========================================================= */
/* 整体代码外框 */
.content.markdown figure.highlight {
    background: #282c34; /* Atom One Dark 的经典背景色 */
    border-radius: 8px;  /* 圆角 */
    margin: 25px 0;
    padding: 15px 0;
    overflow-x: auto;    /* 代码过长时允许左右滑动 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* 增加一点悬浮立体感 */
}

/* 消除内部表格的默认间距 */
.content.markdown figure.highlight table {
    border-spacing: 0;
    width: 100%;
    margin: 0;
    border: none;
}
.content.markdown figure.highlight td {
    border: none;
    padding: 0;
}

/* 统一字体设置：推荐使用等宽编程字体 */
.content.markdown figure.highlight pre {
    margin: 0;
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 🎯 左侧行号区域美化 */
.content.markdown figure.highlight .gutter pre {
    color: #636d83; /* 行号颜色稍微暗一点，不喧宾夺主 */
    text-align: right;
    padding: 0 15px;
    border-right: 1px solid #3e4451; /* 行号和代码之间加一条细分隔线 */
    margin-right: 15px;
}

/* 右侧代码主体区域 */
.content.markdown figure.highlight .code pre {
    color: #abb2bf; /* 基础代码文字颜色 */
    padding-right: 15px;
}

/* 🎯 底部滚动条美化（让它在 Windows 上也能像 Mac 一样细致） */
.content.markdown figure.highlight::-webkit-scrollbar {
    height: 8px;
}
.content.markdown figure.highlight::-webkit-scrollbar-track {
    background: #282c34;
    border-radius: 0 0 8px 8px;
}
.content.markdown figure.highlight::-webkit-scrollbar-thumb {
    background: #4b5363; /* 滚动条颜色 */
    border-radius: 4px;
}
.content.markdown figure.highlight::-webkit-scrollbar-thumb:hover {
    background: #5c6370;
}

/* 补充：对于单行行内代码 (如 `code`) 的高亮 */
.content.markdown p code, .content.markdown li code {
    background: #f4f5f6;
    color: #d84b6b; /* 使用你主题里的那抹暗红色 */
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', monospace;
    font-size: 0.9em;
    word-break: break-all;
}
/* =========================================================
   归档页面 (Archive) 特化样式
========================================================= */
.archive-container {
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    min-height: 80vh;
}

/* 居中大写的年份标题 */
.archive-year {
    text-align: center;
    font-size: 1.8rem;
    color: #222;
    margin: 40px 0 30px 0;
    font-family: "Noto Serif SC", serif; /* 使用宋体更显文艺 */
}
.archive-year:first-child {
    margin-top: 10px;
}

/* 让列表项横向排列，自动换行 */
.archive-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px; /* 上下间距 20px，左右间距 30px */
    justify-content: flex-start;
}

/* 单个文章条目 */
.archive-item {
    font-size: 0.95rem;
    line-height: 1.8;
}

/* 日期样式：变成淡灰色，并使用等宽字体对齐 */
.archive-item time {
    color: #999;
    margin-right: 8px;
    font-family: 'Consolas', 'Courier New', monospace;
}

/* 🎯 标题样式：经典的虚线下划线 */
.archive-item a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px dashed #999; /* 关键：虚线下划线 */
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.archive-item a:hover {
    color: #d84b6b; /* 悬浮时变色 */
    border-bottom-color: #d84b6b;
}