/*
 * single.css — the reading experience.
 * Loaded on singular views only.
 */

.article {
	padding-top: var(--fag-sp-4);
}

/*
 * One reading column, with an optional rail beside it on wide screens.
 * Everything inside .article__main shares the same left edge, so breadcrumbs,
 * title, image and body line up as a single column.
 */
/*
 * Default is the single reading column, centred. The wrapper only widens to
 * make room for the rail once there is genuinely space for both — otherwise
 * the extra width would just push the column against the left edge.
 */
.article__wrap {
	max-width: calc(var(--fag-reading) + var(--fag-sp-4) * 2);
}

.article__main {
	min-width: 0;
	max-width: var(--fag-reading);
}

.article__rail {
	display: none;
}

@media (min-width: 1080px) {
	.article__wrap {
		display: grid;
		grid-template-columns: minmax(0, var(--fag-reading)) minmax(0, 1fr);
		gap: var(--fag-sp-8);
		align-items: start;
		max-width: calc(var(--fag-reading) + var(--fag-rail) + var(--fag-sp-8) + var(--fag-sp-4) * 2);
	}

	/* No index to show: stay a single centred column. */
	.article__wrap--narrow {
		display: block;
		max-width: calc(var(--fag-reading) + var(--fag-sp-4) * 2);
	}

	.article__rail {
		display: block;
		position: sticky;
		top: calc(var(--fag-header-h) + var(--fag-sp-5));
	}
}

/* ---------- On this page ---------- */

.toc {
	padding: var(--fag-sp-4);
	background: var(--fag-surface);
	border: 1px solid var(--fag-border);
	border-radius: var(--fag-radius);
	font-size: var(--fag-fs-sm);
}

.toc__title {
	margin: 0 0 var(--fag-sp-3);
	color: var(--fag-muted);
	font-size: var(--fag-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.toc__item {
	margin: 0;
	border-left: 2px solid var(--fag-border);
}

.toc__item + .toc__item {
	margin-top: 2px;
}

.toc__item--h3 {
	padding-left: var(--fag-sp-3);
}

.toc__item a {
	display: block;
	padding: var(--fag-sp-2) var(--fag-sp-3);
	color: var(--fag-text);
	line-height: 1.4;
	text-decoration: none;
}

.toc__item a:hover,
.toc__item a:focus-visible {
	color: var(--fag-accent);
}

.toc__item.is-current {
	border-left-color: var(--fag-accent);
}

.toc__item.is-current > a {
	color: var(--fag-accent);
	font-weight: 600;
}

.article__meta-top {
	margin-bottom: var(--fag-sp-3);
	min-height: 1.2em;
}

.article__title {
	margin-bottom: var(--fag-sp-4);
	font-size: clamp(1.875rem, 1.25rem + 2vw, 2.5rem);
	letter-spacing: -0.015em;
}

.article__standfirst {
	margin-bottom: var(--fag-sp-4);
	color: var(--fag-muted);
	font-size: var(--fag-fs-lg);
	line-height: 1.55;
}

.article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fag-sp-2) var(--fag-sp-4);
	padding-bottom: var(--fag-sp-5);
	border-bottom: 1px solid var(--fag-border);
	color: var(--fag-muted);
	font-size: var(--fag-fs-xs);
}

.article__reading-time::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: var(--fag-sp-3);
	border-radius: 50%;
	background: var(--fag-border-strong);
	vertical-align: middle;
}

.article__featured {
	margin: var(--fag-sp-6) auto var(--fag-sp-6);
}

.article__featured-img {
	width: 100%;
	border-radius: var(--fag-radius);
}

.article__featured-caption {
	margin-top: var(--fag-sp-2);
	color: var(--fag-muted);
	font-size: var(--fag-fs-xs);
}

/* ---------- Prose ---------- */

.prose {
	font-size: var(--fag-fs-md);
	line-height: 1.75;
}

.prose > * {
	max-width: var(--fag-reading);
}

