/*
这个 css 文件是为了解决文章内容里面的标题样式产生的各种问题
*/

/* 针对所有文章标题 (h1-h6) 彻底移除在定位和聚焦时的轮廓 */
.article-content h1:target,
.article-content h2:target,
.article-content h3:target,
.article-content h4:target,
.article-content h5:target,
.article-content h6:target,
.article-content h1:focus,
.article-content h2:focus,
.article-content h3:focus,
.article-content h4:focus,
.article-content h5:focus,
.article-content h6:focus {
    /* 核心：移除浏览器默认的焦点轮廓（解决黑框问题） */
    outline: none !important;
}

/* --- 解决锚点被固定导航栏遮挡的问题 --- */
/* 将导航栏的高度设置为滚动边距，避免被遮挡。 */
/* 假设导航栏高度为 80px，这里设置 90px 留出一些额外空间。 */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    /* 【核心修正】: 增加一个顶部滚动边距 */
    scroll-margin-top: 80px;
}

/* --- 【最终修正 1】确保文章标题文字为黑色 --- */
/* 必须针对 h* 内部的 span 设置颜色，因为它是实际文本的父元素 */
.article-content h1 span,
.article-content h2 span,
.article-content h3 span,
.article-content h4 span,
.article-content h5 span,
.article-content h6 span {
    /* 设置为纯黑色，使用 !important 确保覆盖 */
    color: #000000 !important;
}


.article-meta {
    color: #6b7280;
    font-size: 0.95rem;
    margin-bottom: 30px;
    padding-bottom: 15px;
    /* 在文章内容上面添加一条分割线 */
    /* border-bottom: 1px solid var(--border-color); */
    border-bottom: dashed 5px #96bbf8;
}

.article-content {
    font-size: 1.00rem;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.article-content h2 {
    font-size: 1.75rem;
    margin-top: 2em;
    padding-bottom: 10px;
    /* 在标题下方添加一条分割线*/
    border-bottom: 1px solid #96bbf8;
    letter-spacing: -0.015em;
}

.article-content h3 {
    font-size: 1.4rem;
    margin-top: 1.5em;
    /* 【核心】在底部创建可控间距的虚线 */
    background-image: linear-gradient(to right,
            #96bbf8 75%,
            /* 破折号的颜色和长度 */
            transparent 0%
            /* 破折号间的间隙 */
        );

    /* 控制虚线位于底部，厚度 1px，重复模式 */
    background-position: bottom;
    background-size: 10px 1px;
    /* 调整第一个值 (10px) 来控制破折号和间隙的总长度 */
    background-repeat: repeat-x;
    /* 确保标题和虚线之间有间距 */
    padding-bottom: 8px;
}
.article-content h4 {
    /* 推荐大小：介于 h3 (1.4rem) 和 正文 (1.0rem) 之间 */
    font-size: 1.25rem; 
    /* 保持标题顶部合理的间距 */
    margin-top: 1.2em;
    /* 可选：如果希望 h4 也收紧字距，但幅度略小于 h2/h3 */
    letter-spacing: -0.01em; 
}



/* --- 【最终修正 2】文章内容中所有链接 (a) 颜色设置 --- */
.article-content a {
    color: #49b1f5;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

/* 链接悬停样式 */
.article-content a:hover {
    /* 设置下划线 */
    text-decoration: underline;
    /* 颜色为蓝色 */
    text-decoration-color: #49b1f5
}

/* 为了解决文章标题也出现蓝色下划线 */
.article-content h1 a:hover,
.article-content h2 a:hover,
.article-content h3 a:hover,
.article-content h4 a:hover,
.article-content h5 a:hover,
.article-content h6 a:hover {
    /* 核心：覆盖通用链接的悬停样式，移除下划线 */
    text-decoration: none !important;
}