/**
 * Блок «Зміст» (TOC) для single-поста.
 *
 * Desktop (>=1200px):  sticky-сайдбар ліворуч від статті (280px)
 * Планшет (768-1199):  вужчий sticky-сайдбар (220px)
 * Мобільний (<768):    прихований; відкривається як drawer знизу через FAB
 *
 * @package NDC
 */

/* ---------- Фікс для sticky ---------- */
/* .wrapper та .wrapper .content у main.css мають overflow:hidden, */
/* що ламає position:sticky (будь-який предок з overflow != visible створює */
/* scroll-контейнер, у якому sticky «не залипає»). Переключаємо на overflow:clip — */
/* обрізка залишається, але новий scroll-контейнер не створюється. */
body.single-post .wrapper,
body.single-post .wrapper .content {
    overflow: clip;
}

/* ---------- Layout .article-layout перенесено в main.css ---------- */
/* Правила grid'а single-поста (280px + 1fr / 220px + 1fr) винесені */
/* у main.css, щоб застосовуватись до першого paint'у навіть на повільному */
/* з'єднанні (toc.css вантажиться пізніше в ланцюжку і встигав спричинити */
/* FOUC — контент рендерився в позиції .container-small по центру, а після */
/* приходу toc.css переїжджав у праву колонку grid'а). */

/* ---------- Сам сайдбар змісту ---------- */
.article-toc {
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    color: #232438;
}

@media (min-width: 768px) {
    .article-toc {
        position: sticky;
        top: 100px;
        /* Максимальна висота — на sticky-контейнері, щоб плашка не перевищувала viewport. */
        /* Сам скрол — на .article-toc__nav (див. нижче), щоб заголовок «Зміст» лишався */
        /* статичним, а скролбар був усередині рамки плашки, а не сбоку. */
        max-height: calc(100vh - 120px);
    }

    .article-toc__inner {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 120px);
    }
}

.article-toc__inner {
    padding: 20px 18px;
    background: #fbfbff;
    border: 1px solid #ebedf5;
    border-radius: 12px;
}

.article-toc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex: 0 0 auto;
}

.article-toc__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666f8d;
}

.article-toc__close {
    display: none; /* показуємо тільки в drawer'і на мобільному */
    background: transparent;
    border: 0;
    padding: 4px;
    color: #232438;
    cursor: pointer;
    border-radius: 6px;
}

.article-toc__close:hover {
    background: #ebedf5;
}

.article-toc__nav {
    /* За замовчуванням — просто обгортка. Скрол/маска вмикаються на desktop/tablet, */
    /* коли плашка sticky і має обмежену висоту. На мобільному drawer скролиться сам. */
}

@media (min-width: 768px) {
    .article-toc__nav {
        /* min-height: 0 — обов'язково для скролу всередині flex-контейнера */
        /* (інакше flex-item не стискається нижче content-size і overflow не спрацьовує). */
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        /* Місце під скролбар, щоб текст не впирався в нього. */
        padding-right: 6px;
        margin-right: -6px;

        /* Кастомний скролбар — Firefox. */
        scrollbar-width: thin;
        scrollbar-color: rgba(177, 18, 55, 0.35) transparent;

        /* Fade-маска зверху/знизу — контент за краєм плавно розчиняється, */
        /* натякаючи, що список продовжується (замість різкого обрізу). */
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 12px,
            #000 calc(100% - 12px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 12px,
            #000 calc(100% - 12px),
            transparent 100%
        );
    }

    /* Кастомний скролбар — WebKit (Chrome/Safari/Edge). */
    .article-toc__nav::-webkit-scrollbar {
        width: 6px;
    }

    .article-toc__nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .article-toc__nav::-webkit-scrollbar-thumb {
        background-color: rgba(177, 18, 55, 0.35);
        border-radius: 3px;
        transition: background-color 0.2s ease;
    }

    .article-toc__nav:hover::-webkit-scrollbar-thumb,
    .article-toc__nav::-webkit-scrollbar-thumb:hover {
        background-color: rgba(177, 18, 55, 0.6);
    }
}

.article-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-toc__item {
    margin: 0;
}

.article-toc__link {
    display: block;
    padding: 6px 10px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #303250;
    text-decoration: none;
    border-radius: 6px;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    word-wrap: break-word;
}

.article-toc__link:hover {
    color: #232438;
    background: #ffffff;
}

/* H3 — з відступом, менший розмір, тонший */
.article-toc__item--h3 .article-toc__link {
    padding-left: 26px;
    font-size: 0.8125rem;
    color: #666f8d;
}

/* Активний пункт (scroll-spy) — брендова червона полоса ліворуч. */
/* Замість font-weight використовуємо text-shadow: 0.5px 0 0 currentColor — */
/* це «фейковий» bold, який робить літери візуально жирнішими, */
/* але не змінює їх реальну ширину. Так рядок TOC не «дихає» при */
/* переключенні активного пункту через scroll-spy. */
.article-toc__link.is-active {
    color: #232438;
    background: #ffffff;
    border-left-color: #b11237;
    text-shadow: 0.5px 0 0 currentColor;
}

.article-toc__item--h3 .article-toc__link.is-active {
    color: #232438;
}

/* ---------- Мобільний FAB + drawer ---------- */
.article-toc-fab {
    position: fixed;
    right: 16px;
    bottom: 90px; /* вище на 15px, щоб не сусідив із виджетом Findlee AI */
    z-index: 90;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(124.79deg, #3b0944 33.09%, #b11237 100%);
    color: #ffffff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 6px 20px -6px rgba(59, 9, 68, 0.5);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-toc-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(59, 9, 68, 0.6);
}

.article-toc-fab[hidden] {
    display: none;
}

/* На desktop/tablet FAB не потрібен — сайдбар видно */
@media (min-width: 768px) {
    .article-toc-fab {
        display: none !important;
    }
}

/* Backdrop під drawer'ом */
.article-toc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(35, 36, 56, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.article-toc-backdrop[hidden] {
    display: none;
}

body.toc-drawer-open .article-toc-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* Мобільний варіант: сайдбар стає drawer'ом знизу */
@media (max-width: 767.98px) {
    .article-toc {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        max-height: 75vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.28s ease;
        display: block; /* перебиваємо [hidden], бо ним керуємо через JS */
    }

    /* Коли JS вирішив, що заголовків досить — знімає [hidden], */
    /* але за замовчуванням drawer прихований transform'ом. */
    .article-toc[hidden] {
        display: none;
    }

    .article-toc__inner {
        border-radius: 16px 16px 0 0;
        border: 0;
        border-top: 1px solid #ebedf5;
        padding: 20px 16px 24px;
    }

    .article-toc__close {
        display: inline-flex;
    }

    body.toc-drawer-open .article-toc {
        transform: translateY(0);
    }

    body.toc-drawer-open {
        overflow: hidden; /* блокуємо скрол сторінки, поки drawer відкритий */
    }
}