/* ========== Categories page (Completely Redesigned) ========== */

:root {
  --categ-accent: var(--btn-bg, #ff9cc1);
  --categ-border: rgba(160, 160, 160, 0.2);
  --categ-soft-bg: rgba(255, 156, 193, 0.1);
  --categ-text-muted: #858585;
}

html[data-theme='dark'] {
  --categ-border: rgba(255, 255, 255, 0.1);
  --categ-soft-bg: rgba(255, 156, 193, 0.15);
  --categ-text-muted: #a0a0a0;
}

/* Reset basics */
.category-lists {
  padding: 0;
}

.category-lists ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Top-level grid */
.category-lists > .category-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Top-level Cards */
.category-lists > .category-list > .category-list-item {
  background: var(--card-bg);
  border: 1px solid var(--categ-border);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
}

/* Override Hexo butterfly default list bullets */
.category-lists .category-list-item::before,
.category-lists .category-list-child::before,
.category-lists .category-list-item:hover::before {
  display: none !important;
}

/* Card Hover */
.category-lists > .category-list > .category-list-item:hover {
  border-color: var(--categ-accent);
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--categ-accent);
}
html[data-theme='dark'] .category-lists > .category-list > .category-list-item:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--categ-accent);
}

/* Top-level Title */
.category-lists > .category-list > .category-list-item > a.category-list-link {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--font-color);
  margin-bottom: 4px;
  padding-right: 50px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.category-lists > .category-list > .category-list-item:hover > a.category-list-link {
  color: var(--categ-accent);
  transform: translateX(4px);
}

/* Add an icon to the top-level title */
@keyframes icon-bounce-wiggle {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.2) rotate(-12deg); }
  50% { transform: scale(1.2) rotate(12deg); }
  75% { transform: scale(1.15) rotate(-6deg); }
  100% { transform: scale(1.15) rotate(0deg); }
}

.category-lists > .category-list > .category-list-item > a.category-list-link::before {
  content: '\f0c2';
  font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 20px;
  margin-right: 10px;
  color: var(--categ-accent);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-lists > .category-list > .category-list-item:hover > a.category-list-link::before {
  animation: icon-bounce-wiggle 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Top-level Count */
.category-lists > .category-list > .category-list-item > .category-list-count {
  position: absolute;
  top: 24px;
  right: 24px;
  height: 28px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--categ-text-muted);
  background: transparent;
  border-radius: 8px;
  padding: 0 8px;
  min-width: auto;
  text-align: right;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.category-lists > .category-list > .category-list-item:hover > .category-list-count {
  background: var(--categ-accent);
  color: #fff;
  transform: translateX(-4px);
}

.category-lists > .category-list > .category-list-item > .category-list-count::before {
  content: '';
}

.category-lists > .category-list > .category-list-item > .category-list-count::after {
  content: ' 篇';
}

/* Child Category Container - Transform from list to Tags/Pills */
.category-lists .category-list-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  border-left: none;
  padding-left: 0;
}

/* Child Category Item (Pill) */
.category-lists .category-list-child .category-list-item {
  display: inline-flex;
  align-items: center;
  background: var(--categ-soft-bg);
  padding: 6px 8px 6px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  margin: 0;
  box-shadow: none;
}

/* Child Category Hover */
.category-lists .category-list-child .category-list-item:hover {
  background: var(--categ-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--categ-soft-bg);
}

/* Child Category Link */
.category-lists .category-list-child .category-list-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--font-color);
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* Child Category Count */
.category-lists .category-list-child .category-list-count {
  font-size: 11.5px;
  color: var(--categ-text-muted);
  margin-left: 8px;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 6px;
  height: auto;
  line-height: 1.2;
  min-width: auto;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

html[data-theme='dark'] .category-lists .category-list-child .category-list-count {
  background: rgba(255, 255, 255, 0.1);
}

.category-lists .category-list-child .category-list-count::before {
  content: '';
}
.category-lists .category-list-child .category-list-count::after {
  content: ' 篇';
}

/* Change colors inside child pill on hover */
.category-lists .category-list-child .category-list-item:hover > .category-list-link,
.category-lists .category-list-child .category-list-item:hover > .category-list-count {
  color: #fff;
}

.category-lists .category-list-child .category-list-item:hover > .category-list-count {
  background: rgba(255, 255, 255, 0.25);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .category-lists > .category-list > .category-list-item {
    padding: 20px;
  }
  .category-lists > .category-list > .category-list-item > .category-list-count {
    top: 22px;
    right: 20px;
  }
}




/* ================================================= */
/* 修改除主页外的页面顶部 Banner 高度（分类、标签、归档等） */
/* ================================================= */
/* 电脑端高度设置 */
#page-header.not-home-page {
  height: 280px !important; /* 原默认是 400px，这里改成您想要的高度，比如 300px */
}
/* 电脑端 - 文章详情页高度设置（如果您也想一起改的话） */
#page-header.post-bg {
  height: 280px !important; /* 原默认是 400px */
}
/* 修复由于高度改变导致标题文字位置偏移的问题，让其自动垂直居中 */
#page-header.not-home-page #page-site-info {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 25px; /* 给顶部导航栏留出视觉空间，可自行微调 */
}
/* ------------------------------------------------- */
/* 适配手机端（屏幕宽度小于 768px 时生效）           */
/* ------------------------------------------------- */
@media screen and (max-width: 768px) {
  #page-header.not-home-page {
    height: 220px !important; /* 原默认是 280px */
  }
  
  #page-header.post-bg {
    height: 250px !important; /* 原默认是 360px */
  }
  /* 手机端由于屏幕小，稍微往上挪一点点 */
  #page-header.not-home-page #page-site-info {
    margin-top: 10px; 
  }
}

