/* #################### 文章 #################### */
body {
    margin: 0;
    font-family: Albert Sans,sans-serif,"Noto Sans SC";
}

/* 1. 将父容器设置为 flex 布局 */
.container {

    display: grid;
    /* 定义两列：第一列是侧边栏，第二列是主内容 */
    /* minmax(280px, 22%) 的意思是：侧边栏宽度为22%，但最小不能小于280px */
    /* 1fr 的意思是：让第二列（主内容区）占据所有剩余的可用空间 */
    grid-template-columns: minmax(280px, 25%) 1fr;

}

/* 2. 为侧边栏设置一个固定的宽度 */
.sidebar {
    /*方案2*/
    position: sticky;
    top: 0; /* 滚动到顶部时就“粘”住 */
    height: 100vh; /* 必须给一个高度，sticky 定位才能正常工作 */

    padding: 20px; /* 添加一些内边距，让内容不要紧贴边缘 */
    background-color: #ffffff; /* 给侧边栏一个背景色，以便区分 */

    /* 以下代码是为下一步“固定侧边栏”准备的 */
    /*position: fixed; !* 将侧边栏固定在屏幕上 *!*/
    top: 0;
    left: 0;

    box-sizing: border-box;

    padding: 40px 50px 20px 80px; /* 上/右/下/左 */

    display: flex;             /* 启用 Flexbox 布局 */
    flex-direction: column;    /* 让子元素（header, nav, footer）垂直堆叠 */
    justify-content: space-between; /* 在子元素之间平均分配空间，将 header 顶到顶部，footer 沉到底部 */

}

/* 3. 为右侧内容区设置样式 */
.main-content {
    
    padding: 40px 80px 40px 80px; /* 上/右/下/左 */
    box-sizing: border-box;
    background-color: #ffffff; /* 给侧边栏一个背景色，以便区分 */
}


/* --- Reusable Underline Hover Effect --- */

/* 1. 定义共享的下划线效果 (应用于 Header 和 Nav 的链接) */
.header-link,
.main-nav a {
    /* 为伪元素的绝对定位提供参考 */
    position: relative;
    /* 确保元素有自己的尺寸，padding 才有效 */
    display: inline-block;
    /* 为下划线留出空间 */
    padding-bottom: 5px;
    /* 移除默认下划线 */
    text-decoration: none;
}

/* 2. 创建共享的下划线伪元素 (初始状态为隐藏) */
.header-link::after,
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* 下划线的粗细 */
    /* 默认下划线颜色，可以在具体元素中覆盖 */
    background-color: #111111;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}

/* 3. 鼠标悬停时，显示共享的下划线 */
.header-link:hover::after,
.main-nav a:hover::after {
    transform: scaleX(1);
}

/* 1. 重置并设置 <ul> 为 Flex 容器 */
.main-nav ul {
    list-style: none;      /* 移除默认的列表项目符号（小黑点） */
    padding: 0;            /* 移除默认的内边距 */
    margin: 0;             /* 移除默认的外边距 */

    display: flex;         /* 启用 Flexbox 布局 */
    flex-direction: column;/* 将子元素（li）从上到下垂直排列 */
    /*align-items: justify-content;   !* 这就是您要的！它会将所有子元素在水平方向上居中对齐 *!*/
    align-items: flex-start;
    gap: 15px;             /* 关键点：在这里调整菜单项之间的垂直间距！
                               您可以将 15px 改成任何您想要的值，比如 20px 或 1em。*/
}

/* 2. (推荐) 为链接 <a> 添加样式，以获得更好的外观和点击体验 */

.main-nav a,
.main-nav a:visited {
    color: #111111;
    font-size: 1.5em;
    font-weight: 500;
    /*padding: 8px 15px; !* 这里会覆盖共享的 padding-bottom，所以我们把它加回来 *!*/
    padding-bottom: 5px; /* 确保 nav a 也有这个属性 */
    display: inline-block; /* Nav 链接通常是块级元素以占据整行 */

    /*vertical-align: top;*/
}


.sidebar-footer {
    
    text-align: center;
    width: 100%;

    margin-top: 20px; /* 在 nav 和 footer 之间留出一点空间 */
    margin-bottom: 20px;
    /* 移除之前的 position: absolute; bottom: 20px; 等，因为 Flexbox 已经处理了位置 */

}

