/**
 * Component: table of contents (the content's h2s).
 *
 * Mobile-first: a full-width box with a left-aligned title. With JS, below
 * tablet (48em) it starts collapsed behind a toggle button (title, current
 * heading, chevron): the "js" class is set by an inline script in <head>,
 * so the collapsed state is there at first paint (no shift). Without JS the
 * list is always shown. From tablet up the list is always shown and the
 * button hidden. From desktop (80em), where it has its own column (see
 * page-layout.css), the narrow Figma box: centered title, larger links and
 * short dividers.
 *
 * Colors read the toc.* hooks (theme.json settings.custom.toc.*, see
 * CLAUDE-starter.md → Design tokens → Component color hooks) with today's
 * slugs as fallbacks: this white card is the default style; the "filled"
 * style at the end of the file switches on custom.toc.style.
 */

.toc {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border: var(--wp--custom--border-width--thin) solid var(--wp--custom--toc--border, var(--wp--preset--color--surface));
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--custom--toc--background, var(--wp--preset--color--base));
	box-shadow: var(--wp--preset--shadow--sm);
}

.toc__title {
	color: var(--wp--custom--toc--title, var(--wp--preset--color--primary-dark));
}

/* Toggle (mobile with JS only) */
.toc__toggle {
	display: none;
}

.js .toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	inline-size: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--custom--toc--title, var(--wp--preset--color--primary-dark));
	text-align: start;
	cursor: pointer;
}

.js .toc__title,
.js .toc:not(.is-expanded) .toc__list {
	display: none;
}

.toc__toggle-text {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	min-inline-size: 0;
}

.toc__current {
	overflow: hidden;
	color: var(--wp--custom--toc--link, var(--wp--preset--color--primary));
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.toc.is-expanded .toc__current {
	display: none;
}

/* Inline SVG (toc.php), painted with the text color. */
.toc__chevron {
	flex: none;
	inline-size: var(--wp--custom--icon--md);
	block-size: var(--wp--custom--icon--md);
	transition: rotate 0.2s ease;
}

.toc__toggle[aria-expanded="true"] .toc__chevron {
	rotate: 180deg;
}

@media (prefers-reduced-motion: reduce) {
	.toc__chevron {
		transition: none;
	}
}

.toc__list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.toc__item + .toc__item {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--border-width--thin) solid var(--wp--custom--toc--divider, var(--wp--preset--color--surface-alt));
}

.toc__link {
	display: block;
	color: var(--wp--custom--toc--link, var(--wp--preset--color--primary));
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
}

.toc__link:hover {
	text-decoration: underline;
}

/* Smooth jumps to the headings, except with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	html:has(.toc) {
		scroll-behavior: smooth;
	}
}

/* tablet: always expanded, no toggle. */
@media (min-width: 48em) {
	.js .toc__toggle {
		display: none;
	}

	.js .toc__title {
		display: block;
	}

	.js .toc:not(.is-expanded) .toc__list {
		display: grid;
	}
}

/* desktop: the narrow column box. */
@media (min-width: 80em) {
	.toc {
		gap: var(--wp--preset--spacing--40);
		padding-inline: 0;
	}

	.toc__title {
		text-align: center;
	}

	.toc__list {
		padding-inline: var(--wp--preset--spacing--30);
	}

	.toc__item + .toc__item {
		border-block-start: 0;
		background: linear-gradient(var(--wp--custom--toc--divider, var(--wp--preset--color--surface-alt)), var(--wp--custom--toc--divider, var(--wp--preset--color--surface-alt))) top left / 80% var(--wp--custom--border-width--thin) no-repeat;
	}

	.toc__link {
		line-height: var(--wp--custom--line-height--toc);
	}
}

/* Filled style (theme.json custom.toc.style = "filled", class on the <nav>
   from firm_component_style_class()): a primary box with light title and
   links and translucent dividers. The same toc.* hooks apply with these
   defaults; :where() keeps the specificity of the rules above. */
.toc:where(.toc--filled) {
	border-color: var(--wp--custom--toc--border, transparent);
	background: var(--wp--custom--toc--background, var(--wp--preset--color--primary));
}

:where(.toc--filled) .toc__title,
.js :where(.toc--filled) .toc__toggle {
	color: var(--wp--custom--toc--title, var(--wp--preset--color--base));
}

:where(.toc--filled) .toc__current,
:where(.toc--filled) .toc__link {
	color: var(--wp--custom--toc--link, var(--wp--preset--color--base));
}

:where(.toc--filled) .toc__item + .toc__item {
	border-block-start-color: var(--wp--custom--toc--divider, color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent));
}

@media (min-width: 80em) {
	:where(.toc--filled) .toc__item + .toc__item {
		background-image: linear-gradient(var(--wp--custom--toc--divider, color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent)), var(--wp--custom--toc--divider, color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent)));
	}
}