/**
 * Blog — single post.
 *
 * No sidebar, per the brief, so the article owns the full container and its own
 * measure instead. No Figma frame exists for this page; the band above it is
 * css/common/blog.css, and everything here is built from the token set.
 *
 * The heavy lifting in this file is the prose. base.css is a deliberately
 * minimal reset for a page built out of ACF blocks — it strips list markers,
 * flattens margins and leaves no styling for headings inside body copy — which
 * is right for the flexible-content pages and wrong for 231 imported articles
 * carrying 1,221 <h2>s, 705 <ul>s and 2,082 <li>s. `.blog-content` puts that
 * back, scoped so nothing else on the site is affected.
 */

/* ===================================================================
 * Measure
 *
 * 800px. The container is 1440 and the body copy is 20px Roboto, which averages
 * close to 10px per character — so the full container would run to ~144
 * characters a line, against the 60-80 that is comfortable to read. 800 lands
 * at ~80 and holds the article to a single column without a sidebar propping
 * it up.
 * =================================================================== */
.blog-single__content,
.blog-single__footer {
	max-width: var(--blog-measure, 800px);
	margin-inline: auto;
}

/* ===================================================================
 * Prose
 * =================================================================== */
.blog-content {
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
}

/* --- headings ------------------------------------------------------- */
/* One step down from the section headings: an article's h2 is a subhead inside
 * a page whose H1 is already the band above, so it takes --fs-36 rather than
 * the --fs-64 `.section-title` carries. Weight 700 throughout — the 400/700
 * two-weight treatment belongs to `.section-title`'s accent runs, which body
 * copy has no way to mark up.
 *
 * Top margins are larger than the bottom ones on purpose: a heading belongs to
 * the text beneath it, and the imported copy runs heading-to-paragraph-to-
 * heading with nothing else to separate the sections. */
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
	color: var(--primary-black);
	font-family: var(--font-heading);
	font-weight: 700;
}

.blog-content h2 {
	margin-block: var(--space-48) var(--space-16);
	font-size: var(--fs-36);
	line-height: var(--lh-36);
}

.blog-content h3 {
	margin-block: var(--space-40) var(--space-15);
	font-size: var(--fs-30);
	line-height: var(--lh-30);
}

.blog-content h4 {
	margin-block: var(--space-30) var(--space-12);
	font-size: var(--fs-24);
	line-height: var(--lh-24-28);
}

.blog-content h5,
.blog-content h6 {
	margin-block: var(--space-25) var(--space-10);
	font-size: var(--fs-20);
	line-height: var(--lh-body);
}

/* The first heading in an article sits directly under the band, so it does not
 * need the 48px it would use mid-article. */
.blog-content > :first-child {
	margin-top: 0;
}

/* --- paragraphs and inline ------------------------------------------ */
.blog-content p {
	margin-block: 0 var(--space-20);
}

.blog-content strong,
.blog-content b {
	color: var(--near-black);
	font-weight: 700;
}

/* The imported copy wraps a great deal of its text in bare <span>s (12,920 of
 * them) carrying no attributes — leftovers from the source editor. base.css
 * paints a bare <span> green inside a heading, which would turn most of these
 * article headings green from the second word on. Neutralised here; a real
 * accent run in body copy is what `<strong>` and the link colour are for. */
.blog-content h2 span,
.blog-content h3 span,
.blog-content h4 span,
.blog-content h5 span,
.blog-content h6 span {
	color: inherit;
	font-weight: inherit;
}

/* Green and underlined, the same treatment typography.css gives an inline link
 * in every other prose container on the site. */
.blog-content a {
	color: var(--primary-green);
	text-decoration: underline;
	transition: var(--transition);
}

.blog-content a:hover,
.blog-content a:focus-visible {
	color: var(--primary-black);
}

/* --- lists ---------------------------------------------------------- */
/* base.css sets `list-style: none` on every ul and ol, which is correct for the
 * icon rows and nav lists the ACF blocks are built from and wrong for an
 * article. Markers restored inside the prose only. */
.blog-content ul,
.blog-content ol {
	margin-block: 0 var(--space-20);
	padding-left: var(--space-25);
}

.blog-content ul {
	list-style: disc;
}

.blog-content ol {
	list-style: decimal;
}

.blog-content li {
	margin-bottom: var(--space-10);
}

.blog-content li::marker {
	color: var(--primary-green);
}