/* 针对图标列表 ul 的样式 */
.sidebar-footer ul {
    display: flex;             /* 1. 核心：启用 Flexbox 实现水平排列 */
    justify-content: justify-content;   /* 2. 让所有图标在容器内水平居中 */
    list-style: none;          /* 3. 移除列表默认的小黑点 */
    padding: 0;                /* 4. 移除列表默认的内边距 */
    margin: 0;                 /* 5. 移除列表默认的外边距 */
    gap: 25px;                 /* 6. 在图标之间创建 20px 的间距 */
}

/* 针对图标链接 a 和图标本身 i 的样式 */
.sidebar-footer a {
    color: #111111; /* 设置图标的默认颜色 */
    font-size: 1.5em; /* 调整图标的大小 (em 单位会相对于父元素字体大小) */
    /* transition: all 0.2s ease-in-out; 为鼠标悬停效果添加平滑过渡 */
    transition: all 0.3s ease-in-out;
    /* (可选) 确保图标是块级元素，这样 transform 效果更稳定 */
    display: inline-block; 
}

/* 鼠标悬停时的效果 */
.sidebar-footer a:hover {
    /* color: #6c5ce7; 鼠标放上去时改变颜色 */
    transform: scale(1.2); /* (可选) 添加一个轻微的放大效果 */
}


/* --- Header 部分的样式 --- */

.sidebar-header {
    margin-bottom: 30px;   /* 5. (可选) 在 header 和下面的导航菜单之间添加一些外边距 */
}

/* 2. 为新的 .header-link 添加样式 */
.header-link,
.header-link:visited {
    color: #111111;
    /*font-weight: 500;*/
}

/* 调整标题样式，移除默认的外边距以更好地对齐 */
.sidebar-header h1 {
    margin: 0; /* 移除 h1 标签默认的上下外边距 */
    font-size: 1.8em; /* 调整字体大小，可按需修改 */
    font-weight: 500;
}


.main-nav {
    /* 这是核心：让导航菜单在剩余空间中垂直居中 */
    /* 当父容器是 flex-direction: column 时，margin-top: auto 和 margin-bottom: auto 
       会让元素在垂直方向上占据所有可用空间，从而实现居中。 */
    margin-top: auto;
    margin-bottom: auto;
}

/* 调整头像样式 */
.avatar {
    width: 30px;  /* 稍微调整一下头像大小，您可以根据需要修改 */
    height: 30px;
    /* border-radius: 50%; 保持圆形 */
}




/* --- Main Content & Home Page Styling --- */

/* --- Global Content Wrapper --- */
.content-wrapper {
    /*max-width: 1100px; !* 定义所有内容的最大宽度，1100px 是一个常见的值 *!*/
    width: 100%;       /* 在小屏幕上，宽度为100%以保证响应式 */
    margin: 0;         /* 确保它不会自动居中，而是遵循父元素的对齐方式 */
}

/* --- Section 1: Hero Section Styling --- */
.home-container {
    /* 1. 让此部分的高度至少为浏览器窗口的高度 */
    min-height: 100vh;

    /* 2. 使用 Flexbox 来实现完美的居中 */
    display: flex;
    align-items: center;     /* 垂直居中 */
    justify-content:  flex-start; /* 水平居中 */
    
    /* (可选) 给它一个内边距，防止内容在小屏幕上贴边 */
    /* padding: 20px 0; */
    box-sizing: border-box;
}
/* 2. 首页内容容器的样式 */
.home-content {
    /* max-width: 800px; (可选) 限制最大宽度，防止在大屏幕上文字行过长 */
    text-align: left; /* 确保在居中容器内的文本是左对齐的 */
}

/* 3. "Hi there!" 的样式 */
.home-greeting {
    font-size: 26px;
    color: #6b6a6a; /* 稍微浅一点的颜色 */
    margin: 0;
}

/* 4. 大标题的样式 */
.home-title {
    font-size: 3.5em; /* 非常大的字体 */
    font-weight: 600; /* 粗体 */
    line-height: 1.2; /* 设置合适的行高，避免行与行之间太挤 */
    margin: 25px 0 30px 0; /* 设置上下外边距，与其他元素隔开 */
}

/* 5. 按钮容器的样式 */
.home-buttons {
    display: flex; /* 让两个按钮水平排列 */
    gap: 20px;     /* 在按钮之间创建间距 */
}

