/* ======================================================
 * 文件: header.css
 * 职责: 导航栏组件样式
 * 可修改性: 可修改导航栏外观、颜色、布局
 * 可删除性: 不可删除，Header组件依赖此样式
 * 学习知识点: CSS定位、Flexbox、过渡动画、响应式
 * ====================================================== */

/* ==================== 导航栏基础样式 ==================== */
.header {
  position: fixed;                    /* 固定在顶部 */
  top: 0;                             /* 距离顶部0 */
  left: 0;                            /* 距离左侧0 */
  right: 0;                           /* 距离右侧0 */
  z-index: 1000;                      /* 设置最高层级，确保在其他元素之上 */
  background-color: var(--color-bg-primary); /* 使用设计变量中的背景色 */
  border-bottom: 1px solid var(--color-border); /* 底部边框 */
  transition: all var(--transition-normal); /* 过渡动画 */
}

/* 滚动时的导航栏样式 */
.header.is-scrolled {
  box-shadow: var(--shadow-md);       /* 添加阴影 */
  background-color: rgba(255, 255, 255, 0.95); /* 半透明背景（浅色模式） */
}

/* 深色模式下滚动时的样式 */
.dark .header.is-scrolled {
  background-color: rgba(17, 24, 39, 0.95); /* 深色半透明背景 */
}

/* ==================== Logo样式 ==================== */
.header__logo {
  flex-shrink: 0;                     /* 不缩小 */
}

.header__logo a {
  display: flex;                      /* 弹性布局 */
  align-items: center;                /* 垂直居中 */
  gap: var(--spacing-2);              /* 图标和文字间距 */
  font-size: var(--font-size-xl);     /* 大号字体 */
  font-weight: var(--font-weight-bold); /* 粗体 */
  color: var(--color-text-primary);   /* 使用设计变量中的文字颜色 */
  text-decoration: none;              /* 去掉下划线 */
}

.logo-icon {
  font-size: var(--font-size-2xl);    /* 图标字号 */
}

/* ==================== 导航菜单样式 ==================== */
.header__nav {
  flex-grow: 1;                       /* 占据剩余空间 */
  display: flex;                      /* 弹性布局 */
  justify-content: center;            /* 水平居中 */
}

.nav-list {
  display: flex;                      /* 弹性布局 */
  list-style: none;                   /* 去掉列表样式 */
  gap: var(--spacing-8);              /* 菜单项间距 */
}

.nav-item a {
  display: inline-flex;               /* 内联弹性布局 */
  align-items: center;                /* 垂直居中 */
  padding: var(--spacing-2) var(--spacing-4); /* 内边距 */
  font-size: var(--font-size-base);   /* 基准字体大小 */
  font-weight: var(--font-weight-medium); /* 中等粗细 */
  color: var(--color-text-secondary); /* 次要文字颜色 */
  text-decoration: none;              /* 去掉下划线 */
  border-radius: var(--radius-md);    /* 圆角 */
  transition: all var(--transition-fast); /* 快速过渡 */
}

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

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

/* ==================== 功能区样式 ==================== */
.header__actions {
  display: flex;                      /* 弹性布局 */
  align-items: center;                /* 垂直居中 */
  gap: var(--spacing-4);              /* 元素间距 */
}

/* ==================== 搜索框样式 ==================== */
.search {
  display: flex;                      /* 弹性布局 */
  align-items: center;                /* 垂直居中 */
  background-color: var(--color-bg-secondary); /* 背景色 */
  border-radius: var(--radius-full);  /* 完全圆角 */
  padding: var(--spacing-2) var(--spacing-4); /* 内边距 */
  transition: all var(--transition-fast); /* 快速过渡 */
}

.search:hover {
  background-color: var(--color-bg-tertiary); /* 悬停时背景变深 */
}

