/**
 * MFG Builders blog.
 *
 * Loaded only on blog surfaces (see inc/assets.php).
 * System of record: DESIGN.md at the project root.
 *
 * Structured light: warm paper ground, firm visible grid, image-forward
 * entries. Full palette strategy, four roles. Amber marks, it never decorates.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.mfg-blog,
.mfg-single {
	/* Ground */
	--mfg-paper:       oklch(98.4% 0.005 82);
	--mfg-paper-sunk:  oklch(96.2% 0.007 82);
	--mfg-paper-raise: oklch(99.4% 0.003 82);

	/* Ink */
	--mfg-ink:         oklch(20.5% 0.006 82);
	--mfg-ink-body:    oklch(34%   0.008 82);
	--mfg-ink-muted:   oklch(52%   0.010 82);

	/* Line */
	--mfg-rule:        oklch(89%   0.006 82);
	--mfg-rule-strong: oklch(78%   0.010 82);

	/* Signal: amber. Surfaces and marks only. */
	--mfg-signal:      oklch(82%   0.169 82);
	--mfg-signal-deep: oklch(58%   0.130 68);

	/* Secondary voice: blue. */
	--mfg-link:        oklch(48%   0.161 265);
	--mfg-link-hover:  oklch(38%   0.150 265);

	/* Type */
	--mfg-display: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);
	--mfg-h1:      clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem);
	--mfg-h2:      clamp(1.55rem, 1.25rem + 1.1vw, 2.1rem);
	--mfg-h3:      1.3rem;
	--mfg-lead:    clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
	--mfg-body:    1.0625rem;
	--mfg-meta:    0.8125rem;
	--mfg-label:   0.6875rem;

	--mfg-sans:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mfg-heading: "Instrument Sans", "DM Sans", system-ui, sans-serif;

	/* Space */
	--mfg-gap:     clamp(1.25rem, 0.9rem + 1.4vw, 2.5rem);
	--mfg-section: clamp(3rem, 2rem + 4vw, 6rem);
	--mfg-bleed:   clamp(1.25rem, 0.5rem + 3vw, 4rem);
	--mfg-measure: 68ch;

	--mfg-ease:    cubic-bezier(0.22, 1, 0.36, 1);
	--mfg-radius:  4px;
}

/* ==========================================================================
   2. Shell
   The banner comes from template-parts/page-header.php, which reuses the
   site's own .inner-page-header markup, so blog surfaces match every other
   page. Astra's container is neutralised here and the blog manages its own
   width and gutters.
   ========================================================================== */

.mfg-blog,
.mfg-single {
	background: var(--mfg-paper);
	color: var(--mfg-ink-body);
	font-family: var(--mfg-sans);
	font-size: var(--mfg-body);
	line-height: 1.65;
}

/* Astra's global content layout is a narrow centred container. On a post left
   at the default it measured 750px, while a post individually switched to
   "normal-width-container" measured 1345px, which is why some posts rendered
   as a thin column and the blog sat narrower than the rest of the site.
   !important is required: Astra emits these from customizer CSS that loads
   after the theme stylesheet. */
body.blog .ast-container,
body.single-post .ast-container,
body.archive .ast-container,
body.search .ast-container,
body.error404 .ast-container {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

/* The pale strip above the banner was Astra's site background
   (--ast-global-color-5, #F0F5FA) showing through the container's vertical
   padding. Zeroing that padding closes the gap, and painting the paper ground
   on #content keeps the site colour from showing anywhere else on these
   views. */
body.blog #content,
body.single-post #content,
body.archive #content,
body.search #content,
body.error404 #content {
	background: var(--mfg-paper, oklch(98.4% 0.005 82));
	padding-block: 0 !important;
	margin-block: 0 !important;
}

/* Only the single post article. The index cards also carry .hentry from
   post_class(), so a broader selector here would strip their own surfaces.
   Astra adds .ast-article-single through its post_class filter and styles it
   at 0,3,0 specificity, so the override has to match that weight to win. */
