/*
 * 个人网站笔记博客 - 自定义CSS样式文件
 * 基于Tailwind CSS的扩展样式，实现类似廖雪峰官方网站的视觉效果
 * 注：本CSS文件与Tailwind CSS配合使用，提供网站的自定义样式扩展
 */

/* 导入Google字体 - Noto Serif SC，支持不同字重的中文字体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

/* 全局CSS变量定义 - 用于亮色模式和主题切换 */
:root {
  /* 亮色模式颜色变量 - 背景色、文本色、边框色等 */
  --color-bg-primary: #ffffff;      /* 主要背景色：白色 */
  --color-bg-secondary: #f5f5f5;    /* 次要背景色：浅灰色 */
  --color-text-primary: #333333;    /* 主要文本色：深灰色 */
  --color-text-secondary: #666666;  /* 次要文本色：中灰色 */
  --color-text-tertiary: #999999;   /* 第三级文本色：浅灰色 */
  --color-border: #e0e0e0;          /* 边框颜色：浅灰色 */
  --color-primary: #3498db;         /* 主色调：蓝色 */
  --color-primary-hover: #2980b9;   /* 主色调悬停色：深蓝色 */
  --color-success: #2ecc71;         /* 成功状态色：绿色 */
  --color-warning: #f39c12;         /* 警告状态色：橙色 */
  --color-danger: #e74c3c;          /* 危险状态色：红色 */
  
  /* 侧边栏宽度变量 - 统一管理侧边栏宽度 */
  --sidebar-width: 300px;
  
  /* 字体设置变量 - 使用导入的Google字体 */
  --font-family: 'Noto Serif SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 暗色模式颜色变量 - 覆盖默认亮色模式变量 */
.dark {
  --color-bg-primary: #1a1a1a;      /* 暗色模式主要背景色：近黑色 */
  --color-bg-secondary: #2a2a2a;    /* 暗色模式次要背景色：深灰色 */
  --color-text-primary: #e0e0e0;    /* 暗色模式主要文本色：浅灰色 */
  --color-text-secondary: #b0b0b0;  /* 暗色模式次要文本色：中灰色 */
  --color-text-tertiary: #707070;   /* 暗色模式第三级文本色：深灰色 */
  --color-border: #3a3a3a;          /* 暗色模式边框色：中深灰色 */
  --color-primary: #3498db;         /* 暗色模式主色调：保持蓝色不变 */
  --color-primary-hover: #2980b9;   /* 暗色模式主色调悬停色：保持不变 */
}

/* 全局重置和基础样式设置 - 应用于整个body元素 */
body {
  font-family: var(--font-family);          /* 使用CSS变量设置字体 */
  background-color: var(--color-bg-secondary); /* 使用CSS变量设置背景色 */
  color: var(--color-text-primary);         /* 使用CSS变量设置文本色 */
  line-height: 1.6;                         /* 设置行高为1.6，提高可读性 */
}

/* 移除所有过渡动画，实现暗色模式瞬间渲染 */
* {
  transition: none !important;
  animation: none !important;
}

/* 滚动条样式美化 - 适用于WebKit浏览器（Chrome、Safari等） */
::-webkit-scrollbar {
  width: 8px;   /* 垂直滚动条宽度 */
  height: 8px;  /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary); /* 滚动条轨道背景色 */
}

::-webkit-scrollbar-thumb {
  background: var(--color-text-tertiary); /* 滚动条滑块颜色 */
  border-radius: 4px;                     /* 滚动条滑块圆角 */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary); /* 滚动条滑块悬停颜色 */
}

/* 链接样式设置 */
a {
  color: var(--color-primary);         /* 使用主色调作为链接颜色 */
  text-decoration: none;               /* 移除默认下划线 */
  transition: color 0.2s ease;         /* 添加颜色过渡动画 */
}

a:hover {
  color: var(--color-primary-hover);   /* 悬停时使用深色主色调 */
  text-decoration: underline;          /* 悬停时显示下划线 */
}

