/* ======================================================
 * 文件: sidebar.css
 * 职责: 侧边栏组件样式
 * 可修改性: 可修改侧边栏外观、颜色、布局
 * 可删除性: 可删除，Sidebar组件依赖此样式
 * 学习知识点: CSS布局、Flexbox、响应式
 * ====================================================== */

/* ==================== 侧边栏基础样式 ==================== */
.sidebar {
  width: var(--sidebar-width);        /* 使用设计变量中的宽度 */
  flex-shrink: 0;                     /* 不缩小 */
}

/* ==================== 侧边栏模块样式 ==================== */
.sidebar-section {
  background-color: var(--color-bg-primary); /* 模块背景 */
  border-radius: var(--radius-lg);    /* 圆角 */
  box-shadow: var(--shadow-md);       /* 阴影效果 */
  border: 1px solid var(--color-border); /* 边框 */
  padding: var(--spacing-6);          /* 内边距 */
  margin-bottom: var(--spacing-6);    /* 底部间距 */
}

/* 关于博主模块特殊样式 */
.sidebar-section--about {
  text-align: center;                 /* 文本居中 */
}

/* ==================== 模块标题样式 ==================== */
.sidebar-section__title {
  font-size: var(--font-size-lg);     /* 大号字体 */
  font-weight: var(--font-weight-semibold); /* 半粗体 */
  color: var(--color-text-primary);   /* 主要文字颜色 */
  margin-bottom: var(--spacing-4);    /* 底部间距 */
  display: flex;                      /* 弹性布局 */
  align-items: center;                /* 垂直居中 */
  gap: var(--spacing-2);              /* 图标和文字间距 */
}

.section-icon {
  font-size: var(--font-size-base);   /* 图标字号 */
}

/* ==================== 侧边栏列表样式 ==================== */
.sidebar-list {
  list-style: none;                   /* 去掉列表样式 */
  padding: 0;                         /* 去掉内边距 */
  margin: 0;                          /* 去掉外边距 */
}

.sidebar-list-item {
  margin-bottom: var(--spacing-2);    /* 列表项间距 */
}

.sidebar-list-item:last-child {
  margin-bottom: 0;                   /* 最后一项去掉间距 */
}

.sidebar-list-item a {
  display: flex;                      /* 弹性布局 */
  align-items: center;                /* 垂直居中 */
  justify-content: space-between;     /* 两端对齐 */
  padding: var(--spacing-3);          /* 内边距 */
  font-size: var(--font-size-sm);     /* 小号字体 */
  color: var(--color-text-secondary); /* 次要文字颜色 */
  text-decoration: none;              /* 去掉下划线 */
  border-radius: var(--radius-md);    /* 圆角 */
  transition: all var(--transition-fast); /* 快速过渡 */
}

.sidebar-list-item a:hover {
  color: var(--color-primary);        /* 悬停时变为主色 */
  background-color: var(--color-bg-secondary); /* 悬停时背景色 */
}

.sidebar-list-item a.active {
  color: var(--color-primary);        /* 激活状态使用主色 */
  background-color: var(--color-primary-light); /* 激活状态背景色 */
}

/* 紧凑列表样式 */
.sidebar-list--compact .sidebar-list-item a {
  padding: var(--spacing-2) var(--spacing-3); /* 减小内边距 */
  font-size: var(--font-size-xs);     /* 更小的字体 */
  justify-content: flex-start;        /* 左对齐 */
}

/* ==================== 徽章样式 ==================== */
.sidebar-badge {
  background-color: var(--color-bg-tertiary); /* 徽章背景 */
  color: var(--color-text-secondary); /* 徽章文字颜色 */
  font-size: var(--font-size-xs);     /* 小号字体 */
  padding: var(--spacing-1) var(--spacing-2); /* 内边距 */
  border-radius: var(--radius-full);  /* 完全圆角 */
  font-weight: var(--font-weight-medium); /* 中等粗细 */
}

/* ==================== 标签云样式 ==================== */
.tag-cloud {
  display: flex;                      /* 弹性布局 */
  flex-wrap: wrap;                    /* 换行 */
  gap: var(--spacing-2);              /* 标签间距 */
}

.tag-cloud__tag {
  display: inline-flex;               /* 内联弹性布局 */
  align-items: center;                /* 垂直居中 */
  padding: var(--spacing-1) var(--spacing-3); /* 内边距 */
  border-radius: var(--radius-full);  /* 完全圆角 */
  font-weight: var(--font-weight-medium); /* 中等粗细 */
  background-color: var(--color-bg-secondary); /* 背景色 */
  color: var(--color-text-secondary); /* 文字颜色 */
  cursor: pointer;                    /* 鼠标指针变手型 */
  transition: all var(--transition-fast); /* 快速过渡 */
}

.tag-cloud__tag:hover {
  background-color: var(--color-primary); /* 悬停时变为主色 */
  color: white;                       /* 悬停时文字变白 */
}

.tag-cloud__tag.active {
  background-color: var(--color-primary); /* 激活状态主色 */
  color: white;                       /* 激活状态白色文字 */
}

/* ==================== 关于博主模块样式 ==================== */
.about-content {
  display: flex;                      /* 弹性布局 */
  flex-direction: column;             /* 垂直排列 */
  align-items: center;                /* 水平居中 */
}

.about-avatar {
  width: 80px;                        /* 头像宽度 */
  height: 80px;                       /* 头像高度 */
  border-radius: 50%;                 /* 圆形头像 */
  border: 3px solid var(--color-primary); /* 主色边框 */
  margin-bottom: var(--spacing-3);    /* 底部间距 */
}

.about-name {
  font-size: var(--font-size-lg);     /* 大号字体 */
  font-weight: var(--font-weight-semibold); /* 半粗体 */
  color: var(--color-text-primary);   /* 主要文字颜色 */
  margin-bottom: var(--spacing-2);    /* 底部间距 */
}

.about-bio {
  font-size: var(--font-size-sm);     /* 小号字体 */
  color: var(--color-text-secondary); /* 次要文字颜色 */
  margin-bottom: var(--spacing-2);    /* 底部间距 */
  line-height: 1.5;                   /* 行高 */
}

.about-location {
  font-size: var(--font-size-xs);     /* 小号字体 */
  color: var(--color-text-muted);     /* 辅助文字颜色 */
  margin-bottom: var(--spacing-4);    /* 底部间距 */
}

.about-link {
  font-size: var(--font-size-sm);     /* 小号字体 */
  font-weight: var(--font-weight-medium); /* 中等粗细 */
  color: var(--color-primary);        /* 主色 */
  text-decoration: none;              /* 去掉下划线 */
  padding: var(--spacing-2) var(--spacing-4); /* 内边距 */
  border-radius: var(--radius-md);    /* 圆角 */
  border: 1px solid var(--color-primary); /* 主色边框 */
  transition: all var(--transition-fast); /* 快速过渡 */
}

.about-link:hover {
  background-color: var(--color-primary); /* 悬停时背景变为主色 */
  color: white;                       /* 悬停时文字变白 */
}

/* ==================== 响应式调整 ==================== */
@media (max-width: var(--breakpoint-md)) {
  /* 移动端侧边栏变为全宽 */
  .sidebar {
    width: 100%;                       /* 全宽 */
    order: 2;                          /* 排在主内容之后 */
  }
  
  /* 移动端标签云居中 */
  .tag-cloud {
    justify-content: center;           /* 水平居中 */
  }
}