.prose h2 {
	margin-top: var(--fag-sp-7);
	padding-top: var(--fag-sp-2);
	font-size: var(--fag-fs-xl);
}

.prose h3 {
	margin-top: var(--fag-sp-6);
	font-size: var(--fag-fs-lg);
}

.prose h4 {
	margin-top: var(--fag-sp-5);
	font-size: var(--fag-fs-md);
}

.prose > *:first-child {
	margin-top: 0;
}

.prose li {
	margin-bottom: var(--fag-sp-2);
}

.prose img,
.prose figure {
	border-radius: var(--fag-radius);
}

.prose figure {
	margin-inline: 0;
}

.prose figcaption {
	margin-top: var(--fag-sp-2);
	color: var(--fag-muted);
	font-size: var(--fag-fs-xs);
	text-align: center;
}

.prose .alignwide {
	max-width: min(1000px, 100%);
	margin-inline: auto;
}

.prose .alignfull {
	max-width: none;
}

.prose .alignleft {
	float: left;
	margin: 0 var(--fag-sp-4) var(--fag-sp-3) 0;
}

.prose .alignright {
	float: right;
	margin: 0 0 var(--fag-sp-3) var(--fag-sp-4);
}

.prose .aligncenter {
	margin-inline: auto;
}

/* Tables inside articles scroll instead of breaking the layout. */
.table-scroll {
	max-width: var(--fag-reading);
	margin-bottom: var(--fag-sp-5);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table-scroll table {
	margin-bottom: 0;
	min-width: 480px;
}

/* ---------- Editor callout block styles ---------- */

.is-style-fag-summary,
.is-style-fag-warning,
.is-style-fag-tip,
.is-style-fag-note {
	margin-block: var(--fag-sp-5);
	padding: var(--fag-sp-4) var(--fag-sp-5);
	border: 1px solid var(--fag-border);
	border-left-width: 4px;
	border-radius: var(--fag-radius);
	font-size: var(--fag-fs-base);
}

.is-style-fag-summary {
	background: var(--fag-accent-soft);
	border-color: #c3d8ef;
	border-left-color: var(--fag-accent);
}

.is-style-fag-warning {
	background: var(--fag-danger-bg);
	border-color: #efc9c5;
	border-left-color: var(--fag-danger);
	color: #6d1c15;
}

.is-style-fag-tip {
	background: var(--fag-success-bg);
	border-color: #bfdccd;
	border-left-color: var(--fag-success);
}

.is-style-fag-note {
	background: var(--fag-warning-bg);
	border-color: #e8d5a8;
	border-left-color: var(--fag-warning);
}

.is-style-fag-summary > :last-child,
.is-style-fag-warning > :last-child,
.is-style-fag-tip > :last-child,
.is-style-fag-note > :last-child {
	margin-bottom: 0;
}

.is-style-fag-spec th {
	white-space: nowrap;
}

/* ---------- After the article ---------- */

.article-cta {
	max-width: var(--fag-reading);
	margin: var(--fag-sp-7) 0 0;
	padding: var(--fag-sp-5);
	background: var(--fag-surface);
	border: 1px solid var(--fag-border);
	border-radius: var(--fag-radius);
}

.article-cta > :last-child {
	margin-bottom: 0;
}

.article__footer {
	margin-top: var(--fag-sp-6);
}

.article__tags-title {
	font-size: var(--fag-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fag-muted);
}

.article__tags a {
	display: inline-block;
	margin: 0 var(--fag-sp-2) var(--fag-sp-2) 0;
	padding: var(--fag-sp-1) var(--fag-sp-3);
	background: var(--fag-surface);
	border: 1px solid var(--fag-border);
	border-radius: 999px;
	color: var(--fag-navy);
	font-size: var(--fag-fs-xs);
	text-decoration: none;
}

.article__tags a:hover {
	border-color: var(--fag-accent);
	color: var(--fag-accent);
}

/* ---------- Related guides ---------- */

.related-guides {
	margin-top: var(--fag-sp-8);
	padding: var(--fag-sp-7) 0;
	background: var(--fag-surface);
	border-top: 1px solid var(--fag-border);
}

.related-guides__title {
	margin-bottom: var(--fag-sp-5);
	font-size: var(--fag-fs-xl);
}

.post-grid--related {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fag-sp-5);
}

