/*
 * Reading layout for long articles.
 *
 * Loaded only on single posts, after blog.css, and it overrides rather than
 * replaces: a post without a contents list keeps exactly the layout it had.
 *
 * The design decisions here are answers to specific heuristics:
 *
 *   status        a progress bar, and the contents list marks where you are
 *   recognition   that list stays on screen instead of asking you to remember
 *   control       jump anywhere, or leave for the top, at any point
 *   consistency   every colour, radius and easing is an existing theme token
 *   minimalism    the sidebar is quiet enough to ignore while reading
 */

/* --------------------------------------------------------- progress bar -- */

.egs-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 60;
	background: transparent;
	pointer-events: none;
}

.egs-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--grad, var(--brand));
	transform-origin: 0 50%;
	transition: width .1s linear;
}

/* ------------------------------------------------------------ hero trim -- */

/*
 * Left-aligned, matching the reference. Centred headings read as a landing
 * page; an article wants the same left edge as the prose underneath it.
 */
.egs-post--toc .egs-post__hero {
	text-align: left;
	padding-bottom: 24px;
}

.egs-post--toc .egs-post__hero .container {
	max-width: 1180px;
}

.egs-post--toc .egs-post__excerpt {
	margin-left: 0;
	margin-right: 0;
	max-width: 68ch;
}

.egs-post--toc .egs-post__media .container {
	max-width: 1180px;
}

/* --------------------------------------------------------------- layout -- */

