/**
 * FlexiTOC front-end styles.
 *
 * Design rule: inherit the theme. Colors derive from currentColor, sizes
 * from em — the TOC should look native in any theme, light or dark,
 * without a settings page full of color pickers. Native block supports
 * (colors, border, spacing, typography) layer on top per instance.
 *
 * --flexitoc-offset (set from Settings → Fixed header offset) drives the
 * anchor scroll margin, the sticky top and the scroll-spy reading line.
 */

.flexitoc {
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 4px;
	padding: 0.75em 1em;
	margin: 0 0 1.5em;
	max-width: max-content;
	min-width: min(20em, 100%);
	font-size: 0.95em;
	line-height: 1.6;
}

/* Block style variations (also usable via the global preset setting). */
.flexitoc.is-style-boxed {
	background: color-mix(in srgb, currentColor 5%, transparent);
	border-color: color-mix(in srgb, currentColor 12%, transparent);
}

.flexitoc.is-style-minimal {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
}

.flexitoc__title {
	font-weight: 600;
	margin: 0 0 0.25em;
}

/* Collapsible variant. */
.flexitoc__details > .flexitoc__title {
	cursor: pointer;
	margin: 0;
}

.flexitoc__details[open] > .flexitoc__title {
	margin-bottom: 0.25em;
}

.flexitoc__details > .flexitoc__title::-webkit-details-marker {
	color: color-mix(in srgb, currentColor 55%, transparent);
}

/* Lists. */
.flexitoc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.flexitoc__list .flexitoc__list {
	padding-inline-start: 1.1em;
}

.flexitoc__item {
	margin: 0.15em 0;
}

ul.flexitoc__list {
	list-style: disc;
	padding-inline-start: 1.3em;
}

/* Numbered style: outline numbering (1, 1.1, 1.2, 2, 2.1 ...) via CSS
   counters, since a nested <ol>'s native numbering always restarts at 1 and
   has no way to prefix its parent's number. Each list level resets its own
   counter scope; counters() then joins every ancestor scope with ".". This
   also correctly collapses to a plain "1, 2, 3" for a flat (unnested) list,
   since there is only one scope to join. */
ol.flexitoc__list {
	list-style: none;
	padding-inline-start: 1.4em;
	counter-reset: flexitoc-counter;
}

ol.flexitoc__list > .flexitoc__item {
	counter-increment: flexitoc-counter;
}

ol.flexitoc__list > .flexitoc__item::before {
	content: counters(flexitoc-counter, ".") ".\00a0";
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, currentColor 70%, transparent);
}

/* "None" list style: semantic <ul> underneath (screen readers still hear a
   list), no visual marker at any depth. Two classes beat the tag+class
   selectors above regardless of nesting. */
.flexitoc__list.flexitoc__list--plain {
	list-style: none;
	padding-inline-start: 1.1em;
}

/* Links: understated by default, clear on interaction. */
.flexitoc__link {
	text-decoration: none;
	color: inherit;
	opacity: 0.85;
}

.flexitoc__link:hover,
.flexitoc__link:focus-visible {
	text-decoration: underline;
	opacity: 1;
}

/* Scroll spy state. */
.flexitoc__link.is-active {
	opacity: 1;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Anchor landing: keep the heading clear of any fixed header. */
:target {
	scroll-margin-top: calc(var(--flexitoc-offset, 0px) + 2rem);
}

/* Sticky placement (sidebars, templates). */
.flexitoc--sticky {
	position: sticky;
	top: calc(1.5rem + var(--flexitoc-offset, 0px));
	max-height: calc(100vh - 3rem - var(--flexitoc-offset, 0px));
	overflow: auto;
}

.admin-bar .flexitoc--sticky {
	top: calc(1.5rem + 32px + var(--flexitoc-offset, 0px));
	max-height: calc(100vh - 3rem - 32px - var(--flexitoc-offset, 0px));
}

/* Stacked mobile layouts: pinning a TOC over content helps nobody. */
@media (max-width: 781px) {
	.flexitoc--sticky,
	.admin-bar .flexitoc--sticky {
		position: static;
		max-height: none;
	}
}

@media print {
	.flexitoc {
		display: none;
	}
}