/**
* CoreNext 文章内容区美化样式 v3
* 适用于 .post-warp .content-warp 下的 Markdown / 富文本元素
* 设计语言：大气简洁，主题色 var(--theme-color)，圆角 var(--box-border-radius)
* 暗黑模式通过 CSS 变量自动适配（dark.css 覆盖 ::root 变量）
*/

/* ============================
  全局间距系统
  ============================ */

/* 内容区底部留白，与版权/评论区保持呼吸感 */
.post-warp .content-warp {
    padding-bottom: 36px;
}

/* 统一内容区直接子元素的底部间距基准 */
.post-warp .content-warp > * {
    margin-bottom: 24px;
}

/* 最后一个子元素保留小间距，避免贴底 */
.post-warp .content-warp > *:last-child {
    margin-bottom: 8px;
}

/* 段落间距 - 核心基准 */
.post-warp .content-warp p {
    margin: 0 0 18px;
    line-height: 1.8;
}

/* 段落之间相邻时，后一个段落不需要额外顶部间距 */
.post-warp .content-warp p + p {
    margin-top: 0;
}

/* ============================
  一、标题系列（覆盖 main.css 的硬编码颜色）
  ============================ */

/* h1 - 文章内一级标题 */
.post-warp .content-warp h1 {
    position: relative;
    font-size: 24px;
    font-weight: 700;
    color: var(--theme-color);
    margin: 40px 0 20px;
    padding: 8px 0 8px 16px;
    border-bottom: 2px solid var(--theme-color);
}

.post-warp .content-warp h1::before {
    position: absolute;
    content: '';
    width: 5px;
    background: var(--theme-color);
    top: 8px;
    left: 0;
    bottom: 8px;
    border-radius: 5px;
    transition: .3s;
}

/* h2 - 保持原有样式但优化间距 */
.post-warp .content-warp h2 {
    margin: 36px 0 18px;
}

/* h3 - 覆盖硬编码颜色，暗色模式自动适配 */
.post-warp .content-warp h3 {
    color: var(--box-warp-text-color) !important;
    margin-top: 30px;
    margin-bottom: 14px;
}

.post-warp .content-warp h3:hover {
    color: var(--theme-color) !important;
}

.post-warp .content-warp h3::before {
    color: var(--theme-color) !important;
}

/* h4 - 覆盖硬编码颜色 */
.post-warp .content-warp h4 {
    color: var(--box-warp-text-color) !important;
    margin-top: 26px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-bottom-color);
}

/* h5 - 五级标题 */
.post-warp .content-warp h5 {
    position: relative;
    font-size: 16px;
    font-weight: 600;
    color: var(--box-warp-text-color);
    margin: 22px 0 10px;
    padding-left: 12px;
}

.post-warp .content-warp h5::before {
    position: absolute;
    content: '';
    width: 3px;
    height: 60%;
    top: 20%;
    left: 0;
    background: var(--theme-color);
    border-radius: 3px;
    opacity: .6;
}

/* h6 - 六级标题 */
.post-warp .content-warp h6 {
    font-size: 15px;
    font-weight: 600;
    color: var(--theme-secondary-text-color);
    margin: 18px 0 8px;
    padding-left: 14px;
    position: relative;
}

.post-warp .content-warp h6::before {
    position: absolute;
    content: '\00A7';
    left: 0;
    color: var(--theme-color);
    opacity: .5;
    font-weight: 400;
}

/* 标题后紧跟的元素，顶部间距归零，避免过大空隙 */
.post-warp .content-warp h1 + *,
.post-warp .content-warp h2 + *,
.post-warp .content-warp h3 + *,
.post-warp .content-warp h4 + *,
.post-warp .content-warp h5 + *,
.post-warp .content-warp h6 + * {
    margin-top: 0 !important;
}

/* ============================
  二、文本格式
  ============================ */

/* blockquote - 引用块 */
.post-warp .content-warp blockquote {
    position: relative;
    margin: 32px 0;
    padding: 16px 20px 16px 24px;
    border-left: 4px solid var(--theme-color);
    background: linear-gradient(135deg, rgba(64, 158, 255, .06), rgba(64, 158, 255, .02));
    border-radius: 0 var(--box-border-radius) var(--box-border-radius) 0;
    color: var(--post-content-color);
    font-size: 15px;
    line-height: 1.8;
    overflow: hidden;
}