/* 6. 按钮的通用基础样式 */
.btn {
    padding: 12px 24px;
    border-radius: 999px; /* 圆角 */
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    border: 2px solid #6c5ce7; /* 统一边框颜色 */
    transition: all 0.2s ease-in-out;
}

/* 7. 主要按钮（实心）的样式 */
.btn-primary {
    background-color: #6c5ce7; /* 背景色 */
    color: #fff; /* 文字颜色 */
}

/* 8. 次要按钮（描边）的样式 */
.btn-secondary {
    background-color: transparent; /* 透明背景 */
    color: #6c5ce7; /* 文字颜色与边框同色 */
}

/*!* 9. 按钮的鼠标悬停效果 *!*/
/*.btn-primary:hover {*/
/*    background-color: #fff; !* 鼠标悬停时颜色变深 *!*/
/*    border-color: #5849d1;*/
/*    */
/*}*/

/*.btn-secondary:hover {*/
/*    background-color: #6c5ce7; !* 鼠标悬停时变为实心 *!*/
/*    color: #fff;*/
/*}*/


/* --- Section 2: Intro Section Styling --- */
.intro-section {
    padding: 80px 0;
    border-top: 2px dashed #111111;
}
.intro-section .content-wrapper { /* ★ 关键修改: 目标改为包装器 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    font-size: 19.6011px;
    font-weight: 500;
    line-height: 29.4016px;
    color: #111111;
}




/* --- Section 3: Card Section Styling --- */
.card-section {
    padding-bottom: 80px;
}
.card-section .content-wrapper { /* ★ 关键修改: 目标改为包装器 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.card {
    background-color: #f8f9fa; /* 卡片的浅灰色背景 */
    /* border-radius: 8px; 圆角 */
    overflow: hidden; /* 确保图片也被裁切为圆角 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 细微的阴影 */
    display: flex;
    flex-direction: column; /* 让卡片内容垂直排列 */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px); /* 鼠标悬停时轻微上浮 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.card img {
    width: 100%;
    height: auto;
    display: block;
}

.card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 让这个容器填满卡片的剩余空间 */
}

.card-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
}

.card-content p {
    margin-top: 0;
    margin-bottom: 20px;
    flex-grow: 1; /* 让 p 标签占据尽可能多的空间，把按钮推到底部 */
    color: #111111;
    line-height: 1.5em;
}

/* 卡片按钮的样式 */
.btn-card {
    display: inline-block;
    align-self: flex-start; /* 让按钮在左侧对齐 */
    background-color: #2c3e50; /* 深色背景 */
    color: #fff;
    padding: 10px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn-card:hover {
    background-color: #34495e; /* 悬停时颜色变浅 */
}






/* --- Post List Page Styling --- */
/* --- REVISED Post List Page Styling --- */

.post-list-container {
    max-width: 900px;
    margin: 0;
}

.page-title {
    font-size: 2.8em;
    margin-top: 0;
    margin-bottom: 50px;
    font-weight: 500;
}

/* 整个可点击的链接区域 */
.post-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 80px;
    border-radius: 12px; /* ★ 修改点: 这里的圆角是可选的，主要用于 hover 时的阴影形状 */
    transition: transform 0.2s ease-in-out;
}

.post-item-link:hover {
    transform: translateY(-4px); /* ★ 保留: 整体上浮效果 */
}

/* 卡片容器，现在只负责布局 */
.post-item {
    display: flex;
    align-items: center;

}

/* 左侧封面图片 */
.post-cover {
    flex-shrink: 0;
    width: 350px;
    height: 222px;
    
    /* ★ 关键修改: 将圆角和裁切应用到这里 */
    border-radius: 12px;
    overflow: hidden;
    
    /* (可选但推荐) 给图片自身添加阴影 */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease-in-out;
}

/* ★ 新增: 当链接悬停时，让图片的阴影变深 */
.post-item-link:hover .post-cover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 右侧文章信息 */
.post-info {
    padding: 0 30px;
}

/* 文章日期 */
.post-date {
    display: block;
    font-size: 1.5em;
    color: #888;
    margin-bottom: 8px;
}

/* 文章标题 */
.post-title {
    font-size: 2em;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    color: #111111;
    transition: color 0.2s ease;
}

/* ★ 新增: 当链接悬停时，让标题变色 */
.post-item-link:hover .post-title {
    color: #6c5ce7; /* 使用您的主题色 */
}

