/* =====================
   主题色彩变量覆盖 (Light Mode)
   ===================== */
:root,
:root[data-theme="light"] {
    --theme: rgba(252, 249, 245, 1);
    /* 偏暖的米白背景 */
    --entry: #ffffff;
    /* 纯白卡片 */
    --primary: #4a4a4a;
    /* 柔和的深灰/褐灰文字 */
    --secondary: #888888;
    /* 次要文字颜色 */
    --tertiary: #FAF8F2;
    /* 浅底色（标签云、背景） */
    --border: #F0EAE1;
    /* 极浅暖色边框 */
    --highlight: #d6a848;
    /* 金色/暖黄点缀色 */

    --tag-bg: #fdf3e1;
    --tag-border: #f8e5c8;
    --tag-text: #cfa144;
}

/* =====================
   顶部导航栏样式
   ===================== */
.header {
    background: var(--entry) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

.header:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* 修复 PaperMod 默认将列表页背景设为浅灰色的问题 */
body.list {
    background: var(--theme) !important;
}

:root[data-theme="dark"] {
    --highlight: #d6a848;
    --tag-bg: #332d21;
    --tag-border: #4d4431;
    --tag-text: #e6b85c;
}

/* =====================
   三栏布局容器
   ===================== */
.three-column-layout {
    display: grid;
    grid-template-columns: 200px 840px 220px;
    gap: var(--gap);
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: var(--gap);
    align-items: start;
    box-sizing: border-box;
    justify-content: center;
}

/* 当右侧边栏没有内容时，改为两栏并居中 */
.three-column-layout:not(:has(.sidebar-right .sidebar-box)) {
    grid-template-columns: 200px 840px;
}

/* 三栏布局占满整个 .main 容器宽度 */
.main {
    max-width: none !important;
    padding: 0 !important;
}

/* 确保文章内容区域不收缩 */
.post-single,
.post-list-container,
.terms-page-wrapper {
    min-width: 0;
    width: 100%;
}


/* =====================
   侧边栏通用样式
   ===================== */
.sidebar-left,
.sidebar-right {
    position: sticky;
    top: calc(var(--header-height) + var(--gap));
    max-height: calc(100vh - var(--header-height) - var(--gap) * 2);
    overflow-y: auto;
    /* 防止 overflow 裁剪阴影 */
    padding: 16px;
    margin: -16px;
}

/* 当右侧边栏为空时完全隐藏，避免产生多余的 grid gap */
.sidebar-right:not(:has(.sidebar-box)) {
    display: none;
}

.sidebar-box {
    background: var(--entry);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--gap);
    margin-bottom: var(--gap);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sidebar-box:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.sidebar-box:last-child {
    margin-bottom: 0;
}

/* 滚动条样式 */
.sidebar-left::-webkit-scrollbar,
.sidebar-right::-webkit-scrollbar {
    width: 4px;
}

.sidebar-left::-webkit-scrollbar-thumb,
.sidebar-right::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.sidebar-left::-webkit-scrollbar-thumb:hover,
.sidebar-right::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

/* =====================
   左侧边栏样式
   ===================== */
.profile-section {
    text-align: center;
    padding-bottom: var(--gap);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--gap);
}

.profile-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--gap);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--primary);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--primary);
}

.profile-description {
    font-size: 14px;
    color: var(--secondary);
    margin: 0;
    line-height: 1.5;
}

.sidebar-nav {
    margin-bottom: var(--gap);
}

.sidebar-nav-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav-item {
    margin-bottom: 4px;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--secondary);
    text-decoration: none;
    border-radius: var(--radius);
    transition: all 0.15s ease;
    font-size: 14px;
}

.sidebar-nav-link:hover {
    background: var(--tertiary);
    color: var(--primary);
}

.sidebar-nav-link:active {
    transform: scale(0.98);
}

/* =====================
   右侧边栏样式
   ===================== */
.sidebar-block {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.sidebar-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sidebar-block-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-icon {
    color: var(--highlight);
}

.view-all-link {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--highlight);
    text-decoration: none;
    font-weight: 500;
    text-align: left;
    transition: opacity 0.2s;
}

.view-all-link:hover {
    opacity: 0.8;
}

/* TOC 目录样式 */
.toc-nav {
    font-size: 13px;
}

.toc-nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* 为嵌套的 ul 添加缩进 */
.toc-nav ul ul {
    padding-left: 16px;
    margin-top: 4px;
}

.toc-nav li {
    margin-bottom: 6px;
    line-height: 1.4;
}

.toc-nav a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.15s ease;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toc-nav a:hover {
    color: var(--primary);
}

.toc-nav a.active {
    color: var(--theme) !important;
    background: var(--primary);
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: -6px;
    font-weight: 600 !important;
}

/* 一级目录（即 h2）特殊样式，需要穿透 #TableOfContents */
.toc-nav nav>ul>li>a {
    font-weight: 600;
    color: var(--primary);
    margin-top: 8px;
}

/* 去除第一个顶级元素的上边距 */
.toc-nav nav>ul>li:first-child>a {
    margin-top: 0;
}

/* 二级目录（即 h3 及以下）样式 */
.toc-nav nav>ul>li>ul a {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--secondary);
}

/* 最近更新列表 */
.recent-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-post-item {
    margin-bottom: 8px;
}

