/* 1. 恢复父容器的垂直排列和居中，确保主标题稳居 C 位 */
.home-banner-container .description.flex-col {
    display: flex !important;
    flex-direction: column !important; /* 回到上下排列 */
    align-items: center !important;    /* 水平居中 */
    justify-content: center !important;
    position: relative !important;     /* 作为副标题定位的参照物 */
}

/* 2. 针对主标题（写在 description 里的第一行文字） */
/* 注意：Redefine 的 title 有时没有专门的标签，直接在 description 下 */
/* 我们需要给它一个相对定位，方便副标题跟随 */
.home-banner-container .description {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* 3. 副标题绝对定位：这是解决居中偏移的杀手锏 */
.home-banner-container .description p {
    position: absolute !important; /* 脱离文档流，不再占据空间 */
    
    /* 定位逻辑： */
    /* 我们把副标题定位在父级容器的中心线右侧 */
    left: 40% !important; 
    
    /* 这里的偏移量需要你根据主标题的长度手动调节 */
    /* 比如主标题比较长，这个值就设大一点，比如 180px */
    margin-left: 160px !important; 
    
    /* 垂直位置：垂直中心点偏下 */
    top: 50% !important;
    margin-top: 15px !important; 
    
    white-space: nowrap !important;
    width: auto !important;
}

#subtitle {
    font-style: normal !important;
    font-size: 1.3rem !important;
}

/* 隐藏所有分类中包含 d2l 字样的文章卡片容器 */
.home-article-wrapper:has(.home-article-category a[href*="d2l"]) {
    display: none !important;
}





/* 1. 彻底清空 body 的默认背景，确保它在全站都是透明的 */
body {
    background: transparent !important;
}

/* 2. 只有在【非首页】时，才创建并显示背景图图层 */
body:not(.home-container)::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10; 
    background: url('/images/post-background.png') no-repeat center center;
    background-size: cover;
    pointer-events: none;
}

/* 3. 击穿所有可能的黑色层（必须全覆盖） */
/* 我们不仅要改容器，还要把所有可能出现的“底色”全部挖空 */
html, body, 
#body-container, 
.main-content-container, 
.post-page-container, 
.article-content-container,
footer, .footer {
    background: transparent !important;
    background-color: transparent !important;
}

/* 1. 调整左侧 Logo 标题颜色 */
.dark-mode .navbar-content .left .logo-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important; /* 黑色半透明阴影 */
}

/* 2. 调整 PC 端导航栏菜单文字及图标 */
.dark-mode
.navbar-item a, 
.navbar-item i, 
.navbar-item .fa-magnifying-glass {
    color: #ffffff !important;
    /* font-weight: 600 !important;
    transition: all 0.3s ease; */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

/* 3. 调整悬停（Hover）状态，增加交互感 */
.navbar-item a:hover {
    color: var(--primary-color) !important;
    /* text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important; */
}

/* 4. 如果你觉得整个导航栏背景太透，可以给它加一点点“毛玻璃”挡一下背景图 */
.navbar-container {
    background: rgba(0, 0, 0, 0.1) !important; /* 极淡的黑色遮罩 */
    backdrop-filter: blur(10px) !important;     /* 稍微模糊一点背景 */
}


/* 1. 解决文字漂浮感：给内容区加一层轻微的磨砂感 */
/* 这样滚动时，文字是在一块半透明的玻璃上滑动，而背景图在玻璃后面纹丝不动 */
.article-content-container {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    padding: 40px !important;
    border-radius: 12px;
}

.archive-container {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    padding: 40px !important;
    border-radius: 12px;
}

.page-template-container {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    padding: 50px !important;
    border-radius: 12px;
}

/* 2. 暗黑模式下的处理：防止晚上看太刺眼 */
.dark-mode .article-content-container {
    background: rgba(0, 0, 0, 0.75) !important;        /* 黑色半透明 */
    color: #ffffff !important;
}

.dark-mode .archive-container {
    background: rgba(0, 0, 0, 0.75) !important;        /* 黑色半透明 */
    color: #ffffff !important;
}

.dark-mode .page-template-container {
    background: rgba(0, 0, 0, 0.75) !important;        /* 黑色半透明 */
    color: #ffffff !important;
}

/* 3. 这里的容器是“存放文字的白色/黑色大盒子”之外的那个大空间 */
/* 如果这层不透明，你还是看不到 body 的背景 */
.post-page-container, .page-container, .post-main-all {
    background: transparent !important;
    background-color: transparent !important;
}