/* ================================================= */
/* 归档页面 (Archive) 现代连贯时间轴美化               */
/* ================================================= */

/* 恢复并美化主时间轴线，增强时间线感觉 */
.article-sort {
  border-left: 2px solid var(--categ-border) !important;
  padding-left: 20px !important;
  margin-left: 20px !important;
  position: relative;
}

/* 顶部总文章数标题 */
.article-sort-title {
  font-size: 24px !important;
  font-weight: bold !important;
  padding-bottom: 24px !important;
  margin-left: -20px !important;
  padding-left: 0 !important;
  display: inline-block;
}

/* 年份标签 (Year) - 悬浮在时间轴上 */
.article-sort-item.year {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--font-color) !important;
  margin: 30px 0 20px -30px !important; /* 偏移对齐竖线 */
  padding: 4px 16px !important;
  background: var(--card-bg);
  border: 1px solid var(--categ-border);
  border-radius: 20px;
  display: inline-block !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  position: relative;
  z-index: 2;
}

/* 隐藏原本修饰标题的圆点和竖线 */
.article-sort-title::before,
.article-sort-title::after,
.article-sort-item.year::after,
.article-sort-item.year::before {
  display: none !important;
}

/* 时间线上的文章节点 - 取消独立卡片，增强一体性和连贯性 */
.article-sort-item:not(.year) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 16px 0 !important;
  margin: 0 !important;
  border-bottom: 1px dashed var(--categ-border) !important;
  display: flex !important;
  align-items: center;
  transition: all 0.3s ease !important;
  position: relative;
}

html[data-theme='dark'] .article-sort-item:not(.year) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

/* 最后一个元素去掉底边框 */
.article-sort-item:not(.year):last-child {
  border-bottom: none !important;
}

/* 时间轴上的小圆点（重新设计） */
.article-sort-item:not(.year)::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: -26px; /* 对应 padding-left: 20px + border:2px 的中心 */
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: var(--card-bg);
  border: 2px solid var(--categ-border);
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 2;
}

/* 悬浮时的交互 - 整体向右微移，点亮时间轴圆点 */
.article-sort-item:not(.year):hover {
  transform: translateX(10px) !important;
  border-color: transparent !important; /* 覆盖之前的border颜色 */
}

/* 去掉之前由于继承导致的 box-shadow */
html[data-theme='dark'] .article-sort-item:not(.year):hover {
  box-shadow: none !important;
}

/* 悬浮时点亮圆点 */
.article-sort-item:not(.year):hover::before {
  border-color: var(--categ-accent) !important;
  background: var(--categ-accent) !important;
  box-shadow: 0 0 10px var(--categ-accent);
}