.ast-separate-container .mfg-article.ast-article-single,
.ast-separate-container .mfg-article.ast-article-post,
.mfg-article {
	background: transparent;
	padding: 0;
	margin: 0;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

/* Astra drops a 30px drop shadow on every figure and image inside a single
   article. The hero already has its own radius and sits on paper; the shadow
   turned it into a floating white plate. */
.mfg-article figure,
.mfg-article img,
.mfg-blog figure,
.mfg-blog img {
	box-shadow: none;
}

/* Listing cards also pick up .ast-article-post from post_class(), and Astra
   pads that generously: it computed to 51px, so every card carried a thick
   mat around its own image. Tightened to a thin inset. Matching Astra's
   0,2,0 selector needs 0,3,0 here to win. */
.ast-separate-container .mfg-card.ast-article-post,
.ast-separate-container .mfg-card.ast-article-single,
.mfg-card {
	padding: 0.5em;
}

/* No max-width, and a 50px gutter at desktop, because the rest of the site
   runs .inner-page-main-section full bleed with 50px padding and a 65/35
   split. A centred 1360px column made the blog visibly narrower than every
   other page. Reading measure is protected by --mfg-measure on the prose
   rather than by capping the whole layout. */
.mfg-blog__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mfg-section) var(--mfg-gap);
	padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(1.25rem, 0.5rem + 3vw, 50px);
}

@media (min-width: 1024px) {
	.mfg-blog__body {
		grid-template-columns: minmax(0, 65fr) minmax(280px, 35fr);
	}

	.mfg-blog__body--full {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mfg-blog__main {
	min-width: 0;
}

/* Search form sitting directly under the banner. */
.mfg-searchbar {
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(1.25rem, 0.5rem + 3vw, 50px) 0;
	max-inline-size: 44rem;
}

/* Category rule plus date/author row above the article body. */
.mfg-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--mfg-rule);
	max-width: var(--mfg-measure);
}

.mfg-article__meta .mfg-cat {
	margin: 0;
}

/* ==========================================================================
   2b. Inherited overrides
   The site's global CSS sets `h1..h6 { text-transform: uppercase }` and
   `p, li, a, span { text-decoration: none !important }`. Both are wrong for
   long-form reading: multi-line article headlines in caps are slow to scan,
   and links with no underline are not distinguishable without colour, which
   fails WCAG 1.4.1. Corrected inside blog surfaces only, so the rest of the
   site is untouched.
   ========================================================================== */

.mfg-card__title,
.mfg-prose h2,
.mfg-prose h3,
.mfg-prose h4,
.mfg-prose h5,
.mfg-prose h6,
.mfg-postnav__title,
.mfg-cta__title,
.mfg-empty h2 {
	text-transform: none;
}

/* Short section labels keep the site's uppercase voice. */
.mfg-section-title {
	text-transform: uppercase;
}

.mfg-prose a {
	text-decoration: underline !important;
}

/* ==========================================================================
   4. Category rule
   Content line identity. A rule above a label, never a side stripe, never
   colour alone: the word is always present.
   ========================================================================== */

.mfg-cat {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 0.75rem;
}

.mfg-cat__rule {
	display: block;
	inline-size: 1.75rem;
	block-size: 3px;
	flex: none;
	background: var(--mfg-rule-strong);
	border-radius: 2px;
}

.mfg-cat.is-news .mfg-cat__rule {
	background: var(--mfg-signal);
	inline-size: 2.5rem;
}

.mfg-cat__label {
	font-size: var(--mfg-label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mfg-ink-muted);
	text-decoration: none;
}

a.mfg-cat__label:hover,
a.mfg-cat__label:focus-visible {
	color: var(--mfg-ink);
}

/* ==========================================================================
   6. Cards
   Printed index card, not a SaaS tile. Hairline border, minimal radius,
   elevation on hover only.
   ========================================================================== */

/* A deterministic two column grid rather than auto-fit.
   With auto-fit the column count is unknowable in CSS, so a widened card lands
   at an arbitrary position and auto-placement leaves a hole beside the card
   before it. Two fixed columns plus a widened every third card means every
   wide card starts its own full row, and no gaps are possible. */
.mfg-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mfg-gap);
}

@media (min-width: 640px) {
	.mfg-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mfg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mfg-paper-raise);
	border: 1px solid var(--mfg-rule);
	border-radius: var(--mfg-radius);
	overflow: hidden;
	transition: border-color 160ms var(--mfg-ease), transform 160ms var(--mfg-ease);
}

