/**
 * Smart TOC Manager — frontend styles.
 *
 * Classes: stm-toc, stm-toc-title, stm-toc-list, stm-toc-toggle, stm-active (spec.md §15).
 * Modifiers: stm-toc--sticky, added server-side by Renderer::render_toc_html()
 * from the "Sticky TOC" setting (spec.md §11); stm-toc--collapsed, toggled by
 * assets/js/frontend.js (spec.md §13). The 768px breakpoint below must match
 * MOBILE_BREAKPOINT in that file.
 *
 * @package SmartTOCManager
 */

.stm-toc {
	--stm-toc-border: #d0d0d0;
	--stm-toc-title-text: #000000;
	--stm-toc-link: #4a4de0;

	box-sizing: border-box;
	max-width: 100%;
	margin: 1.5em 0;
}

.stm-toc *,
.stm-toc *::before,
.stm-toc *::after {
	box-sizing: inherit;
}

/* Corrects native browser anchor navigation (page-load hash, or a TOC click
 * when Smooth Scroll is off) so a heading doesn't land behind a sticky theme
 * header. --stm-toc-scroll-offset is set inline by Assets::enqueue_frontend()
 * from the "Scroll Offset" setting (spec.md §10). */
h2[id] {
	scroll-margin-top: var(--stm-toc-scroll-offset, 80px);
}

.stm-toc-title {
	margin: 0 0 0.75em;
	font-weight: 700;
	font-size: 1.2em;
	color: var(--stm-toc-title-text);
}

/* A single left-hand rule for the whole list, not a box around it or a
 * divider per row — the list's own top/bottom edge is the rule's extent.
 * list-style is !important on this and the li rule below because themes
 * commonly style their content area's <ul>/<li> with a higher-specificity
 * selector (e.g. a wrapper class chain like ".entry-content ul") that would
 * otherwise beat a plain ".stm-toc-list" rule and bring bullets back,
 * regardless of stylesheet load order. */
.stm-toc-list {
	width: 100%;
	margin: 0 !important;
	padding: 0;
	list-style: none !important;
	border-left: 1px solid var(--stm-toc-border);
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.stm-toc-list li {
	margin: 0 !important;
	padding: 0;
	list-style: none !important;
}

/* The whole row is one clickable, focusable `<a>`; its own padding creates
 * both the line-to-line spacing and the indent from the left rule. */
.stm-toc-list a {
	display: block;
	padding: 0.5em 1.5em;
	overflow-wrap: break-word;
	color: var(--stm-toc-link);
	text-decoration: none;
}

.stm-toc-list a:hover {
	text-decoration: underline;
}

.stm-toc-list a.stm-active {
	font-weight: 600;
}

.stm-toc a:focus-visible,
.stm-toc-toggle:focus-visible {
	outline: 2px solid var(--stm-toc-link);
	outline-offset: 2px;
}

/* Inset so it isn't clipped by .stm-toc-list's overflow:hidden (needed for
 * the mobile-collapse height animation), now that links are full-width rows. */
.stm-toc-list a:focus-visible {
	outline-offset: -2px;
}

/* Toggle button (assets/js/frontend.js, spec.md §13). Only shown once the
 * mobile media query below makes it relevant. */
.stm-toc-toggle {
	display: none;
	width: 100%;
	margin: 0 0 0.75em;
	padding: 0.5em 0.75em;
	font: inherit;
	font-weight: 600;
	color: var(--stm-toc-title-text);
	background: transparent;
	border: 1px solid var(--stm-toc-border);
	border-radius: 6px;
	text-align: left;
	cursor: pointer;
}

.stm-toc-toggle::after {
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-left: 0.5em;
	vertical-align: middle;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.stm-toc-toggle[aria-expanded="false"]::after {
	transform: rotate(-45deg);
}

/* Sticky TOC (spec.md §11): desktop only. */
@media (min-width: 769px) {
	.stm-toc--sticky {
		position: sticky;
		top: 30px;
		max-height: calc(100vh - 60px);
		overflow-y: auto;
	}

	/* JS fallback (assets/js/frontend.js initSticky()), only engaged when a
	 * theme ancestor's overflow/transform defeats the native rule above.
	 * top/left/width are set inline by JS; z-index is a best-effort default
	 * since a theme header's own stacking context can't be known generically. */
	.stm-toc--js-sticky.stm-toc--js-fixed {
		position: fixed;
		z-index: 10;
		max-height: calc(100vh - 60px);
		overflow-y: auto;
	}
}

/* Mobile collapse (spec.md §13): height is animated via max-height, set
 * inline by assets/js/frontend.js (list.style.maxHeight), since the natural
 * content height is unknown to CSS ahead of time. */
@media (max-width: 768px) {
	.stm-toc-toggle {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stm-toc-list,
	.stm-toc-toggle::after {
		transition: none;
	}
}