/* =========================================================
   Blog table of contents
   Mobile / tablet : collapsible card above the content
   Desktop         : sticky list in the gutter left of .entry-content
   ========================================================= */

.b4u-toc {
	margin: 0 0 32px 0;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

.b4u-toc__box {
	border: 1px solid #edf1f7;
	border-radius: 6px;
	background: #fff;
}

.b4u-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	color: #2e3959;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	-webkit-tap-highlight-color: transparent;
}

.b4u-toc__summary::-webkit-details-marker {
	display: none;
}

.b4u-toc__summary::marker {
	content: '';
}

.b4u-toc__summary:focus-visible {
	outline: 2px solid #ff7900;
	outline-offset: 2px;
}

.b4u-toc__chevron {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-right: 2px solid #8b96ad;
	border-bottom: 2px solid #8b96ad;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.b4u-toc__box[open] .b4u-toc__chevron {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.b4u-toc__panel {
	padding: 0 16px 12px 16px;
}

.b4u-toc .b4u-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.b4u-toc .b4u-toc__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.b4u-toc .b4u-toc__link {
	display: block;
	padding: 7px 0 7px 14px;
	border-left: 2px solid #edf1f7;
	color: #5f6c8c;
	font-size: 14px;
	line-height: 1.45;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.b4u-toc .b4u-toc__item--lvl1 .b4u-toc__link {
	padding-left: 28px;
}

.b4u-toc .b4u-toc__item--lvl2 .b4u-toc__link {
	padding-left: 42px;
}

.b4u-toc .b4u-toc__link:hover,
.b4u-toc .b4u-toc__link:focus {
	color: #ff7900;
	border-left-color: #c4cee0;
}

.b4u-toc .b4u-toc__link.is-active {
	color: #ff7900;
	border-left-color: #ff7900;
	font-weight: 600;
}

/* Keep anchor jumps clear of the sticky site header. */
.single-post .thz-entry-content h2[id],
.single-post .thz-entry-content h3[id],
.single-post .thz-entry-content h4[id] {
	scroll-margin-top: 120px;
}

/* =========================== */
/* ========= Desktop ========= */
/* =========================== */

@media (min-width: 1205px) {
	/* The theme clips the whole page, which would disable position: sticky.
	   overflow: clip keeps the horizontal clipping without creating a
	   scroll container. Guarded, older browsers just get a non-sticky list. */
	@supports (overflow: clip) {
		.single-post #thz-body-box {
			overflow-x: clip !important;
			overflow-y: visible !important;
		}
	}

	.single-post .thz-entry-content {
		position: relative;
	}

	/* Sits in the empty gutter: .thz-max-65 leaves 17.5% on each side,
	   which is 26.9% of the content width. */
	.single-post .thz-entry-content > .b4u-toc {
		position: absolute;
		top: 0;
		right: 100%;
		width: 26.9%;
		height: 100%;
		margin: 0;
		padding-right: 20px;
		box-sizing: border-box;
	}

	/* The content follows a nav now, the theme would add a top margin. */
	.single-post .thz-entry-content > .b4u-toc + * {
		margin-top: 0;
	}

	.b4u-toc__box {
		position: sticky;
		/* Sticky header is 96px, keep ~32px of breathing room under it. */
		top: 160px;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.b4u-toc__summary {
		padding: 0 0 12px 0;
		color: #8b96ad;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		cursor: default;
	}

	.b4u-toc__chevron {
		display: none;
	}

	/* Visible on desktop whether or not <details> is open, so the list also
	   shows without javascript. */
	.b4u-toc__box > .b4u-toc__panel {
		display: block;
		content-visibility: visible;
		padding: 0;
		max-height: calc(100vh - 232px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: #dfe5ee transparent;
	}

	.b4u-toc__box > .b4u-toc__panel::-webkit-scrollbar {
		width: 4px;
	}

	.b4u-toc__box > .b4u-toc__panel::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background: #dfe5ee;
	}
}

@media (min-width: 1500px) {
	.single-post .thz-entry-content > .b4u-toc {
		width: 300px;
		padding-right: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.b4u-toc__chevron,
	.b4u-toc .b4u-toc__link {
		transition: none;
	}
}