/* ===== DESKTOP STICKY SIDEBAR TOC ===== */
/* Mobile: Default - Hide desktop sidebar */
.article-split-layout { display: block; }
.article-toc-sidebar { display: none; }
.article-content-wrapper { width: 100%; }

/* Desktop: Split layout with sticky sidebar */
@media (min-width: 769px) {
    .article-split-layout {
        display: grid;
        grid-template-columns: 255px 1fr;
        gap: 2rem;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        align-items: start;
        overflow: visible;
    }

    .article-toc-sidebar {
        display: block;
        padding-top: 20px;
    }

    .article-content-wrapper {
        display: block;
        min-width: 0;
    }

    .article-toc-sidebar-inner {
        display: block;
        position: relative; /* Will be controlled by JavaScript */
        max-height: 80vh; /* 80% of viewport height */
        overflow-y: auto;
        overflow-x: hidden;
        background: white;
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.2s ease;
        scrollbar-width: thin;
    }

    /* Fixed state when scrolled (JavaScript-controlled) */
    .article-toc-sidebar-inner.is-fixed {
        position: fixed;
        top: 20px;
        width: calc(255px - 3rem); /* 255px grid column - 1.5rem padding on each side */
        z-index: 100;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    /* Bleaching page: Wider TOC for non-grid layout */
    .bleaching-split-layout .article-toc-sidebar-inner.is-fixed {
        width: calc(300px - 3rem); /* Larger width for better space usage */
    }

    /* Scrollbar styling for TOC */
    .article-toc-sidebar-inner::-webkit-scrollbar { width: 6px; }
    .article-toc-sidebar-inner::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
    .article-toc-sidebar-inner::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
    .article-toc-sidebar-inner::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    /* TOC Title Styling */
    .article-toc-sidebar-title {
        font-size: 0.875rem;
        font-weight: 700;
        color: #64748b;
        margin: 0 0 1rem 0;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e2e8f0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* TOC Navigation */
    .article-toc-sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    /* TOC Items */
    .article-toc-sidebar-item {
        display: block;
        padding: 0.5rem 0.75rem;
        color: #64748b;
        text-decoration: none;
        font-size: 0.75rem; /* Reduced from 0.875rem for better text display */
        font-weight: 400;
        line-height: 1.4;
        transition: all 0.2s ease;
        border-left: 2px solid transparent;
        border-radius: 4px;
    }

    .article-toc-sidebar-item:hover {
        color: #22aea1;
        background: rgba(34, 174, 161, 0.05);
        border-left-color: rgba(34, 174, 161, 0.3);
        transform: translateX(2px);
    }

    .article-toc-sidebar-item.active {
        color: #22aea1;
        background: rgba(34, 174, 161, 0.1);
        border-left-color: #22aea1;
    }

    .article-toc-sidebar-item .toc-number {
        color: #22aea1;
        font-weight: 600;
        margin-right: 0.25rem; /* Reduced from 0.5rem for tighter spacing */
    }

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