/* Nested lists step the marker and close the vertical spacing — the imported
 * copy nests two deep in places. */
.blog-content li > ul,
.blog-content li > ol {
	margin-block: var(--space-10) 0;
}

.blog-content li > ul {
	list-style: circle;
}

.blog-content li:last-child {
	margin-bottom: 0;
}

/* --- quotes --------------------------------------------------------- */
.blog-content blockquote {
	margin: var(--space-30) 0;
	padding: var(--space-25) var(--space-30);
	border-left: 4px solid var(--primary-green);
	background-color: var(--pale-green);
	color: var(--near-black);
	font-size: var(--fs-22);
	line-height: var(--lh-22-34);
}

.blog-content blockquote cite {
	display: block;
	margin-top: var(--space-12);
	color: var(--body-grey);
	font-size: var(--fs-16);
	font-style: normal;
}

/* --- media ---------------------------------------------------------- */
/* Images stay inside the measure. Letting a 1024px image break out of an 800px
 * column is a nice effect on a designed article and a mess on imported copy,
 * where the same post mixes full-size plates with 300px thumbnails. */
.blog-content img {
	height: auto;
	max-width: 100%;
}

.blog-content figure,
.blog-content .wp-block-image,
.blog-content .wp-caption {
	margin: var(--space-30) 0;
	max-width: 100%;
}

.blog-content figcaption,
.blog-content .wp-caption-text {
	margin-top: var(--space-12);
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	line-height: var(--lh-body);
	text-align: center;
}

/* The alignment classes the imported markup carries: alignnone (111),
 * aligncenter (46), plus left/right for completeness. */
.blog-content .aligncenter,
.blog-content figure.aligncenter {
	margin-inline: auto;
	text-align: center;
}

.blog-content .alignnone {
	margin-inline: 0;
}

.blog-content .alignleft {
	float: left;
	margin: 0 var(--space-25) var(--space-20) 0;
	max-width: 50%;
}

.blog-content .alignright {
	float: right;
	margin: 0 0 var(--space-20) var(--space-25);
	max-width: 50%;
}

.blog-content iframe,
.blog-content video,
.blog-content embed,
.blog-content object {
	max-width: 100%;
	margin-block: var(--space-30);
}

/* --- tables --------------------------------------------------------- */
/* The imported tables carry no classes and no <thead> — they open with a row of
 * <b> cells — so the first row is styled as the header rather than selecting on
 * thead. Wrapped so a wide cost table scrolls inside the column instead of
 * widening the page. */
.blog-content table {
	width: 100%;
	margin-block: var(--space-30);
	border-collapse: collapse;
	font-size: var(--fs-18);
}

.blog-content th,
.blog-content td {
	padding: var(--space-12) var(--space-15);
	border: 1px solid var(--mid-green);
	text-align: left;
	vertical-align: top;
}

.blog-content thead th,
.blog-content tbody tr:first-child td {
	background-color: var(--pale-green);
	color: var(--primary-black);
	font-weight: 700;
}

.blog-content tbody tr:first-child td b,
.blog-content tbody tr:first-child td strong {
	color: var(--primary-black);
}

/* --- rules and code ------------------------------------------------- */
.blog-content hr {
	margin-block: var(--space-40);
	border: 0;
	border-top: 1px solid var(--mid-green);
}

.blog-content code,
.blog-content kbd,
.blog-content samp {
	padding: 2px 6px;
	background-color: var(--pale-green);
	font-size: 0.9em;
}

.blog-content pre {
	overflow-x: auto;
	margin-block: var(--space-30);
	padding: var(--space-20);
	background-color: var(--pale-green);
	font-size: var(--fs-16);
}

/* --- imported share widget ------------------------------------------ */
/**
 * 54 of the imported posts end with a CoBlocks social-sharing block (391 link
 * instances). CoBlocks is not installed here, so it has no styles and renders
 * as a bare list of "Share on Facebook" links — and worse, the share URLs were
 * baked into the HTML at the source, so every one of them still points at
 * kerriganroofing.com. Migrating them was not possible: the old address sits
 * inside a query string on facebook.com / twitter.com / pinterest.com, and
 * rewriting URLs inside a third-party query string is not something a migration
 * can safely do.
 *
 * Hidden rather than styled, because a tidy-looking share row that promotes the
 * previous site is worse than no share row. Delete this rule once the widget is
 * either removed from the content or replaced with a real share component.
 */
