/**
 * 博客底部导航美化样式 v5.0
 * 简洁风格：无背景 + 纯文字链接 + 双列
 * 更新日期: 2024-12-14
 */

/* ====================================================================================
   上一篇 / 下一篇 导航区域 - 简洁样式
   ==================================================================================== */

.content .article-nav,
.content-wrap .article-nav,
nav.article-nav,
.article-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 2rem !important;
    margin: 1.5rem 0 !important;
    padding: 1rem 0 !important;
    background: none !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.content .article-nav>span,
.content-wrap .article-nav>span,
nav.article-nav>span,
.article-nav>span,
.article-nav .article-nav-prev,
.article-nav .article-nav-next,
span.article-nav-prev,
span.article-nav-next {
    position: relative !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transition: none !important;
    overflow: visible !important;
    min-height: auto !important;
    display: block !important;
    box-shadow: none !important;
    border: none !important;
    float: none !important;
    width: auto !important;
    max-width: 48% !important;
    flex: 0 0 auto !important;
}

/* 上一篇在左边 */
.article-nav-prev {
    text-align: left !important;
}

/* 下一篇在右边 */
.article-nav-next {
    text-align: right !important;
    margin-left: auto !important;
}

/* 去掉伪元素 */
.content .article-nav>span::before,
.content-wrap .article-nav>span::before,
nav.article-nav>span::before,
.article-nav>span::before,
.article-nav-prev::before,
.article-nav-next::before,
.article-nav>span::after,
.article-nav-prev::after,
.article-nav-next::after {
    display: none !important;
}

/* 标签样式 "上一篇" "下一篇" */
.article-nav-prev,
.article-nav-next {
    font-size: 1.25rem !important;
    color: #6b7280 !important;
    line-height: 1.6 !important;
}

/* 链接样式 */
.content .article-nav a,
.content-wrap .article-nav a,
nav.article-nav a,
.article-nav a,
.article-nav-prev a,
.article-nav-next a {
    display: block !important;
    color: #3b82f6 !important;
    font-size: 1.375rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    margin-top: 0.25rem !important;
    transition: color 0.2s ease;
}

.article-nav a:hover,
.article-nav-prev a:hover,
.article-nav-next a:hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

/* 空内容隐藏 */
.article-nav span:empty {
    display: none !important;
}

/* ====================================================================================
   相关推荐区域 - 简洁双列文字链接
   ==================================================================================== */

.relates,
.relates-text,
.relates-textcol2 {
    margin: 2rem 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* 标题样式 */
.relates .title,
.relates-text .title,
.relates-textcol2 .title {
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding-left: 0 !important;
    border-left: none !important;
}

.relates .title::after,
.relates-text .title::after,
.relates-textcol2 .title::after {
    display: none !important;
}

.relates .title h3,
.relates-text .title h3,
.relates-textcol2 .title h3 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    display: block !important;
}

.relates .title h3::before,
.relates-text .title h3::before,
.relates-textcol2 .title h3::before {
    display: none !important;
}

/* ===================== 列表 - 双列显示 ===================== */
.content .relates ul,
.content .relates-text ul,
.content .relates-textcol2 ul,
div.relates ul,
div.relates-text ul,
div.relates-textcol2 ul,
.relates ul,
.relates-text ul,
.relates-textcol2 ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem 2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 列表项 - 简洁文字 */
.content .relates li,
.content .relates-text li,
.content .relates-textcol2 li,
div.relates li,
div.relates-text li,
div.relates-textcol2 li,
.relates li,
.relates-text li,
.relates-textcol2 li {
    position: relative !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px dashed #e5e7eb !important;
    width: auto !important;
    float: none !important;
    display: block !important;
    transition: none !important;
}

.relates li:last-child,
.relates-text li:last-child,
.relates-textcol2 li:last-child,
.relates li:nth-last-child(2),
.relates-text li:nth-last-child(2) {
    border-bottom: none !important;
}

/* 去掉列表项伪元素 */
.relates li::before,
.relates-text li::before,
.relates-textcol2 li::before {
    display: none !important;
}

/* 链接样式 */
.relates li a,
.relates-text li a,
.relates-textcol2 li a {
    color: #3b82f6 !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    text-decoration: none !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transition: color 0.2s ease;
}

.relates li a:hover,
.relates-text li a:hover,
.relates-textcol2 li a:hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

.relates li a span,
.relates-text li a span,
.relates-textcol2 li a span {
    color: #ef4444 !important;
}

.relates li a:hover span,
.relates-text li a:hover span {
    color: #1d4ed8 !important;
}

/* 无文章提示 */
.relates .no-posts,
.relates-text .no-posts {
    grid-column: span 2 !important;
    text-align: center !important;
    padding: 2rem !important;
    color: #6b7280 !important;
    font-size: 0.9375rem !important;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
}

.relates .no-posts::before,
.relates-text .no-posts::before {
    display: none !important;
}

/* ====================================================================================
   响应式适配
   ==================================================================================== */

@media (max-width: 768px) {
    .article-nav {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .article-nav>span,
    .article-nav-prev,
    .article-nav-next {
        max-width: 100% !important;
        text-align: left !important;
    }

    .article-nav-next {
        margin-left: 0 !important;
    }
}

@media (max-width: 640px) {

    .relates ul,
    .relates-text ul,
    .relates-textcol2 ul {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .relates li,
    .relates-text li {
        border-bottom: 1px dashed #e5e7eb !important;
    }

    .relates li:last-child,
    .relates-text li:last-child {
        border-bottom: none !important;
    }

    .relates .no-posts,
    .relates-text .no-posts {
        grid-column: span 1 !important;
    }
}