/* 标题样式设置 - 统一标题样式 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;       /* 设置标题字重为600（半粗体） */
  margin-top: 1.5em;      /* 标题上外边距 */
  margin-bottom: 0.5em;   /* 标题下外边距 */
  line-height: 1.3;       /* 标题行高 */
}

h1 {
  font-size: 2rem;                   /* 一级标题字体大小 */
  border-bottom: 2px solid var(--color-primary); /* 底部边框，使用主色调 */
  padding-bottom: 0.5rem;            /* 底部内边距 */
}

h2 {
  font-size: 1.5rem;                 /* 二级标题字体大小 */
  border-left: 4px solid var(--color-primary); /* 左侧边框，使用主色调 */
  padding-left: 0.75rem;             /* 左侧内边距 */
}

h3 {
  font-size: 1.25rem;                /* 三级标题字体大小 */
}

/* 代码块样式 - 使用等宽字体，提高代码可读性 */
pre, code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace; /* 等宽字体 */
  background-color: #f6f8fa;         /* 代码背景色 */
  border-radius: 3px;                /* 圆角 */
  padding: 0.2em 0.4em;              /* 内边距 */
  font-size: 0.9em;                  /* 字体大小略小于正常文本 */
}

/* 暗色模式下的代码样式 */
.dark pre, .dark code {
  background-color: #2d2d2d; /* 暗色模式代码背景色 */
  color: #e6e6e6;            /* 暗色模式代码文本色 */
}

/* 预格式化文本样式 - 用于代码块 */
pre {
  padding: 1rem;           /* 增加内边距 */
  overflow-x: auto;        /* 允许水平滚动 */
  line-height: 1.45;       /* 调整行高 */
}

/* 代码块内的代码标签样式 - 重置pre内code的样式 */
pre code {
  padding: 0;              /* 重置内边距 */
  background-color: transparent; /* 透明背景 */
  border-radius: 0;        /* 无圆角 */
}

/* 表格样式 */
table {
  width: 100%;             /* 表格宽度100% */
  border-collapse: collapse; /* 边框合并 */
  margin: 1.5rem 0;        /* 上下外边距 */
}

th, td {
  padding: 0.75rem;                    /* 单元格内边距 */
  text-align: left;                    /* 文本左对齐 */
  border-bottom: 1px solid var(--color-border); /* 底部边框 */
}

th {
  background-color: var(--color-bg-primary); /* 表头背景色 */
  font-weight: 600;                   /* 表头字重 */
}

tr:hover {
  background-color: rgba(0, 0, 0, 0.02); /* 行悬停背景色（亮色模式） */
}

.dark tr:hover {
  background-color: rgba(255, 255, 255, 0.02); /* 行悬停背景色（暗色模式） */
}

/* 引用样式 */
blockquote {
  border-left: 4px solid var(--color-primary); /* 左侧粗边框 */
  padding-left: 1rem;           /* 左侧内边距 */
  margin: 1.5rem 0;             /* 上下外边距 */
  color: var(--color-text-secondary); /* 使用次要文本色 */
  font-style: italic;           /* 斜体样式 */
}

/* 列表样式 */
ul, ol {
  padding-left: 1.5rem;         /* 左侧内边距，为项目符号预留空间 */
  margin: 1rem 0;               /* 上下外边距 */
}

li {
  margin-bottom: 0.5rem;        /* 列表项之间的间距 */
}

/* 图片样式 */
img {
  max-width: 100%;              /* 确保图片不超过容器宽度 */
  height: auto;                 /* 保持图片比例 */
  border-radius: 4px;           /* 轻微圆角 */
  margin: 1rem 0;               /* 上下外边距 */
}