.blog-content .wp-block-coblocks-social {
	display: none;
}

/* ===================================================================
 * Article footer — categories and tags
 * =================================================================== */
.blog-single__footer {
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
	margin-top: var(--space-48);
	padding-top: var(--space-30);
	border-top: 1px solid var(--mid-green);
}

.blog-single__terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10);
}

.blog-single__terms-label {
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.blog-single__term-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A pill, using the one radius in the token set that is meant for them
 * (--radius-25 belongs to the avatar circles and these chips, not to the CTAs,
 * which are square). */
.blog-single__term {
	display: inline-flex;
	align-items: center;
	padding: 6px var(--space-15);
	border: 1px solid var(--mid-green);
	border-radius: var(--radius-25);
	background-color: var(--white);
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-14);
	font-weight: 500;
	line-height: var(--lh-tight);
	text-decoration: none;
	transition: var(--transition);
}

.blog-single__term:hover,
.blog-single__term:focus-visible {
	border-color: var(--primary-green);
	background-color: var(--primary-green);
	color: var(--white);
}

/* Tags sit on the pale ground so the two rows read as two different things at a
 * glance — the "Category" / "Tagged" labels say which is which, but a post
 * with five categories and five tags is otherwise ten identical chips. */
.blog-single__term--tag {
	border-color: transparent;
	background-color: var(--pale-green);
}

/* ===================================================================
 * Prev / next
 *
 * core's post_navigation emits nav.post-navigation > .nav-links > .nav-previous
 * / .nav-next. The `class` argument adds `blog-nav` alongside, which is what is
 * selected on here.
 * =================================================================== */
.blog-nav {
	padding-block: var(--space-60);
	border-top: 1px solid var(--mid-green);
	background-color: var(--white);
}

.blog-nav .nav-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--grid-gutter);
	width: 100%;
	max-width: calc(var(--container-max) + (var(--container-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* When only one neighbour exists core emits a single child, which would
 * otherwise stretch across both tracks. */
.blog-nav .nav-next:only-child {
	grid-column: 2;
}

.blog-nav .nav-previous,
.blog-nav .nav-next {
	display: flex;
}

.blog-nav a {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-10);
	padding: var(--space-25);
	border: 1px solid var(--mid-green);
	color: var(--primary-black);
	text-decoration: none;
	transition: var(--transition);
}

.blog-nav a:hover,
.blog-nav a:focus-visible {
	border-color: var(--primary-green);
	background-color: var(--pale-green);
}

.blog-nav__direction {
	display: inline-flex;
	align-items: center;
	gap: var(--space-10);
	color: var(--primary-green);
	font-family: var(--font-body);
	font-size: var(--fs-14);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

/* The chevrons are 7x12; height only, or they stretch. */
.blog-nav__direction svg {
	flex: 0 0 auto;
	width: auto;
	height: 14px;
}

.blog-nav__title {
	font-family: var(--font-heading);
	font-size: var(--fs-22);
	font-weight: 700;
	line-height: var(--lh-22);
}

/* The next card reads right-to-left so the pair mirrors, the way a prev/next
 * row is drawn everywhere. */
.blog-nav .nav-next a {
	align-items: flex-end;
	text-align: right;
}

/* ===================================================================
 * Responsive
 * =================================================================== */
@media (max-width: 991px) {

	.blog-content h2 {
		margin-top: var(--space-40);
	}
}

@media (max-width: 767px) {

	/* Floated images are half a column wide at best on a phone, which leaves an
	 * unreadable ribbon of text beside them. */
	.blog-content .alignleft,
	.blog-content .alignright {
		float: none;
		margin-inline: 0;
		max-width: 100%;
	}

	/* A two-column cost table does not fit a 335px container, so the table
	 * scrolls inside its own column rather than widening the page. base.css sets
	 * `overflow-x: hidden` on the body, so an overflowing table would simply be
	 * clipped without this. */
	.blog-content table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}

	.blog-nav .nav-links {
		grid-template-columns: minmax(0, 1fr);
	}

	.blog-nav .nav-next:only-child {
		grid-column: 1;
	}

	/* Stacked, the mirrored alignment reads as a mistake rather than a pair. */
	.blog-nav .nav-next a {
		align-items: flex-start;
		text-align: left;
	}
}