/* ===================================================
   Liveimpact Blog TOC v3
   =================================================== */


/* ─────────────────────────────────────────────────
   Main layout
   ───────────────────────────────────────────────── */

.liblogs-layout {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    width: 100%;
}


/* ─────────────────────────────────────────────────
   Sticky sidebar
   ───────────────────────────────────────────────── */

.liblogs-sidebar {
    width: 270px;
    flex: 0 0 270px;

    position: sticky;
    top: 100px;

    align-self: flex-start;

    max-height: calc(100vh - 130px);

    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;

    z-index: 10;
}

.liblogs-sidebar::-webkit-scrollbar {
    width: 4px;
}

.liblogs-sidebar::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
}


/* ─────────────────────────────────────────────────
   TOC card
   ───────────────────────────────────────────────── */

.liblogs-toc {
    background: #fff;

    border: 1.5px solid #e4e1f5;
    border-radius: 14px;

    padding: 22px 18px 18px;
}


/* ─────────────────────────────────────────────────
   TOC heading
   ───────────────────────────────────────────────── */

.liblogs-toc__label {
    margin: 0 0 14px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: #1a1730;
}


/* ─────────────────────────────────────────────────
   TOC list
   ───────────────────────────────────────────────── */

.liblogs-toc__list {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    gap: 1px;
}


/* ─────────────────────────────────────────────────
   TOC links
   ───────────────────────────────────────────────── */

.liblogs-toc__item a {
    display: block;

    font-size: 13.5px;
    line-height: 1.45;

    color: #5a5870;

    text-decoration: none;

    padding: 8px 12px;

    border-radius: 8px;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.liblogs-toc__item a:hover {
    background: #f3f1ff;
    color: #5643d6;
}


/* ─────────────────────────────────────────────────
   Active TOC item
   ───────────────────────────────────────────────── */

.liblogs-toc__item.is-active a {
    background: #eeebff;
    color: #5643d6;
    font-weight: 600;
}


/* ─────────────────────────────────────────────────
   Article content
   ───────────────────────────────────────────────── */

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


/* ─────────────────────────────────────────────────
   H2 scroll position
   ───────────────────────────────────────────────── */

.liblogs-content h2 {
    scroll-margin-top: 100px;
}


/* ─────────────────────────────────────────────────
   Small landing highlight
   ───────────────────────────────────────────────── */

@keyframes liblogs-land {
    0% {
        background-color: #eeebff;
    }

    100% {
        background-color: transparent;
    }
}

.liblogs-landing {
    animation: liblogs-land 0.7s ease forwards;
    border-radius: 6px;
}


/* ─────────────────────────────────────────────────
   Mobile
   ───────────────────────────────────────────────── */

@media (max-width: 860px) {

    .liblogs-layout {
        flex-direction: column;
        gap: 24px;
    }

    .liblogs-sidebar {
        width: 100%;
        flex-basis: auto;

        position: static;

        max-height: none;

        overflow: visible;
    }

    .liblogs-toc {
        width: 100%;
    }
}