.post-container {
    position: relative;
}

.table-of-contents {
    max-width: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 2rem;
}

/* Normalize Hugo's inner #TableOfContents wrapper */
#TableOfContents {
    margin: 0;
    padding: 0;
}

/* Hide desktop TOC on mobile */
.desktop-toc {
    display: none;
}

/* Show mobile TOC on mobile */
.mobile-toc {
    display: block;
}

/* Desktop styles */
/* Only show the fixed desktop TOC when there is enough horizontal room to avoid overlap.
   Threshold ≈ content-max + 2 * (toc-min-width + toc-gap) → 1000 + 2*(180 + 30) = 1420px.
   No. */
@media (min-width: 1024px) {
    .desktop-toc {
        display: block;
        position: fixed;
        top: 2rem;
        /* Place TOC in the left margin when there is room; otherwise pin to --toc-min-left */
        left: clamp(
            max(var(--toc-min-left)),
            calc(
                /* left edge of content */
                (100% - min(var(--content-max), 100%)) / 2
                /* minus gap and actual (possibly clamped) TOC width */
                - ( var(--toc-gap) + clamp(
                        var(--toc-min-width),
                        calc((100% - min(var(--content-max), 100%)) / 2 - var(--toc-gap)),
                        var(--toc-width)
                    )
                  )
            ),
            100%
        );
        height: fit-content;
        max-height: calc(100vh - 4rem);
        width: clamp(
            var(--toc-min-width),
            calc((100% - min(var(--content-max), 100%)) / 2 - var(--toc-gap) + clamp(
                var(--toc-min-width),
                calc((100% - min(var(--content-max), 100%)) / 2 - var(--toc-gap)),
                var(--toc-width)
            )),
            var(--toc-width)
        );
        z-index: 5;
    }

    .mobile-toc {
        display: none;
    }
}

/* Style the ToC nav menu items - Override theme defaults */
.table-of-contents nav {
    padding: 0;
    display: block !important;
}

.table-of-contents nav > ul {
    display: block !important;
}

/* Force remove all list styling with high specificity */
.table-of-contents ul,
.table-of-contents nav ul,
.table-of-contents nav > ul,
#TableOfContents ul,
#TableOfContents > ul,
div.table-of-contents ul {
    padding-left: 1rem;
    margin: 0.25rem 0;
    list-style-type: none !important;
    list-style: none !important;
    list-style-image: none !important;
}

.table-of-contents li {
    margin: 0.25rem 0;
    font-size: 0.95rem;
}

.table-of-contents a {
    text-decoration: none;
    color: #e5e7eb;
    opacity: 0.7;
    transition: opacity 0.2s, font-weight 0.2s;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.table-of-contents a:hover {
    opacity: 1;
    text-decoration: none;
}

.table-of-contents a.active {
    opacity: 1;
    font-weight: 500;
    color: #ffffff;
}

/* (removed) TOC toggle styles */

/* Mobile: slightly reduce list indents so nested items aren't too compressed */
@media (max-width: 600px) {
    article ul,
    article ol {
        padding-inline-start: 1.1rem;
        margin-inline-start: 0;
    }

    article ul ul,
    article ol ol,
    article ul ol,
    article ol ul {
        padding-inline-start: 0.9rem;
    }
}

/* Additional TOC overrides to ensure no bullet points appear - highest specificity */
.post-container .table-of-contents ul,
.post-container .table-of-contents nav ul,
.post-container #TableOfContents ul {
    list-style-type: none !important;
    list-style: none !important;
    list-style-image: none !important;
    padding-left: 1rem !important;
}

/* Add near the top of custom.css */
:root {
    --content-max: 1000px;   /* matches theme's main max-width */
    --toc-width: 250px;
    --toc-min-width: 180px;  /* allows graceful shrink to fit margin */
    --toc-gap: 30px;         /* space between content and TOC */
    --toc-min-left: 20px;    /* never go closer than this to viewport edge */
    color-scheme: dark;
    scrollbar-gutter: stable; /* avoid extra right-side gutter */
}

/* Dark scrollbars for TOC (Chrome/Edge/Safari + Firefox) */
.table-of-contents {
    scrollbar-color: #4b5563 #171717; /* thumb, track */
    scrollbar-width: thin;
}

.table-of-contents::-webkit-scrollbar {
    width: 8px;
}

.table-of-contents::-webkit-scrollbar-track {
    background: #171717;
}

.table-of-contents::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-radius: 8px;
    border: 2px solid #171717;
}

.table-of-contents::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
}

/* Global dark scrollbars */
html, body {
    scrollbar-color: #4b5563 #171717;
    scrollbar-width: thin;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: #171717;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-radius: 8px;
    border: 2px solid #171717;
}

/* Prevent horizontal scrollbar across devices/browsers */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overflow-y: auto; /* ensure scrollbar area paints over page background */
    background-color: #171717; /* dark backdrop so any gutter/track is dark */
    /* Reserve gutter to prevent layout shift and account for scrollbar space */
    scrollbar-gutter: stable both-edges;
}
@supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
}

/* Avoid horizontal overflow from 100vw backgrounds/overlays in theme */
.grid-container:before,
.noise-layer {
    width: 100%;
}

/* Safari/Chrome WebKit: use transparent tracks and corners to avoid visible light blocks */
.table-of-contents::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: transparent;
}
.table-of-contents::-webkit-scrollbar-corner,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
    background: transparent;
}