/* ====================================
   * 博客园页面优化 CSS by Gemini (更新版)
   * ==================================== */

/* 全局样式和变量：定义基础颜色和字体 */
:root {
  --primary-color: #3498db; /* 清新的蓝色 */
  --primary-hover-color: #2980b9;
  --text-color: #34495e; /* 深灰色，易读 */
  --light-text-color: #7f8c8d; /* 浅灰色文字 */
  --bg-color: #ecf0f1; /* 极浅的背景色 */
  --card-bg-color: #ffffff;
  --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.08); /* 更柔和的阴影 */
  --border-radius: 10px; /* 略大的圆角 */
  --spacing-md: 20px;
  --spacing-lg: 30px;
}

body {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: var(--text-color);
  background: var(--bg-color);
  line-height: 1.7;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 链接基础样式 */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.2s ease;
}

a:hover {
  color: var(--primary-hover-color);
  transform: translateY(-1px);
}

/* ====================================
   * 布局和主容器
   * ==================================== */

/* 主容器：限制最大宽度并居中 */
#home {
  max-width: 1280px; /* 稍微宽一点 */
  margin: 0 auto;
  padding: var(--spacing-md);
  box-sizing: border-box;
}

/* 左右分栏容器 */
.main-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg); /* 使用 gap 统一间距 */
  padding: 0;
}

/* 左侧主内容区域 */
#mainContent {
  flex: 3;
  min-width: 65%; /* 稍微宽一点 */
}

/* 右侧边栏 */
#sideBar {
  flex: 1;
  min-width: 300px; /* 固定宽度 */
  max-width: 320px;
  background-color: transparent; /* 侧边栏本身没有背景，模块才有 */
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg); /* 模块之间的间距 */
}

/* ====================================
   * 顶部导航和标题区域 (页眉)
   * ==================================== */

/* 页眉容器 */
#Header1_HeaderTitle {
  background: var(--card-bg-color);
  padding: var(--spacing-lg) var(--spacing-md);
  text-align: center;
  box-shadow: var(--shadow-light);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-lg);
  position: relative;
  overflow: hidden; /* 确保背景图不溢出 */
}

#Header1_HeaderTitle::before { /* 模拟背景图 */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://picsum.photos/1280/200?blur=5') no-repeat center center; /* 示例背景图，可替换 */
  background-size: cover;
  opacity: 0.3; /* 背景图透明度 */
  z-index: 0;
}

#Header1_HeaderTitle > * { /* 确保内容在背景图之上 */
  position: relative;
  z-index: 1;
}

/* 页眉标题 */
#Header1_HeaderTitle h1 {
  font-size: 3em; /* 更大 */
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
  letter-spacing: 1px;
}

/* 博客描述 (如果页眉有的话) */
.blog-description {
  font-size: 1.1em;
  color: var(--light-text-color);
  margin-top: 10px;
}

/* 导航链接列表 */
#navList ul {
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-md);
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
}

#navList a {
  font-size: 1.15em;
  font-weight: 600;
  color: var(--text-color);
  padding: 8px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

#navList a:hover {
  background-color: var(--primary-color);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(var(--primary-color-rgb), 0.3); /* 添加阴影效果 */
}
/* 用于计算 rgb 值 */
:root {
  --primary-color-rgb: 52, 152, 219; /* 对应 #3498db */
}


/* ====================================
   * 文章和卡片样式
   * ==================================== */

/* 修正：将卡片样式应用到 .day 容器上 */
.day {
  background-color: var(--card-bg-color);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md); /* 卡片之间的间距 */
  box-shadow: var(--shadow-light);
  border-radius: var(--border-radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer; /* 鼠标悬停时显示手型 */
  border-left: 5px solid var(--primary-color); /* 左侧强调边框 */
  position: relative;
  overflow: hidden;
}

/* 文章卡片悬停效果 */
.day:hover {
  transform: translateY(-8px); /* 更明显的上浮效果 */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 更深的阴影 */
}

/* 调整卡片内部的标题和日期间距 */
.dayTitle {
    color: var(--light-text-color);
    font-size: 0.85em; /* 略小 */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dayTitle::before {
    content: "📅"; /* 日期图标 */
    font-size: 1.1em;
}

.postTitle {
  margin-bottom: 12px;
}

.postTitle a {
  font-size: 1.8em; /* 更大 */
  font-weight: 700;
  display: block;
  color: var(--text-color); /* 标题颜色改为正文色 */
  transition: color 0.3s ease;
}

.postTitle a:hover {
  color: var(--primary-color); /* 悬停时变色 */
}

.postDesc {
  color: var(--light-text-color);
  margin-bottom: var(--spacing-md);
  font-size: 1em;
  line-height: 1.8;
}

.postfoot {
  font-size: 0.85em;
  color: var(--light-text-color);
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-top: 1px dashed #eee; /* 分隔线 */
  padding-top: 15px;
}

.postfoot a {
    color: var(--light-text-color);
    transition: color 0.3s ease;
}

.postfoot a:hover {
    color: var(--primary-color);
}

.postfoot span::before {
    margin-right: 5px;
}

.postfoot .article-view::before { content: "👁️"; }
.postfoot .article-comment::before { content: "💬"; }
.postfoot .article-digg::before { content: "👍"; }

/* 分页器样式 */
#pager {
    text-align: center;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--card-bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}

