.article-with-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.article-content {
    flex: 1;
    min-width: 0;
}

#article-toc {
    width: 300px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    align-self: flex-start;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    order: 1; /* Push TOC to the left */
}

.article-with-toc .article-content {
    flex: 1;
    min-width: 0;
    order: 2; /* Keep content on the right */
}

@media (min-width: 992px) {
    .article-with-toc {
        flex-direction: row;
    }

    .article-content {
        flex: 1;
        min-width: calc(100% - 270px);
    }
}

#article-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-weight: 300;
}

#article-toc li {
    list-style: none;
    margin: 8px 0;
}

#article-toc a {
    text-decoration: none;
    display: block;
    padding: 5px 0;
}

html {
    scroll-behavior: smooth;
}

@media (max-width: 991px) {
    .article-with-toc {
        flex-direction: column;
    }

    #article-toc {
        position: static;
        width: 100%;
        order: 0; /* On mobile, TOC goes back to top */
    }
}