/**
 * Table of Contents Styles
 */

/* TOC List */
#sidebar-list {
    padding-left: 0;
    margin: 0;
    list-style: none;
    scroll-behavior: smooth;
}

/* TOC Items */
.toc-item {
    list-style: none;
    margin: 0;
    position: relative;
}

/* TOC Links */
.toc-link {
    color: #6c757d;
    transition: all 0.2s ease-in-out;
    border-left: 2px solid transparent;
    padding-left: 0.75rem !important;
    position: relative;
}

.toc-link:hover {
    color: #F68685;
    border-left-color: #dee2e6;
    /* background-color: rgba(13, 110, 253, 0.05); */
}

.toc-link.active {
    color: #F68685 !important;
    font-weight: 600 !important;
    border-left-color: #F68685;
    /* background-color: rgba(13, 110, 253, 0.08); */
}

/* Parent Items (items with children) */
.toc-parent {
    position: relative;
}

.toc-parent>.toc-link {
    padding-right: 1.5rem !important;
}

/* Chevron indicator for parent items */
.toc-parent>.toc-link::after {
    content: '›';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease-in-out;
    font-size: 1.2em;
    color: #6c757d;
    font-weight: bold;
}

.toc-parent.open>.toc-link::after {
    transform: translateY(-50%) rotate(90deg);
}

/* Children List */
.toc-children {
    list-style: none;
    padding-left: 0;
    margin: 0;
    overflow: hidden;
    display: none;
}

/* Nested items indentation */
.toc-children .toc-item {
    margin-left: 1rem;
}

.toc-children .toc-link {
    padding-left: 0.5rem !important;
}

/* Nested heading levels - Font sizes */
.toc-level-2>.toc-link {
    font-size: 0.875rem;
}

.toc-level-3>.toc-link {
    font-size: 0.8125rem;
}

.toc-level-4>.toc-link,
.toc-level-5>.toc-link,
.toc-level-6>.toc-link {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Smooth appearance */
#sidebar-list {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Content area headings - add scroll margin for better UX */
#content-area h2,
#content-area h3,
#content-area h4,
#content-area h5,
#content-area h6 {
    scroll-margin-top: 100px;
}