/* ============================================================
   Table of Contents (TOC) — tự sinh từ h2/h3 trong .article__body
   - Mobile: collapsible details/summary, ẩn ≥ 1024px
   - Desktop: sticky sidebar, ẩn < 1024px
   ============================================================ */

.toc {
    background: var(--vjol-color-surface);
    border: 1px solid var(--vjol-color-border);
    border-radius: var(--vjol-radius-md);
    padding: var(--vjol-space-4) var(--vjol-space-5);
    font-size: var(--vjol-fs-sm);
}

/* ---------- Mobile (details/summary) ---------- */

.toc--mobile {
    margin-block: 0 var(--vjol-space-8);
}

@media (min-width: 1024px) {
    .toc--mobile { display: none; }
}

.toc__summary {
    cursor: pointer;
    font-weight: var(--vjol-fw-semibold);
    color: var(--vjol-color-heading);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vjol-space-3);
    font-size: var(--vjol-fs-base);
    padding: var(--vjol-space-1) 0;
}
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary::after {
    content: '';
    width: 0.55em;
    height: 0.55em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--vjol-duration-fast) var(--vjol-ease-out);
    flex-shrink: 0;
    opacity: 0.7;
}
.toc[open] .toc__summary::after {
    transform: rotate(-135deg) translateY(2px);
}
.toc__summary:focus-visible {
    outline: 2px solid var(--vjol-color-focus);
    outline-offset: 4px;
    border-radius: var(--vjol-radius-sm);
}

/* ---------- Desktop (sticky sidebar) ---------- */

.toc--desktop {
    position: sticky;
    /* offset = header height + chừa 16px */
    top: calc(var(--vjol-header-height) + var(--vjol-space-4));
    max-height: calc(100vh - var(--vjol-header-height) - var(--vjol-space-8));
    overflow-y: auto;
    /* scrollbar gọn */
    scrollbar-width: thin;
}

.toc__title {
    margin: 0 0 var(--vjol-space-3);
    font-size: var(--vjol-fs-base);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vjol-color-text-muted);
    font-weight: var(--vjol-fw-semibold);
}

/* ---------- TOC list (shared) ---------- */

.toc__nav { margin-top: var(--vjol-space-3); }
.toc--mobile .toc__nav { margin-top: var(--vjol-space-4); }

.toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.toc__item { margin: 0; }

.toc__link {
    display: block;
    padding: var(--vjol-space-1) var(--vjol-space-3);
    border-radius: var(--vjol-radius-sm);
    color: var(--vjol-color-text);
    text-decoration: none;
    line-height: var(--vjol-lh-snug);
    transition: background-color var(--vjol-duration-fast) var(--vjol-ease-out),
                color var(--vjol-duration-fast) var(--vjol-ease-out);
}

.toc__link:hover,
.toc__link:focus-visible {
    background: var(--vjol-color-bg);
    color: var(--vjol-color-primary);
}

.toc__item--h3 .toc__link {
    padding-inline-start: var(--vjol-space-6);
    font-size: 0.95em;
    color: var(--vjol-color-text-muted);
}
.toc__item--h3 .toc__link:hover,
.toc__item--h3 .toc__link:focus-visible {
    color: var(--vjol-color-primary);
}