.post-warp .content-warp blockquote::before {
    position: absolute;
    top: 8px;
    left: 8px;
    content: '\201C';
    font-size: 32px;
    color: var(--theme-color);
    opacity: .2;
    font-family: Georgia, serif;
    line-height: 1;
}

/* blockquote 与前后元素的间距保障 */
.post-warp .content-warp blockquote + p {
    margin-top: 24px;
}

.post-warp .content-warp p + blockquote {
    margin-top: 28px;
}

.post-warp .content-warp ul + blockquote,
.post-warp .content-warp ol + blockquote {
    margin-top: 28px;
}

.post-warp .content-warp blockquote + ul,
.post-warp .content-warp blockquote + ol {
    margin-top: 24px;
}

.post-warp .content-warp blockquote + blockquote {
    margin-top: 20px;
}

/* 引用块内部元素间距重置 */
.post-warp .content-warp blockquote > * {
    margin-top: 0;
    margin-bottom: 10px;
}

.post-warp .content-warp blockquote > *:last-child {
    margin-bottom: 0;
}

/* 引用块内部列表间距微调 */
.post-warp .content-warp blockquote ul,
.post-warp .content-warp blockquote ol {
    margin: 8px 0;
}

/* blockquote 嵌套 */
.post-warp .content-warp blockquote blockquote {
    margin: 10px 0;
    border-left-color: #67c23a;
    background: linear-gradient(135deg, rgba(103, 194, 58, .06), rgba(103, 194, 58, .02));
}

/* strong / b - 加粗 */
.post-warp .content-warp strong,
.post-warp .content-warp b {
    font-weight: 700;
    color: var(--box-warp-text-color);
}

/* em / i - 斜体 */
.post-warp .content-warp em,
.post-warp .content-warp i:not([class]) {
    font-style: italic;
    color: var(--post-content-color);
}

/* del / s - 删除线 */
.post-warp .content-warp del,
.post-warp .content-warp s {
    text-decoration: line-through;
    color: var(--theme-secondary-text-color);
    opacity: .85;
}

/* mark - 高亮 */
.post-warp .content-warp mark {
    background: linear-gradient(120deg, rgba(64, 158, 255, .15) 0%, rgba(64, 158, 255, .3) 100%);
    color: inherit;
    padding: 2px 6px;
    border-radius: 3px;
    box-decoration-break: clone;
}

/* sup / sub */
.post-warp .content-warp sup {
    font-size: .75em;
    vertical-align: super;
    color: var(--theme-color);
}

.post-warp .content-warp sub {
    font-size: .75em;
    vertical-align: sub;
    color: var(--theme-color);
}

/* kbd - 键盘按键 */
.post-warp .content-warp kbd {
    display: inline-block;
    padding: 2px 8px;
    font-size: 13px;
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    color: var(--box-warp-text-color);
    background: var(--theme-warp-background-color);
    border: 1px solid var(--border-bottom-color);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 1px 0 var(--theme-warp-background-color);
    vertical-align: baseline;
    margin: 0 2px;
    line-height: 1.4;
}

/* abbr - 缩写 */
.post-warp .content-warp abbr {
    text-decoration: none;
    border-bottom: 1px dashed var(--theme-color);
    cursor: help;
}

/* ============================
  三、列表系列
  ============================ */

/* ul - 无序列表 */
.post-warp .content-warp ul {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
}

.post-warp .content-warp ul li {
    position: relative;
    padding: 4px 0 4px 22px;
    line-height: 1.8;
}

.post-warp .content-warp ul li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 13px;
    width: 6px;
    height: 6px;
    background: var(--theme-color);
    border-radius: 50%;
}

/* 二级列表 - 空心圆 */
.post-warp .content-warp ul li ul li::before {
    width: 0;
    height: 0;
    border-radius: 0;
    border: 3px solid var(--theme-color);
    background: transparent;
    top: 14px;
    left: 5px;
}

