/**
 * Article Table of Contents (TOC) Styles
 * Generated for Chengli Special Automobile Co., Ltd.
 */

/* =========================================
   PC Styles (Desktop)
   ========================================= */
@media screen and (min-width: 1025px) {
    /* TOC Container - Sidebar Style */
    #article-toc-container {
        width: 280px; /* Reference: 280px */
        flex-shrink: 0;
        position: -webkit-sticky;
        position: sticky;
        top: 80px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        background: #fff;
        border-radius: 8px;
        padding: 16px; /* Reference: 16px */
        box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Reference shadow */
        font-size: 14px;
        margin-right: 32px; /* Reference: 32px */
        /* Hide scrollbar for Webkit browsers */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }
    
    #article-toc-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    /* Adjust ct-mn2 to account for the sidebar */
    .ct2 {
        display: flex; /* Ensure container is flex */
        align-items: flex-start;
    }
    
    /* Main Content Column */
    .ct-mn2 {
        flex: 1; /* Take remaining space */
        min-width: 0;
    }

    .toc-title {
        color: #2d3748;
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 12px;
        border-bottom: 1px solid #eef0f2;
        padding-bottom: 6px;
        display: block;
        padding: 0 0 6px 0; /* Override previous padding */
        cursor: default;
    }
    
    .toc-toggle-btn {
        display: none; 
    }

    .toc-content {
        padding: 0;
    }

    /* TOC List Styles */
    #article-toc-container ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #article-toc-container li {
        margin: 8px 0; /* Reference: 8px 0 */
        line-height: 1.5;
        position: relative;
        padding-left: 20px; /* Reference: padding-left 20px */
    }

    /* Parent item icon */
    #article-toc-container li.toc-h2::before,
    #article-toc-container li.toc-h1::before {
         /* If needed, add + icon logic here, but JS handles folding. 
            Reference has .toc-parent-item::before. 
            Let's keep it simple or match reference if structure allows. */
    }

    #article-toc-container a {
        text-decoration: none;
        color: #4a5568; /* Reference color */
        display: inline-block; /* Reference: inline-block */
        padding: 2px 6px; /* Reference padding */
        transition: all 0.2s;
        border-radius: 4px;
        font-size: 16px; /* Reference size */
        width: 100%; /* Ensure click area covers full width if desired, or auto for inline-block look */
        box-sizing: border-box;
    }
    
    #article-toc-container a:hover {
        color: #2563eb;
        background-color: #e8f4f8;
    }

    .toc-link-wrapper {
        display: flex;
        align-items: center;
    }

    .toc-collapse-icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 24px; /* Adjust to align with text */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #4299e1; /* Reference icon color */
        font-weight: 500;
        font-size: 14px;
    }
    
    .toc-collapse-icon:hover {
        color: #2563eb;
    }

    #article-toc-container ul ul {
        padding-left: 0; /* Already indented by parent padding-left? No, need check */
        display: block; 
        margin-top: 5px;
    }
    
    /* Remove padding-left from li inside ul ul if needed, but reference uses nesting.
       Let's assume standard nesting. */

    #article-toc-container li.collapsed > ul {
        display: none;
    }
    
    /* Font weights */
    #article-toc-container .toc-h1 { font-weight: 700; color: #2d3748; }
    #article-toc-container .toc-h2 { font-weight: 600; color: #2d3748; }
    #article-toc-container .toc-h3 { font-size: 0.95em; }
}

/* 移动端样式调整 */
@media screen and (max-width: 1024px) {
    #article-toc-container {
        position: relative;
        top: 0;
        width: 100%;
        margin-bottom: 20px;
        max-height: none;
        overflow: visible;
        background: #f9f9f9;
        padding: 15px;
        border-radius: 8px;
    }
    
    #article-toc-container ul {
        padding-left: 0; /* 移除一级列表缩进 */
        list-style: none;
    }
    
    #article-toc-container li {
        margin-bottom: 5px;
    }
    
    #article-toc-container a {
        padding: 5px 0;
        font-size: 15px;
        line-height: 1.4;
        display: block;
        color: #333;
    }
    
    .toc-link-wrapper {
        padding-left: 0;
        display: flex;
        align-items: flex-start; /* 顶部对齐，防止多行文字跑偏 */
    }
    
    .toc-collapse-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        color: #666;
    }
    
    /* 嵌套缩进 */
    #article-toc-container ul ul {
        padding-left: 20px; 
        margin-top: 5px;
    }
    
    .toc-title {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        padding-bottom: 10px;
        font-size: 16px;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
    }
    
    .toc-toggle-btn {
        display: block;
    }
    
    .toc-content {
        display: none; /* 默认折叠 */
    }
}