/* ============================================
   博客园自定义样式 - 完整版
   包含：全局背景、隐藏默认顶栏、侧边栏抽屉效果、
   自定义顶栏、管理按钮、文章日期样式优化等
   ============================================ */

/* === 1. 全局背景设置 === */
body {
    /* 背景图片和颜色：您可以更换 background-image 的 URL 来换背景图 */
    background: rgba(12, 100, 129, 1) url('https://images.cnblogs.com/cnblogs_com/blogs/859872/galleries/2499800/o_260323093403_1747037196965174703719685.png') fixed no-repeat;
    background-position: 120% 100%;
    background-size: cover;
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", sans-serif;
}

/* === 2. 隐藏博客园默认顶栏和导航（保留管理按钮功能，但隐藏原按钮） === */
/* 注意：这里隐藏了原管理按钮，但我们在自定义顶栏添加了新的管理入口 */
#blog_nav_rss,
#blog_nav_contact,
#blog_nav_home,
#navigator,
.top-nav,
.navbar,
#header,
#blogTitle,
.blogStats,
#navList,
.menu,
#topblock,
#topmenu,
#topnav,
#header_wrapper,
.page-header,
.nav-header,
/* 隐藏原管理按钮，因为我们有自定义的 */
#blog_nav_admin,
#blog_nav_newpost {
    display: none !important;
}

/* === 3. 主容器 - 包含左侧边栏和右侧内容 === */
#home {
    width: 90%;
    max-width: 1400px;
    min-width: 980px;
    margin: 0 auto;
    margin-top: 20px;
    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;
    position: relative;
}

/* === 4. 主体布局（左侧边栏 + 右侧内容区） === */
#main {
    width: 100%;
    display: flex;
    min-height: 600px;
    padding: 0;
    margin: 0;
    background-color: transparent;
    position: relative;
}

/* === 5. 左侧边栏 - 抽屉效果（默认隐藏，点击按钮显示） === */
#sideBar {
    width: 280px;
    background-color: rgba(245, 245, 245, 0.95);
    padding: 25px 20px;
    box-sizing: border-box;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    position: fixed;
    left: -300px;          /* 默认隐藏在左侧外 */
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: left 0.3s ease;
    z-index: 1000;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

/* 侧边栏显示状态（通过 JS 添加 .active 类） */
#sideBar.active {
    left: 0;
}

/* 遮罩层 - 点击菜单时显示的半透明背景 */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.menu-overlay.active {
    display: block;
}

/* 侧边栏所有模块的统一样式（卡片效果） */
#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 {
    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 #blog-calendar,
#sideBar .catListPostArchive,
#sideBar .catListBlogRank {
    display: none !important;
}

/* 侧边栏模块标题样式（半透明灰色底） */
#sideBar .catListTitle {
    background-color: rgba(100, 100, 100, 0.25) !important;
    color: #555 !important;
    padding: 10px 15px;
    margin: -15px -15px 15px -15px;
    border-radius: 8px 8px 0 0;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ========== 6. 左侧头像区域样式（可选） ========== */
.avatar-area {
    background: white;
    margin-bottom: 25px;
    padding: 20px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
}

/* 头像图片：更换 src 即可换头像 */
.avatar-area .avatar-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(100, 100, 100, 0.3);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
}

.avatar-area .avatar-name {
    font-size: 20px;
    font-weight: bold;
    color: #555;
    margin: 10px 0 5px;
}

.avatar-area .avatar-bio {
    font-size: 14px;
    color: #888;
    line-height: 1.5;
    margin-top: 8px;
}

/* 博客园个人资料区域样式优化 */
#profile_block {
    background: white;
    margin-top: 0;
    margin-bottom: 25px;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 13px;
    color: #777;
    line-height: 1.8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#profile_block a {
    color: #888;
    text-decoration: none;
}

#profile_block a:hover {
    color: #555;
    text-decoration: underline;
}

/* === 7. 右侧文章内容区 === */
#mainContent {
    flex: 1;
    padding: 30px 25px;
    background-color: rgba(255, 255, 255, 0.5);
    min-width: 0;
    transition: margin-left 0.3s ease;
}

/* 每日文章块（列表页） */
.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(100, 100, 100, 0.5);
    padding-left: 15px;
    margin-bottom: 15px;
    font-size: 22px;
}

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

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

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

/* 文章附加信息（阅读更多、日期等） */
.postDesc {
    color: #999;
    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;
}

/* === 8. 菜单按钮样式（固定在右上角，用于打开侧边栏） === */
.menu-toggle-btn {
    position: fixed;
    right: 20px;
    top: 20px;
    background: rgba(80, 80, 80, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s;
    z-index: 1001;
    backdrop-filter: blur(4px);
}

.menu-toggle-btn:hover {
    background: rgba(100, 100, 100, 0.95);
    transform: scale(1.02);
}

/* === 9. 自定义顶栏（解决页面突兀问题） === */
.custom-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(255, 255, 255, 0.6);  /* 更透明的效果，可根据喜好调整 */
    backdrop-filter: blur(12px);            /* 增强毛玻璃效果 */
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    font-family: "Microsoft YaHei", sans-serif;
}

/* 顶栏中的博客标题 - 纯色版本（稳定可靠） */
.custom-top-bar .blog-title {
    font-size: 18px;
    font-weight: 500;
    color: #2c3e50;
    letter-spacing: 1px;
    margin: 0;
}

/* 右侧占位区域 */
.custom-top-bar .right-placeholder {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 顶栏管理按钮样式 */
.admin-link {
    color: #5d6d7e;
    text-decoration: none;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 16px;
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.3);
}

.admin-link:hover {
    color: #2c3e50;
    background: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

/* 调整主容器顶部间距，避免被固定顶栏遮挡 */
#home {
    margin-top: 76px !important;
}

/* 调整菜单按钮位置，避免与顶栏重叠 */
.menu-toggle-btn {
    top: 12px;
    right: 24px;
    background: rgba(60, 60, 60, 0.75);
    backdrop-filter: blur(4px);
    border: none;
}

/* === 10. 文章发布日期样式，去掉蓝色链接的突兀感 === */
.postDesc {
    color: #9aa7b4 !important;
    font-size: 12px;
    border-top-color: #e9ecef;
}

.postDesc a {
    color: #9aa7b4 !important;
    text-decoration: none !important;
    cursor: default;
}

.postDesc a:hover {
    color: #9aa7b4 !important;
    text-decoration: none !important;
}

#topics .postDesc {
    color: #9aa7b4 !important;
}

#topics .postDesc a {
    color: #9aa7b4 !important;
    text-decoration: none !important;
    cursor: default;
}

/* === 11. 响应式调整（手机/平板适配） === */
@media screen and (max-width: 1100px) {
    #home {
        min-width: 0;
        width: 95%;
    }
}

@media screen and (max-width: 768px) {
    #main {
        flex-direction: column;
    }
    #sideBar {
        width: 280px;
    }
    .menu-toggle-btn {
        right: 10px;
        top: 8px;
        padding: 6px 14px;
        font-size: 12px;
    }
    .custom-top-bar {
        height: 48px;
        padding: 0 16px;
    }
    .custom-top-bar .blog-title {
        font-size: 16px;
    }
    .admin-link {
        font-size: 11px;
        padding: 2px 8px;
    }
    /* 手机上只显示图标，隐藏文字（可选） */
    .admin-link {
        font-size: 0;
    }
    .admin-link:before {
        font-size: 14px;
        content: attr(title);
    }
    #home {
        margin-top: 68px !important;
    }
}