/* =============================================================================
   17-blog-post.css — single.php
   The post header, the post + sidebar layout, and the typography inside
   the_content().

   Everything in the body section is scoped to .post_content, the wrapper
   single.php puts around the_content(). That scoping is what makes this safe:
   nothing outside a blog post can be affected, so the landing pages keep the
   big display scale from 02-base.css.

   KEEP IN SYNC WITH css/admin/editor-style.css, which gives the editor's
   Visual tab the same scale so staff see what they will publish.
   ============================================================================= */

#blog_post {
	padding-top: 1.875rem;
}

/* --- Post header ----------------------------------------------------------
   The title is still the page's h1, but a blog title sits on white in a text
   column rather than over a banner, so it gets a smaller ceiling than the
   site-wide h1.
   -------------------------------------------------------------------------- */
.post_header {
	max-width: 820px;
	margin-bottom: 2rem;
}

.post_header h1 {
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
	line-height: 1.1;
	margin-bottom: 0.875rem;
}

/* Date and author. Marked up as a <p>, not a heading — it is metadata, and a
   heading would have screen readers announce it as a section of the page. */
.post_meta {
	font-family: var(--js-font);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--js-grey);
	margin: 0;
}

.post_meta_sep {
	padding: 0 0.5rem;
	color: var(--js-grey-tint);
}

.post_author {
	font-family: var(--js-font-bold);
}

/* =============================================================================
   THE POST + SIDEBAR LAYOUT
   minmax(0, 820px) rather than plain 820px: a bare 820px track still refuses
   to shrink below the widest thing inside it, so one long URL or a wide table
   would push the sidebar off the page.
   ============================================================================= */
.post_layout {
	display: grid;
	grid-template-columns: minmax(0, 820px) minmax(260px, 1fr);
	gap: 3rem;
	align-items: start;
}

/* The two overflow-x lines are both needed: `clip` is what allows sticky to
   keep working inside, and `hidden` is the fallback for Safari before 16,
   which ignores the line it does not understand. overflow-y is spelled out
   because the shorthand would set both axes. */
body.single-post main {
	overflow-x: hidden;
	overflow-x: clip;
	overflow-y: visible;
}

.post_aside {
	position: sticky;
	top: 4rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	min-width: 0;
}

.post_aside_heading {
	font-family: var(--js-font-bold);
	font-size: 1.25rem;
	line-height: 1.25;
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--js-beige-tint);
}

/* =============================================================================
   THE POST BODY
   Same clamp() idiom as 02-base.css. Each level is comfortably smaller than
   the one above and comfortably larger than body text, so the structure of a
   post is readable at a glance: roughly 32 / 25 / 20px against 17px body.

   The generous margin-top with a smaller margin-bottom is deliberate — a
   heading should sit closer to the text it introduces than to the text it
   follows, which is what tells a reader where one section ends.
   ============================================================================= */
.post_content {
	/* No max-width: .post_layout's grid column sets the measure, and a
	   max-width on top of it would fight it at in-between widths. */
	min-width: 0;
	font-family: var(--js-font);
	color: var(--js-black);
}

/* Long-form text wants more line-height than the site-wide 1.3. */
.post_content p {
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 0 0 1.1em;
}

.post_content h1,
.post_content h2,
.post_content h3,
.post_content h4,
.post_content h5,
.post_content h6 {
	font-family: var(--js-font-bold);
	color: var(--js-black);
}

/* An h1 inside the content duplicates the page title as far as search engines
   and screen readers are concerned — staff should start at Heading 2. It is
   styled as an h2 so that picking Heading 1 out of habit does not break the
   page. */
.post_content h1,
.post_content h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	line-height: 1.2;
	margin: 2em 0 0.5em;
}

.post_content h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
	line-height: 1.25;
	margin: 1.8em 0 0.45em;
}

.post_content h4 {
	font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	line-height: 1.3;
	margin: 1.6em 0 0.4em;
}

.post_content h5 {
	font-size: 1.0625rem;
	line-height: 1.35;
	margin: 1.5em 0 0.4em;
}

/* h6 is the smallest level, so it earns its emphasis from letter-spacing and
   colour rather than size — at body size and plain it would not read as a
   heading at all. */
.post_content h6 {
	font-size: 0.9375rem;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--js-grey);
	margin: 1.5em 0 0.4em;
}

/* The first heading in a post should not push a gap below the header. */
.post_content > :first-child {
	margin-top: 0;
}