@media (prefers-reduced-motion: no-preference) {
	.mfg-card:hover {
		transform: translateY(-2px);
	}
}

.mfg-card:hover {
	border-color: var(--mfg-rule-strong);
}

.mfg-card:focus-within {
	border-color: var(--mfg-signal-deep);
}

/* Media */

.mfg-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--mfg-paper-sunk);
	overflow: hidden;
	/* The card now has its own inset padding, so the media no longer meets the
	   card's clipped corners and needs a small radius of its own. */
	border-radius: 2px;
}

.mfg-card__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* Four of twenty posts have no featured image, so this is a real state, not an
   edge case. Reads as a deliberate typographic plate rather than a failure:
   an amber rule, the wordmark, and the same 16:9 box so the grid stays even. */
.mfg-card__img--placeholder {
	display: grid;
	place-items: center;
	gap: 0.75rem;
	background: var(--mfg-ink);
	border-bottom: 1px solid var(--mfg-rule);
	position: relative;
}

.mfg-card__img--placeholder::before {
	content: "";
	inline-size: 2.5rem;
	block-size: 3px;
	background: var(--mfg-signal);
	border-radius: 2px;
}

.mfg-card__img--placeholder span {
	font-family: var(--mfg-heading);
	font-size: var(--mfg-label);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: oklch(88% 0.008 82);
	text-align: center;
	padding-inline: 1.5rem;
	max-inline-size: 22ch;
	line-height: 1.5;
}

/* Body */

.mfg-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.5rem;
	padding: 1.25rem 1.25rem 1rem;
}

.mfg-card__title {
	margin: 0;
	font-family: var(--mfg-heading);
	font-size: var(--mfg-h3);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.012em;
	color: var(--mfg-ink);
	text-wrap: balance;
}

.mfg-card__link {
	color: inherit;
	text-decoration: none;
}

/* Whole card is clickable, but only one link is exposed to assistive tech. */
.mfg-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mfg-card__link:hover {
	color: var(--mfg-link-hover);
}

.mfg-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--mfg-ink-body);
}

.mfg-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 0.875rem;
	border-top: 1px solid var(--mfg-rule);
}

.mfg-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	flex: none;
	font-size: var(--mfg-meta);
	font-weight: 600;
	color: var(--mfg-link);
}

.mfg-card__more svg {
	transition: transform 160ms var(--mfg-ease);
}

@media (prefers-reduced-motion: no-preference) {
	.mfg-card:hover .mfg-card__more svg {
		transform: translateX(3px);
	}
}

/* Lead variant: the newest post, dominant, page one only. */

.mfg-card--lead {
	margin-bottom: var(--mfg-gap);
}

.mfg-card--lead .mfg-card__title {
	font-size: var(--mfg-h2);
	letter-spacing: -0.02em;
}

.mfg-card--lead .mfg-card__excerpt {
	font-size: var(--mfg-lead);
	line-height: 1.5;
}

.mfg-card--lead .mfg-card__body {
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	gap: 0.75rem;
}

@media (min-width: 860px) {
	.mfg-card--lead {
		display: grid;
		/* Near even split. At 7fr/5fr the text column was narrow enough that a
		   long standfirst pushed the card past 500px tall, which turned the
		   image panel into a slab. */
		grid-template-columns: 6fr 5fr;
		align-items: stretch;
	}

	.mfg-card--lead .mfg-card__media {
		aspect-ratio: auto;
		block-size: 100%;
		min-block-size: 300px;
	}

	.mfg-card--lead .mfg-card__body {
		justify-content: center;
	}
}

/* Wide variant: every fourth index entry, breaking the uniform wall. */

@media (min-width: 640px) {
	.mfg-card--wide {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}

	.mfg-card--wide .mfg-card__media {
		aspect-ratio: auto;
		block-size: 100%;
		min-block-size: 230px;
		max-block-size: 330px;
	}

	.mfg-card--wide .mfg-card__body {
		justify-content: center;
		padding: 1.75rem;
	}

	.mfg-card--wide .mfg-card__title {
		font-size: 1.5rem;
	}
}

/* ==========================================================================
   7. Meta
   ========================================================================== */

