/**
 * ALTMEZ standardized table of contents.
 *
 * Every rule is scoped under .altmez-toc-shell, which gives each selector at
 * least two classes. That is deliberate: the child theme ships a one-class
 * .altmez-article-toc contract (single.css section 3) that this component also
 * carries, and these rules must win over it in either load order — without
 * !important, and without touching the theme.
 *
 * The component is also self-sufficient: on a page where the theme's single.css
 * is not enqueued, these rules alone produce the finished look.
 */

.altmez-toc-shell {
	--altmez-toc-accent: #FFC719;
	--altmez-toc-dark: #10151C;
	--altmez-toc-surface: #FFFFFF;
	--altmez-toc-border: rgba( 16, 21, 28, 0.12 );
	--altmez-toc-muted: rgba( 16, 21, 28, 0.62 );
}

.altmez-toc-shell.altmez-article-toc {
	box-sizing: border-box;
	margin: 1.75em 0;
	padding: 0;
	border: 1px solid var( --altmez-toc-border );
	border-inline-start: 4px solid var( --altmez-toc-accent );
	border-radius: 10px;
	background: var( --altmez-toc-surface );
	font-family: "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
	direction: rtl;
	text-align: start;
	overflow: hidden;
}

.altmez-toc-shell * {
	box-sizing: border-box;
}

/* ---------- Summary row ---------- */

.altmez-toc-shell > .altmez-toc-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 14px 18px;
	min-block-size: 0;
	cursor: pointer;
	list-style: none;
	color: var( --altmez-toc-dark );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	background: rgba( 255, 199, 25, 0.08 );
	transition: background-color 0.2s ease;
}

.altmez-toc-shell > .altmez-toc-summary::-webkit-details-marker {
	display: none;
}

.altmez-toc-shell > .altmez-toc-summary::marker {
	content: "";
}

/*
 * The theme draws its own marker on a TOC summary (single.css section 3) and on
 * any other <details> in the content (section 6). This component draws a real
 * element instead, so both of those markers are suppressed here.
 */
.altmez-toc-shell > .altmez-toc-summary::after {
	content: none;
}

.altmez-toc-shell > .altmez-toc-summary:hover {
	background: rgba( 255, 199, 25, 0.16 );
}

.altmez-toc-shell > .altmez-toc-summary:focus-visible {
	outline: 2px solid var( --altmez-toc-dark );
	outline-offset: -2px;
}

.altmez-toc-shell .altmez-toc-summary__text {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* ---------- The +/- toggle ---------- */

.altmez-toc-shell .altmez-toc-toggle {
	position: relative;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var( --altmez-toc-accent );
}

.altmez-toc-shell .altmez-toc-toggle::before,
.altmez-toc-shell .altmez-toc-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 2px;
	border-radius: 2px;
	background: var( --altmez-toc-dark );
	transform: translate( -50%, -50% );
}

/* The upright stroke of the plus; it goes away when the panel opens. */
.altmez-toc-shell .altmez-toc-toggle::after {
	transform: translate( -50%, -50% ) rotate( 90deg );
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.altmez-toc-shell[open] .altmez-toc-toggle::after {
	opacity: 0;
	transform: translate( -50%, -50% ) rotate( 0deg );
}

/* ---------- Panel ---------- */

.altmez-toc-shell .altmez-toc-panel {
	padding: 14px 18px 16px;
	border-top: 1px solid var( --altmez-toc-border );
}

/* «الفهرس» — a visual label, deliberately NOT a semantic heading. */
.altmez-toc-shell .altmez-toc-label {
	margin: 0 0 10px;
	color: var( --altmez-toc-muted );
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
}

.altmez-toc-shell .altmez-toc-nav {
	max-height: 420px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.altmez-toc-shell .altmez-toc-list,
.altmez-toc-shell .altmez-toc-sublist {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 0;
}

.altmez-toc-shell .altmez-toc-sublist {
	margin-top: 4px;
	padding-inline-start: 16px;
	border-inline-start: 1px dashed var( --altmez-toc-border );
}

.altmez-toc-shell .altmez-toc-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.altmez-toc-shell .altmez-toc-item + .altmez-toc-item {
	margin-top: 2px;
}

.altmez-toc-shell .altmez-toc-link {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-block-size: 40px;
	padding: 7px 10px;
	border-radius: 6px;
	color: var( --altmez-toc-dark );
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	border-bottom: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.altmez-toc-shell .altmez-toc-item--sub .altmez-toc-link {
	font-weight: 400;
	font-size: 0.9rem;
	color: var( --altmez-toc-muted );
}

.altmez-toc-shell .altmez-toc-link:hover,
.altmez-toc-shell .altmez-toc-link:focus-visible {
	background: rgba( 255, 199, 25, 0.18 );
	color: var( --altmez-toc-dark );
	text-decoration: none;
}

.altmez-toc-shell .altmez-toc-link:focus-visible {
	outline: 2px solid var( --altmez-toc-accent );
	outline-offset: 2px;
}

/* ---------- Anchor landing offset (sticky header) ---------- */

.altmez-toc-anchor-offset {
	scroll-margin-block-start: calc( var( --altmez-header-h, 84px ) + 24px );
}

/* ---------- Mobile ---------- */

@media ( max-width: 767px ) {
	.altmez-toc-shell.altmez-article-toc {
		margin: 1.5em 0;
		border-radius: 8px;
	}

	.altmez-toc-shell > .altmez-toc-summary {
		padding: 12px 14px;
		font-size: 0.95rem;
	}

	.altmez-toc-shell .altmez-toc-panel {
		padding: 12px 14px 14px;
	}

	.altmez-toc-shell .altmez-toc-label {
		font-size: 0.875rem;
	}

	.altmez-toc-shell .altmez-toc-nav {
		max-height: 320px;
	}

	.altmez-toc-shell .altmez-toc-link {
		font-size: 0.9rem;
		padding: 7px 8px;
	}

	.altmez-toc-shell .altmez-toc-item--sub .altmez-toc-link {
		font-size: 0.875rem;
	}

	.altmez-toc-shell .altmez-toc-sublist {
		padding-inline-start: 12px;
	}

	.altmez-toc-anchor-offset {
		scroll-margin-block-start: calc( var( --altmez-header-h-mobile, 64px ) + 16px );
	}
}

/* ---------- Reduced motion ---------- */

@media ( prefers-reduced-motion: reduce ) {
	.altmez-toc-shell > .altmez-toc-summary,
	.altmez-toc-shell .altmez-toc-toggle::after,
	.altmez-toc-shell .altmez-toc-link {
		transition: none;
	}
}

/* ---------- Print ---------- */

@media print {
	.altmez-toc-shell.altmez-article-toc {
		display: none;
	}
}