/* Note: the em margins above are intentional — 2em means "twice THIS
   heading's own size", so the space above a heading scales with it. rem would
   give every level the same gap. */

/* --- Lists, quotes, images, links and tables ------------------------------ */
.post_content ul,
.post_content ol {
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 0 0 1.1em;
	padding-left: 1.4em;
}

.post_content li {
	margin-bottom: 0.5em;
}

.post_content li > ul,
.post_content li > ol {
	margin: 0.5em 0 0;
}

/* Effra has no true bold weight file, so "bold" is a separate family. */
.post_content strong,
.post_content b {
	font-family: var(--js-font-bold);
	font-weight: 400;
}

.post_content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--js-blue);
	background: none;
}

.post_content blockquote p {
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--js-grey);
}

.post_content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* --js-blue is only ~2.6:1 on white, under the 4.5:1 WCAG AA asks of body
   text, so links use the darkened ink. See 01-variables.css. */
.post_content a {
	color: var(--js-blue-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.post_content a:hover,
.post_content a:focus-visible {
	text-decoration-thickness: 2px;
}

.post_content hr {
	border: none;
	border-top: 1px solid var(--js-grey-tint);
	margin: 2.4em 0;
}

/* A table pasted in from elsewhere should at least not overflow the column. */
.post_content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4em;
	font-size: 1rem;
}

.post_content th,
.post_content td {
	border: 1px solid var(--js-grey-tint);
	padding: 8px 10px;
	text-align: left;
}

.post_content th {
	background-color: var(--js-beige);
	font-family: var(--js-font-bold);
}

/* WordPress's own caption and alignment classes. The editor adds these when
   staff insert an image; without styling here they do nothing. */
.post_content .wp-caption {
	max-width: 100%;
	margin-bottom: 1.4em;
}

.post_content .wp-caption-text {
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--js-grey);
	margin-top: 6px;
}

.post_content .alignleft {
	float: left;
	margin: 0.3em 1.4em 1em 0;
}

.post_content .alignright {
	float: right;
	margin: 0.3em 0 1em 1.4em;
}

.post_content .aligncenter {
	display: block;
	margin: 0 auto 1.4em;
}

/* =============================================================================
   RELATED BLOG CARDS (sidebar)
   A compact horizontal card — thumbnail left, text right — rather than the
   .blog_card grid used on the homepage. A card built for four-across looks
   lost in a 330px column.
   ============================================================================= */
.related_blogs {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.related_blog {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 0.875rem;
	align-items: center;
	padding: 0.625rem;
	border: 1px solid #e4e0d9;
	border-radius: 10px;
	background-color: var(--js-white);
	text-decoration: none;
	transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.related_blog:hover,
.related_blog:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.related_blog_thumb {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--js-beige);
}

.related_blog_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

.related_blog_body {
	display: block;
	min-width: 0;
}

.related_blog_date {
	display: block;
	font-family: var(--js-font);
	font-size: 0.8125rem;
	line-height: 1.2;
	color: var(--js-grey);
	margin-bottom: 4px;
}

.related_blog_title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-family: var(--js-font-bold);
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--js-grey);
}

/* --- Resource rows in the sidebar ----------------------------------------
   .resource_list / .resource_item / .resource_link are defined in
   15-advice-resources.css as plain class selectors, so the sidebar reuses
   them as they are. Only the narrower column needs adjusting, and this file
   loads later so these win without !important.
   -------------------------------------------------------------------------- */
.post_aside .resource_link {
	padding: 0.75rem 0.875rem;
}

.post_aside .resource_label {
	font-size: 0.9375rem;
	line-height: 1.35;
}

/* ============================================================================= */

/* One column at the theme's desktop-to-tablet step. A sidebar narrower than
   about 260px stops being readable, and stacking puts the related content at
   the end of the post — where someone who has finished reading is looking. */
@media (max-width: 1000px) {
	.post_layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.post_aside {
		/* Stacked, a sticky sidebar would pin itself to the top of the screen
		   and let the post scroll past underneath it. */
		position: static;
		max-width: 820px;
		padding-top: 2rem;
		border-top: 1px solid var(--js-grey-tint);
	}
}

@media (max-width: 750px) {
	.post_header {
		margin-bottom: 1.5rem;
	}

	/* A floated image in a single-column phone layout leaves an unreadable
	   sliver of text beside it. */
	.post_content .alignleft,
	.post_content .alignright {
		float: none;
		display: block;
		margin: 0 auto 1.4em;
	}
}