.search__input {
  border: none;                       /* 去掉边框 */
  background: transparent;            /* 透明背景 */
  outline: none;                      /* 去掉焦点轮廓 */
  font-size: var(--font-size-sm);     /* 小号字体 */
  color: var(--color-text-primary);   /* 文字颜色 */
  width: 150px;                       /* 输入框宽度 */
  transition: width var(--transition-normal); /* 宽度过渡 */
}

.search__input:focus {
  width: 200px;                       /* 聚焦时变宽 */
}

.search__input::placeholder {
  color: var(--color-text-muted);     /* 占位符颜色 */
}

.search__button {
  border: none;                       /* 去掉边框 */
  background: none;                   /* 透明背景 */
  cursor: pointer;                    /* 鼠标指针变手型 */
  font-size: var(--font-size-base);   /* 基准字体大小 */
  padding: 0;                         /* 去掉内边距 */
}

/* ==================== 主题切换按钮样式 ==================== */
.theme-toggle {
  border: none;                       /* 去掉边框 */
  background: none;                   /* 透明背景 */
  cursor: pointer;                    /* 鼠标指针变手型 */
  font-size: var(--font-size-xl);     /* 大号字体 */
  padding: var(--spacing-2);          /* 内边距 */
  border-radius: var(--radius-md);    /* 圆角 */
  transition: background-color var(--transition-fast); /* 背景色过渡 */
}

.theme-toggle:hover {
  background-color: var(--color-bg-secondary); /* 悬停时背景色 */
}

/* ==================== 移动端菜单按钮样式 ==================== */
.mobile-menu-btn {
  border: none;                       /* 去掉边框 */
  background: none;                   /* 透明背景 */
  cursor: pointer;                    /* 鼠标指针变手型 */
  font-size: var(--font-size-xl);     /* 大号字体 */
  padding: var(--spacing-2);          /* 内边距 */
  color: var(--color-text-primary);   /* 文字颜色 */
}

/* ==================== 移动端导航菜单样式 ==================== */
.mobile-nav {
  position: fixed;                    /* 固定定位 */
  top: 60px;                          /* 距离顶部（导航栏高度） */
  left: 0;                            /* 距离左侧0 */
  right: 0;                           /* 距离右侧0 */
  background-color: var(--color-bg-primary); /* 背景色 */
  border-bottom: 1px solid var(--color-border); /* 底部边框 */
  box-shadow: var(--shadow-lg);       /* 阴影 */
  transform: translateY(-100%);       /* 默认向上隐藏 */
  opacity: 0;                         /* 默认透明 */
  visibility: hidden;                 /* 默认不可见 */
  transition: all var(--transition-normal); /* 过渡动画 */
}

.mobile-nav.is-open {
  transform: translateY(0);           /* 打开时恢复位置 */
  opacity: 1;                         /* 变为不透明 */
  visibility: visible;                /* 变为可见 */
}

.mobile-nav-list {
  list-style: none;                   /* 去掉列表样式 */
  padding: var(--spacing-4);          /* 内边距 */
}

.mobile-nav-item {
  margin-bottom: var(--spacing-2);    /* 底部间距 */
}

.mobile-nav-item:last-child {
  margin-bottom: 0;                   /* 最后一项去掉底部间距 */
}

.mobile-nav-item a {
  display: block;                     /* 块级显示 */
  padding: var(--spacing-4);          /* 内边距 */
  font-size: var(--font-size-lg);     /* 大号字体 */
  color: var(--color-text-primary);   /* 文字颜色 */
  text-decoration: none;              /* 去掉下划线 */
  border-radius: var(--radius-md);    /* 圆角 */
  transition: background-color var(--transition-fast); /* 背景色过渡 */
}

.mobile-nav-item a:hover {
  background-color: var(--color-bg-secondary); /* 悬停时背景色 */
}

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

/* ==================== 响应式调整 ==================== */
@media (max-width: var(--breakpoint-md)) {
  /* 移动端搜索框隐藏 */
  .search {
    display: none;
  }
  
  /* 移动端导航栏容器 */
  .header .container {
    justify-content: space-between;    /* 两端对齐 */
  }
}