/**
 * Modern TOC — Core Styles
 * Version: 5.2.0
 *
 * Design principle: the TOC is a quiet navigation aid.
 * It must never compete visually with the content.
 *
 * CSS custom properties set by AssetManager (server-side):
 *   --mtoc-bg, --mtoc-link, --mtoc-width
 *   --mtoc-max-height         (only when > 0)
 *   --mtoc-link-h2…h6 etc.   (only when hierarchy enabled)
 */

/* ==========================================================================
   1. WRAPPER & CONTAINER — minimal, light, breathable
   ========================================================================== */

.mtoc-wrapper {
	margin: 1.2em 0;
}

.mtoc-container {
	background: var(--mtoc-bg, transparent);
	border: none;
	border-left: 2px solid color-mix(in srgb, var(--mtoc-link, #333) 20%, transparent);
	padding: 0.6em 0 0.6em 1em;
	width: var(--mtoc-width, auto);
	max-width: 100%;
	font-size: 0.85em;
	line-height: 1.5;
}

/* ==========================================================================
   2. HEADER — compact title + toggle
   ========================================================================== */

.mtoc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.3em;
}

.mtoc-title {
	font-weight: 600;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--mtoc-link, #333) 60%, transparent);
	margin: 0;
}

.mtoc-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px;
	color: color-mix(in srgb, var(--mtoc-link, #333) 50%, transparent);
	transition: transform 0.25s ease, color 0.15s;
	flex-shrink: 0;
	line-height: 0;
}

.mtoc-toggle:hover {
	color: var(--mtoc-link, #333);
}

.mtoc-toggle[aria-expanded="true"] {
	transform: rotate(180deg);
}

/* ==========================================================================
   3. BODY — Collapse + Overflow scroll
   ========================================================================== */

.mtoc-body {
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.2s ease;
}

/* Collapsed state (JS-toggled). Overrides everything. */
.mtoc-body.is-collapsed {
	max-height: 0 !important;
	opacity: 0;
	pointer-events: none;
}

/**
 * Scrollable body when max-height is configured via admin.
 *
 * IMPORTANT: The JS collapse toggle does NOT set inline max-height
 * on scrollable containers. This CSS variable is the sole authority.
 * Scrollbar is hidden; cursor signals scrollability.
 */
.mtoc-body--scrollable {
	max-height: var(--mtoc-max-height);
	overflow-y: auto;
	cursor: ns-resize;

	/* Hide scrollbar — all browsers */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.mtoc-body--scrollable::-webkit-scrollbar {
	display: none;
}

/**
 * Bottom fade — indicates more content below.
 * Only shown when content actually overflows (JS adds .has-overflow).
 */
.mtoc-body--scrollable.has-overflow::after {
	content: '';
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	height: 24px;
	background: linear-gradient(to bottom, transparent, var(--mtoc-bg, #fff));
	pointer-events: none;
	transition: opacity 0.2s;
}

/* Fade out the gradient when scrolled to end. */
.mtoc-body--scrollable.scrolled-end::after {
	opacity: 0;
}

/* ==========================================================================
   4. LIST STRUCTURE
   ========================================================================== */

.mtoc-list,
.mtoc-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mtoc-sublist {
	padding-left: 0.85em;
}

.mtoc-item {
	margin: 0;
}

/* ==========================================================================
   5. LINKS — base style (flat, quiet)
   ========================================================================== */

.mtoc-link {
	color: var(--mtoc-link, #333);
	text-decoration: none;
	display: block;
	padding: 0.15em 0.4em;
	border-radius: 3px;
	transition: color 0.15s, background-color 0.15s;
	font-weight: 400;
}

.mtoc-link:hover,
.mtoc-link:focus {
	text-decoration: none;
	background-color: color-mix(in srgb, var(--mtoc-link, #333) 6%, transparent);
	color: var(--mtoc-link, #333);
}

/* ==========================================================================
   6. HIERARCHY — per-level differentiation (opt-in via .mtoc-hierarchy)
   ========================================================================== */

.mtoc-hierarchy .mtoc-item-2 > .mtoc-link {
	color: var(--mtoc-link-h2, var(--mtoc-link, #333));
	font-weight: var(--mtoc-weight-h2, 600);
	font-size: var(--mtoc-size-h2, 1em);
}

.mtoc-hierarchy .mtoc-item-3 > .mtoc-link {
	color: var(--mtoc-link-h3, var(--mtoc-link, #555));
	font-weight: var(--mtoc-weight-h3, 400);
	font-size: var(--mtoc-size-h3, 0.95em);
}

.mtoc-hierarchy .mtoc-item-4 > .mtoc-link {
	color: var(--mtoc-link-h4, var(--mtoc-link, #666));
	font-weight: var(--mtoc-weight-h4, 400);
	font-size: var(--mtoc-size-h4, 0.92em);
}

.mtoc-hierarchy .mtoc-item-5 > .mtoc-link {
	color: var(--mtoc-link-h5, var(--mtoc-link, #777));
	font-weight: var(--mtoc-weight-h5, 400);
	font-size: var(--mtoc-size-h5, 0.89em);
}

.mtoc-hierarchy .mtoc-item-6 > .mtoc-link {
	color: var(--mtoc-link-h6, var(--mtoc-link, #888));
	font-weight: var(--mtoc-weight-h6, 400);
	font-size: var(--mtoc-size-h6, 0.86em);
}

/* ==========================================================================
   7. NUMBERING — CSS counters (opt-in via .mtoc-numbered)
   ========================================================================== */

.mtoc-numbered .mtoc-list {
	counter-reset: mtoc-l1;
}

.mtoc-numbered .mtoc-list > .mtoc-item {
	counter-increment: mtoc-l1;
}

.mtoc-numbered .mtoc-list > .mtoc-item > .mtoc-link::before {
	content: counter(mtoc-l1) ". ";
	opacity: 0.45;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Second level */
.mtoc-numbered .mtoc-sublist {
	counter-reset: mtoc-l2;
}

.mtoc-numbered .mtoc-sublist > li > .mtoc-item > .mtoc-link::before,
.mtoc-numbered .mtoc-sublist > .mtoc-item > .mtoc-link::before {
	counter-increment: mtoc-l2;
	content: counter(mtoc-l1) "." counter(mtoc-l2) " ";
	opacity: 0.40;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* Third level */
.mtoc-numbered .mtoc-sublist .mtoc-sublist {
	counter-reset: mtoc-l3;
}

.mtoc-numbered .mtoc-sublist .mtoc-sublist > li > .mtoc-item > .mtoc-link::before,
.mtoc-numbered .mtoc-sublist .mtoc-sublist > .mtoc-item > .mtoc-link::before {
	counter-increment: mtoc-l3;
	content: counter(mtoc-l1) "." counter(mtoc-l2) "." counter(mtoc-l3) " ";
	opacity: 0.35;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   8. ACTIVE STATE — Scroll Spy
   ========================================================================== */

.mtoc-link.is-active {
	background-color: color-mix(in srgb, var(--mtoc-link, #333) 8%, transparent);
	color: var(--mtoc-link, #333);
	font-weight: 600;
}