/* Elkan 5e - Page Table of Contents */

/*
 * The sidebar never moves the page text: the content keeps exactly the
 * width and centring it had before (the theme's 1100px wide column), and the
 * "On this page" panel floats in the empty margin to its left. Where the margin is too narrow, a slim bar
 * slides in over the top of the screen once you scroll into the content
 * instead - it's fixed-position, so it takes no room in the page either.
 */
.elkan-toc-layout {
	--elkan-toc-accent: var(--wp--preset--color--accent, #8b1a1a);
	--elkan-toc-line: color-mix(in srgb, currentColor 15%, transparent);
	--elkan-toc-muted: color-mix(in srgb, currentColor 68%, transparent);
	--elkan-toc-top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px);
	--elkan-toc-wide: var(--wp--style--global--wide-size, 1100px);
	--elkan-toc-gap: 32px;
	position: relative;
}

/* Zero-height sticky rail: rides along the content without taking space. */
.elkan-toc {
	position: sticky;
	top: var(--elkan-toc-top);
	z-index: 20;
	height: 0;
	margin: 0 !important;
}

.elkan-toc-main [id] {
	scroll-margin-top: var(--elkan-toc-top);
}

/* Old in-page Navigation list, in case it slips through before JS runs. */
.elkan-has-toc .elkan-toc-main ul.page-nav,
.elkan-toc-source {
	display: none;
}

/* ---------- Sidebar (wide screens) ---------- */

.elkan-toc {
	font-size: 0.875rem;
	line-height: 1.35;
}

.elkan-toc-inner {
	display: none;
}

.elkan-toc-title {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--elkan-toc-muted);
}

.elkan-toc-list,
.elkan-toc-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.elkan-toc-list a {
	display: block;
	padding: 0.3rem 0.625rem;
	border-left: 2px solid var(--elkan-toc-line);
	color: var(--elkan-toc-muted);
	text-decoration: none;
}

.elkan-toc-list a:hover,
.elkan-toc-list a:focus-visible {
	color: inherit;
	text-decoration: underline;
}

.elkan-toc-list .elkan-toc-top-item > a {
	color: inherit;
	font-weight: 600;
}

.elkan-toc-list a.is-active {
	color: var(--elkan-toc-accent);
	border-left-color: var(--elkan-toc-accent);
	font-weight: 600;
}

.elkan-toc-list ul {
	display: none; /* sub-entries show only for the section being read */
	margin: 0.125rem 0 0.375rem;
}

.elkan-toc-list ul a {
	padding-left: 1.375rem;
	font-size: 0.8125rem;
}

.elkan-toc-list ul ul a {
	padding-left: 2.125rem;
	font-size: 0.78rem;
}

.elkan-toc-list ul ul ul a {
	padding-left: 2.875rem;
}

.elkan-toc-list li.is-open > ul {
	display: block;
}

@media (min-width: 1520px) {
	.elkan-toc-ready .elkan-toc-inner {
		display: block;
		position: absolute;
		top: 0;
		/* Right edge sits a gap to the left of the (wide, centred) text column. */
		right: calc(100% + var(--elkan-toc-gap));
		width: clamp(160px, calc((100vw - var(--elkan-toc-wide)) / 2 - var(--elkan-toc-gap) - 24px), 260px);
		max-height: calc(100vh - var(--elkan-toc-top) - 24px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 4px;
	}

	.elkan-toc-jump {
		display: none !important;
	}
}

/* ---------- Jump bar (narrower screens) ---------- */

.elkan-toc-jump {
	display: none;
}

@media (max-width: 1519px) {
	.elkan-toc-ready .elkan-toc-jump {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		left: 0;
		right: 0;
		z-index: 90;
		padding: 0.5rem var(--wp--style--root--padding-right, 16px) 0.5rem var(--wp--style--root--padding-left, 16px);
		background-color: var(--wp--preset--color--base, #fff);
		border-bottom: 1px solid var(--elkan-toc-line);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
		transform: translateY(-110%);
		visibility: hidden;
		transition: transform 0.2s, visibility 0.2s;
	}

	/* Shown once the top of the content has scrolled past. */
	.elkan-toc-scrolled .elkan-toc-jump {
		transform: none !important;
		visibility: visible !important;
	}

	.elkan-toc-jump span {
		white-space: nowrap;
		color: var(--elkan-toc-muted);
	}

	.elkan-toc-select {
		flex: 1;
		min-width: 0;
		max-width: 40rem;
		font: inherit;
		padding: 0.375rem 0.5rem;
		border: 1px solid var(--elkan-toc-line);
		border-radius: 6px;
		background-color: var(--wp--preset--color--base, #fff);
		color: inherit;
	}

	.elkan-toc-main [id] {
		scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 72px);
	}
}

/* The WP admin bar stops being fixed on small phones. */
@media (max-width: 600px) {
	.elkan-toc-ready .elkan-toc-jump {
		top: 0;
	}

	.elkan-toc-main [id] {
		scroll-margin-top: 72px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elkan-toc-ready .elkan-toc-jump {
		transition: none;
	}
}

.elkan-toc-empty .elkan-toc {
	display: none;
}

/* ---------- Back to top ---------- */

.elkan-toc-top {
	position: fixed;
	right: 16px;
	bottom: 72px; /* clears the dark-mode switch */
	z-index: 50;
	padding: 0.625rem 0.875rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent, #8b1a1a);
	color: #fff;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}

.elkan-toc-top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.elkan-toc-top {
		transition: none;
	}
}