/* ==========================================================================
   Sticky TOC Sidebar
   Loaded only for logged-in users on single posts (see plugin PHP).
   ========================================================================== */

/* Mobile / tablet: keep the original inline TOC, hide the sidebar column */
.cstoc-sidebar-col {
    display: none;
}

/* Desktop layout */
@media (min-width: 1100px) {

    /* Hide the original TOC only when the sidebar is active */
    .cstoc-original-hidden {
        display: none !important;
    }

    .cstoc-sidebar-col {
        display: block;
    }

    /* Two-column grid: flexible content + fixed sidebar on the right.
       NOTE: we intentionally do NOT set align-items here. Letting columns
       stretch to full grid height is what gives position:sticky a tall
       parent to anchor against. */
    .cstoc-has-sidebar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 60px;
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
        overflow: visible !important;
    }

    /* Neutralize block-editor column flex rules so grid wins.
       height:100% forces the sidebar column to span the full grid row,
       which is what gives position:sticky its scroll range. */
    .cstoc-has-sidebar > .wp-block-column {
        flex: none !important;
        width: auto !important;
        max-width: none !important;
    }

    .cstoc-sidebar-col {
        height: 100%;
        align-self: stretch;
        overflow: visible !important;
    }

    .cstoc-content-col {
        min-width: 0; /* prevents grid blowout on long words/code */
    }

    /* ---------- Sticky container ---------- */
    .cstoc-sticky {
        position: sticky;
        top: 40px;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        padding: 24px 20px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        font-size: 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .cstoc-sticky::-webkit-scrollbar {
        width: 6px;
    }
    .cstoc-sticky::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 3px;
    }
    .cstoc-sticky::-webkit-scrollbar-track {
        background: transparent;
    }

    /* ---------- TOC title ("Skip ahead:") ---------- */
    .cstoc-sticky .kb-table-of-contents-title-wrap {
        padding: 0 0 12px 0 !important;
        margin: 0 0 12px 0 !important;
        border-bottom: 1px solid #e5e7eb;
    }

    .cstoc-sticky .kb-table-of-contents-title {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #6b7280 !important;
    }

    /* ---------- Lists ---------- */
    .cstoc-sticky ul,
    .cstoc-sticky ol {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cstoc-sticky li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .cstoc-sticky .kb-table-of-contents-list-sub {
        padding-left: 12px !important;
        margin-top: 2px !important;
    }

    /* ---------- Links ---------- */
    .cstoc-sticky a {
        display: block;
        padding: 7px 12px;
        color: #4b5563;
        text-decoration: none !important;
        border-left: 2px solid transparent;
        font-size: 13.5px;
        line-height: 1.45;
        border-radius: 0 4px 4px 0;
        transition:
            color 0.15s ease,
            background-color 0.15s ease,
            border-color 0.15s ease;
    }

    .cstoc-sticky a:hover {
        color: #111827;
        background: #f9fafb;
        border-left-color: #9ca3af;
    }

    .cstoc-sticky a.is-active {
        color: #1d4ed8;
        background: #eff6ff;
        border-left-color: #1d4ed8;
        font-weight: 600;
    }

    .cstoc-sticky .kb-table-of-contents-list-sub a {
        font-size: 12.5px;
        padding: 5px 10px;
    }
}

/* Larger screens — a little more room for the sidebar */
@media (min-width: 1400px) {
    .cstoc-has-sidebar {
        max-width: 1400px;
        grid-template-columns: minmax(0, 1fr) 280px;
    }
}