.egs-post__layout {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.egs-post--toc .egs-post__layout {
	display: grid;
	grid-template-columns: 244px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

/* The body already sets its own max-width; inside the grid the column owns it. */
.egs-post--toc .egs-post__body {
	max-width: 72ch;
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------- contents -- */

.egs-toc {
	position: sticky;
	/* Clear of the fixed header, with room to breathe. */
	top: calc(var(--header-h, 84px) + 24px);
	max-height: calc(100vh - var(--header-h, 84px) - 60px);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.egs-toc__title {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

/* The toggle is the mobile control; on desktop the list is simply open. */
.egs-toc__toggle { display: none; }

.egs-toc__list {
	list-style: none;
	margin: 0;
	padding: 0 4px 4px 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.egs-toc__item { margin: 0; }

.egs-toc__link {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 7px 10px 7px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 600;
	color: var(--muted);
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: color .18s var(--ease, ease), background .18s var(--ease, ease), border-color .18s var(--ease, ease);
}

.egs-toc__n {
	font-size: 11px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--border-2, var(--muted));
	flex: 0 0 auto;
	min-width: 13px;
}

.egs-toc__text { min-width: 0; }

.egs-toc__link:hover {
	color: var(--text);
	background: var(--bg-soft);
}

.egs-toc__link:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/*
 * The current section. Colour alone would fail anyone who cannot see it, so
 * the weight and the left rule carry the same message.
 */
.egs-toc__link[aria-current="true"] {
	color: var(--brand-600);
	background: rgba(248, 86, 4, .07);
	border-left-color: var(--brand);
	font-weight: 800;
}

.egs-toc__link[aria-current="true"] .egs-toc__n { color: var(--brand-600); }

/* ------------------------------------------------- headings and anchors -- */

/*
 * Without this a jump leaves the heading tucked under the fixed header, and
 * the reader lands mid-paragraph on the section they asked for.
 */
.egs-post__body h2,
.egs-post__body h3 {
	scroll-margin-top: calc(var(--header-h, 84px) + 24px);
}

/* ---------------------------------------------------------- back to top -- */

.egs-totop {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 55;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px 10px 13px;
	border-radius: 999px;
	background: var(--text);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 24px rgba(11, 16, 32, .22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .22s var(--ease, ease), transform .22s var(--ease, ease), visibility .22s;
}

.egs-totop.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.egs-totop:hover { background: var(--brand); color: #fff; }

.egs-totop:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.egs-totop__arrow {
	width: 0;
	height: 0;
	border-left: 4.5px solid transparent;
	border-right: 4.5px solid transparent;
	border-bottom: 6px solid currentColor;
}

/* -------------------------------------------------------------- tables -- */

/*
 * Both new guides open on a comparison table. Narrow screens must scroll it
 * sideways inside its own box rather than pushing the whole page wide.
 */
.egs-post__body .wp-block-table,
.egs-post__body figure.wp-block-table {
	margin: 26px 0 30px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.egs-post__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.6;
	min-width: 460px;
}

.egs-post__body thead th {
	text-align: left;
	font-weight: 800;
	color: var(--text);
	background: var(--bg-soft);
	padding: 12px 14px;
	border-bottom: 2px solid var(--border);
	white-space: nowrap;
}

.egs-post__body tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
	color: var(--text-2);
}

.egs-post__body tbody tr:last-child td { border-bottom: 0; }
.egs-post__body tbody tr:hover td { background: var(--bg-soft); }

/* ------------------------------------------------------------- callouts -- */

/*
 * Available to the editor as a blockquote with a class, so the pattern exists
 * without forcing it into copy that does not need it.
 */
.egs-post__body .egs-callout {
	margin: 26px 0;
	padding: 18px 20px;
	background: var(--bg-soft);
	border-left: 3px solid var(--brand);
	border-radius: 0 10px 10px 0;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	color: var(--text-2);
}

.egs-post__body .egs-callout p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1080px) {
	.egs-post--toc .egs-post__layout {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 36px;
	}
}

@media (max-width: 900px) {
	/*
	 * The sidebar becomes a collapsed panel above the article. It stays sticky
	 * so it is reachable mid-read, but closed by default so it never costs a
	 * screenful of scrolling to get past.
	 */
	.egs-post--toc .egs-post__layout {
		display: block;
	}

	.egs-post--toc .egs-post__body {
		max-width: none;
	}

	.egs-toc {
		position: sticky;
		top: calc(var(--header-h, 70px) + 8px);
		z-index: 40;
		max-height: none;
		margin: 0 0 26px;
		background: var(--bg, #fff);
		border: 1px solid var(--border);
		border-radius: 12px;
		box-shadow: 0 4px 18px rgba(11, 16, 32, .07);
	}

	.egs-toc__title { display: none; }

	.egs-toc__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		padding: 14px 16px;
		background: none;
		border: 0;
		border-radius: 12px;
		font: inherit;
		font-size: 14px;
		font-weight: 800;
		color: var(--text);
		cursor: pointer;
		text-align: left;
	}

	.egs-toc__toggle:focus-visible {
		outline: 2px solid var(--brand);
		outline-offset: -2px;
	}

	.egs-toc__chev {
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--muted);
		border-bottom: 2px solid var(--muted);
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .22s var(--ease, ease);
		flex: 0 0 auto;
	}

	.egs-toc__toggle[aria-expanded="true"] .egs-toc__chev {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	.egs-toc__list {
		max-height: min(52vh, 340px);
		padding: 0 10px 12px;
	}

	/*
	 * Closed by default on small screens, and only when scripting is running.
	 * Without the flag the list would be permanently hidden for anyone whose
	 * script failed, taking the navigation with it.
	 */
	.js .egs-toc__toggle[aria-expanded="false"] + .egs-toc__title + .egs-toc__list {
		display: none;
	}
}

@media (max-width: 640px) {
	.egs-post__layout { padding: 0 18px; }
	.egs-post__body table { font-size: 14px; }
	.egs-totop { right: 14px; bottom: 14px; }
	.egs-totop__label { display: none; }
	.egs-totop { padding: 11px 13px; }
}

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

@media (prefers-reduced-motion: reduce) {
	.egs-progress__bar,
	.egs-toc__link,
	.egs-toc__chev,
	.egs-totop {
		transition: none;
	}
}

/* --------------------------------------------------------------- figures -- */

/*
 * Images inserted into the article body. They keep the reading column's width
 * rather than breaking out of it, so the eye does not have to reset its line
 * length between a paragraph and the picture explaining it.
 */
.egs-post__body .egs-figure {
	margin: 30px 0 34px;
}

.egs-post__body .egs-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r, 20px);
	border: 1px solid var(--border);
	margin: 0;
}

/*
 * The space each image will occupy is reserved before it loads, so a lazy
 * figure does not shove the paragraph below it down the page mid-read. That
 * comes free rather than needing a rule: WordPress prints width and height
 * attributes, and browsers derive the ratio from them whenever the CSS sets
 * height: auto, which the rule above does.
 */