/* 深色模式：三箭齐发，全面覆盖 */
[data-theme="dark"] .intro-header .site-heading h1,
[data-theme="dark"] .intro-header .post-heading h1,
[data-theme="dark"] .intro-header .page-heading h1 {
    color: #ecf0e5 !important; 
}
/* 浅色模式：同样三箭齐发，确保所有页面风格一致 */
.intro-header .site-heading h1,
.intro-header .post-heading h1,
.intro-header .page-heading h1 {
    color: rgba(255, 255, 255, 1) !important; 
}
/* 深色模式下的 slogan */
[data-theme="dark"] .intro-header .site-heading .subheading,
[data-theme="dark"] .intro-header .post-heading .subheading {
    color: #ecf0e5 !important; /* 建议用比标题稍浅的灰色，增加层次感 */
}
/* 浅色模式下的 slogan */
.intro-header .site-heading .subheading,
.intro-header .post-heading .subheading {
    color: rgba(255, 255, 255, 1) !important; /* 柔和的灰色 */
}
/* 1. 给 Header 容器开启相对定位 */
header.intro-header {
    position: relative;
    /* 确保图片背景不会溢出 */
    overflow: hidden; 
}
/* 2. 添加蒙层 (伪元素) */
header.intro-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 这里设置蒙层的颜色和透明度 */
    /* 0,0,0 代表黑色；0.3 代表 30% 的透明度。如果觉得太暗就调小，太亮就调大 */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,   /* 顶部最深，保护导航栏 */
        rgba(0, 0, 0, 0.2) 40%,  /* 中间标题处适中 */
        rgba(0, 0, 0, 0.4) 100%  /* 底部稍微加深 */
    );
    z-index: 1; /* 蒙层在背景图上方 */
}
/* 3. 提升文字内容层级 */
/* 在 cleanwhite 模板中，文字包裹在 .container 或 .site-heading 中 */
header.intro-header .container {
    position: relative;
    z-index: 2; /* 确保文字在蒙层之上，否则文字也会变暗且无法选中 */
}
/* 4. (可选) 针对导航栏的优化 */
/* 如果你发现顶部的导航菜单(All Posts等)也因为背景图太亮看不清 */
#mainNav {
    z-index: 10; /* 确保导航栏在最顶层 */
}
/* 1. 先把整个版权行“致盲” (文字大小设为0) */
.copyright.text-muted {
    font-size: 0 !important;
}
/* 2. 然后通过伪元素“借尸还魂”，把你想写的字塞进去 */
.copyright.text-muted::before {
    content: "Copyright © KAITAI BLOG 2026"; /* 这里写你想要的文字 */
    font-size: 14px !important; /* 恢复正常字体大小 */
    visibility: visible;
    display: block;
}
/* 3. 彻底干掉作者链接和 GitHub Star 按钮 */
.copyright.text-muted a, 
.copyright.text-muted iframe {
    display: none !important;
}
.sidebar-container .short-about img {
    width: 160px !important;
    height: 160px !important;
    border-radius: 50% !important;
    object-fit: cover !important;        /* 裁剪填满，不变形 */
    object-position: center top !important; /* 裁剪时保留上半部分（脸部） */
    border: 3px solid #fff !important;   /* 白色细边框，更精致 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; /* 轻微投影 */
  }
  .sidebar-container .short-about {
    text-align: center !important;
  }
  
  .sidebar-container .short-about img {
    display: block !important;
    margin: 0 auto 15px auto !important;
  }
  .sidebar-container {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
  }
  /* 优化 Slogan 样式 */
header.intro-header .site-heading .subheading {
    font-size: 18px !important;    /* 稍微调小一点，产生主次对比 */
    font-weight: 300 !important;   /* 变细 */
    letter-spacing: 0.6em !important; /* 核心：大幅增加间距 */
    text-indent: 0.6em;            /* 修正最后那个字的间距偏移 */
    margin-top: 25px !important;   /* 拉开与标题距离 */
    color: #f8f8f8 !important;     /* 使用略带灰度的白，比纯白高级 */
    opacity: 0.85;
}
/* 顺便优化大标题 */
header.intro-header .site-heading h1 {
    font-size: 80px !important;    /* 增大标题 */
    letter-spacing: 4px !important;
    text-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}
/* 给文字加一个扩散范围大但颜色淡的阴影，像光晕一样保护文字 */
header.intro-header .site-heading {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
}
header.intro-header .site-heading {
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

@media (max-width: 767px) {
    /* 1. 确保整个页面布局为垂直排列 */
    .row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. 侧边栏容器：正常流布局 */
    .sidebar-container {
        display: flex !important;
        flex-direction: column !important;
        order: 0 !important; /* 保持在默认位置 */
        margin-top: 30px !important;
    }

    /* 3. 个人简介模块：回到文档流中，使用 order 排到最上面 */
    .sidebar-container .short-about {
        display: block !important;
        order: -1 !important; /* 确保它在侧边栏里的最上方 */
        position: static !important; /* 彻底移除 fixed 的影响 */
        margin-bottom: 20px !important;
    }
    
    /* 4. 确保主文章列表在中间 */
    .postlist-container {
        order: 0 !important; 
    }

    /* 5. 侧边栏中的其他模块（包括 Last Posts）：排在最下面 */
    .sidebar-container section:not(.short-about) {
        order: 1 !important; 
        margin-top: 20px !important;
    }

    /* 保持原有对移动端的优化 */
    section.visible-md.visible-lg {
        display: block !important;
    }
    .short-about .list-inline {
        display: none !important;
    }
}