/* ── Table of Contents ──
 * Collapsible, RTL-native, brand-styled.
 * Uses <details>/<summary> for zero-JS collapse.
 * ──────────────────────── */

.smi-toc {
	margin: 0 0 32px;
	border: 1px solid var(--ce, #eee8df);
	border-radius: 12px;
	background: var(--cb, #f5f7fb);
	overflow: hidden;
	font-size: 15px;
	line-height: 1.6;
}

/* ── Toggle header ── */
.smi-toc-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	cursor: pointer;
	user-select: none;
	list-style: none;
	transition: background 0.2s ease;
}
.smi-toc-toggle::-webkit-details-marker { display: none; }
.smi-toc-toggle::marker { display: none; content: ''; }

.smi-toc-toggle:hover {
	background: var(--ce, #eee8df);
}

.smi-toc-title {
	font-weight: 700;
	font-size: 16px;
	color: var(--ct, #3a3630);
}

.smi-toc-icon {
	display: flex;
	align-items: center;
	transition: transform 0.3s ease;
}
.smi-toc-chevron {
	width: 16px;
	height: 16px;
	color: var(--cm, #7a7368);
}
.smi-toc-details[open] .smi-toc-icon {
	transform: rotate(180deg);
}

/* ── List ── */
.smi-toc-list {
	margin: 0;
	padding: 0 20px 20px;
	counter-reset: toc-counter;
	list-style: none;
}

.smi-toc-list > li {
	counter-increment: toc-counter;
	position: relative;
	padding-right: 28px;
	margin-bottom: 6px;
}

.smi-toc-list > li::before {
	content: counter(toc-counter);
	position: absolute;
	right: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--brand, #283583);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.smi-toc-list a {
	color: var(--ct, #3a3630);
	text-decoration: none;
	transition: color 0.2s ease, padding-right 0.2s ease;
	display: block;
	padding: 4px 0;
	border-bottom: 1px solid transparent;
}

.smi-toc-list a:hover {
	color: var(--brand-deep, #1a2358);
	padding-right: 4px;
}

/* ── Nested sub-lists (H3, H4, etc.) ── */
.smi-toc-sub {
	margin: 4px 0 4px 0;
	padding: 0 16px 0 0;
	list-style: none;
	counter-reset: toc-sub;
	border-right: 2px solid var(--ce, #eee8df);
}

.smi-toc-sub > li {
	counter-increment: toc-sub;
	position: relative;
	padding-right: 8px;
	margin-bottom: 2px;
}

.smi-toc-sub > li::before {
	content: none;
}

.smi-toc-sub a {
	font-size: 14px;
	color: var(--cm, #7a7368);
}

.smi-toc-sub a:hover {
	color: var(--ct, #3a3630);
}

/* ── Deeper nesting ── */
.smi-toc-sub .smi-toc-sub {
	padding-right: 12px;
	border-right-color: var(--brand-soft, #efe6dc);
}

.smi-toc-sub .smi-toc-sub a {
	font-size: 13px;
}

/* ── Smooth scroll for anchor links ── */
html {
	scroll-behavior: smooth;
}

/* Offset for sticky header */
[id] {
	scroll-margin-top: calc(var(--hdr-h, 80px) + 16px);
}

/* ── Dark mode ── */
html.smi-dark .smi-toc {
	background: var(--surface-elevated, #2e2b26);
	border-color: var(--ce, #3a3630);
}

html.smi-dark .smi-toc-toggle:hover {
	background: var(--ce, #3a3630);
}

html.smi-dark .smi-toc-list > li::before {
	background: var(--brand-deep, #8f7d66);
}

/* ── Responsive ── */
@media (max-width: 640px) {
	.smi-toc {
		font-size: 14px;
		border-radius: 8px;
	}
	.smi-toc-toggle {
		padding: 12px 16px;
	}
	.smi-toc-list {
		padding: 0 16px 16px;
	}
}