/* --- About Page Styling --- */
/* 1. Overall container for the about page */
.about-page-container { 
    max-width: 900px; 
    margin: 0; 
}

/* --- Section 1: Personal Intro --- */
.about-intro-section { 
    display: flex; 
    align-items: center; 
    gap: 40px; 
    margin-bottom: 80px; }
.profile-photo-container { flex-shrink: 0; }
.profile-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
.intro-text-content p { font-size: 1.2em; line-height: 1.7; margin: 0; }

/* --- Section 2 & 3: Site Intro --- */
.site-intro-section { padding-top: 40px; 
    /* border-top: 1px solid #eee;  */
}
.site-intro-section h2 { font-size: 2em; font-weight: 500; margin: 40px 0 20px 0; }
.site-intro-section h2:first-child { margin-top: 0; }
.site-intro-section p { font-size: 1.2em; line-height: 1.8; color: #111111; margin-bottom: 15px; }
.site-intro-section blockquote { 
    margin: 2.5em 0; 
    padding: 20px 30px; 
    border-left: 5px solid #6c5ce7; 
    background-color: #f8f9fa; 
    /* font-size: 1.2em;  */
    font-style: italic; 
    color: #333; }
.site-intro-section blockquote p { margin: 0; }
.site-intro-section blockquote footer { 
    margin-top: 15px; 
    /* font-size: 0.8em;  */
    font-style: normal; 
    text-align: right; 
    color: #777; }

/* --- Section 4: Fun Facts Grid --- */
.fun-facts-section { margin-top: 60px; margin-bottom: 60px;}
.fun-facts-section h2 { font-size: 2em; font-weight: 500; text-align: left; margin-bottom: 30px; }
.fun-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.fact-item { background-color: #f8f9fa; padding: 25px; border-radius: 8px; }
.fact-title { font-size: 1.2em; font-weight: 500; color: #333; margin: 0 0 15px 0; }
.fact-content { font-size: 1em; line-height: 1.6; color: #111111; margin: 0; }
.fact-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
}
.fact-list li { 
    background-color: #e9ecef; 
    color: #4a4a4a; 
    padding: 6px 14px; 
    border-radius: 20px; 
    font-size: 0.9em; 
    font-weight: 500; 
}




/*--- Single Post (post.ejs) Styling --- *!*/
/*version2*/
/* 1. 文章的整体容器 */
.post-container {
    max-width: 720px; /* 限制内容最大宽度，提升阅读体验 */
    margin: 0 auto;
}

/* 2. 文章头部（标题和日期） */
.post-header-bjork {
    text-align: center;
    margin-bottom: 4rem; /* 标题区域和正文之间的巨大留白 */
}

.post-title-bjork {
    font-size: 3.5rem; /* 非常大的标题 */
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    color: #111;
}

.post-meta-bjork {
    color: #555;
    font-size: 0.9rem;
}

.post-meta-bjork .meta-item {
    margin: 0 0.5em; /* 元信息项之间的间距 */
}

.post-meta-bjork a {
    color: inherit; /* 链接颜色与周围文字相同 */
    text-decoration: underline;
}

.post-meta-bjork a:hover {
    color: #000;
}


/* 3. 文章封面 */
.post-cover-details {
    margin-bottom: 40px;
}
.post-cover-details img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* 给封面图加圆角 */
}


/* 4. 文章正文内容的容器 */
.post-content {
    font-size: 1.1em; /* 基础字体大小 */
    line-height: 1.8; /* 舒适的行高 */
    color: #111111;
}

/* 5. 样式化所有 Markdown 元素 */

/* 标题 H2, H3 */
.post-content h2, .post-content h3 {
    color: #111111;
    font-weight: 600;
    margin-top: 2.5em; /* 标题与上文的间距 */
    margin-bottom: 1em; /* 标题与下文的间距 */
    line-height: 1.4;
}
.post-content h2 { font-size: 1.8em; }
.post-content h3 { font-size: 1.5em; }

/* 段落 P */
.post-content p {
    margin-bottom: 1.5em;
}

/* 链接 A */
.post-content a {
    color: #6c5ce7; /* 您的主题色 */
    text-decoration: none;
    border-bottom: 2px solid rgba(108, 92, 231, 0.2); /* 半透明下划线 */
    transition: all 0.2s ease;
}
.post-content a:hover {
    background-color: rgba(108, 92, 231, 0.1); /* 悬停时有淡淡的背景色 */
    border-bottom-color: #6c5ce7;
}

/* 引用 Blockquote */
.post-content blockquote {
    margin: 2em 0;
    padding: 10px 25px;
    border-left: 4px solid #6c5ce7;
    background-color: #f8f9fa;
    color: #555;
    font-style: italic;
}
.post-content blockquote p {
    margin-bottom: 0;
    margin-top: 0;
}

/* 列表 UL, OL */
.post-content ul, .post-content ol {
    padding-left: 25px;
    margin-bottom: 1.5em;
}
.post-content li {
    margin-bottom: 0.5em;
}

/* 代码块 PRE 和 Code */
.post-content pre {
    background-color: #2d2d2d; /* 深色背景 */
    color: #f8f8f2; /* 亮色文字 */
    padding: 20px;
    margin: 2em 0;
    border-radius: 8px;
    overflow-x: auto; /* 长代码行可滚动 */
    line-height: 1.5;
}
.post-content pre code {
    background: none;
    padding: 0;
}

/* 行内代码 Code */
.post-content p code, .post-content li code {
    background-color: #eef0f2;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: #2c3e50;
}

.post-content img {
    display: block;
    margin: 2em auto;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}


/* 4. 文章页脚 (标签和导航) */
.post-footer-bjork {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
    font-size: 0.9rem;
}

/* 标签的新样式 (简单的文本链接) */
.post-tags-bjork {
    color: #555;
    margin-bottom: 2rem;
}
.post-tags-bjork a {
    color: #111;
    text-decoration: underline;
    margin: 0 0.2em;
}
.post-tags-bjork a:hover {
    text-decoration: none;
}

/* 上一篇/下一篇文章导航 */
.post-navigation {
    display: flex;
    justify-content: space-between; /* 让两个链接分别靠在两端 */
    flex-wrap: wrap; /* 在小屏幕上允许换行 */
    gap: 1rem;
    padding-bottom: 20px;
}
.post-navigation a {
    display: flex;
    align-items: center; /* 垂直居中对齐箭头和标题 */
    gap: 0.75em;         /* 在箭头和标题之间创建间距 */


    /* flex-basis: 48%; 接近一半的宽度 */
    color: #333;
    text-decoration: none;
}
.post-navigation a:hover .nav-title {
    color: #000;
    text-decoration: underline;
}
.post-navigation .nav-arrow {
    font-size: 1.1em;
    line-height: 1;
    color: #111;
}
.post-navigation .nav-title {
    /* margin-top: 0.25rem; */
    font-weight: 600;
    color: #111;
    transition: color 0.2s ease;
}
.post-navigation .next-post {
    justify-content: flex-end;  /* 让下一篇文章的文字靠右 */
    margin-left: auto; 
}

/* (可选) 如果您的上一篇文章链接没有默认靠左，可以添加这个 */
.post-navigation .prev-post {
    justify-content: flex-start; /* 默认值，但明确写出更清晰 */
}

/* --- Category List Page Styling --- */

/* --- NEW Category & Tag Overview Page Styling --- */
.overview-page-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 区域标题 (e.g., "Categories", "All Tags") */
.section-title {
    font-size: 2em;
    font-weight: 500;
    color: #111111;
    margin-top: 60px; /* 大的顶部间距，用于分隔区域 */
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* --- 1. Category Card Styling --- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

/* 卡片的可点击链接区域 */
.category-card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 确保链接在文字上层，但低于可能的其他交互元素 */
    border-radius: 12px; /* 继承父元素的圆角 */
}

.category-card {
    /* ★ 关键: 为内部的绝对定位链接提供参考 */
    position: relative; 
    
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* height: 100% 已不再需要，Grid 会自动处理 */
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.category-card-name, .category-card-count {
    position: relative;
    z-index: 2; /* ★ 确保文字在链接“膜”的上面，否则无法选中文字 */
}

.category-card-name {
    font-size: 1.6em;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 10px 0;
}

.category-card-count {
    font-size: 0.9em;
    color: #777;
}

/* --- 2. Tag Cloud Styling --- */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.tag-capsule {
    display: inline-block;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    color: #555;
    padding: 8px 16px 8px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.tag-capsule:hover {
    background-color: #6c5ce7;
    color: #fff;
    border-color: #6c5ce7;
    transform: translateY(-2px);
}


/* --- Search Popup Styling --- */

/* The main container, hidden by default */
.search-popup {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

/* When active, change display to flex */
.search-popup.is-visible {
    display: flex;
}

/* The dark overlay behind the window */
.search-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

/* The search window itself */
.search-window {
    position: relative;
    margin: 10vh auto; /* Center vertically with some top margin */
    width: 90%;
    max-width: 700px;
    height: 70vh;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.search-input {
    width: 100%;
    padding: 10px 5px;
    border: none;
    outline: none;
    font-size: 1.2em;
}

.search-close-btn {
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    color: #888;
    padding: 0 10px;
}

/* The results container */
.search-results {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.search-initial-message, .search-no-results {
    text-align: center;
    color: #999;
    margin-top: 40px;
}

/* Individual result item */
.result-item {
    display: block;
    padding: 20px;
    border-radius: 8px;
    text-decoration: none;
    margin-bottom: 15px;
    background-color: #f8f9fa;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.result-item:hover {
    background-color: #f1f3f5;
    transform: translateY(-2px);
}

/* Title inside the card */
.result-item-title {
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #2c3e50;
}
.result-item-content {
    font-size: 0.9em;
    color: #555;
    line-height: 1.6;
    margin: 0;
    /* Limit the content to two lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 1. 当整个标题匹配时，将标题文字变为主题色 */
/* .result-item-title.search-highlight-title {
    color: #6c5ce7; /* 这是您的主题色，可以按需修改 */
/* } */

/* 2. 当内容中的关键词匹配时，高亮关键词 */
.result-item-content .search-highlight-keyword {
    color: #6c5ce7; /* 关键词文字使用主题色 */
    font-weight: 600; /* 加粗显示，更突出 */
    background-color: rgba(108, 92, 231, 0.1); /* 添加一层淡淡的主题色背景 */
    padding: 1px 3px;
    border-radius: 3px;
}


/* Gallery  */
/* --- Masonry Gallery Styling --- */
.gallery-page-container {
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-grid {
    margin: 0 auto; /* Let Masonry handle the layout */
}

/* Clear floats */
.gallery-grid:after {
    content: '';
    display: block;
    clear: both;
}

/* The individual grid items */
.grid-item {
    width: 31.333%; /* For a 3-column layout with gaps */
    /* width: 24%; */
    margin-bottom: 15px;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    
    border-radius: 4px;
    overflow: hidden;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
    /* transition: transform 0.3s ease, box-shadow 0.2s ease; */
    transition: background-color 0.2s ease;
}

.grid-item:hover {
    /* transform: translateY(-5px); */
    /* transform: scale(1.08); 放大 1.2 倍 */
    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); */
    opacity: 0.6;
}

.grid-item img {
    width: 100%;
    display: block; /* Remove bottom space under image */
}




/* =================================================================== */
/* ===================   RESPONSIVE STYLES   ========================= */
/* =================================================================== */

/* --- Mobile Header (Hidden on Desktop) --- */
.mobile-header {
    display: none; /* Initially hidden on desktop */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    z-index: 900; /* High z-index to stay on top */
    padding: 40px 40px;

    align-items: center;
    justify-content: space-between;

    box-sizing: border-box; 
}
.mobile-header-title {
    font-size: 1.5em;
    font-weight: 500;
    color: #111;
    text-decoration: none;
}
.hamburger-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #111;
}


/* --- Sidebar Close Button (Hidden on Desktop) --- */
.sidebar-close-btn {
    display: none; /* Initially hidden on desktop */
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2.5em;
    color: #555;
    cursor: pointer;
}

/* --- Dark Overlay for Off-Canvas Menu --- */
.body-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998; /* Below sidebar, above content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.body-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}


/* --- 2. NEW Full-Screen Overlay Menu --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* A solid white background */
    z-index: 1000; /* Highest z-index */
    
    /* Center the nav list inside */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Initial state: hidden above the screen */
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

/* The open state for the overlay */
.mobile-menu-overlay.is-open {
    transform: translateY(0);
}

.menu-close-btn {
    position: absolute;
    top: 15px;
    right: 25px;
    background: none;
    border: none;
    font-size: 3em;
    color: #333;
    cursor: pointer;
}

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.mobile-nav-list li {
    margin: 15px 0;
}

.mobile-nav-list a {
    font-size: 1.8em; /* Large, touch-friendly links */
    font-weight: 500;
    color: #111111;
    text-decoration: none;
    padding: 10px;
}

/* --- Staggered Animation for Nav List --- */
/* Initial state for animation */
.mobile-nav-list li {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Final state when menu is open */
.mobile-menu-overlay.is-open .mobile-nav-list li {
    opacity: 1;
    transform: translateY(0);
}
/* Staggered delays */
.mobile-menu-overlay.is-open .mobile-nav-list li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-overlay.is-open .mobile-nav-list li:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu-overlay.is-open .mobile-nav-list li:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu-overlay.is-open .mobile-nav-list li:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu-overlay.is-open .mobile-nav-list li:nth-child(5) { transition-delay: 0.3s; }

/* =================================================================== */
/* ===================   FINAL RESPONSIVE STYLES   =================== */
/* =================================================================== */

/* =========================================================== */
/* === Breakpoint 1: TABLET VIEW (< 992px) === */
/* =========================================================== */
@media (max-width: 992px) {

    /* --- Core Layout & Sidebar --- */
    /* Hide desktop sidebar, show mobile header */
    .sidebar {
        display: none;
    }
    .mobile-header {
        display: flex;
    }
    /* Switch main container to a single column */
    .container {
        grid-template-columns: 1fr;
    }
    /* Main content takes full width, add padding for fixed header */
    .main-content {
        margin-left: 0;
        padding-top: 80px;
    }

    .home-greeting{
        /* padding-top: 80px; */
    }
    .home-title{
        font-size: 36.8px;
    }
    .btn-primary, .btn-secondary{
        font-size: 15px;
    }

    .intro-section .content-wrapper,
    .card-section .content-wrapper, /* <--- 这是您要修改的部分 */
    .fun-facts-grid,
    .category-grid {
        grid-template-columns: 1fr;
    }
    .page-title{
        padding-top: 30px;
    }

    /* --- Centered Reading Column for Key Pages --- */
    /* On tablets, we don't want content to span the full width */
    .post-layout-bjork, .about-page-container, .post-list-container {
        max-width: 720px; /* Same as the Bjork post width */
        margin-left: auto;
        margin-right: auto;
    }

    /* --- Grid Adjustments --- */
    /* Category grid may naturally become 2 columns */
    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    /* Gallery becomes 2 columns */
    .gallery-grid .grid-item {
        width: 48%;
        margin-left: 1%;
        margin-right: 1%;
    }
    /* Fun facts grid becomes 2 columns */
    .fun-facts-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* =========================================================== */
/* === Breakpoint 2: MOBILE VIEW (< 768px) === */
/* =========================================================== */
@media (max-width: 768px) {

    /* --- Core Layout & Spacing --- */
    /* Reduce padding on mobile for more space */
    .main-content {
        /* padding: 60px 50px; */
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 60px;
    }

    /* --- Typography Adjustments --- */
    .post-title-bjork {
        font-size: 2.5rem;
    }

    .page-title, .section-title {
        font-size: 1.5em;
        margin-bottom: 20px;
    }

    h2, .post-content h2 {
        font-size: 1.6em;
    }

    .btn {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* --- Grid Adjustments: All become single-column --- */
    .intro-section .content-wrapper,
    .fun-facts-grid,
    .category-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid .grid-item {
        width: 98%;
        margin-left: 1%;
        margin-right: 1%;
    }

    /* --- Component Specific Adjustments --- */
    /* About page intro stacks vertically */
    .about-intro-section {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .profile-photo {
        width: 150px;
        height: 150px;
    }

    /* Post navigation links might stack if they are long */
    .post-navigation {
        flex-direction: column;
    }

    .post-navigation .next-post {
        margin-left: 0; /* Reset the auto margin */
        text-align: right; /* Keep text aligned right */
    }

    /* Post header/footer spacing */
    .post-header-bjork, .post-footer-bjork {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .post-title-bjork {
        margin-bottom: 0.5rem;
    }

    .post-item-link {
        display: block;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    /* 2. Change the main layout direction from horizontal to vertical */
    .post-item {
        flex-direction: column;
        align-items: stretch;
    }

    /* 3. Make the cover image full-width */
    .post-cover {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 0;
    }

    /* 4. Reset padding and make the info block a flex container for reordering */
    .post-info {
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

    /* 5. Re-order the title and date using the 'order' property */
    .post-info .post-title {
        order: 1;
        font-size: 1.2em;
    }

    .post-info .post-date {
        order: 2;
        margin-top: 10px;
    }
}