.mfg-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
	margin: 0;
	font-size: var(--mfg-meta);
	color: var(--mfg-ink-muted);
}

.mfg-meta__item + .mfg-meta__item::before {
	content: "·";
	margin-inline-end: 0.6rem;
	color: var(--mfg-rule-strong);
}

/* ==========================================================================
   8. Pagination
   ========================================================================== */

.mfg-pagination {
	margin-top: var(--mfg-section);
	padding-top: 1.5rem;
	border-top: 1px solid var(--mfg-rule);
}

.mfg-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
}

.mfg-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: 2.5rem;
	min-block-size: 2.5rem;
	padding-inline: 0.6rem;
	border: 1px solid var(--mfg-rule);
	border-radius: var(--mfg-radius);
	font-size: 0.9375rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--mfg-ink-body);
	text-decoration: none;
	transition: border-color 160ms var(--mfg-ease), background-color 160ms var(--mfg-ease);
}

.mfg-pagination a.page-numbers:hover {
	border-color: var(--mfg-rule-strong);
	background: var(--mfg-paper-sunk);
}

.mfg-pagination .page-numbers.current {
	background: var(--mfg-signal);
	border-color: var(--mfg-signal);
	color: var(--mfg-ink);
	font-weight: 700;
}

.mfg-pagination .page-numbers.dots {
	border-color: transparent;
	min-inline-size: 1.5rem;
}

/* ==========================================================================
   9. Prose
   ========================================================================== */

.mfg-article__standfirst {
	margin: 1.25rem 0 0;
	font-size: var(--mfg-lead);
	line-height: 1.5;
	color: var(--mfg-ink-body);
	max-width: 58ch;
}

.mfg-prose {
	max-width: var(--mfg-measure);
	color: var(--mfg-ink-body);
	font-size: var(--mfg-body);
	line-height: 1.7;
}

.mfg-prose > * + * {
	margin-top: 1.25rem;
}

.mfg-prose h2 {
	margin-top: 2.75rem;
	font-family: var(--mfg-heading);
	font-size: var(--mfg-h2);
	font-weight: 650;
	line-height: 1.18;
	letter-spacing: -0.018em;
	color: var(--mfg-ink);
	text-wrap: balance;
}

.mfg-prose h3 {
	margin-top: 2rem;
	font-family: var(--mfg-heading);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.008em;
	color: var(--mfg-ink);
}

.mfg-prose h4 {
	margin-top: 1.75rem;
	font-family: var(--mfg-heading);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--mfg-ink);
}

.mfg-prose a {
	color: var(--mfg-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.mfg-prose a:hover {
	color: var(--mfg-link-hover);
	text-decoration-thickness: 2px;
}

.mfg-prose ul,
.mfg-prose ol {
	padding-inline-start: 1.35rem;
}

.mfg-prose li + li {
	margin-top: 0.5rem;
}

.mfg-prose ul li::marker {
	color: var(--mfg-signal-deep);
}

.mfg-prose img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--mfg-radius);
}

.mfg-prose blockquote {
	margin-inline: 0;
	padding: 1.25rem 1.5rem;
	background: var(--mfg-paper-sunk);
	border: 1px solid var(--mfg-rule);
	border-radius: var(--mfg-radius);
	font-size: var(--mfg-lead);
	line-height: 1.5;
	color: var(--mfg-ink);
}

.mfg-prose blockquote p:last-child {
	margin-bottom: 0;
}

.mfg-prose table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.mfg-prose th,
.mfg-prose td {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--mfg-rule);
	text-align: start;
}

.mfg-prose th {
	background: var(--mfg-paper-sunk);
	font-weight: 600;
	color: var(--mfg-ink);
}

/* Long tables and code must scroll inside themselves, never the page. */
.mfg-prose > table,
.mfg-prose > pre {
	display: block;
	max-inline-size: 100%;
	overflow-x: auto;
}

/* ==========================================================================
   10. CTA
   ========================================================================== */

.mfg-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: var(--mfg-section);
	padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
	background: var(--mfg-ink);
	border-radius: var(--mfg-radius);
	max-width: var(--mfg-measure);
}

.mfg-cta__text {
	flex: 1 1 22rem;
}

