/* ==========================================================================
   Quick navigation (TOC)
   ========================================================================== */

.toc {
    margin-top: var(--space-section);
    background-color: var(--color-card);
    border-left: 3px solid var(--color-accent);
    clip-path: var(--clip-cut);
}

.toc__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-lg);
    color: var(--color-heading);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    text-align: left;
}

.toc__arrow {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
    transition: transform var(--transition);
}

.toc__toggle[aria-expanded="false"] .toc__arrow {
    transform: rotate(-135deg) translateY(-3px);
}

.toc__list {
    display: grid;
    gap: var(--space-2xs);
    padding: 0 var(--space-lg) var(--space-lg);
    list-style: none;
}

.toc--collapsed .toc__list {
    display: none;
}

.toc__item {
    counter-increment: toc;
}

.toc__link {
    display: block;
    padding: var(--space-3xs) 0;
    color: var(--color-text);
    transition: color var(--transition), padding-left var(--transition);
}

.toc__link::before {
    content: "→";
    margin-right: var(--space-2xs);
    color: var(--color-accent);
}

.toc__link:hover,
.toc__link:focus-visible {
    padding-left: var(--space-2xs);
    color: var(--color-heading);
}