/* 有无封面时的高度自适应 */
.article-sort-item.no-article-cover {
  height: auto !important;
}

/* 缩略图美化 */
.article-sort-item-img {
  width: 100px !important;
  height: 70px !important;
  border-radius: 8px !important;
  margin-right: 16px !important;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.article-sort-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.article-sort-item:hover .article-sort-item-img img {
  transform: scale(1.1);
}

/* 文章信息容器 */
.article-sort-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 !important;
}

/* 强化时间显示（弥补没有月份分组的问题） */
.article-sort-item-time {
  font-size: 14px !important;
  color: var(--categ-accent) !important;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.article-sort-item-time i {
  margin-right: 6px;
  font-size: 14px;
}

/* 文章标题 */
.article-sort-item-title {
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--font-color) !important;
  transition: color 0.3s !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 覆盖原主题标题 hover 的位移，因为我们已经给整个 item 加了位移 */
.article-sort-item-title:hover {
  transform: none !important;
  color: var(--categ-accent) !important;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .article-sort {
    margin-left: 10px !important;
  }
  .article-sort-item.year {
    margin-left: -20px !important;
    font-size: 20px !important;
  }
  .article-sort-item:not(.year)::before {
    left: -26px;
  }
  .article-sort-item-img {
    width: 80px !important;
    height: 60px !important;
    margin-right: 12px !important;
  }
  .article-sort-item-title {
    font-size: 15px !important;
  }
}

/* ================================================= */
/* 优化没有子分类的卡片 (Empty Child Categories)         */
/* ================================================= */

/* 当卡片没有子分类时，内容整体垂直居中，填补空缺感 */
.category-lists > .category-list > .category-list-item:not(:has(.category-list-child)) {
  justify-content: center;
  overflow: hidden; /* 防止装饰图标溢出 */
}

/* 取消原有的 bottom margin，使其完美居中 */
.category-lists > .category-list > .category-list-item:not(:has(.category-list-child)) > a.category-list-link {
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* 将右上角的文章篇数也下移到绝对垂直居中位置 */
.category-lists > .category-list > .category-list-item:not(:has(.category-list-child)) > .category-list-count {
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* 修复悬浮时的交互：继承垂直居中，加入水平左移 */
.category-lists > .category-list > .category-list-item:not(:has(.category-list-child)):hover > .category-list-count {
  transform: translateY(-50%) translateX(-4px);
}

/* 添加一个巨大的半透明水印图标作为背景装饰，极大提升卡片质感 */
.category-lists > .category-list > .category-list-item:not(:has(.category-list-child))::after {
  content: '\f0c2'; /* 与标题一致的云朵图标 */
  font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: -10px;
  bottom: -20px;
  font-size: 100px;
  color: var(--categ-text-muted);
  opacity: 0.04;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 0;
}

/* 悬浮时水印图标的律动效果 */
.category-lists > .category-list > .category-list-item:not(:has(.category-list-child)):hover::after {
  transform: scale(1.1) rotate(-15deg);
  opacity: 0.08;
  color: var(--categ-accent);
}

/* 暗色模式下进一步微调不透明度 */
html[data-theme='dark'] .category-lists > .category-list > .category-list-item:not(:has(.category-list-child))::after {
  opacity: 0.02;
}

html[data-theme='dark'] .category-lists > .category-list > .category-list-item:not(:has(.category-list-child)):hover::after {
  opacity: 0.05;
}

/* ================================================= */
/* 优化文章内部字体大小和行高 (Post Typography)       */
/* ================================================= */

/* 调整正文容器字体和行高 */
#article-container {
  font-size: 16px !important;
  line-height: 2 !important;
}
h3 {
  font-size: 20px !important;

}
h4 {
  font-size: 18px !important;

}
/* 适配超大屏幕，让正文字体再稍微大一点 */
/* @media screen and (min-width: 1600px) {
  #article-container {
    font-size: 17px !important;
  }
} */

/* 调整段落之间的间距，让阅读呼吸感更强 */
/* #article-container p {
  margin: 0 0 16px 0 !important;
} */

/* 确保列表的字体大小和行高也一致 */
#article-container ul,
#article-container ol {
  font-size: 16px !important;
  line-height: 2 !important;
}