/**
 * 标题展开/收起功能样式
 * 为文章标题添加可点击的折叠箭头
 */

/* 为所有标题添加定位和内边距（使用负margin抵消，确保标题不移动） */
.post-content h1[id],
.post-content h2[id],
.post-content h3[id],
.post-content h4[id],
.post-content h5[id],
.post-content h6[id] {
  position: relative !important;
  padding-left: 30px !important; /* 给箭头留空间 */
  margin-left: -30px !important; /* 负margin抵消padding，标题不移动 */
}

/* 箭头按钮容器 - 不旋转，只控制位置和背景 */
.post-content h1[id] .heading-collapse-btn,
.post-content h2[id] .heading-collapse-btn,
.post-content h3[id] .heading-collapse-btn,
.post-content h4[id] .heading-collapse-btn,
.post-content h5[id] .heading-collapse-btn,
.post-content h6[id] .heading-collapse-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 容器只做垂直居中，不旋转 */
  cursor: pointer;
  font-size: 0; /* 隐藏容器文字，只用伪元素 */
  line-height: 1;
  color: #333 !important; /* 黑色，使用!important确保覆盖 */
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  opacity: 0; /* 默认隐藏 */
  padding: 4px 5px; /* 减小padding，背景更小 */
  pointer-events: none; /* 默认不可点击 */
  display: inline-block;
}

/* 使用伪元素显示箭头图标，只有图标会旋转 */
.post-content h1[id] .heading-collapse-btn::before,
.post-content h2[id] .heading-collapse-btn::before,
.post-content h3[id] .heading-collapse-btn::before,
.post-content h4[id] .heading-collapse-btn::before,
.post-content h5[id] .heading-collapse-btn::before,
.post-content h6[id] .heading-collapse-btn::before {
  content: "▼";
  font-size: 16px; /* 图标尺寸 */
  display: inline-block;
  transition: transform 0.3s ease; /* 旋转动画 */
  font-family: Arial, sans-serif;
}

/* hover时显示箭头 */
.post-content h1[id]:hover .heading-collapse-btn,
.post-content h2[id]:hover .heading-collapse-btn,
.post-content h3[id]:hover .heading-collapse-btn,
.post-content h4[id]:hover .heading-collapse-btn,
.post-content h5[id]:hover .heading-collapse-btn,
.post-content h6[id]:hover .heading-collapse-btn {
  opacity: 1;
  pointer-events: auto; /* hover时可点击 */
}

/* 箭头本身hover时也保持显示，并添加背景效果 */
.post-content h1[id] .heading-collapse-btn:hover,
.post-content h2[id] .heading-collapse-btn:hover,
.post-content h3[id] .heading-collapse-btn:hover,
.post-content h4[id] .heading-collapse-btn:hover,
.post-content h5[id] .heading-collapse-btn:hover,
.post-content h6[id] .heading-collapse-btn:hover {
  opacity: 1;
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.08); /* 浅灰色背景 */
  border-radius: 4px; /* 圆角 */
}

/* 收起状态：箭头始终显示，只有伪元素旋转 */
.post-content h1[id][data-collapsed="true"] .heading-collapse-btn,
.post-content h2[id][data-collapsed="true"] .heading-collapse-btn,
.post-content h3[id][data-collapsed="true"] .heading-collapse-btn,
.post-content h4[id][data-collapsed="true"] .heading-collapse-btn,
.post-content h5[id][data-collapsed="true"] .heading-collapse-btn,
.post-content h6[id][data-collapsed="true"] .heading-collapse-btn {
  opacity: 1 !important;
  pointer-events: auto;
}

/* 收起状态：只旋转伪元素（图标），背景容器不旋转 */
.post-content h1[id][data-collapsed="true"] .heading-collapse-btn::before,
.post-content h2[id][data-collapsed="true"] .heading-collapse-btn::before,
.post-content h3[id][data-collapsed="true"] .heading-collapse-btn::before,
.post-content h4[id][data-collapsed="true"] .heading-collapse-btn::before,
.post-content h5[id][data-collapsed="true"] .heading-collapse-btn::before,
.post-content h6[id][data-collapsed="true"] .heading-collapse-btn::before {
  transform: rotate(-90deg); /* 逆时针旋转90度，▶朝右 */
}

/* 内容隐藏样式 */
.post-content .heading-collapsed {
  display: none !important;
}

/* 深色模式支持 */
[data-theme="dark"] .post-content h1[id] .heading-collapse-btn,
[data-theme="dark"] .post-content h2[id] .heading-collapse-btn,
[data-theme="dark"] .post-content h3[id] .heading-collapse-btn,
[data-theme="dark"] .post-content h4[id] .heading-collapse-btn,
[data-theme="dark"] .post-content h5[id] .heading-collapse-btn,
[data-theme="dark"] .post-content h6[id] .heading-collapse-btn {
  color: #e6e6e6 !important; /* 深色模式下使用浅色 */
}

/* 深色模式下箭头hover时的背景效果 */
[data-theme="dark"] .post-content h1[id] .heading-collapse-btn:hover,
[data-theme="dark"] .post-content h2[id] .heading-collapse-btn:hover,
[data-theme="dark"] .post-content h3[id] .heading-collapse-btn:hover,
[data-theme="dark"] .post-content h4[id] .heading-collapse-btn:hover,
[data-theme="dark"] .post-content h5[id] .heading-collapse-btn:hover,
[data-theme="dark"] .post-content h6[id] .heading-collapse-btn:hover {
  background-color: rgba(255, 255, 255, 0.15); /* 深色模式下的浅灰色背景 */
}

/* 打印样式：打印时展开所有内容，隐藏箭头 */
@media print {
  .post-content .heading-collapsed {
    display: block !important;
  }

  .post-content h1[id] .heading-collapse-btn,
  .post-content h2[id] .heading-collapse-btn,
  .post-content h3[id] .heading-collapse-btn,
  .post-content h4[id] .heading-collapse-btn,
  .post-content h5[id] .heading-collapse-btn,
  .post-content h6[id] .heading-collapse-btn {
    display: none !important;
  }

  .post-content h1[id],
  .post-content h2[id],
  .post-content h3[id],
  .post-content h4[id],
  .post-content h5[id],
  .post-content h6[id] {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .post-content h1[id],
  .post-content h2[id],
  .post-content h3[id],
  .post-content h4[id],
  .post-content h5[id],
  .post-content h6[id] {
    padding-left: 22px !important;
    margin-left: -22px !important;
  }

  .post-content h1[id] .heading-collapse-btn::before,
  .post-content h2[id] .heading-collapse-btn::before,
  .post-content h3[id] .heading-collapse-btn::before,
  .post-content h4[id] .heading-collapse-btn::before,
  .post-content h5[id] .heading-collapse-btn::before,
  .post-content h6[id] .heading-collapse-btn::before {
    font-size: 14px;
  }

  .post-content h1[id] .heading-collapse-btn,
  .post-content h2[id] .heading-collapse-btn,
  .post-content h3[id] .heading-collapse-btn,
  .post-content h4[id] .heading-collapse-btn,
  .post-content h5[id] .heading-collapse-btn,
  .post-content h6[id] .heading-collapse-btn {
    padding: 3px 4px;
  }
}