/* iToC Base Styles */
.itoc {
    position: sticky;
    top: 0;
    margin-bottom: 1rem;
    background: var(--itoc-bg, #ffffff);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--itoc-scrollbar-thumb, #cbd5e0) var(--itoc-scrollbar-track, #f7fafc);
}

.itoc::-webkit-scrollbar {
    width: 6px;
}

.itoc::-webkit-scrollbar-track {
    background: var(--itoc-scrollbar-track, #f7fafc);
    border-radius: 3px;
}

.itoc::-webkit-scrollbar-thumb {
    background: var(--itoc-scrollbar-thumb, #cbd5e0);
    border-radius: 3px;
}

.itoc::-webkit-scrollbar-thumb:hover {
    background: var(--itoc-scrollbar-thumb-hover, #a0aec0);
}

.itoc h2 {
    margin: 0 0 1rem 0;
    font-size: var(--itoc-heading-size, 1.25rem);
    color: var(--itoc-heading-color, #2d3748);
    font-weight: 600;
}

.itoc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.itoc ul li {
    padding: 0.5rem 0 0.5rem 1rem;
    border-left: 3px solid var(--itoc-border-inactive, #EEF2F6);
    transition: all 0.3s ease-in-out;
    position: relative;
    margin: 0;
}


.itoc ul li.active {
    border-left-color: var(--itoc-border-active, #9831A5);
}

.itoc ul li a {
    text-decoration: none;
    color: var(--itoc-link-color, #737373);
    font-weight: 400;
    transition: all 0.3s ease;
    display: block;
    outline: none;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
}

.itoc ul li a:hover {
    color: var(--itoc-link-hover-color, #9831A5);
}

.itoc ul li a:focus {
    outline: none;
}

.itoc ul li a.active {
    color: var(--itoc-link-active-color, #9831A5);
}

/* Nested list styles */
.itoc ul ul {
    /* margin-left: 1rem; */
    margin-top: 0.5rem;
}

.itoc ul ul li {
    padding-left: 0.75rem;
    font-size: 0.9em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .itoc {
        position: static;
        max-height: none;
        margin-bottom: 2rem;
        padding: 0.75rem;
    }
    
    .itoc h2 {
        font-size: 1.1rem;
    }
    
    .itoc ul li {
        padding: 0.5rem 0 0.5rem 0.75rem;
    }
    
    .itoc ul ul {
        margin-left: 0.5rem;
    }
}

@media (max-width: 480px) {
    .itoc {
        padding: 0.5rem;
    }
    
    .itoc ul li {
        padding: 0.4rem 0 0.4rem 0.5rem;
        font-size: 0.9em;
    }
}

/* Dark Theme Support */
/* @media (prefers-color-scheme: dark) {
    .itoc {
        --itoc-bg: #1a202c;
        --itoc-heading-color: #e2e8f0;
        --itoc-link-color: #a0aec0;
        --itoc-link-hover-color: #e2e8f0;
        --itoc-link-active-color: #ffffff;
        --itoc-border-inactive: #2d3748;
        --itoc-border-hover: #4a5568;
        --itoc-border-active: #63b3ed;
        --itoc-item-hover-bg: #2d3748;
        --itoc-item-active-bg: #2b6cb0;
        --itoc-link-hover-bg: rgba(99, 179, 237, 0.1);
        --itoc-link-active-bg: rgba(99, 179, 237, 0.2);
        --itoc-scrollbar-track: #2d3748;
        --itoc-scrollbar-thumb: #4a5568;
        --itoc-scrollbar-thumb-hover: #718096;
        --itoc-focus-color: #63b3ed;
    }
} */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .itoc {
        --itoc-border-active: #000000;
        --itoc-link-active-color: #000000;
        --itoc-focus-color: #000000;
    }
}

/* Collapsible ToC Styles */
.itoc-collapsible .itoc-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8em;
    color: var(--itoc-link-color, #718096);
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.itoc-collapsible .itoc-toggle:hover {
    background: var(--itoc-link-hover-bg, rgba(66, 153, 225, 0.1));
    color: var(--itoc-link-hover-color, #4a5568);
}

.itoc-collapsible .itoc-toggle:focus {
    outline: 2px solid var(--itoc-focus-color, #4299e1);
    outline-offset: 2px;
}

.itoc-collapsible .itoc-toggle-icon {
    font-weight: bold;
    transition: transform 0.3s ease;
}

.itoc-collapsible .itoc-toggle[aria-expanded="false"] .itoc-toggle-icon {
    transform: rotate(180deg);
}

.itoc-collapsible .itoc-content {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.itoc-collapsible .itoc-toggle[aria-expanded="false"] + .itoc-content,
.itoc-collapsible .itoc-toggle[aria-expanded="false"] ~ .itoc-content {
    max-height: 0;
    opacity: 0;
}

.itoc-collapsible .itoc-toggle[aria-expanded="true"] ~ .itoc-content {
    max-height: 1000px;
    opacity: 1;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .itoc ul li,
    .itoc ul li a,
    .itoc-collapsible .itoc-toggle,
    .itoc-collapsible .itoc-toggle-icon,
    .itoc-collapsible .itoc-content {
        transition: none;
    }
}