/* === 全局设置 === */
body {
    background: rgba(12, 100, 129, 1) url('https://i.bobopic.com/tx_bobopic/140260304_bobopic.jpg') fixed no-repeat;
    background-position: 120% 100%;
    background-size: cover;
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", sans-serif;
}

/* === 主容器 - 包含顶栏、左侧边栏和右侧内容 === */
#home {
    width: 90%;
    max-width: 1400px;
    min-width: 980px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;  /* 确保圆角效果 */
    padding: 0;  /* 移除内边距，由内部元素控制 */
}

/* === 顶栏区域（固定在最上方） === */
#header {
    width: 100%;
    background-color: rgba(33, 160, 139, 0.95);
    color: white;
    padding: 0;
    margin: 0;
    border-bottom: 3px solid rgba(255, 255, 255, 0.3);
}

/* 博客标题 */
#blogTitle {
    padding: 20px 30px;
    background-color: transparent;
    height: auto;
}

#blogTitle h1 {
    font-size: 42px;
    font-weight: bold;
    color: white;
    margin: 0;
    line-height: 1.3;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

#blogTitle h2 {
    font-size: 18px;
    color: #f0f0f0;
    margin: 5px 0 0 0;
    font-weight: normal;
    float: none;  /* 取消浮动 */
    text-align: left;
}

/* 导航栏 */
#navigator {
    background-color: rgba(26, 128, 112, 0.95);
    padding: 0 20px;
    clear: both;
}

#navList {
    margin: 0;
    padding: 0;
    list-style: none;
}

#navList li {
    float: left;
    margin-right: 30px;
}

#navList a {
    display: inline-block;
    color: white !important;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 0;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}

#navList a:hover {
    border-bottom-color: white;
    background-color: transparent;
}

/* 博客统计信息 */
.blogStats {
    float: right;
    color: #e0e0e0;
    padding: 12px 0;
    font-size: 14px;
}

/* 清除浮动 */
#header:after {
    content: "";
    display: table;
    clear: both;
}

/* === 主体布局：左侧边栏 + 右侧文章 === */
#main {
    width: 100%;
    display: flex;  /* 使用flex布局实现左右并排 */
    min-height: 600px;
    padding: 0;
    margin: 0;
    background-color: transparent;
}

/* === 左侧边栏（所有侧边内容都在这里） === */
#sideBar {
    width: 280px;  /* 固定宽度 */
    background-color: rgba(245, 245, 245, 0.7);
    padding: 25px 20px;
    box-sizing: border-box;  /* 确保padding不影响宽度 */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/* 侧边栏所有模块统一样式 */
#sideBar .newsItem,
#sideBar .catListEssay,
#sideBar .catListLink,
#sideBar .catListNoteBook,
#sideBar .catListTag,
#sideBar .catListPostCategory,
#sideBar .catListPostArchive,
#sideBar .catListImageCategory,
#sideBar .catListArticleArchive,
#sideBar .catListView,
#sideBar .catListFeedback,
#sideBar .mySearch,
#sideBar .catListComment,
#sideBar .catListBlogRank,
#sideBar .catList,
#sideBar .catListArticleCategory,
#sideBar #blog-calendar {
    background: white;
    margin-bottom: 25px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: left;  /* 强制左对齐 */
}

/* 侧边栏标题 */
#sideBar .catListTitle {
    background-color: rgba(33, 160, 139, 0.9);
    color: white;
    padding: 10px 15px;
    margin: -15px -15px 15px -15px;  /* 扩展到底色边缘 */
    border-radius: 8px 8px 0 0;
    font-size: 16px;
    font-weight: bold;
}

/* 日历样式修复 */
#blog-calendar {
    text-align: left;
}

.CalTitle {
    background-color: rgba(33, 160, 139, 0.7) !important;
    color: white !important;
    padding: 8px !important;
    text-align: center !important;  /* 日历标题保持居中 */
}

.CalNextPrev {
    text-align: center;
    background: transparent !important;
}

/* === 右侧文章内容区 === */
#mainContent {
    flex: 1;  /* 自动填充剩余宽度 */
    padding: 30px 25px;
    background-color: rgba(255, 255, 255, 0.5);
    min-width: 0;  /* 防止flex溢出 */
}

/* 每日文章块 */
.day {
    background: white;
    padding: 20px 25px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 文章标题 */
.postTitle {
    border-left: 6px solid rgba(33, 160, 139, 0.8);
    padding-left: 15px;
    margin-bottom: 15px;
    font-size: 22px;
}

.postTitle a {
    color: #21759b !important;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}

.postTitle a:hover {
    color: #0f3647 !important;
    margin-left: 5px;
}

/* 文章内容摘要 */
.postCon {
    line-height: 1.6;
    color: #333;
    padding: 0 5px;
}

/* 文章附加信息（日期、评论等） */
.postDesc {
    color: #888;
    font-size: 13px;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px dashed #ddd;
    text-align: left;
}

/* 独立文章页样式 */
#topics {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 评论框 */
#tbCommentBody {
    width: 100%;
    height: 150px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
}

/* 隐藏广告 */
.c_ad_block, #ad_t2, #under_post_news, #under_post_kb {
    display: none !important;
}

/* 代码块样式 */
.cnblogs_code {
    background: #f8f8f8 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 5px;
    padding: 15px !important;
}

.cnblogs_code pre {
    font-family: Consolas, monospace;
    font-size: 13px;
}

/* 响应式调整：如果屏幕太小，侧边栏宽度固定 */
@media screen and (max-width: 1100px) {
    #home {
        min-width: 0;
        width: 95%;
    }
    #sideBar {
        width: 250px;
    }
}