/* =========================================================
   Mashle Theme - Details/Summary 物理美化插件
   ========================================================= */

/* 1. 容器整体：模拟物理厚度的卷轴/公文感 */
.markdown-body details {
  background-color: #fffcf5 !important; /* 极淡的泡芙白 */
  border: 3px solid #2c1e16 !important; /* 沉重的物理黑框 */
  border-radius: 0px !important; /* 拒绝圆滑，纯粹物理直角 */
  box-shadow: 4px 4px 0px #d4af37 !important; /* 神觉者金币阴影 */
  margin-bottom: 1rem !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: transform 0.2s ease !important;
}

/* 2. 交互标题栏：伊斯顿魔法学院公文风格 */
.markdown-body details summary {
  background-color: #f3e5ab !important; /* 烤熟的泡芙皮颜色 */
  color: #8b1515 !important; /* 伊斯顿酒红 */
  padding: 0.6rem 1rem !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  list-style: none !important; /* 隐藏默认箭头 */
  display: flex !important;
  align-items: center !important;
  border-bottom: none !important;
  transition: all 0.2s ease !important;
  letter-spacing: 1px !important;
}

/* 3. 展开状态下的标题栏：增加底部物理分割线 */
.markdown-body details[open] summary {
  border-bottom: 3px solid #2c1e16 !important;
  background-color: #ecd98a !important; /* 颜色加深，代表“发力” */
}

/* 4. 自定义箭头图标：使用“魔法印记”符号替代 */
.markdown-body details summary::before {
  content: "⚡" !important; /* 类似脸上的魔法印记 */
  margin-right: 12px !important;
  font-size: 1.2rem !important;
  color: #2c1e16 !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 展开时箭头旋转（物理肌肉发力感） */
.markdown-body details[open] summary::before {
  transform: rotate(180deg) scale(1.2) !important;
  color: #8b1515 !important;
}

/* 5. 内容区域：保持整洁的奶油色背景 */
.markdown-body details > *:not(summary) {
  padding: 1rem !important;
  background-color: #fffcf5 !important;
  color: #2c1e16 !important;
  font-weight: 500 !important;
}

/* 6. 悬停效果：物理反馈 */
.markdown-body details:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 6px 6px 0px #d4af37 !important;
}

.markdown-body details summary:hover {
  color: #2c1e16 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

/* 7. 针对状态栏内嵌代码块的微调 */
.markdown-body details pre {
  box-shadow: none !important; /* 嵌套时取消双重阴影，防止视觉混乱 */
  margin: 0.5rem 0 !important;
  border-width: 2px !important;
}

/* 隐藏原生箭头（兼容不同浏览器） */
.markdown-body details summary::-webkit-details-marker {
  display: none !important;
}