/* --- 全局和基础样式 --- */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 更现代的字体 */
    margin: 0;
    padding: 0;
    background-color: #f8f8f8; /* 淡雅的背景色 */
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 960px; /* 限制内容最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 20px; /* 两侧留白 */
}

a {
    color: #007bff; /* 醒目的链接颜色 */
    text-decoration: none; /* 去掉下划线 */
    transition: color 0.3s ease; /* 平滑颜色过渡 */
}

a:hover {
    color: #0056b3; /* 鼠标悬停颜色加深 */
    text-decoration: underline; /* 悬停时加下划线 */
}

img {
    max-width: 100%; /* 图片响应式 */
    height: auto;
    display: block; /* 避免图片下方出现空隙 */
}

/* --- 头部样式 --- */
.site-header {
    background-color: #343a40; /* 深色背景 */
    color: #fff;
    padding: 30px 0;
    text-align: center;
    margin-bottom: 40px; /* 与主体内容间距 */
}

.site-header h1 {
    margin: 0 0 10px 0;
    font-size: 2.8em; /* 增大标题字号 */
    font-weight: bold;
}

.site-header p {
    margin: 0;
    font-size: 1.1em;
    color: #adb5bd; /* 副标题颜色稍浅 */
}

/* --- 导航样式 --- */
.main-nav ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.main-nav li {
    display: inline-block; /* 水平排列 */
    margin: 0 15px;
}

.main-nav a {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase; /* 字母大写 */
    font-size: 0.9em;
    padding: 5px 0;
    border-bottom: 2px solid transparent; /* 准备悬停效果 */
    transition: border-bottom-color 0.3s ease;
}

.main-nav a:hover {
    color: #fff; /* 悬停时颜色不变 */
    border-bottom-color: #007bff; /* 悬停时显示下划线 */
    text-decoration: none; /* 覆盖全局 a:hover 的下划线 */
}


/* --- 主体内容样式 --- */
.main-content {
    background-color: #fff; /* 白色背景 */
    padding: 40px; /* 内边距 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 轻微阴影 */
    border-radius: 8px; /* 圆角 */
    margin-bottom: 40px;
}

.main-content h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2em;
    color: #495057; /* 标题颜色 */
    border-bottom: 2px solid #eee; /* 分隔线 */
    padding-bottom: 10px;
}

/* --- 博文预览样式 --- */
.post-preview {
    display: flex; /* 使用 Flexbox 布局 */
    margin-bottom: 50px;
    border-bottom: 1px solid #eee; /* 文章间分隔线 */
    padding-bottom: 30px;
    gap: 30px; /* 图片和文字间距 */
    align-items: flex-start; /* 顶部对齐 */
}

.post-preview:last-child {
    border-bottom: none; /* 最后一个预览下方无分隔线 */
    margin-bottom: 0;
}

.post-image {
    flex: 0 0 250px; /* 固定图片宽度，不伸缩 */
    height: 180px; /* 固定图片高度 */
    object-fit: cover; /* 裁剪图片以填充容器 */
    border-radius: 5px; /* 图片圆角 */
}

.post-content {
    flex: 1; /* 文字内容占据剩余空间 */
}

.post-content h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.6em;
}

.post-content h3 a {
    color: #333; /* 标题链接颜色 */
}

.post-content h3 a:hover {
    color: #007bff;
}

.post-meta {
    color: #868e96; /* 元信息颜色 */
    font-size: 0.9em;
    margin-bottom: 15px;
}

.post-content p {
    margin-bottom: 15px;
}

.read-more {
    display: inline-block; /* 块状显示 */
    background-color: #007bff;
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.read-more:hover {
    background-color: #0056b3;
    color: #fff;
    text-decoration: none; /* 悬停无下划线 */
}

/* --- 页脚样式 --- */
.site-footer {
    background-color: #343a40; /* 与头部一致的深色背景 */
    color: #adb5bd; /* 浅色文字 */
    text-align: center;
    padding: 20px 0;
    margin-top: 40px; /* 与主体内容间距 */
    font-size: 0.9em;
}

/* --- 响应式设计 (针对小屏幕) --- */
@media (max-width: 768px) {
    .post-preview {
        flex-direction: column; /* 垂直排列图片和文字 */
        align-items: center; /* 居中对齐 */
        text-align: center; /* 文字居中 */
    }

    .post-image {
        flex-basis: auto; /* 恢复自动宽度 */
        width: 80%; /* 限制图片宽度 */
        margin-bottom: 20px; /* 图片下方增加间距 */
    }

    .main-nav li {
        display: block; /* 导航项垂直排列 */
        margin: 10px 0;
    }
}

@media (max-width: 480px) {
    .site-header h1 {
        font-size: 2.2em;
    }
    .main-content {
        padding: 20px;
    }
    .post-content h3 {
        font-size: 1.4em;
    }
}