/* 三级列表 - 方框 */
.post-warp .content-warp ul li ul li ul li::before {
    width: 6px;
    height: 6px;
    background: transparent;
    border: 1.5px solid var(--theme-color);
    top: 13px;
    left: 5px;
    border-radius: 1px;
}

/* ol - 有序列表 */
.post-warp .content-warp ol {
    list-style: none;
    counter-reset: content-ol;
    padding-left: 0;
    margin: 20px 0;
}

.post-warp .content-warp ol li {
    counter-increment: content-ol;
    position: relative;
    padding: 4px 0 4px 30px;
    line-height: 1.8;
}

.post-warp .content-warp ol li::before {
    content: counter(content-ol);
    position: absolute;
    left: 0;
    top: 6px;
    width: 20px;
    height: 20px;
    background: var(--theme-color);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
}

.post-warp .content-warp ol li ol {
    margin: 4px 0;
}

/* 二级有序 - 空心序号 */
.post-warp .content-warp ol li ol li::before {
    background: transparent;
    color: var(--theme-color);
    border: 1.5px solid var(--theme-color);
    font-size: 11px;
    width: 18px;
    height: 18px;
    line-height: 18px;
}

/* 列表底部与后续元素间距保障 */
.post-warp .content-warp ul + p,
.post-warp .content-warp ol + p,
.post-warp .content-warp ul + div,
.post-warp .content-warp ol + div,
.post-warp .content-warp ul + blockquote,
.post-warp .content-warp ol + blockquote {
    margin-top: 20px;
}

/* 列表最后一项增加底部呼吸感 */
.post-warp .content-warp ul li:last-child,
.post-warp .content-warp ol li:last-child {
    padding-bottom: 12px;
}

/* dl / dt / dd - 定义列表 */
.post-warp .content-warp dl {
    margin: 20px 0;
    padding: 12px 16px;
    background: rgba(64, 158, 255, .04);
    border-radius: var(--box-border-radius);
    border-left: 3px solid var(--theme-color);
}

.post-warp .content-warp dt {
    font-weight: 700;
    color: var(--box-warp-text-color);
    margin-top: 8px;
}

.post-warp .content-warp dt:first-child {
    margin-top: 0;
}

.post-warp .content-warp dd {
    margin: 4px 0 4px 16px;
    color: var(--post-content-color);
    padding-left: 12px;
    border-left: 2px solid var(--border-bottom-color);
}

/* ============================
  四、表格
  ============================ */

.post-warp .content-warp table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: 14px;
    border: 1px solid var(--border-bottom-color);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    background: transparent;
}

.post-warp .content-warp thead {
    background: linear-gradient(135deg, var(--theme-color), #66b1ff);
}

.post-warp .content-warp th {
    padding: 12px 16px;
    color: #fff;
    font-weight: 600;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, .15);
    font-size: 14px;
    background: transparent;
}

.post-warp .content-warp td {
    padding: 10px 16px;
    border: 1px solid var(--border-bottom-color);
    color: var(--post-content-color);
    background: transparent;
    transition: background .2s;
}

/* 表格斑马线 - 中性色，暗色下由 dark.css 覆盖 */
.post-warp .content-warp tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, .025);
}

.post-warp .content-warp tbody tr {
    background: transparent;
}

.post-warp .content-warp tbody tr:hover {
    background: rgba(0, 0, 0, .045);
}

/* 表格标题 */
.post-warp .content-warp caption {
    padding: 10px 0;
    font-size: 13px;
    color: var(--theme-secondary-text-color);
    caption-side: bottom;
    text-align: center;
    font-style: italic;
    border-top: 1px solid var(--border-bottom-color);
}

/* ============================
  五、分割线
  ============================ */

.post-warp .content-warp hr {
    border: none;
    height: 1px;
    margin: 36px 0;
    background: linear-gradient(90deg, transparent, var(--theme-color), transparent);
    position: relative;
}

.post-warp .content-warp hr::before {
    content: '\00B7 \00B7 \00B7';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--theme-warp-background-color);
    padding: 0 16px;
    color: var(--theme-color);
    font-size: 14px;
    letter-spacing: 4px;
}

/* ============================
  六、图片与媒体
  ============================ */