#pager a, #pager span {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    border-radius: 5px;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    transition: all 0.3s ease;
}

#pager a:hover {
    background-color: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}

#pager span.current {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: bold;
    border-color: var(--primary-color);
}


/* ====================================
   * 侧边栏和页脚
   * ==================================== */

/* 侧边栏所有模块的卡片化 */
.blog-side {
  background: var(--card-bg-color);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-light);
  border-radius: var(--border-radius);
  transition: transform 0.3s ease;
}

.blog-side:hover {
    transform: translateY(-3px);
}

.sidebar-title {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-title::before {
    content: "✨"; /* 示例图标 */
    font-size: 1.2em;
}
/* 针对不同模块可以定制图标 */
#bloggerProfile .sidebar-title::before { content: "🧑‍💻"; }
#sidebar_shortcut .sidebar-title::before { content: "🔗"; }
#sidebar_recentcomments .sidebar-title::before { content: "💬"; }
#sidebar_topviewposts .sidebar-title::before { content: "🔥"; }
#sidebar_categories .sidebar-title::before { content: "📚"; }
#sidebar_links .sidebar-title::before { content: "🤝"; }


/* 侧边栏个人信息 */
#bloggerProfile {
  text-align: center;
}

.avatar {
    width: 120px; /* 稍微大一点 */
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 15px auto; /* 底部间距 */
    border: 4px solid var(--primary-color); /* 强调边框 */
    box-shadow: 0 0 0 6px rgba(var(--primary-color-rgb), 0.2); /* 光晕效果 */
    transition: all 0.3s ease;
}

.avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px rgba(var(--primary-color-rgb), 0.3);
}

.intro h2 {
    font-size: 1.8em;
    color: var(--text-color);
    margin: 10px 0 5px 0;
    font-weight: 700;
}

.intro p {
    font-size: 0.95em;
    color: var(--light-text-color);
    margin: 0;
    line-height: 1.6;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    border-top: 1px solid #eee;
    padding-top: var(--spacing-md);
}

.menu li {
    margin-bottom: 8px;
}

.menu a {
    font-size: 1.05em;
    color: var(--text-color);
    padding: 12px 15px;
    display: flex; /* 使用 flex 布局图标和文字 */
    align-items: center;
    gap: 10px; /* 图标与文字间距 */
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.menu a:hover {
    background-color: var(--primary-color);
    color: #fff;
    transform: translateX(5px);
}

.menu a i { /* 如果有图标 */
    font-size: 1.2em;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.menu a:hover i {
    color: #fff;
}


.social {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    border-top: 1px solid #eee;
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.social a {
    color: var(--light-text-color);
    transition: color 0.3s ease, transform 0.2s ease;
}

.social a:hover {
    color: var(--primary-color);
    transform: translateY(-3px) scale(1.1);
}
.social svg {
    width: 24px; /* 稍微大一点 */
    height: 24px;
}


/* 页脚样式 */
#footer {
  padding: var(--spacing-lg);
  text-align: center;
  background: var(--card-bg-color);
  color: var(--light-text-color);
  margin-top: var(--spacing-lg);
  border-radius: var(--border-radius);
  font-size: 0.9em;
  box-shadow: var(--shadow-light);
}

#footer a {
    color: var(--primary-color);
    font-weight: 500;
}


/* ====================================
   * 响应式设计（针对小屏幕）
   * ==================================== */

@media screen and (max-width: 1024px) { /* 调整断点，让侧边栏更早切换 */
    #home {
        padding: var(--spacing-md);
    }
    .main-container {
        flex-direction: column;
        gap: 0; /* 小屏幕下模块间距由 .day 和 .blog-side 自身的 margin-bottom 控制 */
    }
    #mainContent {
        width: 100%;
        min-width: unset;
    }
    #sideBar {
        width: 100%;
        min-width: unset;
        max-width: unset;
        padding: 0; /* 模块自身带 padding */
        gap: var(--spacing-md); /* 小屏幕下侧边栏模块间距 */
    }
    .day {
        margin-bottom: var(--spacing-md);
    }
    .blog-side {
        margin-bottom: var(--spacing-md);
    }
    #Header1_HeaderTitle {
        padding: var(--spacing-md) 15px;
        margin-bottom: var(--spacing-md);
        border-radius: 0; /* 小屏幕下页眉可以全宽 */
    }
    #Header1_HeaderTitle h1 {
        font-size: 2em;
    }
    #navList ul {
        flex-wrap: wrap;
        gap: 15px;
    }
    .postTitle a {
        font-size: 1.4em;
    }
    .sidebar-title {
        font-size: 1.2em;
    }
}

@media screen and (max-width: 600px) {
    #home {
        padding: 10px;
    }
    #Header1_HeaderTitle h1 {
        font-size: 1.8em;
    }
    #navList ul {
        flex-direction: column; /* 导航项垂直排列 */
        align-items: center;
    }
    #navList a {
        width: 80%; /* 导航项宽度 */
        text-align: center;
    }
    .day {
        padding: var(--spacing-md) 15px;
    }
    .postTitle a {
        font-size: 1.2em;
    }
    .postDesc {
        font-size: 0.9em;
    }
    .postfoot {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .sidebar-title {
        font-size: 1.1em;
    }
}