/* 按钮基础样式 */
.btn {
  display: inline-block;         /* 内联块元素 */
  padding: 0.5rem 1rem;         /* 内边距 */
  border-radius: 4px;           /* 圆角 */
  font-weight: 500;             /* 字重 */
  text-align: center;           /* 文本居中 */
  cursor: pointer;              /* 鼠标指针样式 */
  transition: all 0.2s ease;    /* 所有属性过渡动画 */
  border: none;                 /* 无边框 */
}

/* 主要按钮样式 */
.btn-primary {
  background-color: var(--color-primary); /* 按钮背景色 */
  color: white;                 /* 按钮文字颜色 */
}

/* 主要按钮悬停样式 */
.btn-primary:hover {
  background-color: var(--color-primary-hover); /* 悬停时背景色变深 */
  text-decoration: none;        /* 移除悬停下划线 */
}

/* 移动端侧边栏动画 */
#sidebar {
  transition: transform 0.3s ease; /* 变换属性过渡动画 */
}

/* 侧边栏激活状态 - 当父元素有active类时 */
#mobile-menu.active #sidebar {
  transform: translateX(0);     /* 从左侧滑入（默认状态为-transform-x-full） */
}

/* 教程页面样式 */
.chapter-list {
  position: sticky;             /* 粘性定位，滚动时固定在顶部 */
  top: 2rem;                    /* 距离顶部的距离 */
  max-height: calc(100vh - 4rem); /* 最大高度，考虑页面上下边距 */
  overflow-y: auto;             /* 内容超出时显示垂直滚动条 */
}

/* 章节列表链接样式 */
.chapter-list a {
  display: block;               /* 块级元素，占满整行 */
  padding: 0.5rem 0;            /* 上下内边距 */
  color: var(--color-text-primary); /* 文本颜色 */
  border-bottom: 1px solid var(--color-border); /* 底部边框 */
}

/* 章节列表链接悬停样式 */
.chapter-list a:hover {
  color: var(--color-primary);  /* 悬停时使用主色调 */
  text-decoration: none;        /* 移除下划线 */
}

/* 章节列表当前激活链接样式 */
.chapter-list a.active {
  color: var(--color-primary);  /* 使用主色调 */
  font-weight: 600;             /* 字体加粗 */
}

/* 章节内容样式 */
.chapter-content {
  padding: 1rem 0;              /* 上下内边距 */
}

/* 响应式设计调整 - 针对小屏幕设备（最大宽度768px） */
@media (max-width: 768px) {
  /* 调整标题字体大小，在移动设备上更小 */
  h1 {
    font-size: 1.75rem;         /* 减小一级标题大小 */
  }
  
  h2 {
    font-size: 1.375rem;        /* 减小二级标题大小 */
  }
  
  h3 {
    font-size: 1.125rem;        /* 减小三级标题大小 */
  }
  
  /* 调整章节列表定位，在移动设备上不使用粘性定位 */
  .chapter-list {
    position: static;           /* 静态定位 */
    max-height: none;           /* 不限制高度 */
  }
}

/* 加载动画 */
.loading {
  display: inline-block;         /* 内联块元素 */
  width: 20px;                  /* 宽高相等 */
  height: 20px;
  border: 2px solid transparent; /* 透明边框 */
  border-top-color: var(--color-primary); /* 顶部边框使用主色调 */
  border-radius: 50%;           /* 圆形 */
  animation: spin 0.8s linear infinite; /* 应用旋转动画 */
}

/* 旋转动画关键帧定义 */
@keyframes spin {
  to { transform: rotate(360deg); } /* 旋转360度 */
}

/* 进度指示器 - 用于显示页面滚动进度 */
.progress-bar {
  position: fixed;              /* 固定定位，始终在顶部 */
  top: 0;                      /* 顶部对齐 */
  left: 0;                     /* 左侧对齐 */
  width: 0;                    /* 初始宽度为0 */
  height: 3px;                 /* 高度为3px的细条 */
  background-color: var(--color-primary); /* 使用主色调 */
  z-index: 9999;               /* 最高层级，确保显示在其他元素之上 */
  transition: width 0.1s ease; /* 宽度过渡动画 */
}


