/**
 * Table of contents on single docs.
 *
 * Plain CSS on purpose: the theme's Tailwind build only picks up classes that
 * existed when `npx mix --production` last ran, so a new utility class here
 * would silently render unstyled until someone rebuilt. This file needs no
 * build step.
 */

.ox-docs-toc {
	margin: 1.75rem 0 2.25rem;
	padding: 1.15rem 1.35rem;
	border: 1px solid #e2e8f0;
	border-left: 3px solid #0ad2ad;
	border-radius: 0.5rem;
	background: #f8fafc;
}

.ox-docs-toc__title {
	margin: 0 0 0.6rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b;
}

.ox-docs-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.4rem;
}

.ox-docs-toc__list li {
	margin: 0;
	padding: 0;
	line-height: 1.45;
}

.ox-docs-toc__list a {
	color: #0f172a;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.ox-docs-toc__list a:hover,
.ox-docs-toc__list a:focus-visible {
	color: #0ad2ad;
	border-bottom-color: currentColor;
}

/* Two columns once there is room, so a long list stays scannable. */
@media (min-width: 768px) {
	.ox-docs-toc__list {
		grid-template-columns: 1fr 1fr;
		gap: 0.4rem 1.75rem;
	}
}

/* The theme toggles dark mode with a class on <html>. */
.dark .ox-docs-toc {
	border-color: rgba(148, 163, 184, 0.25);
	border-left-color: #0ad2ad;
	background: rgba(148, 163, 184, 0.08);
}

.dark .ox-docs-toc__title {
	color: #94a3b8;
}

.dark .ox-docs-toc__list a {
	color: #e2e8f0;
}

.dark .ox-docs-toc__list a:hover,
.dark .ox-docs-toc__list a:focus-visible {
	color: #0ad2ad;
}

/* Fixed site header, so an anchored heading is not hidden behind it. */
:where(.single-docs) :is(h2[id], h3[id]) {
	scroll-margin-top: 90px;
}

/**
 * Smooth scrolling for the TOC links.
 *
 * This stylesheet only loads on single docs, so it does not change scrolling
 * anywhere else on the site. Anyone who has asked their system to reduce
 * motion keeps the instant jump.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}