.mfg-cta__title {
	margin: 0;
	font-family: var(--mfg-heading);
	font-size: 1.5rem;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--mfg-paper);
}

.mfg-cta__body {
	margin: 0.625rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	/* Light type on dark needs more air and a touch less contrast burn. */
	color: oklch(84% 0.008 82);
}

/* ==========================================================================
   11. Buttons
   ========================================================================== */

.mfg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--mfg-ink);
	border-radius: var(--mfg-radius);
	background: var(--mfg-ink);
	color: var(--mfg-paper);
	font-family: var(--mfg-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 160ms var(--mfg-ease), color 160ms var(--mfg-ease), border-color 160ms var(--mfg-ease);
}

.mfg-btn:hover {
	background: transparent;
	color: var(--mfg-ink);
}

/* Ink on amber is the only sanctioned amber-behind-text pairing. */
.mfg-btn--signal {
	background: var(--mfg-signal);
	border-color: var(--mfg-signal);
	color: var(--mfg-ink);
	flex: none;
}

.mfg-btn--signal:hover {
	background: oklch(88% 0.150 82);
	border-color: oklch(88% 0.150 82);
	color: var(--mfg-ink);
}

.mfg-btn--ghost {
	background: transparent;
	color: var(--mfg-ink);
}

.mfg-btn--ghost:hover {
	background: var(--mfg-ink);
	color: var(--mfg-paper);
}

/* ==========================================================================
   12. Post navigation and related
   ========================================================================== */

.mfg-postnav {
	display: grid;
	gap: var(--mfg-gap);
	margin-top: var(--mfg-section);
	max-width: var(--mfg-measure);
}

@media (min-width: 640px) {
	.mfg-postnav {
		grid-template-columns: 1fr 1fr;
	}
}

.mfg-postnav__item {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--mfg-rule);
	border-radius: var(--mfg-radius);
	background: var(--mfg-paper-raise);
	text-decoration: none;
	transition: border-color 160ms var(--mfg-ease);
}

.mfg-postnav__item:hover {
	border-color: var(--mfg-rule-strong);
}

.mfg-postnav__item--next {
	text-align: end;
}

.mfg-postnav__dir {
	font-size: var(--mfg-label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mfg-ink-muted);
}

.mfg-postnav__title {
	font-family: var(--mfg-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mfg-ink);
}

.mfg-related {
	margin-top: var(--mfg-section);
}

.mfg-section-title {
	margin: 0 0 1.5rem;
	font-family: var(--mfg-heading);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--mfg-ink);
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--mfg-ink);
}

.mfg-grid--related {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ==========================================================================
   13. Sidebar
   ========================================================================== */

.mfg-blog__aside {
	min-width: 0;
}

/* Not sticky. A sticky aside taller than the viewport needs its own scroll
   container, which put a second scrollbar on the page. */
@media (min-width: 1024px) {
	.mfg-blog__aside {
		align-self: start;
	}
}

.mfg-blog__aside .widget {
	padding: 1.5rem;
	background: var(--mfg-paper-raise);
	border: 1px solid var(--mfg-rule);
	border-radius: var(--mfg-radius);
}

.mfg-blog__aside .widget + .widget {
	margin-top: var(--mfg-gap);
}

.mfg-blog__aside .widget-title {
	margin: 0 0 1rem;
	font-family: var(--mfg-heading);
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: -0.005em;
	color: var(--mfg-ink);
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--mfg-rule);
}

.mfg-blog__aside ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mfg-blog__aside li + li {
	margin-top: 0.625rem;
	padding-top: 0.625rem;
	border-top: 1px solid var(--mfg-rule);
}

.mfg-blog__aside a {
	color: var(--mfg-ink-body);
	text-decoration: none;
}

.mfg-blog__aside a:hover {
	color: var(--mfg-link-hover);
	text-decoration: underline;
}

/* The quote widget carries its own complete styling from the site's CSS, keyed
   by id (#sow-editor-13): dark gradient, 20px radius, white border, shadow.
   That is an ID selector, so there is no point restating the panel here. What
   does need undoing is its margin-top: -85px, which existed to overlap the old
   banner and in this two column grid just pushed the sidebar out of line with
   the first card. */
