/* ===== 工具库样式 ===== */

/* 全局重置：清除默认边距和内边距，使用 border-box 便于计算宽度 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置全局字体和行高 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
}

/* 
  覆盖 PaperMod 主题的宽度限制
  PaperMod 默认限制内容宽度，这里改为 1400px 并居中显示
*/
.post-single,
.post-content,
.main {
  max-width: 100% !important;
  width: 100% !important;
}

.post-single {
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* 标题居中显示 */
.post-header,
.post-title {
  text-align: center !important;
}

/* 工具库容器：限制最大宽度为 1400px，左右自动居中 */
.toolbox-container {
  width: 100%;
  padding: 20px;
  max-width: 1400px !important;
  margin: 0 auto;
}

/* 头部区域：标题和描述 */
.toolbox-header {
  text-align: center;
  margin-bottom: 40px;
}

.toolbox-header h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
  color: var(--text-color, #333);
}

.toolbox-header p {
  font-size: 1.1em;
  color: var(--text-secondary, #666);
}

/* 分类筛选按钮容器：使用 flexbox 水平排列，自动换行 */
.category-filter {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* 分类按钮：圆形边框设计，点击时改变颜色 */
.category-btn {
  padding: 10px 20px;
  border: 2px solid var(--border);
  background: var(--theme);
  border-radius: 25px;
  cursor: pointer;
  font-size: 1em;
  transition: all 0.3s ease;
  color: var(--primary);
}

/* 鼠标悬停效果：边框和文字变成主色 */
.category-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* 激活状态：背景变成蓝色，文字变白 */
.category-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

/* 工具卡片网格：使用 CSS Grid 自动排列卡片 */
.tools-grid {
  display: grid;
  /* 
    repeat(auto-fill, minmax(280px, 1fr))：
    - auto-fill：自动填充列数
    - minmax(280px, 1fr)：每列最小 280px，最大自动扩展
    这样可以根据屏幕宽度自动调整显示的卡片数量
  */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px;
  margin-bottom: 40px;
  width: 100% !important;
}

/* 工具卡片：白色背景，有阴影和边框 */
.tool-card {
  background: white;
  border: 1px solid var(--border-color, #eee);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 卡片悬停效果：上升 + 阴影加强 + 边框变色 */
.tool-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-color, #007bff);
}

/* 隐藏的卡片：用于筛选时隐藏不匹配的工具 */
.tool-card.hidden {
  display: none;
}

/* 
  图标区域：固定高度 80px，使用 flexbox 居中
  这样 SVG 图片和 Emoji 都能在同样的空间内正确显示
*/
.tool-icon {
  margin-bottom: 15px;
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG 图片：限制最大尺寸，保持宽高比 */
.tool-icon img {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Emoji 表情：设置合适的字体大小 */
.tool-icon-emoji {
  font-size: 3em;
  line-height: 1;
}

/* 工具名称：粗体显示，字体较大 */
.tool-name {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--text-color, #333);
}

/* 工具描述：灰色文字，flex-grow: 1 让它占据剩余空间 */
.tool-description {
  font-size: 0.95em;
  color: var(--text-secondary, #666);
  margin-bottom: 15px;
  flex-grow: 1;  /* 自动扩展填充卡片空间，使下载按钮始终在底部 */
}

/* 下载按钮：蓝色背景，白色文字，点击时放大 */
.tool-download {
  display: inline-block;
  padding: 10px 20px;
  background: var(--primary-color, #007bff);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-align: center;
  font-weight: 500;
}

/* 下载按钮悬停效果：颜色加深 + 放大 */
.tool-download:hover {
  background: var(--primary-hover, #0056b3);
  transform: scale(1.05);  /* 放大 5% */
}

/* ===== 响应式设计 ===== */

/* 平板设备（宽度 ≤ 768px） */
@media (max-width: 768px) {
  /* 缩小标题字体 */
  .toolbox-header h1 {
    font-size: 1.8em;
  }

  /* 减小卡片最小宽度，一行显示更多卡片 */
  .tools-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }

  /* 减小按钮间距 */
  .category-filter {
    gap: 8px;
  }

  /* 缩小按钮大小 */
  .category-btn {
    padding: 8px 16px;
    font-size: 0.9em;
  }
}

/* 手机设备（宽度 ≤ 480px） */
@media (max-width: 480px) {
  /* 减少容器内边距，充分利用屏幕空间 */
  .toolbox-container {
    padding: 10px;
  }

  /* 进一步缩小标题 */
  .toolbox-header h1 {
    font-size: 1.5em;
  }

  /* 手机上一行只显示一个卡片 */
  .tools-grid {
    grid-template-columns: 1fr;
  }

  /* 分类按钮垂直排列 */
  .category-filter {
    flex-direction: column;
  }

  /* 按钮宽度 100%，占满整行 */
  .category-btn {
    width: 100%;
  }
}

/* ===== 深色模式支持 ===== */
/* PaperMod 使用 [data-theme="dark"] 属性来切换深色模式 */

/* 卡片：深色背景 + 浅色文字 */
[data-theme="dark"] .tool-card {
  background: var(--entry) !important;
  border-color: var(--tertiary) !important;
  color: var(--content);
}

/* 卡片悬停效果：深色背景下的阴影 */
[data-theme="dark"] .tool-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  border-color: var(--primary);
}

/* 工具名称：浅色文字 */
[data-theme="dark"] .tool-name {
  color: var(--primary);
}

/* 工具描述：灰色文字 */
[data-theme="dark"] .tool-description {
  color: var(--secondary);
}

/* 分类按钮：深色背景 + 浅色文字 */
[data-theme="dark"] .category-btn {
  background: var(--entry) !important;
  border-color: var(--tertiary) !important;
  color: var(--content);
}

/* 分类按钮悬停效果：边框和文字变成主色 */
[data-theme="dark"] .category-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* 分类按钮激活状态：使用主题的主色 */
[data-theme="dark"] .category-btn.active {
  background: var(--primary) !important;
  color: var(--theme) !important;
  border-color: var(--primary) !important;
}

/* 下载按钮：深色模式下使用主题颜色 */
[data-theme="dark"] .tool-download {
  background: var(--primary) !important;
  color: var(--theme) !important;
}

[data-theme="dark"] .tool-download:hover {
  background: var(--secondary) !important;
}