.related-guides .post-card {
	background: var(--fag-bg);
}

.related-guides .post-card__media {
	aspect-ratio: 8 / 5;
	display: block;
	overflow: hidden;
}

.related-guides .post-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-guides .entry__category {
	color: var(--fag-accent);
	font-size: var(--fag-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.related-guides .post-card__title {
	font-size: var(--fag-fs-md);
	line-height: 1.35;
	margin-bottom: var(--fag-sp-2);
}

.related-guides .post-card__title a {
	color: var(--fag-navy);
	text-decoration: none;
}

.related-guides .post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--fag-sp-4);
}

.related-guides .post-card__excerpt {
	color: var(--fag-muted);
	font-size: var(--fag-fs-sm);
	line-height: 1.6;
	margin-bottom: var(--fag-sp-4);
}

.related-guides .post-card__footer {
	margin-top: auto;
	color: var(--fag-muted);
	font-size: var(--fag-fs-xs);
}

/* ---------- Previous / next ---------- */

.post-nav {
	padding: var(--fag-sp-6) 0;
	border-top: 1px solid var(--fag-border);
}

.post-nav__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fag-sp-4);
}

.post-nav__link {
	display: block;
	padding: var(--fag-sp-4);
	border: 1px solid var(--fag-border);
	border-radius: var(--fag-radius);
	text-decoration: none;
}

.post-nav__link:hover {
	border-color: var(--fag-accent);
	background: var(--fag-surface);
}

.post-nav__link--next {
	grid-column: 2;
	text-align: right;
}

.post-nav__label {
	display: block;
	margin-bottom: var(--fag-sp-1);
	color: var(--fag-muted);
	font-size: var(--fag-fs-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.post-nav__title {
	display: block;
	color: var(--fag-navy);
	font-weight: 600;
	line-height: 1.4;
}

/* ---------- Comments ---------- */

.comments {
	max-width: var(--fag-reading);
	margin: var(--fag-sp-8) auto;
}

.comments__title {
	font-size: var(--fag-fs-lg);
	margin-bottom: var(--fag-sp-4);
}

.comments__list,
.comments__list .children {
	list-style: none;
	padding: 0;
}

.comments__list .children {
	padding-left: var(--fag-sp-5);
}

.comments__list li {
	margin-bottom: var(--fag-sp-4);
}

.comment-body {
	padding: var(--fag-sp-4);
	background: var(--fag-surface);
	border: 1px solid var(--fag-border);
	border-radius: var(--fag-radius);
}

.comment-meta {
	font-size: var(--fag-fs-xs);
	color: var(--fag-muted);
	margin-bottom: var(--fag-sp-2);
}

.comment-form label {
	display: block;
	margin-bottom: var(--fag-sp-1);
	font-size: var(--fag-fs-sm);
	font-weight: 600;
}

.comment-form p {
	margin-bottom: var(--fag-sp-4);
}

.comment-form .submit {
	display: inline-flex;
	padding: 0.7rem 1.25rem;
	background: var(--fag-accent);
	border: 1px solid var(--fag-accent);
	border-radius: var(--fag-radius);
	color: #ffffff;
	font-weight: 600;
	cursor: pointer;
}

.comment-form .submit:hover {
	background: var(--fag-accent-dark);
}

/* ---------- Page links ---------- */

.page-links {
	margin-top: var(--fag-sp-5);
	font-size: var(--fag-fs-sm);
	font-weight: 600;
}

.page-links a {
	display: inline-block;
	margin: 0 var(--fag-sp-1);
	padding: var(--fag-sp-1) var(--fag-sp-3);
	border: 1px solid var(--fag-border);
	border-radius: var(--fag-radius-sm);
	text-decoration: none;
}