/**
 * Table of Contents Styles
 * Desktop-only sticky sidebar with article navigation
 */

/* Content wrapper for sidebar layout */
.article-content-wrapper {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: var(--wp--preset--spacing--60);
	width: 100%;
}

@media (max-width: 1023px) {
	.article-content-wrapper {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

/* Table of Contents Container */
.article-toc {
	position: sticky;
	top: calc(var(--wp--preset--spacing--60) + 20px);
	align-self: start;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 8px;
	height: fit-content;
	max-height: calc(100vh - var(--wp--preset--spacing--60) - 40px);
	overflow-y: auto;
}

@media (max-width: 1023px) {
	.article-toc {
		display: none;
	}
}

/* TOC Title */
.article-toc__title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 var(--wp--preset--spacing--30) 0;
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 2px solid var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--contrast);
}

/* TOC List */
.article-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* TOC Items */
.article-toc__item {
	margin: 0;
	padding: 0;
}

/* TOC Links */
.article-toc__list a {
	display: block;
	padding: 8px 0;
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	transition: all 0.2s ease;
	border-left: 2px solid transparent;
	padding-left: 12px;
}

.article-toc__list a:hover {
	color: var(--wp--preset--color--contrast);
	background: color-mix(in srgb, var(--wp--preset--color--accent-6) 10%, transparent);
	border-left-color: var(--wp--preset--color--accent-4);
}

/* Active TOC Link */
.article-toc__list a.is-active-toc {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	border-left-color: var(--wp--preset--color--contrast);
	background: color-mix(in srgb, var(--wp--preset--color--accent-6) 15%, transparent);
}

/* H3 items - indented */
.article-toc__item--h3 a {
	padding-left: 24px;
	font-size: 0.85rem;
}

/* Smooth scroll behavior */
html {
	scroll-behavior: smooth;
}

/* Heading Anchor Links */
.has-anchor {
	position: relative;
}

.heading-anchor {
	opacity: 0;
	position: absolute;
	left: -1.5em;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	font-size: 0.8em;
	transition: opacity 0.2s ease;
}

.has-anchor:hover .heading-anchor,
.heading-anchor:hover {
	opacity: 1;
}

.heading-anchor:hover {
	color: var(--wp--preset--color--contrast);
}

.heading-anchor__icon {
	display: inline-block;
}

/* TOC scrollbar styling */
.article-toc::-webkit-scrollbar {
	width: 6px;
}

.article-toc::-webkit-scrollbar-track {
	background: transparent;
}

.article-toc::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--accent-6);
	border-radius: 3px;
}

.article-toc::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--accent-4);
}

/* Ensure post content takes full width in wrapper */
.article-content-wrapper .wp-block-post-content {
	width: 100%;
	min-width: 0;
}