/* TOC wrapper should span the main column only, not full width */
/* TOC wrapper spans the wide grid area, not main */
.toc-wrapper {
    display: grid;
    gap: 40px;
    align-items: start;
    grid-column: wide-start / wide-end; /* span the wide grid by default */
}

/* Sidebar: anchored in wide-start → main-start */
.toc-wrapper .article-toc-sidebar {
    grid-column: wide-start / main-start;
    position: sticky;
    top: 50px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: inherit;
    border: inherit;
    color: inherit;
    padding: 15px;
    border-radius: 5px;
}

.toc-wrapper .article-toc-sidebar a {
    color: inherit;
    display: block;
    margin-bottom: 2.0rem; /* add spacing between TOC links */
    line-height: 1.5;      /* increase line spacing */
}

/* Content: stays in main-start / main-end */
.toc-wrapper .gh-content {
    grid-column: main-start / main-end; /* keep content centered */
    max-width: 100%;
    min-width: 0;
}

/* Mobile: stack TOC above content */
@media (max-width: 1400px) {
    .toc-wrapper {
        grid-column: wide-start / wide-end; /* preserve Casper side spacing */
    }

    .toc-wrapper .article-toc-sidebar {
        grid-column: main-start / main-end;
        position: static;
        max-height: none;
        overflow-y: visible;
        background: transparent;
        border: none;
        padding: 0 0 50px 0;
    }

    .toc-wrapper .gh-content {
        grid-column: main-start / main-end;
    }

}

@media (max-width: 1000px) {
    .toc-wrapper {
        grid-column: main-start / main-end; /* keep centered spacing for mobile */
        display: block; /* prevent extra spacing */
        padding-left: 25px;
        padding-right: 25px;
    }

    .toc-wrapper .article-toc-sidebar {
        grid-column: main-start / main-end;
        position: static;
        max-height: none;
        overflow-y: visible;
        background: transparent;
        border: none;
        padding: 0 0 50px 0;
    }

    .toc-wrapper .gh-content {
        grid-column: main-start / main-end;
    }
    .article-toc-sidebar {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

/* TOC active link styling */
.article-toc-sidebar a.active {
    font-weight: 700;
    color: var(--ghost-accent-color);
    border-left: 3px solid var(--ghost-accent-color);
    padding-left: 8px;
}

.article-toc-sidebar a {
    transition: color 0.2s ease, border-color 0.2s ease;
}