/**
 * فهرست پیمایش صفحه ([mah24_toc] / ویجت «فهرست ناحیه‌ها»).
 *
 * همه‌ی رنگ‌ها و اندازه‌ها متغیر CSS‌اند تا کنترل‌های ظاهرِ المنتور فقط همان
 * متغیر را روی ریشه بنویسند و لازم نباشد برای هر گزینه یک انتخابگر تازه ساخت.
 * چیدمان افقی و عمودی یک مارک‌آپ دارند؛ فقط جهت فهرست عوض می‌شود.
 */

.mah24-toc {
	--mah24-toc-ink: #5b525a;
	--mah24-toc-ink-hover: #35091c;
	--mah24-toc-active: #c20a51;
	--mah24-toc-active-bg: #fdeef4;
	--mah24-toc-bg: transparent;
	--mah24-toc-line: #f0edee;
	--mah24-toc-marker: #c20a51;
	--mah24-toc-title: #35091c;
	--mah24-toc-radius: 12px;
	--mah24-toc-gap: 4px;
	--mah24-toc-pad-y: 9px;
	--mah24-toc-pad-x: 12px;
	--mah24-toc-marker-w: 3px;

	display: block !important;
	width: 100% !important;
	color: var(--mah24-toc-ink) !important;
	font-size: 14px !important;
	line-height: 1.9 !important;
	text-align: start !important;
}

.mah24-toc *,
.mah24-toc *::before,
.mah24-toc *::after {
	box-sizing: border-box !important;
}

/*
 * آیتمی که ناحیه‌اش در صفحه نیست، با hidden پنهان می‌شود (و اگر هیچ ناحیه‌ای
 * نماند، کل فهرست). چون قانون‌های بالا display را !important گذاشته‌اند،
 * hidden به‌تنهایی حریفشان نمی‌شود و باید صریح نوشته شود.
 */
.mah24-toc[hidden],
.mah24-toc__item[hidden] {
	display: none !important;
}

.mah24-toc__title {
	margin: 0 0 10px !important;
	padding: 0 !important;
	color: var(--mah24-toc-title) !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.8 !important;
}

.mah24-toc__list {
	display: flex !important;
	gap: var(--mah24-toc-gap) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mah24-toc__item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mah24-toc__item::before,
.mah24-toc__item::marker {
	content: none !important;
}

/* ---------------------------------------- آیتم */

.mah24-toc__link {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: var(--mah24-toc-pad-y) var(--mah24-toc-pad-x) !important;
	border-radius: var(--mah24-toc-radius) !important;
	background: var(--mah24-toc-bg) !important;
	color: var(--mah24-toc-ink) !important;
	font: inherit !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: color .18s ease, background-color .18s ease !important;
}

.mah24-toc__link:hover,
.mah24-toc__link:focus-visible {
	color: var(--mah24-toc-ink-hover) !important;
	text-decoration: none !important;
}

.mah24-toc__link:focus-visible {
	outline: 2px solid var(--mah24-toc-active) !important;
	outline-offset: 2px !important;
}

.mah24-toc__text {
	display: block !important;
	min-width: 0 !important;
}

/* شماره‌ی ابتدای آیتم (اختیاری). */
.mah24-toc__num {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	border: 1px solid var(--mah24-toc-line) !important;
	border-radius: 50% !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}

/* ---------------------------------------- حالت فعال */

.mah24-toc__link.is-active {
	background: var(--mah24-toc-active-bg) !important;
	color: var(--mah24-toc-active) !important;
	font-weight: 700 !important;
}

.mah24-toc__link.is-active .mah24-toc__num {
	border-color: currentColor !important;
	color: var(--mah24-toc-active) !important;
}

/*
 * نوار نشانه‌ی آیتم فعال. در حالت عمودی کنارِ آغازِ خط (راست در فارسی) و در
 * حالت افقی زیر آیتم می‌نشیند؛ inset-inline به‌جای right/left تا در هر دو
 * جهت درست بیفتد.
 */
.mah24-toc__link::before {
	content: "" !important;
	position: absolute !important;
	border-radius: 999px !important;
	background: var(--mah24-toc-marker) !important;
	opacity: 0 !important;
	transition: opacity .18s ease !important;
	pointer-events: none !important;
}

.mah24-toc__link.is-active::before {
	opacity: 1 !important;
}

.mah24-toc--v .mah24-toc__link::before {
	inset-inline-start: 0 !important;
	top: 20% !important;
	bottom: 20% !important;
	width: var(--mah24-toc-marker-w) !important;
}

.mah24-toc--h .mah24-toc__link::before {
	inset-inline: 12% !important;
	bottom: 0 !important;
	height: var(--mah24-toc-marker-w) !important;
}

/* ---------------------------------------- چیدمان عمودی */

.mah24-toc--v .mah24-toc__list {
	flex-direction: column !important;
	/* فهرست بلند در حالت چسبان از صفحه بیرون نزند. */
	max-height: var(--mah24-toc-max, none) !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
}

/* ---------------------------------------- چیدمان افقی */

.mah24-toc--h .mah24-toc__list {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overscroll-behavior-x: contain !important;
	scrollbar-width: none !important;
	-webkit-overflow-scrolling: touch !important;
}

.mah24-toc--h .mah24-toc__list::-webkit-scrollbar {
	display: none !important;
}

.mah24-toc--h .mah24-toc__item {
	flex: 0 0 auto !important;
}

.mah24-toc--h .mah24-toc__link {
	white-space: nowrap !important;
}

/* اسکرول‌بار نازک و کم‌رنگ برای فهرست عمودیِ بلند. */
.mah24-toc--v .mah24-toc__list::-webkit-scrollbar {
	width: 4px !important;
}

.mah24-toc--v .mah24-toc__list::-webkit-scrollbar-thumb {
	border-radius: 999px !important;
	background: var(--mah24-toc-line) !important;
}

/* کسی که حرکت کمتر می‌خواهد، پرش نرم هم نبیند. */
@media ( prefers-reduced-motion: reduce ) {
	.mah24-toc__link,
	.mah24-toc__link::before {
		transition: none !important;
	}
}