.table-of-contents > ul {
    margin-left: 0!important;
	padding-left: var(--space-xs);
	border-left: 2px solid var(--surface-300);
	position: relative;
}


/* Targets nested elements excluding top level */
.table-of-contents > ul > li ul {
	padding-left: 0px;
    margin-block: 0px;
	margin-left: 0px!important;
}

.table-of-contents li {
    list-style: none;
	margin-bottom: 8px;
}

.table-of-contents li a + ul {
	margin-top: 8px;
}

.table-of-contents a.toc-link {
    text-decoration: none;
    color: var(--surface-800);
	line-height: 1.6em;
    font-size: 1rem;
	display: flex;
	transition: var(--transtion-all) ;
}

.table-of-contents a.toc-link:is(:hover, :focus) {
    color: var(--surface);
}

.table-of-contents a.toc-link:hover,
.table-of-contents a.toc-link:focus-visible {
    text-decoration: underline;
	font-weight: 600;
}


/* Highlight the active TOC link to indicate the current section in view */
.table-of-contents a.toc-link.active {
    color: var(--surface);
    text-decoration: none;
	position: relative;
	font-weight: 600;
}

/* Vertical line indicator for active TOC links within nested lists */
.table-of-contents > ul .toc-link.active::before {
    content: "";
    height: 100%;
    position: absolute;
    left: calc(-2px - var(--space-xs));
    width: 2px;
    background: var(--primary-700);
}

.table-of-contents > ul ul {
    transition: var(--transition-all);
    transition-duration: 1s;
}

.table-of-contents > ul > li > ul > li > a {
    transition: var(--transition-all);
    padding-left: var(--space-xs)!important;
}

@media (min-width: 1025px) {
	.table-of-contents.hide-inactive:not(:focus-within) > ul a:not(:is(.active)) + ul:not(:has(.active)) {
		height: 0;
		visibility: hidden;
		opacity: 0;
		transition-duration: 0.2s;
		margin-top: 0px;
	}
}