/* ======================================================== */
/* 布局：教程索引页（侧边栏 + 主体 + 固定页脚）           */
/* 使用 body.has-sidebar 来启用这些布局样式，避免影响全站 */
/* ======================================================== */
.has-sidebar {
  padding-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.has-sidebar .sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background-color: var(--color-bg-primary);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  padding: 10px 0;
}

.has-sidebar .menu { list-style: none; }
.has-sidebar .menu-item { margin-bottom: 0.25rem; }

/* 侧边栏菜单标题样式 - 确保整个区域可点击并有统一的交互效果 */
.has-sidebar .menu-header {
  padding: 0.625rem 0.9375rem; /* 10px 15px */
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-radius: 0.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
}

/* 确保菜单标题中的链接占满整个容器 */
.has-sidebar .menu-header a {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none !important;
}

/* 切换图标样式 */
.has-sidebar .menu-header .toggle-icon {
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1; /* 确保图标在最上层 */
}

.has-sidebar .menu-header .toggle-icon.open { transform: rotate(90deg); }

/* 激活状态样式 - 统一的选中背景色 */
.has-sidebar .menu-header.bg-blue-50,
.has-sidebar .menu-header.dark\:bg-blue-900\/30 {
  color: var(--color-primary);
  font-weight: 500;
}

/* 子菜单样式 */
.has-sidebar .submenu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.has-sidebar .submenu.open { max-height: 400px; }

/* 子菜单项样式 - 确保整个区域可点击 */
.has-sidebar .submenu li {
  padding: 8px 15px 8px 25px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
}

/* 子菜单链接样式 */
.has-sidebar .submenu li a {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none !important;
}

/* 子菜单选中状态样式 - 与一级菜单保持一致 */
.has-sidebar .submenu li.bg-blue-50,
.has-sidebar .submenu li.dark\:bg-blue-900\/30 {
  color: var(--color-primary);
  font-weight: 500;
}

/* 确保子菜单激活状态的链接文本颜色为深蓝色 */
.has-sidebar .submenu li.bg-blue-50 a,
.has-sidebar .submenu li.dark\:bg-blue-900\/30 a,
.has-sidebar .submenu li a.text-primary {
  color: var(--color-primary) !important;
  font-weight: 500;
  text-decoration: none !important;
}

/* 确保子菜单链接在任何状态下都不会改变颜色 */
.has-sidebar .submenu li a {
  color: inherit;
  transition: color 0.1s ease;
}

/* 当子菜单项被选中时，强制其链接文本保持深蓝色 */
.has-sidebar .submenu li.active a,
.has-sidebar .submenu li.bg-blue-50 a,
.has-sidebar .submenu li.dark\:bg-blue-900\/30 a {
  color: var(--color-primary) !important;
}

.has-sidebar .content { 
  padding: 1.25rem; 
  flex: 1; 
  padding-bottom: 60px; 
}

/* 页脚固定在底部（颜色由 Tailwind 类控制） */
/* .has-sidebar footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 0; z-index: 40; } */


@media (max-width: 800px) {
  .has-sidebar { padding-left: 0; }
  .has-sidebar .sidebar { 
    position: relative; 
    width: 100%; 
    border-right: none; 
    border-bottom: 1px solid var(--color-border); 
  }
  .has-sidebar .content { padding-bottom: 60px; }
}

/* ======================================================== */
/* 教程索引页特定样式补充                                   */
/* ======================================================== */
/* 全局重置样式 */
* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

/* 确保侧边栏所有链接和文本元素都没有下划线 */
.sidebar a,
.sidebar span,
.menu-header,
.menu-header * {
    text-decoration: none !important;
    display: inline;
}

.sidebar a:hover,
.sidebar span:hover,
.menu-header:hover,
.menu-header *:hover {
    text-decoration: none !important;
}

/* 确保子菜单链接样式统一 */
.submenu li a {
    display: block !important;
    width: 100% !important;
}