/**
 * Slowly — Table of Contents block.
 *
 * Structural and behavioural CSS only. All visual styling (colours, typography,
 * spacing, borders) comes from the block's Design tab. This stylesheet loads
 * only on pages that contain a TOC block.
 */

/* Smooth anchor scrolling, disabled for reduced-motion users. */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Stable width regardless of collapse state: a closed <details> must not let
   the block shrink-wrap to the title. */
[data-cc-toc] {
	display: block;
}
[data-cc-toc] .cc-toc__details {
	display: block;
	width: 100%;
}

[data-cc-toc] .cc-toc__list,
[data-cc-toc] .cc-toc__list ol {
	margin: 0;
	padding-left: 1.5rem;
}
[data-cc-toc] .cc-toc__list li {
	margin: 0.25rem 0;
}

/* Marker styles — TOC-specific, beyond what a generic Design tab expresses. */
[data-cc-toc] .cc-toc__list--none,
[data-cc-toc] .cc-toc__list--none ol {
	list-style: none;
	padding-left: 1rem;
}
[data-cc-toc] .cc-toc__list--disc {
	list-style: disc;
}
[data-cc-toc] .cc-toc__list--disc ol {
	list-style: circle;
}
[data-cc-toc] .cc-toc__list--decimal,
[data-cc-toc] .cc-toc__list--decimal ol {
	list-style: decimal;
}

/* Nested numbering: 1, 1.1, 1.1.1 */
[data-cc-toc] .cc-toc__list--nested,
[data-cc-toc] .cc-toc__list--nested ol {
	list-style: none;
	counter-reset: cc-toc;
	padding-left: 1.25rem;
}
[data-cc-toc] .cc-toc__list--nested li {
	counter-increment: cc-toc;
}
[data-cc-toc] .cc-toc__list--nested li > a::before {
	content: counters(cc-toc, ".") "\00a0\00a0";
	color: inherit;
}

/* Collapsible chrome (native <details>). */
[data-cc-toc] details.cc-toc__details > summary {
	cursor: pointer;
}

/* Custom disclosure icon (button-style): replaces the native triangle and
   rotates on open. Only applies when a toggle icon is set. */
[data-cc-toc] summary.cc-toc__title--has-icon {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.4em;
}
[data-cc-toc] summary.cc-toc__title--has-icon::-webkit-details-marker {
	display: none;
}
[data-cc-toc] .cc-toc__toggle-icon {
	display: inline-flex;
	align-items: center;
	transition: transform 0.2s ease;
}
[data-cc-toc] .cc-toc__toggle-icon svg {
	width: 1em;
	height: 1em;
}
[data-cc-toc] details.cc-toc__details[open] > summary .cc-toc__toggle-icon {
	transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
	[data-cc-toc] .cc-toc__toggle-icon {
		transition: none;
	}
}

/* Active-section indicator. aria-current is set by the script; the look stays
   overridable from the Design tab / custom CSS. */
[data-cc-toc] a[aria-current="location"] {
	font-weight: 600;
}