/* =========================================
   1. 基础布局 (保持不变)
   ========================================= */
.scroll-nav {
    display: none;
}

@media (min-width: 1000px) {
    
    /* === 目录样式  === */
    .scroll-nav {
        display: block;
        position: fixed;
        right: 20px;       /* 距离右边 20px */
        width: 240px;      /* 自身宽度 240px */
        top: 100px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding: 10px 0;
        box-sizing: border-box;
        z-index: 999;
    }

    /* === 文章内容样式  === */
    .post-content {
        /* 1. 正常的阅读限制 (防止在大屏幕上文字太长读着累) */
        max-width: 800px; 
        
        /* 2. [核心逻辑] 强制腾出右侧空间 */
        /* 目录宽240 + 右距20 + 缝隙40 = 300px */
        /* 这行代码的意思是：无论屏幕多大，文章内容右边必须留出 300px 的空白 */
        margin-right: 300px; 
        
        /* 3. 左侧对齐方式 */
        /* 如果你想让文章在“剩余空间”里居中，用 auto；如果想靠左，用 20px */
        margin-left: auto; 
        
        /* 4. 确保宽度是自动伸缩的 */
        width: auto;
    }
}

/* =========================================
   2. 列表通用样式
   ========================================= */
.scroll-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.scroll-nav__item {
    margin-bottom: 2px; /* 行距调小一点，看起来更紧凑 */
}

/* 链接的基础样式 */
.scroll-nav__link {
    display: block;
    text-decoration: none;
    font-size: 14px;
    color: #888;
    transition: all 0.2s;
    
    /* 关键：用 padding 来控制缩进，而不是 margin */
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15px;
    
    /* 文字超长省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* 左边框默认透明 (为了 hover 时不跳动) */
    border-left: 3px solid transparent; 
}

/* 鼠标悬停 */
.scroll-nav__link:hover {
    color: #2a7ae2;
    background-color: #f5f5f5; /* 微微的背景色 */
}

/* =========================================
   3. 强制缩进 (基于类名) - 这里是解决问题的关键
   ========================================= */

/* H1 */
.scroll-nav__link.toc-h1 {
    padding-left: 10px;
    font-weight: bold;
}

/* H2 - 缩进 25px */
.scroll-nav__link.toc-h2 {
    padding-left: 25px;
    border-left: 2px solid transparent; /* 预留边框位置 */
}

/* H3 - 缩进 45px */
.scroll-nav__link.toc-h3 {
    padding-left: 45px;
}

/* 激活状态 */
.scroll-nav__item--active .scroll-nav__link {
    color: #2a7ae2;
    background-color: #f0f7ff;
    /* 确保激活时边框颜色出现 */
    border-left-color: #2a7ae2 !important; 
}

/* =========================================
   4. 激活高亮状态
   ========================================= */

.scroll-nav__item--active .scroll-nav__link {
    color: #2a7ae2;     /* 蓝色高亮 */
    font-weight: bold;
    border-left-color: #2a7ae2; /* 左侧蓝色竖条 */
    background-color: #eef4ff;  /* 浅蓝色背景 */
}


/* ========================================
 折叠
========================================= */
/* assets/css/post.css - 追加在最下面 */

/* === 动态折叠功能 === */

/* 1. 默认状态：H2 和 H3 隐藏 */
.scroll-nav__link.toc-h2,
.scroll-nav__link.toc-h3 {
    display: none; /* 隐藏 */
    opacity: 0;
}

/* 2. 激活状态：当列表项被 JS 标记为 'show-group' 时，显示出来 */
.scroll-nav__item.show-group .scroll-nav__link {
    display: block; /* 显示 */
    opacity: 1;
    animation: fadeIn 0.3s ease-in-out; /* 加个淡入动画，更丝滑 */
}

/* 定义淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 3. 特殊情况：H1 永远显示 */
.scroll-nav__link.toc-h1 {
    display: block !important;
}