/** Custom style defined file **/
/* Defines the style for a custom class .mydefined with smaller font size and specific color */
.mydefined {
  font-size: 0.65em;
  color: #ed6c24;
}

/* Sets the text color for the custom footer class .custom-footer */
.custom-footer {
  color: #ed6c24;
}

/* Defines the style for a custom heading class .custom-head5 with larger font size, specific color, and bold weight */
.custom-head5 {
  font-size: 1.2em;
  color: #ed6c24;
  font-weight: bold;
}

/*-----------------------------------------------------------------------------------*/
/* Toolbox无边框表格 */

/* 移除 .noborder-table 类中表格的所有边框并使背景透明，确保简洁和极简的样式 */
.noborder-table table {
  border: none !important;
  background: transparent !important;
}

/* 移除 .noborder-table 类中表格头部和单元格的边框，设置统一的内边距和透明背景，提高可读性和美观性 */
.noborder-table th,
.noborder-table td {
  border: none !important;
  padding: 8px 16px;
  background: transparent !important;
}


/*-----------------------------------------------------------------------------------*/
/* Adds a subtle shadow to the preview image, providing a visual cue for interaction */
.preview-image {
  margin: 2rem auto 0;  /* 增加垂直外边距 */
  border-radius: 12px !important;  /* 添加圆角 */
  overflow: hidden; /* 新增：确保圆角在图片溢出时生效 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* 使用更平滑的贝塞尔曲线过渡 */
  height: auto;
  display: block;  /* 确保图片块级显示 */
  max-width: 100%;  /* 确保响应式布局 */
  will-change: transform, box-shadow;  /* 优化transform和阴影的性能 */
  backface-visibility: hidden;  /* 防止3D变换时的闪烁 */
  -webkit-font-smoothing: antialiased;  /* 优化字体渲染 */
  position: relative;  /* 为伪元素定位做准备 */
}

/* 确保图片元素继承圆角 */
.preview-image img {
  border-radius: inherit;
  width: 100%;  /* 确保图片填充容器 */
  object-fit: cover;  /* 保持图片比例 */
  margin-bottom: 0;  /* 移除图片底部边距 */
  display: block;  /* 消除图片底部可能的空隙 */
}

/* 悬停效果 */
.preview-image:hover {
  transform: translateY(-5px) scale(1.02);  /* 添加轻微放大效果 */
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);  /* 增强阴影效果 */
}

/* 添加点击效果 */
.preview-image:active {
  transform: translateY(-2px) scale(0.98);  /* 点击时略微下沉 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);  /* 减弱阴影 */
}

/* 移除文章标题下方的默认边距，使布局更加紧凑 */
.post-header {
  margin-bottom: 0 !important;
}

/*-----------------------------------------------------------------------------------*/
/* 修复长代码块溢出问题 */
.post-content .highlight {
  position: relative;
  max-width: 100%;
  margin: 1rem 0;
  border-radius: 8px;
  overflow-x: auto;
  z-index: 1; /* 确保代码块在正常文档流中 */
}

.post-content pre {
  white-space: pre-wrap;       /* 允许代码换行 */
  word-wrap: break-word;       /* 长单词换行 */
  margin: 0;
  padding: 1rem;
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}

/* 确保代码块父容器正确布局 */
.post-body {
  position: relative;
  z-index: 0;
}
/*-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/* 修复移动端表格溢出问题 */
.post-content table {
  width: 100%;  /* 设置表格宽度为100% */
  max-width: none; /* 移除最大宽度限制，允许表格在大屏幕上完全展开 */
  display: block; /* 使用块级显示以支持横向滚动 */
  overflow-x: auto; /* 启用横向滚动 */
  -webkit-overflow-scrolling: touch; /* 添加iOS流畅滚动 */
  white-space: normal; /* 允许内容自然换行 */
  border-collapse: collapse; /* 确保边框合并 */
  word-break: break-word; /* 允许长单词在必要时断行 */
  table-layout: auto; /* 改为自动布局以适应内容 */
  margin-bottom: 1rem; /* 添加底部间距 */
}

/* 确保代码行号和代码内容不重叠 */
.post-content table pre {
  margin: 0;
  padding-left: 3.8em; /* 为行号预留空间 */
}

.post-content table .line-numbers {
  position: absolute;
  left: 0;
  width: 3em; /* 行号宽度 */
  text-align: right;
  padding-right: 0.8em;
}

/* 针对小屏幕设备的额外优化 */
@media (max-width: 767px) {
  .post-content table {
    display: block; /* 在小屏幕上使用块级显示以启用横向滚动 */
    overflow-x: auto; /* 确保在小屏幕上启用横向滚动 */
    font-size: 0.85em; /* 在小屏幕上缩小字体大小 */
  }
  
  /* 调整小屏幕上数学公式的大小 */
  .post-content .math-display,
  .post-content .katex-display {
    font-size: 0.85em;
  }
}

/* 针对大屏幕设备的优化 */
@media (min-width: 768px) {
  .post-content table {
    display: table; /* 在大屏幕上恢复默认的table显示方式 */
  }
}

/*-----------------------------------------------------------------------------------*/

/* 去掉正文内二三级标题后的分割线 */
.post-content h2,
.post-content h3, 
.post-content h4 {
  border-bottom: none !important; 
}