.recent-post-link {
    display: block;
    padding: 6px 0;
    color: var(--secondary);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    transition: color 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-post-link:hover {
    color: var(--primary);
}

/* 标签云 */
.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sidebar-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    background: var(--tag-bg);
    color: var(--tag-text);
    border: 1px solid var(--tag-border);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.sidebar-tag:hover {
    background: var(--primary);
    color: var(--theme);
}

.sidebar-tag:active {
    transform: scale(0.95);
}

.tag-count {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.7;
}

/* =====================
   列表页容器样式
   ===================== */
.post-list-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.page-header {
    margin-bottom: var(--gap);
    padding-bottom: var(--gap);
    border-bottom: 1px solid var(--border);
}

.page-header h1 {
    font-size: 28px;
    color: #333;
}

.post-entry {
    padding: var(--gap);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s ease;
    
    /* 清除 PaperMod 默认独立卡片样式 */
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
}

.posts-group {
    background: var(--entry);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

.posts-group:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.post-entry:hover {
    background: var(--tertiary);
}

.post-entry:last-child {
    border-bottom: none;
}

.post-entry-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.post-entry .entry-cover {
    margin: 0;
    width: 200px;
    flex-shrink: 0;
}

.post-entry .entry-cover img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius);
    transition: transform 0.3s ease;
}

.post-entry:hover .entry-cover img {
    transform: scale(1.02);
}


.post-entry h2 {
    font-size: 18px;
    margin: 0 0 8px 0;
}

.post-entry h2 a {
    color: #333;
    text-decoration: none;
}

.post-entry h2 a:hover {
    color: var(--primary);
}

.entry-content p {
    color: var(--secondary);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.entry-footer {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
}

.page-footer {
    margin-top: var(--gap);
    padding-top: var(--gap);
    border-top: 1px solid var(--border);
}

/* =====================
   头部导航菜单
   ===================== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--theme);
    border-bottom: 1px solid var(--border);
}

#menu a {
    color: var(--primary);
}

#menu a:hover {
    color: var(--primary);
    opacity: 0.8;
}

#menu .active {
    color: var(--primary);
}

/* =====================
   页面标题
   ===================== */
.page-header h1 {
    color: var(--primary) !important;
}

@media (max-width: 1200px) {
    .three-column-layout {
        grid-template-columns: 1fr;
        padding: 0 var(--gap);
    }

    .sidebar-left,
    .sidebar-right {
        display: none;
    }

    .post-single,
    .post-list-container,
    .terms-page-wrapper {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .three-column-layout {
        padding: 0 calc(var(--gap) / 2);
    }
}

@media (min-width: 1400px) {
    .three-column-layout {
        max-width: 1500px;
    }
}

/* =====================
   主页欢迎栏定制 (Welcome Block)
   ===================== */
.custom-home-info {
    padding: 0 !important;
    overflow: hidden;
    background: var(--entry);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.custom-home-info:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.home-info-top {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: var(--gap);
    flex: 1;
}

.home-info-content {
    flex: 1;
    z-index: 2;
    position: relative;
}

.home-info-bg {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60%;
    z-index: 1;
    mask-image: linear-gradient(to right, transparent, black 40%);
    -webkit-mask-image: linear-gradient(to right, transparent, black 40%);
}

.home-info-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

[data-theme="dark"] .home-info-bg img {
    opacity: 0.4;
    filter: brightness(0.8);
}

.home-info-stats {
    display: flex;
    justify-content: space-around;
    padding: 16px var(--gap);
    background: var(--tag-bg);
    margin: 0 var(--gap) var(--gap) var(--gap);
    border-radius: var(--radius);
    z-index: 2;
    position: relative;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-icon {
    color: var(--highlight);
}

.stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.stat-label {
    font-size: 12px;
    color: var(--secondary);
    margin-bottom: 2px;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

/* =====================
   搜索框样式优化 (Search Box)
   ===================== */
#searchbox input {
    padding: 12px 16px !important;
    background-color: var(--theme) !important;
    border: 1px solid #a9a9a9 !important; /* 加深灰色边框以便明显区分 */
    font-size: 16px !important;
    border-radius: var(--radius) !important;
    transition: all 0.2s ease !important;
    color: var(--primary) !important;
    font-weight: normal !important;
    box-shadow: none !important;
}

#searchbox input:focus {
    border-color: var(--highlight) !important;
    box-shadow: 0 0 0 2px rgba(214, 168, 72, 0.2) !important;
}
/* Center Mermaid Diagrams */
.mermaid {
    display: flex;
    justify-content: center;
    margin: 1.5rem auto;
}

/* Code block fonts */
.highlight pre code, .highlight .lnt, .highlight .ln, code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Menlo', 'Courier New', monospace !important;
}

/* Shiki compatibility overrides */
.highlight .chroma, .highlight table {
    background-color: #1E1E1E !important;
}
.highlight .lntd:first-child pre {
    background-color: #1E1E1E !important;
    color: #858585 !important;
}
.highlight pre code {
    line-height: 1.5 !important;
}
.highlight pre code .line:empty::before,
.highlight pre code .line:has(> :empty:only-child)::before {
    content: ' ';
    white-space: pre;
}
.highlight pre code .line {
    min-height: 1.5em;
}