.post-warp .content-warp img {
    max-width: 100%;
    height: auto;
    border-radius: var(--box-border-radius);
    display: block;
    margin: 24px auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.post-warp .content-warp figure {
    margin: 28px 0;
    text-align: center;
}

.post-warp .content-warp figcaption {
    font-size: 13px;
    color: var(--theme-secondary-text-color);
    margin-top: 8px;
    text-align: center;
    font-style: italic;
}

.post-warp .content-warp video {
    max-width: 100%;
    border-radius: var(--box-border-radius);
    display: block;
    margin: 24px auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.post-warp .content-warp audio {
    width: 100%;
    margin: 20px 0;
    border-radius: var(--box-border-radius);
}

.post-warp .content-warp iframe {
    max-width: 100%;
    border-radius: var(--box-border-radius);
    margin: 20px 0;
}

/* ============================
  七、代码相关
  ============================ */

/* 原生 pre 代码块（非 corepress 代码块） */
.post-warp .content-warp pre:not(.corepress-code-pre) {
    background: var(--comment-textarea-background-color);
    padding: 16px 20px;
    border-radius: var(--box-border-radius);
    border: 1px solid var(--border-bottom-color);
    overflow-x: auto;
    margin: 24px 0;
    font-size: 14px;
    line-height: 1.7;
    position: relative;
}

.post-warp .content-warp pre:not(.corepress-code-pre) code {
    background: transparent;
    color: var(--post-content-color);
    font-size: 14px;
    padding: 0;
    border-radius: 0;
    line-height: inherit;
    white-space: pre;
    word-wrap: normal;
}

/* ============================
  八、交互元素
  ============================ */

/* details / summary - 折叠内容 */
.post-warp .content-warp details {
    margin: 24px 0;
    border: 1px solid var(--border-bottom-color);
    border-radius: var(--box-border-radius);
    background: var(--comment-textarea-background-color);
    overflow: hidden;
    transition: all .3s;
}

.post-warp .content-warp details[open] {
    border-color: var(--theme-color);
    box-shadow: 0 2px 8px rgba(64, 158, 255, .1);
}

.post-warp .content-warp summary {
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 600;
    color: var(--box-warp-text-color);
    background: rgba(64, 158, 255, .04);
    list-style: none;
    user-select: none;
    transition: all .3s;
}

.post-warp .content-warp summary::-webkit-details-marker {
    display: none;
}

.post-warp .content-warp summary::before {
    content: '\25B8';
    margin-right: 8px;
    color: var(--theme-color);
    display: inline-block;
    transition: transform .3s;
}

.post-warp .content-warp details[open] > summary::before {
    transform: rotate(90deg);
}

.post-warp .content-warp details[open] > summary {
    border-bottom: 1px solid var(--border-bottom-color);
    color: var(--theme-color);
}

.post-warp .content-warp details > :not(summary) {
    padding: 12px 16px;
}

/* 任务列表 checkbox */
.post-warp .content-warp ul li input[type="checkbox"],
.post-warp .content-warp ul li .task-list-item-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #c0c4cc;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    cursor: pointer;
    transition: all .2s;
    background: var(--theme-warp-background-color);
    float: none;
}

.post-warp .content-warp ul li input[type="checkbox"]:checked,
.post-warp .content-warp ul li .task-list-item-checkbox:checked {
    background: var(--theme-color);
    border-color: var(--theme-color);
}

.post-warp .content-warp ul li input[type="checkbox"]:checked::after,
.post-warp .content-warp ul li .task-list-item-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ============================
  九、链接增强
  ============================ */

.post-warp .content-warp a {
    color: var(--theme-color);
    text-decoration: none;
    border-bottom: 1px solid rgba(64, 158, 255, .3);
    transition: all .3s;
}

.post-warp .content-warp a:hover {
    border-bottom-color: var(--theme-color);
}

/* ============================
  十、脚注（Markdown 扩展）
  ============================ */

.post-warp .content-warp .footnotes {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid var(--border-bottom-color);
    font-size: 13px;
    color: var(--theme-secondary-text-color);
}

.post-warp .content-warp .footnotes ol {
    padding-left: 20px;
}

.post-warp .content-warp .footnotes ol li::before {
    width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
}