/* Right-side page table of contents */

/* Hide all section-level navigation in the left sidebar (we use right-side TOC instead) */
.sidebar ol.section {
    display: none !important;
}

/* Only show on screens wide enough */
@media only screen and (min-width: 1400px) {
    /* Adjust main content area */
    .page-wrapper .page {
        padding-right: 250px;
    }

    .content {
        max-width: 850px;
        margin: 0 auto;
    }

    .sidetoc {
        position: fixed;
        top: 80px;
        right: 20px;
        width: 220px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        padding: 15px;
        font-size: 0.85em;
        z-index: 100;
        background: var(--bg);
        border-radius: 4px;
    }

    .sidetoc .pagetoc {
        border-left: 2px solid var(--quote-border);
        padding-left: 15px;
    }

    .sidetoc .pagetoc a {
        display: block;
        color: var(--fg);
        text-decoration: none;
        padding: 5px 0;
        line-height: 1.4;
        transition: color 0.2s, border-color 0.2s;
        opacity: 0.8;
    }

    .sidetoc .pagetoc a:hover {
        color: var(--links);
        opacity: 1;
    }

    .sidetoc .pagetoc a.active {
        color: var(--links);
        font-weight: 600;
        opacity: 1;
    }

    .sidetoc .pagetoc .h2 {
        font-weight: 500;
    }

    .sidetoc .pagetoc .h3 {
        padding-left: 12px;
        font-size: 0.9em;
    }

    .sidetoc .pagetoc .h4 {
        padding-left: 24px;
        font-size: 0.85em;
    }

    .sidetoc-title {
        font-weight: 700;
        margin-bottom: 12px;
        color: var(--fg);
        font-size: 0.75em;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 0.7;
    }
}

/* Medium screens - content centered without TOC */
@media only screen and (min-width: 1000px) and (max-width: 1399px) {
    .content {
        max-width: 850px;
        margin: 0 auto;
    }

    .sidetoc {
        display: none;
    }
}

/* Hide TOC on smaller screens */
@media only screen and (max-width: 999px) {
    .sidetoc {
        display: none;
    }
}

/* Scrollbar styling for the TOC */
.sidetoc::-webkit-scrollbar {
    width: 4px;
}

.sidetoc::-webkit-scrollbar-track {
    background: transparent;
}

.sidetoc::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 2px;
}

/* Light theme specific styles */
.light .sidetoc {
    background: #fafafa;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.light .sidetoc .pagetoc {
    border-left-color: #e0e0e0;
}

.light .sidetoc .pagetoc a {
    color: #444;
}

.light .sidetoc .pagetoc a:hover,
.light .sidetoc .pagetoc a.active {
    color: #4183c4;
}

.light .sidetoc-title {
    color: #666;
}

/* Navy theme specific styles */
.navy .sidetoc {
    background: rgba(26, 32, 44, 0.5);
}

/* Ayu theme specific styles */
.ayu .sidetoc {
    background: rgba(15, 20, 25, 0.5);
}

/* Rust theme specific styles */
.rust .sidetoc {
    background: rgba(36, 31, 49, 0.5);
}

/* Coal theme specific styles */
.coal .sidetoc {
    background: rgba(20, 20, 20, 0.5);
}