.mfg-blog__aside .widget:first-child,
.mfg-blog__aside #sow-editor-10,
.mfg-blog__aside #sow-editor-12,
.mfg-blog__aside #sow-editor-13 {
	margin-top: 0;
}

.mfg-blog__aside .wpcf7 input[type="text"],
.mfg-blog__aside .wpcf7 input[type="email"],
.mfg-blog__aside .wpcf7 input[type="tel"],
.mfg-blog__aside .wpcf7 textarea {
	inline-size: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid oklch(100% 0 0 / 0.16);
	border-radius: var(--mfg-radius);
	background: oklch(100% 0 0 / 0.06);
	color: var(--mfg-paper);
	font-family: var(--mfg-sans);
	font-size: 0.9375rem;
}

/* On the dark quote panel the placeholder needs to be lighter, not darker:
   at 50% white it measured about 4.3:1 against the field, just short of AA. */
.mfg-blog__aside .wpcf7 ::placeholder {
	color: oklch(100% 0 0 / 0.62);
}

.mfg-blog__aside .wpcf7 textarea {
	min-block-size: 7rem;
	resize: vertical;
}

.mfg-blog__aside .wpcf7 p {
	margin: 0 0 0.75rem;
}

.mfg-blog__aside .wpcf7 .wpcf7-submit {
	inline-size: 100%;
	padding: 0.8rem 1.25rem;
	border: 0;
	border-radius: var(--mfg-radius);
	background: var(--mfg-signal) !important;
	/* Ink on amber, not white on amber: white fails contrast here. */
	color: var(--mfg-ink) !important;
	font-family: var(--mfg-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
}

.mfg-blog__aside .wpcf7 .wpcf7-spinner {
	display: none;
}

/* Non-form widgets: the site authored these as plain lists with no links.
   Keep them quiet so they do not compete with the quote panel. */
.mfg-blog__aside .widget:not(:has(.wpcf7)) li {
	font-size: 0.9375rem;
	color: var(--mfg-ink-body);
}

/* ==========================================================================
   14. Empty states
   ========================================================================== */

.mfg-empty {
	max-width: 46rem;
	margin-inline: auto;
	padding: var(--mfg-section) var(--mfg-bleed);
	text-align: center;
}

.mfg-empty h2 {
	margin: 0 0 0.75rem;
	font-family: var(--mfg-heading);
	font-size: var(--mfg-h2);
	font-weight: 650;
	letter-spacing: -0.02em;
	color: var(--mfg-ink);
}

.mfg-empty p {
	margin: 0 0 1.75rem;
	color: var(--mfg-ink-muted);
}

.mfg-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--mfg-gap);
}

/* ==========================================================================
   15. Focus
   Absent from the previous templates entirely, and required for AA.
   ========================================================================== */

.mfg-blog :focus-visible,
.mfg-single :focus-visible {
	outline: 2px solid var(--mfg-signal-deep);
	outline-offset: 3px;
	border-radius: 2px;
}

.mfg-card__link:focus-visible {
	outline: none;
}

.mfg-card:has(.mfg-card__link:focus-visible) {
	outline: 2px solid var(--mfg-signal-deep);
	outline-offset: 3px;
}

/* ==========================================================================
   16. Search form
   ========================================================================== */

.mfg-blog .search-form,
.mfg-single .search-form {
	display: flex;
	gap: 0.5rem;
}

.mfg-blog .search-field,
.mfg-single .search-field {
	flex: 1;
	min-inline-size: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--mfg-rule-strong);
	border-radius: var(--mfg-radius);
	background: var(--mfg-paper-raise);
	font-family: var(--mfg-sans);
	font-size: 1rem;
	color: var(--mfg-ink);
}

.mfg-blog .search-submit,
.mfg-single .search-submit {
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--mfg-ink);
	border-radius: var(--mfg-radius);
	background: var(--mfg-ink);
	color: var(--mfg-paper);
	font-family: var(--mfg-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

/* ==========================================================================
   17. Print
   ========================================================================== */

@media print {
	.mfg-blog__aside,
	.mfg-cta,
	.mfg-postnav,
	.mfg-related,
	.mfg-searchbar,
	.mfg-pagination {
		display: none;
	}

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