/**
 * Blog listing.
 *
 * Values taken from the 2026 blog comp; colours and fonts reference theme.json
 * tokens so the design system stays single-source.
 */

/* Astra's container would constrain these full-bleed sections. */
body.blog .ast-container,
body.archive .ast-container,
body.single-post .ast-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

body.blog #primary,
body.archive #primary,
body.single-post #primary {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
}

/* Astra adds its own article padding on single posts. */
body.single-post .ast-article-single {
	padding: 0;
	border: 0;
}

.wpa-blog-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ------------------------------------------------------------ Header */

.wpa-blog-header {
	background: radial-gradient(120% 80% at 50% -10%, var(--wp--preset--color--primary-subtle) 0%, var(--wp--preset--color--surface) 60%);
	padding: 72px 0 48px;
	text-align: center;
}

.wpa-blog-header h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.06;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	margin: 0 auto 16px;
	max-width: 720px;
}

.wpa-blog-header .wpa-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	color: var(--wp--preset--color--ink-subtle);
	margin: 0 0 14px;
}

.wpa-blog-lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	max-width: 580px;
	margin: 0 auto 32px;
}

/* ------------------------------------------------------------- Chips */

.wpa-chips {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.wpa-chip {
	background: #f4f5f9;
	color: var(--wp--preset--color--ink-secondary);
	font-size: 14px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}

.wpa-chip:hover,
.wpa-chip:focus {
	background: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary);
}

.wpa-chip.is-active,
.wpa-chip.is-active:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

/* ---------------------------------------------------------- Sections */

.wpa-blog-section            { padding: 40px 0 72px; }
.wpa-blog-section--featured  { padding: 24px 0 8px; }
.wpa-blog-section--flush     { padding: 0 0 72px; }

/* ----------------------------------------------------------- Covers */

.wpa-cover {
	display: block;
	position: relative;
	overflow: hidden;
	height: 190px;
	background: #eef0f5;
}

.wpa-cover--featured { height: 100%; min-height: 340px; }

.wpa-cover__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Striped placeholder, matching the comp's empty-image treatment. */
.wpa-cover__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eef0f5;
	background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .045) 0 10px, transparent 10px 20px);
}

.wpa-cover__ph span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: .04em;
	color: rgba(0, 0, 0, .42);
	text-transform: uppercase;
}

/* --------------------------------------------------- Featured card */

.wpa-featured {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	/* stretch, not center: centering leaves a gap above and below the cover
	   whenever the text column is taller than the image. */
	align-items: stretch;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(20, 22, 40, .04);
	text-decoration: none;
}

.wpa-featured:hover { box-shadow: 0 12px 32px rgba(20, 22, 40, .10); }

.wpa-featured__body {
	display: block;
	align-self: center;
	padding: 44px 48px 44px 8px;
}

.wpa-featured__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.wpa-featured__title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 14px;
}

.wpa-featured__excerpt {
	display: block;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 22px;
}

/* ------------------------------------------------------- Post grid */

.wpa-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.wpa-post-card {
	display: block;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .18s ease, transform .18s ease;
}

.wpa-post-card:hover {
	box-shadow: 0 12px 32px rgba(20, 22, 40, .10);
	transform: translateY(-2px);
}

/*
 * display:block matters: these are <span> elements inside an <a>, and an
 * inline box's padding does not lay out its block children - the title and
 * excerpt escaped the 24px inset entirely.
 */
.wpa-post-card__body { display: block; padding: 24px; }

.wpa-post-card__title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 14px 0 10px;
}

.wpa-post-card__excerpt {
	display: block;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 16px;
}

.wpa-meta {
	font-size: 13px;
	color: var(--wp--preset--color--ink-subtle);
}

/* --------------------------------------------------------- Badges */

.wpa-badge--sm { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.wpa-badge--md { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 6px; }

.wpa-badge--primary { color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary-subtle); }
.wpa-badge--success { color: var(--wp--preset--color--success); background: var(--wp--preset--color--success-subtle); }
.wpa-badge--accent  { color: var(--wp--preset--color--accent);  background: var(--wp--preset--color--accent-subtle); }

/* --------------------------------------------------------- Byline */

.wpa-byline {
	display: flex;
	align-items: center;
	gap: 12px;
}

.wpa-byline__avatar {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	flex: 0 0 36px;
}

.wpa-byline__text { display: flex; flex-direction: column; line-height: 1.35; }
.wpa-byline__text strong { font-size: 14px; font-weight: 600; color: var(--wp--preset--color--ink); }
.wpa-byline__text span   { font-size: 13px; color: var(--wp--preset--color--ink-subtle); }

/* ----------------------------------------------------- Pagination */

.wpa-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 48px;
}

.wpa-pagination .page-numbers {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--stroke);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink-secondary);
	font-size: 15px;
	text-decoration: none;
}

.wpa-pagination .page-numbers:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.wpa-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-weight: 600;
}

.wpa-pagination .page-numbers.dots { border: 0; }

/* ----------------------------------------------------- Newsletter */

.wpa-newsletter-band {
	background: var(--wp--preset--color--ink);
	border-radius: 22px;
	padding: 52px 56px;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 40px;
	align-items: center;
}

.wpa-newsletter-band h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 700;
	color: var(--wp--preset--color--surface);
	margin: 0 0 8px;
}

.wpa-newsletter-band p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-faint);
	margin: 0;
}

.wpa-newsletter-band__form { display: block; }

.wpa-newsletter-band__form .wpa-nl__row { display: flex; gap: 10px; }

.wpa-newsletter-band__form input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	border-radius: 11px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--surface);
}

.wpa-newsletter-band__form input::placeholder { color: var(--wp--preset--color--ink-faint); }

.wpa-newsletter-band__form button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	border: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 600;
	padding: 0 24px;
	border-radius: 11px;
	cursor: pointer;
}

.wpa-newsletter-band__form button:hover { background: var(--wp--preset--color--primary-hover); }

.wpa-newsletter-band__form .wpa-nl__msg.is-ok { color: var(--wp--preset--color--ink-faint); }
.wpa-newsletter-band__form .wpa-nl__msg.is-error { color: #ff9b8a; }

.wpa-blog-empty {
	text-align: center;
	color: var(--wp--preset--color--ink-muted);
	padding: 48px 0;
}

/* --------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
	.wpa-post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 921px) {
	.wpa-blog-wrap { padding: 0 24px; }

	.wpa-featured {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.wpa-featured__body { padding: 28px 24px; }
	.wpa-featured__title { font-size: 24px; }

	.wpa-newsletter-band {
		grid-template-columns: 1fr;
		padding: 32px 24px;
		gap: 24px;
	}
}

@media (max-width: 680px) {
	.wpa-post-grid { grid-template-columns: 1fr; }

	.wpa-blog-header { padding: 48px 0 32px; }
	.wpa-blog-section { padding: 24px 0 48px; }

	.wpa-newsletter-band__form .wpa-nl__row { flex-direction: column; }
	.wpa-newsletter-band__form button { height: 48px; }
}

/* ============================================================
 * Single post
 * ============================================================ */

.wpa-blog-wrap--narrow { max-width: 820px; }
.wpa-blog-wrap--cover  { max-width: 960px; }

.wpa-article-header {
	background: radial-gradient(120% 80% at 50% -20%, var(--wp--preset--color--primary-subtle) 0%, var(--wp--preset--color--surface) 55%);
	padding: 44px 0 8px;
}

.wpa-breadcrumb {
	font-size: 14px;
	color: var(--wp--preset--color--ink-subtle);
	margin-bottom: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.wpa-breadcrumb a { color: var(--wp--preset--color--ink-subtle); text-decoration: none; }
.wpa-breadcrumb a:hover { color: var(--wp--preset--color--primary); }
.wpa-breadcrumb__current { color: var(--wp--preset--color--ink-secondary); }

.wpa-article-header h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(30px, 4vw, 42px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	margin: 18px 0 20px;
}

.wpa-article-lead {
	font-size: 19px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 28px;
}

.wpa-article-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--wp--preset--color--stroke-subtle);
}

.wpa-byline--lg .wpa-byline__avatar {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
}

.wpa-byline--lg .wpa-byline__text strong { font-size: 15px; }

/* ---------------------------------------------------------- Share */

.wpa-share { display: flex; gap: 8px; }

.wpa-share__btn {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--stroke);
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink-subtle);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
}

.wpa-share__copy { font-size: 12px; font-weight: 600; width: auto; padding: 0 12px; }

.wpa-share__btn:hover,
.wpa-share__btn:focus {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.wpa-share__btn.is-copied {
	border-color: var(--wp--preset--color--success);
	color: var(--wp--preset--color--success);
}

/* ---------------------------------------------------------- Cover */

.wpa-article-cover { padding: 32px 0; }

.wpa-article-cover__img {
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(20, 22, 40, .10);
	display: block;
}

/* ----------------------------------------------------------- Body */

.wpa-article-body { padding: 16px 0 64px; }

.wpa-article-grid {
	display: grid;
	/*
	 * minmax(0, 1fr), not 1fr. A plain 1fr is minmax(auto, 1fr) and its auto
	 * minimum honours the child's min-content width - existing posts wrap their
	 * content in a Spectra alignfull container, which blew the column out to
	 * ~4000px and pushed the sidebar off-screen.
	 */
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 56px;
	align-items: start;
}

.wpa-prose { min-width: 0; }

/*
 * Full-width blocks inside the article column. Existing content is built with
 * Spectra containers set to alignfull; inside a constrained article they must
 * behave as normal-width blocks rather than breaking out to the viewport.
 */
.wpa-prose .alignfull,
.wpa-prose .alignwide,
.wpa-prose .uagb-is-root-container {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: auto;
	right: auto;
}

/*
 * Nested Spectra containers in older posts keep a horizontal margin from the
 * previous design while still being laid out at full width, so below the
 * tablet breakpoint they sit outside the article column - 6px past the
 * viewport at 600px on one post. The margin is decorative indentation; it is
 * dropped once the column is narrow enough for it to cost real width.
 */
@media (max-width: 781px) {
	.wpa-prose .wp-block-uagb-container .wp-block-uagb-container {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

.wpa-prose .uagb-container-inner-blocks-wrap {
	max-width: 100%;
	width: 100%;
}

/* Article typography, mirroring the comp's .prose rules. */
.wpa-prose p {
	font-size: 17px;
	line-height: 1.75;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0 0 22px;
}

.wpa-prose h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 27px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 44px 0 16px;
	letter-spacing: -0.01em;
	scroll-margin-top: 96px;
}

.wpa-prose h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 32px 0 12px;
	scroll-margin-top: 96px;
}

/*
 * Target the editor's list block specifically. A bare descendant selector also
 * hits plugin UI lists; a direct-child selector misses real content, which is
 * nested inside Spectra container blocks rather than sitting directly under
 * the article element.
 */
.wpa-prose ul.wp-block-list {
	/*
	 * !important is needed here, not preferred: the child theme's legacy
	 * style.css carries `.single-post-data .wp-block-list { margin-left: 60px
	 * !important }` from the previous design, which fights the 28px tick
	 * indent. Vertical rhythm is left to the Spectra container's 20px flex gap
	 * - it zeroes block margins, so adding one back would double the spacing.
	 */
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0;
	list-style: none;
}

.wpa-prose ul.wp-block-list > li {
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-secondary);
	padding-left: 28px;
	position: relative;
	margin-bottom: 10px;
}

.wpa-prose ul.wp-block-list > li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* Nested lists indent rather than repeating the tick treatment. */
.wpa-prose ul.wp-block-list ul {
	margin: 10px 0 0;
	padding-left: 0;
	list-style: none;
}

/* Ordered lists get the comp's numbered tiles - see Numbered steps below. */
.wpa-prose ol.wp-block-list > li {
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-secondary);
}

.wpa-prose hr.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--stroke-card);
	margin: 36px 0;
	opacity: 1;
}

.wpa-prose a { font-weight: 600; color: var(--wp--preset--color--primary); }

.wpa-prose img { max-width: 100%; height: auto; border-radius: 14px; }

.wpa-prose figure { margin: 0 0 28px; }

.wpa-prose figcaption {
	font-size: 13px;
	color: var(--wp--preset--color--ink-subtle);
	text-align: center;
	margin-top: 10px;
}

/* Quotes, callouts and tables are defined once, under ARTICLE CONTENT
 * TREATMENTS at the foot of this file. */

.wpa-prose > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ Inline CTA */

.wpa-article-cta {
	background: var(--wp--preset--color--ink);
	border-radius: 18px;
	padding: 36px 40px;
	margin-top: 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.wpa-article-cta h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--wp--preset--color--surface);
	margin: 0 0 6px;
}

.wpa-article-cta p {
	font-size: 15px;
	color: var(--wp--preset--color--ink-faint);
	margin: 0;
}

/*
 * Qualified with the article scope on purpose. This button sits inside the
 * prose column, where `.wpa-prose a` sets the link colour to primary at
 * (0,1,1) - one class more than this selector carried on its own, which left
 * the label indigo on an indigo button and so invisible.
 */
.wpa-prose a.wpa-article-cta__btn {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-size: 15px;
	font-weight: 600;
	padding: 14px 26px;
	border-radius: 11px;
	white-space: nowrap;
	text-decoration: none;
}

.wpa-prose a.wpa-article-cta__btn:hover { background: var(--wp--preset--color--primary-hover); color: var(--wp--preset--color--surface); }

/* --------------------------------------------------------- Sidebar */

.wpa-article-side { position: sticky; top: 96px; }

.wpa-side-card {
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 16px;
	padding: 24px;
}

.wpa-side-card + .wpa-side-card { margin-top: 16px; }

.wpa-side-card__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-subtle);
	margin: 0 0 16px;
}

.wpa-toc { display: flex; flex-direction: column; gap: 12px; }

.wpa-toc__link {
	font-size: 14px;
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
	line-height: 1.4;
}

.wpa-toc__link:hover,
.wpa-toc__link.is-active {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.wpa-toc__link--h3 { padding-left: 12px; font-size: 13px; }

/* Touch target for the two sidebar link lists - padding in, equal negative
 * margin out, so the rail's spacing is unchanged. */
.wpa-toc__link,
.wpa-side-card__link {
	padding-block: 3px;
	margin-block: -3px;
}

.wpa-side-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	margin: 0 0 6px;
}

.wpa-side-card__text {
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 14px;
}

.wpa-side-card__link {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

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

.wpa-related {
	padding: 64px 0;
	background: var(--wp--preset--color--surface-raised);
	border-top: 1px solid var(--wp--preset--color--stroke-subtle);
}

.wpa-related__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 28px;
}

/* ------------------------------------------------------ Responsive */

@media (max-width: 1024px) {
	.wpa-article-grid { grid-template-columns: 1fr; gap: 32px; }
	.wpa-article-side { position: static; }
	.wpa-side-card { display: none; }
	.wpa-side-card:first-child { display: block; }
}

@media (max-width: 680px) {
	.wpa-article-meta { flex-direction: column; align-items: flex-start; }
	.wpa-article-cta { padding: 24px; }
	.wpa-article-cta__btn { width: 100%; text-align: center; }
	.wpa-prose h2 { font-size: 23px; margin: 32px 0 12px; }
	.wpa-article-lead { font-size: 17px; }
}

/* ---------------------------------------------- Article body patterns */

/* Tip callout. The plain quote block gets the same treatment, so authors can
   reach for either; this class exists so a tip is explicit in the editor. */
.wpa-prose .wpa-tip {
	background: var(--wp--preset--color--primary-subtle);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 0 12px 12px 0;
	padding: 20px 24px;
	margin: 0 0 28px;
}

.wpa-prose .wpa-tip p { margin: 0; font-size: 15px; line-height: 1.6; }
.wpa-prose .wpa-tip strong { color: var(--wp--preset--color--ink); }

.wpa-prose .wpa-shot img { border-radius: 14px; width: 100%; height: auto; }

.wpa-prose .wpa-video { margin: 0 0 28px; }
.wpa-prose .wpa-video iframe { border-radius: 14px; width: 100%; }

.wpa-prose .wpa-inline-cta {
	border-radius: 18px;
	padding: 32px 36px;
	margin: 36px 0;
}

.wpa-prose .wpa-inline-cta h3 { margin: 0 0 6px; }
.wpa-prose .wpa-inline-cta p  { margin: 0 0 18px; }

/* ------------------------------------------- Spectra blocks in articles
 * Existing posts are built with Spectra (UAGB) blocks - FAQ accordions,
 * galleries, buttons and advanced headings - which carry the previous
 * design's styling. These rules bring them into the article design without
 * touching post content, so every post using them updates at once.
 */

/* Advanced heading behaves like a prose h2. */
.wpa-prose .uagb-heading-text {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 27px !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--ink) !important;
	letter-spacing: -0.01em;
	margin: 44px 0 16px !important;
	scroll-margin-top: 96px;
}

.wpa-prose .uagb-desc-text {
	font-size: 17px !important;
	line-height: 1.75 !important;
	color: var(--wp--preset--color--ink-secondary) !important;
}

/* FAQ accordion, matching the homepage FAQ card treatment. */
.wpa-prose .uagb-faq-child__outer-wrap,
.wpa-prose .uagb-faq-item {
	border: 1px solid var(--wp--preset--color--stroke-card) !important;
	border-radius: 12px !important;
	background: var(--wp--preset--color--surface) !important;
	margin-bottom: 12px !important;
	overflow: hidden;
}

.wpa-prose .uagb-question {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--ink) !important;
	padding: 18px 22px !important;
}

.wpa-prose .uagb-faq-content {
	font-size: 15px !important;
	line-height: 1.7 !important;
	color: var(--wp--preset--color--ink-muted) !important;
	padding: 0 22px 18px !important;
}

.wpa-prose .uagb-faq-questions-button { color: var(--wp--preset--color--ink-subtle) !important; }

/* Gallery and inline images get the screenshot treatment. */
.wpa-prose .uagb-image-gallery img,
.wpa-prose .wp-block-uagb-image img {
	border-radius: 14px;
	width: 100%;
	height: auto;
}

/* Spectra buttons adopt the design system button. */
.wpa-prose .uagb-buttons-repeater.wp-block-button__link {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--surface) !important;
	border-radius: 12px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	padding: 14px 26px !important;
}

/*
 * The colour is restated here rather than left to the base rule above.
 *
 * Astra's inline CSS carries `.wp-block-button .wp-block-button__link:hover
 * { color: #4338CA }` - a dark indigo intended for a button that turns white on
 * hover. These buttons keep a purple background, so if that rule ever wins the
 * label lands at 1.26 contrast and effectively disappears. It currently loses to
 * the base rule's !important, but only because that rule happens to apply in the
 * hover state too; pinning both properties here means the hover state does not
 * depend on that.
 */
.wpa-prose .uagb-buttons-repeater.wp-block-button__link:hover,
.wpa-prose .uagb-buttons-repeater.wp-block-button__link:focus {
	background: var(--wp--preset--color--primary-hover) !important;
	color: var(--wp--preset--color--surface) !important;
}

/* ============================================================
 * ARTICLE CONTENT TREATMENTS
 *
 * Everything the blog-post comp can put inside the article column, so a
 * writer never has to reach for custom markup. Each treatment is attached to
 * a core block wherever one exists - lists, tables, quotes, details, gallery,
 * file, code - and registered as a block style in inc/blog.php, so it is
 * picked from the editor's Styles panel rather than by typing a class.
 * ============================================================ */

/*
 * Comp values with no palette token. They appear only in these article
 * treatments, so they are named here instead of enlarging the editor palette,
 * which authors see on every colour control site-wide.
 */
:is(.wpa-prose, .editor-styles-wrapper) {
	--wpa-quote-rule: #d9dbe6;
	--wpa-pill-bg: #f4f5f9;
	--wpa-pill-ink: #4b4f63;
	--wpa-table-rule: #f0f1f6;
	--wpa-table-head-ink: #6b6f85;
	--wpa-compare-absent: #c9ccd8;
	--wpa-code-bar: #0f1120;
	--wpa-code-ink: #e6e8f2;
	--wpa-code-meta: #8b90b5;
	--wpa-warning-ink: var(--wp--preset--color--accent-strong);
}

/* ------------------------------------------------ Numbered steps (ol) */

/*
 * The comp numbers ordered lists with indigo tiles rather than plain digits.
 * A CSS counter is used because the browser's own marker cannot be given a
 * background; `list-style: none` removes the default so they do not double up.
 */
:is(.wpa-prose, .editor-styles-wrapper) ol.wp-block-list {
	counter-reset: wpa-step;
	list-style: none;
	margin: 0 0 22px;
	padding-left: 0;
}

:is(.wpa-prose, .editor-styles-wrapper) ol.wp-block-list > li {
	counter-increment: wpa-step;
	position: relative;
	padding-left: 44px;
	margin-bottom: 14px;
}

:is(.wpa-prose, .editor-styles-wrapper) ol.wp-block-list > li::before {
	content: counter(wpa-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Nested ordered lists step back to plain digits so the tiles stay meaningful. */
:is(.wpa-prose, .editor-styles-wrapper) ol.wp-block-list ol {
	counter-reset: none;
	list-style: decimal;
	padding-left: 22px;
	margin: 10px 0 0;
}

:is(.wpa-prose, .editor-styles-wrapper) ol.wp-block-list ol > li { padding-left: 0; }
:is(.wpa-prose, .editor-styles-wrapper) ol.wp-block-list ol > li::before { content: none; }

/* ------------------------------------------- Legacy Spectra buttons
 *
 * The buttons in pre-redesign content carry a 1px border from their own block
 * settings. On most pages it is indigo on an indigo fill and invisible; on the
 * star-rating post it is #333, which draws a dark ring round a filled button -
 * the same defect Astra's global button border caused on the home page.
 *
 * Every bordered Spectra button in this content is filled - a survey of the
 * legacy pages, posts and docs found no outlined one - so removing the border
 * takes nothing away that the design intends.
 *
 * The selector states the full path because Spectra's generated stylesheet uses
 * four classes of its own (`.wp-block-uagb-buttons .uagb-block-<id>
 * .uagb-buttons-repeater.wp-block-button__link`). A shorter rule ties with it or
 * loses, and the first attempt here did exactly that: it reset the colour and
 * left the width, so the border went white instead of going away.
 */
:is(.wpa-prose, .editor-styles-wrapper)
.wp-block-uagb-buttons .uagb-button__wrapper .uagb-buttons-repeater.wp-block-button__link {
	border: 0;
}

/* ----------------------------------------------------- Code and keys */

:is(.wpa-prose, .editor-styles-wrapper) code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	background: var(--wp--preset--color--surface-sunken);
	color: var(--wp--preset--color--primary-hover);
	padding: 2px 7px;
	border-radius: 6px;
}

/* An inline snippet with no spaces in it - an HTML tag, a long function name -
 * has nowhere to wrap, and on the text-field guide one pushed the page 28px past
 * a 390px viewport. Block code scrolls inside its own frame and is left alone. */
:is(.wpa-prose, .editor-styles-wrapper) :not(pre) > code { overflow-wrap: anywhere; }

:is(.wpa-prose, .editor-styles-wrapper) pre.wp-block-code {
	background: var(--wp--preset--color--ink);
	border-radius: 14px;
	padding: 0;
	margin: 0 0 26px;
	overflow: hidden;
}

:is(.wpa-prose, .editor-styles-wrapper) pre.wp-block-code code {
	display: block;
	background: none;
	color: var(--wpa-code-ink);
	padding: 20px 22px;
	font-size: 13.5px;
	line-height: 1.7;
	border-radius: 0;
	overflow-x: auto;
}

/*
 * Title bar above a code block: three window dots and a filename. It is a
 * sibling group rather than a pseudo-element so the filename stays editable,
 * and negative margin closes the gap the code block would otherwise leave.
 */
:is(.wpa-prose, .editor-styles-wrapper) .wpa-codebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--wpa-code-bar);
	padding: 10px 16px;
	border-radius: 14px 14px 0 0;
	margin: 0;
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-codebar + pre.wp-block-code {
	border-radius: 0 0 14px 14px;
	margin-top: 0;
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-codebar__dots { display: flex; gap: 6px; }

:is(.wpa-prose, .editor-styles-wrapper) .wpa-codebar__dots span {
	width: 11px;
	height: 11px;
	border-radius: 999px;
	display: block;
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-codebar__dots span:nth-child(1) { background: #ff5f57; }
:is(.wpa-prose, .editor-styles-wrapper) .wpa-codebar__dots span:nth-child(2) { background: #febc2e; }
:is(.wpa-prose, .editor-styles-wrapper) .wpa-codebar__dots span:nth-child(3) { background: #28c840; }

:is(.wpa-prose, .editor-styles-wrapper) .wpa-codebar__name {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: var(--wpa-code-meta);
	margin: 0;
}

:is(.wpa-prose, .editor-styles-wrapper) kbd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wpa-quote-rule);
	border-bottom-width: 2px;
	border-radius: 6px;
	padding: 2px 8px;
	color: var(--wp--preset--color--ink-secondary);
}

/* --------------------------------------------------------- Tables */

/*
 * Horizontal rules only - the comp has no vertical borders. This overrides the
 * earlier generic bordered-cell rule, which predates the blog-post comp.
 */
:is(.wpa-prose, .editor-styles-wrapper) .wp-block-table { margin: 0 0 26px; }

:is(.wpa-prose, .editor-styles-wrapper) .wp-block-table table,
:is(.wpa-prose, .editor-styles-wrapper) table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0 0 26px;
	font-size: 15px;
}

/* A wide table scrolls inside its own figure rather than stretching the page. */
@media (max-width: 781px) {
	:is(.wpa-prose, .editor-styles-wrapper) .wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	:is(.wpa-prose, .editor-styles-wrapper) .wp-block-table table { min-width: 560px; }
}

:is(.wpa-prose, .editor-styles-wrapper) th {
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wpa-table-head-ink);
	font-weight: 700;
	padding: 12px 16px;
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--stroke-card);
}

:is(.wpa-prose, .editor-styles-wrapper) td {
	padding: 13px 16px;
	border: 0;
	border-bottom: 1px solid var(--wpa-table-rule);
	color: var(--wp--preset--color--ink-secondary);
}

:is(.wpa-prose, .editor-styles-wrapper) tr:last-child td { border-bottom: none; }

/* Comparison variant: every column but the first is centred, and a lone
 * em dash or tick reads as absent/present without needing an icon. */
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-compare th:not(:first-child),
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-compare td:not(:first-child) { text-align: center; }

:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-compare td:not(:first-child) {
	color: var(--wpa-compare-absent);
	font-weight: 700;
}

/* A tick is present-state; the em dash keeps the muted absent colour. */
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-compare td.wpa-yes { color: var(--wp--preset--color--success); }

/* ------------------------------------------------ Quotes and callouts */

/*
 * A quote is a quote again. It had been carrying the tip-callout styling,
 * which the blog-post comp shows as a separate treatment - so callouts moved
 * to quote block styles below and this returned to the comp's blockquote.
 */
:is(.wpa-prose, .editor-styles-wrapper) blockquote {
	background: none;
	border: 0;
	border-left: 4px solid var(--wpa-quote-rule);
	border-radius: 0;
	margin: 0 0 26px;
	padding: 4px 0 4px 24px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	font-style: italic;
}

:is(.wpa-prose, .editor-styles-wrapper) blockquote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/*
 * Callouts. `.wpa-tip` is the class the original tip pattern wrote; it is kept
 * alongside the block-style class so posts written before the styles existed
 * keep rendering correctly.
 */
:is(.wpa-prose, .editor-styles-wrapper) .wpa-tip,
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-tip,
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-warning,
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-note {
	border-radius: 0 12px 12px 0;
	border-left: 4px solid;
	padding: 18px 22px;
	margin: 0 0 26px;
	font-style: normal;
	font-size: 15px;
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-tip p,
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-tip p,
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-warning p,
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-note p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0;
}

/* The label is the first paragraph's leading strong, so no extra block is
 * needed to get the coloured heading line the comp shows. */
:is(.wpa-prose, .editor-styles-wrapper) .wpa-tip p:first-child strong,
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-tip p:first-child strong,
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-warning p:first-child strong,
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-note p:first-child strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 5px;
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-tip,
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-tip {
	background: var(--wp--preset--color--primary-subtle);
	border-left-color: var(--wp--preset--color--primary);
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-tip p:first-child strong,
:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-tip p:first-child strong { color: var(--wp--preset--color--primary); }

:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-warning {
	background: var(--wp--preset--color--accent-subtle);
	border-left-color: var(--wp--preset--color--accent);
}

:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-warning p:first-child strong { color: var(--wpa-warning-ink); }

:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-note {
	background: var(--wp--preset--color--success-subtle);
	border-left-color: var(--wp--preset--color--success);
}

:is(.wpa-prose, .editor-styles-wrapper) .is-style-wpa-note p:first-child strong { color: var(--wp--preset--color--success); }

/* ------------------------------------------------ Prerequisite pills */

:is(.wpa-prose, .editor-styles-wrapper) .wpa-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 26px;
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-pills p,
:is(.wpa-prose, .editor-styles-wrapper) .wpa-pills li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wpa-pill-ink);
	background: var(--wpa-pill-bg);
	padding: 8px 14px;
	border-radius: 999px;
	margin: 0;
	line-height: 1.2;
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-pills .wpa-pill-success { color: var(--wp--preset--color--success); background: var(--wp--preset--color--success-subtle); }
:is(.wpa-prose, .editor-styles-wrapper) .wpa-pills .wpa-pill-primary { color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary-subtle); }

/* ------------------------------------------------------------ Tabs */

:is(.wpa-prose, .editor-styles-wrapper) .wpa-tabs {
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 14px;
	overflow: hidden;
	margin: 0 0 26px;
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-tabs__list {
	display: flex;
	gap: 4px;
	background: var(--wp--preset--color--surface-raised);
	padding: 8px;
	border-bottom: 1px solid var(--wp--preset--color--stroke-card);
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-tabs__tab {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--ink-muted);
	background: none;
	border: 0;
	padding: 8px 16px;
	border-radius: 9px;
	cursor: pointer;
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-tabs__tab[aria-selected="true"] {
	color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--primary);
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-tabs__panel { padding: 22px; }
:is(.wpa-prose, .editor-styles-wrapper) .wpa-tabs__panel[hidden] { display: none; }
:is(.wpa-prose, .editor-styles-wrapper) .wpa-tabs__panel p { margin: 0; font-size: 16px; line-height: 1.7; }

/* --------------------------------------------------- FAQ accordion */

/*
 * core/details renders a native <details>, so the open and closed states come
 * free and work without JavaScript. The default marker is replaced with the
 * comp's + / - on the right.
 */
:is(.wpa-prose, .editor-styles-wrapper) details.wp-block-details {
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 12px;
	padding: 18px 22px;
	margin: 0 0 10px;
}

:is(.wpa-prose, .editor-styles-wrapper) details.wp-block-details[open] { border-color: var(--wp--preset--color--primary); }

:is(.wpa-prose, .editor-styles-wrapper) details.wp-block-details summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

:is(.wpa-prose, .editor-styles-wrapper) details.wp-block-details summary::-webkit-details-marker { display: none; }

:is(.wpa-prose, .editor-styles-wrapper) details.wp-block-details summary::after {
	content: "\FF0B";
	color: var(--wp--preset--color--ink-subtle);
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
}

:is(.wpa-prose, .editor-styles-wrapper) details.wp-block-details[open] summary::after {
	content: "\FF0D";
	color: var(--wp--preset--color--primary);
}

:is(.wpa-prose, .editor-styles-wrapper) details.wp-block-details p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin: 12px 0 0;
}

/* --------------------------------------------------------- Gallery */

:is(.wpa-prose, .editor-styles-wrapper) .wp-block-gallery { gap: 12px; margin: 0 0 26px; }
:is(.wpa-prose, .editor-styles-wrapper) .wp-block-gallery img { border-radius: 14px; }

:is(.wpa-prose, .editor-styles-wrapper) .wp-block-gallery figcaption { margin-top: 0; }

/* ------------------------------------------------- Download / file */

/*
 * core/file gives a link plus a download button. The comp draws one card, so
 * the button is hidden and the whole card is the link.
 */
:is(.wpa-prose, .editor-styles-wrapper) .wp-block-file {
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 14px;
	padding: 18px 22px;
	margin: 0 0 26px;
	font-size: 15px;
}

:is(.wpa-prose, .editor-styles-wrapper) .wp-block-file::before {
	content: "\2913";
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

:is(.wpa-prose, .editor-styles-wrapper) .wp-block-file a:not(.wp-block-file__button) {
	flex: 1;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* The whole card is the link, so the download button reads as a plain label.
 * It inherits a button border from theme.json's element styles, which has to
 * be cleared explicitly rather than just left unset. */
:is(.wpa-prose, .editor-styles-wrapper) .wp-block-file .wp-block-file__button {
	background: none;
	color: var(--wp--preset--color--primary);
	font-size: 14px;
	font-weight: 600;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* --------------------------------------------------------- See also */

:is(.wpa-prose, .editor-styles-wrapper) .wpa-seealso {
	margin: 44px 0 0;
	border-top: 1px solid var(--wp--preset--color--stroke-subtle);
	padding-top: 28px;
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-seealso__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-subtle);
	margin: 0 0 16px;
}

:is(.wpa-prose, .editor-styles-wrapper) .wpa-seealso ul.wp-block-list { margin: 0; }

:is(.wpa-prose, .editor-styles-wrapper) .wpa-seealso ul.wp-block-list > li {
	padding-left: 0;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
}

/* The tick used elsewhere would read as a checklist; these are onward links. */
:is(.wpa-prose, .editor-styles-wrapper) .wpa-seealso ul.wp-block-list > li::before { content: "\2192\00a0"; position: static; }

/* ------------------------------------------------------- Author card */

/* Front-end only: both of these are drawn by the template, never authored,
 * so they are not scoped to the editor canvas like the treatments above. */
.wpa-prose .wpa-authorbio {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 32px;
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 16px;
	padding: 26px;
}

.wpa-prose .wpa-authorbio__avatar {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpa-prose .wpa-authorbio__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.wpa-prose .wpa-authorbio__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin: 4px 0 0;
}

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

.wpa-prose .wpa-comments { margin-top: 32px; }

.wpa-prose .wpa-comments__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 18px;
}

.wpa-prose .wpa-comments__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0 0 24px;
	padding: 0;
	counter-reset: none;
}

/* The list shares ol styling with the article body, which would otherwise
 * give every comment a numbered tile. */
.wpa-prose .wpa-comments__list > li::before { content: none; }

.wpa-prose .wpa-comment {
	display: flex;
	gap: 14px;
	padding-left: 0;
	margin: 0;
}

.wpa-prose .wpa-comment .children {
	list-style: none;
	margin: 18px 0 0;
	padding: 0 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.wpa-prose .wpa-comment__avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

.wpa-prose .wpa-comment__avatar--primary { background: var(--wp--preset--color--primary-subtle); color: var(--wp--preset--color--primary); }
.wpa-prose .wpa-comment__avatar--success { background: var(--wp--preset--color--success-subtle); color: var(--wp--preset--color--success); }
.wpa-prose .wpa-comment__avatar--accent  { background: var(--wp--preset--color--accent-subtle);  color: var(--wpa-warning-ink, #c96f1e); }

.wpa-prose .wpa-comment__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
}

.wpa-prose .wpa-comment__meta strong { font-size: 14px; font-weight: 700; color: var(--wp--preset--color--ink); }
.wpa-prose .wpa-comment__meta span   { font-size: 12px; color: var(--wp--preset--color--ink-subtle); }

.wpa-prose .wpa-comment__body p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0;
}

.wpa-prose .wpa-commentform,
.wpa-prose .comment-respond {
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 14px;
	padding: 20px;
}

.wpa-prose .comment-respond textarea {
	width: 100%;
	min-height: 80px;
	border: 0;
	outline: none;
	resize: vertical;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--ink);
	background: none;
	padding: 0;
}

.wpa-prose .comment-respond .comment-form-comment { margin: 0 0 12px; }

.wpa-prose .comment-respond .form-submit {
	display: flex;
	justify-content: flex-end;
	margin: 0;
}

/* The id is needed to outrank Astra's own `#comments .submit`. */
.wpa-prose #comments .comment-respond .submit {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	border: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 10px;
	cursor: pointer;
}

.wpa-prose #comments .comment-respond .submit:hover { background: var(--wp--preset--color--primary-hover); }

/* Identity fields only appear for logged-out visitors; keep them legible
 * rather than restyling a form most readers will never see. */
.wpa-prose .comment-respond .comment-form-author input,
.wpa-prose .comment-respond .comment-form-email input,
.wpa-prose .comment-respond .comment-form-url input {
	width: 100%;
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	margin-top: 4px;
}

.wpa-prose .comment-respond .comment-form-cookies-consent { font-size: 13px; color: var(--wp--preset--color--ink-muted); }

/* Note: .wpa-featured__title and .wpa-post-card__title are h2/h3 for document
 * structure. Both already declare explicit margins above, which beat the
 * browser's heading defaults - no reset is needed, and adding one flattened
 * the card title's 14px lead-in. */

/* ---------------------------------------------------------------------------
 * Pre-redesign pages routed through the article layout
 *
 * These pages are the same kind of document as the legacy posts above and share
 * every rule in this file. Only their heading alignment differs: the old design
 * centred section headings, and 21 of the 32 on a typical page carry the
 * editor's own has-text-align-center class, which reads as a mistake beside
 * flush-left prose.
 *
 * Specificity is raised rather than reaching for !important - the centring comes
 * from that class at (0,1,0) and from Spectra's per-block rule at (0,2,0), so a
 * (0,3,0) selector settles it without making the rule harder to override later.
 * ------------------------------------------------------------------------ */

.wpa-prose--legacy .wp-block-heading.has-text-align-center,
.wpa-prose--legacy .wp-block-uagb-advanced-heading .uagb-heading-text,
.wpa-prose--legacy .wp-block-uagb-advanced-heading .uagb-desc-text {
	text-align: left;
}

/*
 * Side-by-side sections, stacked.
 *
 * These pages pair a screenshot with its explanation in two columns. That was
 * built for a full-width page; inside the article column each side gets about
 * 317px, which is too narrow to read the screenshot or the prose. Stacking gives
 * both the full measure.
 *
 * :has() picks out containers that hold two or more child containers, so genuine
 * side-by-side pairs are stacked and inline arrangements - an icon beside its
 * label - are left alone. It also pulls the image column first regardless of
 * which side it was authored on, since the source alternates. Where :has() is
 * unsupported the authored order simply stands, which is today's behaviour.
 */

.wpa-prose .wp-block-uagb-container:has(> .wp-block-uagb-container + .wp-block-uagb-container) {
	flex-direction: column;
	align-items: stretch;
}

/*
 * width:auto, not 100%. Some of these columns carry their own left margin from
 * the old layout; at 100% the box is the full column and the margin pushes it
 * past the edge. auto lets the stretch alignment fill what is left after the
 * margin, so an indented block stays indented instead of overflowing.
 */
.wpa-prose .wp-block-uagb-container:has(> .wp-block-uagb-container + .wp-block-uagb-container) > .wp-block-uagb-container {
	width: auto;
	max-width: 100%;
	flex-basis: auto;
}

.wpa-prose .wp-block-uagb-container:has(> .wp-block-uagb-container + .wp-block-uagb-container) > .wp-block-uagb-container:has(img) {
	order: -1;
}

/* Images fill the stacked column rather than keeping their two-column size. */
.wpa-prose--legacy .wp-block-uagb-container img,
.wpa-prose--legacy .wp-block-uagb-image img {
	width: 100%;
	height: auto;
}

/*
 * Fixed widths from the old canvas.
 *
 * Spectra wrote pixel widths onto these containers - 655px, 685px, 740px - sized
 * for a full-bleed page. In the article column they overhang by 5 to 15px, and
 * where a container also carries a 30px left margin the two add up. Letting the
 * width resolve naturally keeps any authored indent while holding the content
 * inside the measure. (0,2,0) beats Spectra's own (0,1,0), so no !important.
 */

.wpa-prose--legacy .wp-block-uagb-container,
.wpa-prose--legacy .wp-block-image {
	width: auto;
	max-width: 100%;
}

/*
 * Core column blocks, stacked.
 *
 * The Spectra rule above does not reach these: the pricing examples and several
 * of the use-case sections are built with core/columns, which is a different
 * block with its own flex model. Left alone they stay side by side at every
 * width, and in a 740px column each half is narrow enough to break headings
 * mid-word ("Professiona / l Headlines").
 *
 * This mirrors what core itself does below 782px - wrap, then force each column
 * to a full basis - so the result is the layout core would produce on a narrow
 * screen, applied at every width. !important is core's own approach here and is
 * needed to beat the inline flex-basis the editor writes onto each column.
 */

.wpa-prose .wp-block-columns {
	/*
	 * !important is needed, not preferred: the child theme's legacy style.css
	 * carries `.wp-block-columns { flex-wrap: nowrap !important }` from the
	 * previous design. Without matching it the columns keep a full basis and are
	 * still forced onto one line, so each half shrinks instead of stacking.
	 */
	flex-wrap: wrap !important;
}

.wpa-prose .wp-block-columns > .wp-block-column {
	flex-basis: 100% !important;
	margin-left: 0;
}

/* Image before its explanation, as with the Spectra pairs. */
.wpa-prose .wp-block-columns > .wp-block-column:has(img) {
	order: -1;
}

/*
 * Alternating section tints, dropped.
 *
 * The old design separated sections with full-bleed cream and lavender bands.
 * At page width that reads as structure; inside a 740px article column the same
 * blocks are coloured slabs with hard edges partway down the text, which is what
 * they now look like. The reference article separates sections with headings and
 * space, so these fall back to the page background and their band padding goes
 * with them - the headings already carry a 44px lead-in.
 *
 * Scoped to alignfull, which is what the band containers are: cards and callouts
 * that were authored at normal width keep their background.
 */

.wpa-prose--legacy .wp-block-uagb-container.alignfull {
	background-color: transparent;
	background-image: none;
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * The inner wrapper Spectra inserts.
 *
 * Some containers hold their children directly; others put them inside a
 * .uagb-container-inner-blocks-wrap. The rule above uses a direct-child :has(),
 * so it only ever matched the first kind - which is why some sections stacked
 * and others, like the use-case pairs, stayed side by side at 355px each.
 *
 * Targeting the wrapper itself covers both shapes. Children whose direction is
 * already column are unaffected.
 */

.wpa-prose .uagb-container-inner-blocks-wrap {
	/*
	 * !important is needed here: Spectra writes the direction per post as
	 * `.wp-block-uagb-container.uagb-is-root-container .uagb-container-inner-blocks-wrap`,
	 * which is (0,3,0) and outranks this selector's (0,2,0). Matching that
	 * specificity would mean naming a plugin-generated wrapper class that is
	 * likelier to change than this declaration is.
	 */
	flex-direction: column !important;
	align-items: stretch;
}

.wpa-prose .uagb-container-inner-blocks-wrap > * {
	width: auto;
	max-width: 100%;
	flex-basis: auto;
}

.wpa-prose .uagb-container-inner-blocks-wrap > *:has(img) {
	order: -1;
}

/*
 * Column padding, once stacked.
 *
 * Each column carries an inline padding-top/bottom - 81px on the heading side,
 * 32px on the body side - which balanced the two halves when they sat next to
 * each other. Stacked, those paddings meet end to end and leave 160px of empty
 * space between a heading and the text it introduces. The blocks inside already
 * carry their own margins, so the column does not need to add any.
 *
 * !important because the value is an inline style written by the editor.
 */

.wpa-prose .wp-block-columns > .wp-block-column {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/*
 * One left edge.
 *
 * The old design indented containers by assorted amounts to compose its
 * full-width sections, so in a single column the text starts at six different
 * offsets - 0, 75, 103, 118 and 131px - and the article reads as ragged. Zeroing
 * the containers' own horizontal spacing puts every paragraph on the same edge
 * as the heading above it.
 *
 * Only the container wrappers are reset. List indentation lives on the list
 * items and is left alone, so the 28px tick inset survives.
 */

.wpa-prose--legacy .wp-block-uagb-container,
.wpa-prose .uagb-container-inner-blocks-wrap,
.wpa-prose--legacy .wp-block-columns,
.wpa-prose .wp-block-columns > .wp-block-column {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Heading insets.
 *
 * Some headings carry 100px of horizontal padding of their own, which centred
 * them over a full-width band. In a single column it just pushes the heading
 * away from the paragraph it introduces, so the inset goes and the heading sits
 * on the same edge as its text.
 */

.wpa-prose--legacy :is(h1, h2, h3, h4, h5, h6) {
	/*
	 * !important because the 100px is an inline style on the heading itself
	 * (`style="padding-left:100px;padding-right:100px"`), which no stylesheet
	 * rule can outrank by specificity alone.
	 */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*
 * Heading hierarchy.
 *
 * The old design set a font size and zeroed the margins inline on each heading.
 * On a legacy page that puts nine h3s at 28px - larger than their own h2 at 27px
 * - alongside others at 26, 22 and 20px, with no space above any of them, so the
 * page reads as one flat run of headings rather than sections and sub-sections.
 *
 * All twenty published posts carry the same inline sizes (125 headings between
 * them), so this is scoped to .wpa-prose rather than to the legacy pages. It is
 * uneven: one post has ten h3s at 28px, another has fifty-seven already correct
 * at 20px and two strays. Restating the scale fixes both cases the same way.
 *
 * These restate the article scale from .wpa-prose h2/h3 above, so the two page
 * types stay identical. !important is unavoidable: the size and margin are
 * inline attributes. The .uagb-heading-text variants are spelled out because the
 * Spectra rule earlier in this file is (0,2,0) and would otherwise outrank a
 * bare tag selector.
 */

.wpa-prose h2,
.wpa-prose h2.uagb-heading-text {
	font-size: 27px !important;
	margin: 44px 0 16px !important;
}

.wpa-prose h3,
.wpa-prose h3.uagb-heading-text {
	font-size: 20px !important;
	margin: 32px 0 12px !important;
}

.wpa-prose h4,
.wpa-prose h4.uagb-heading-text {
	font-size: 17px !important;
	margin: 28px 0 10px !important;
}

/*
 * A title column comes before the text it titles.
 *
 * These sections alternate: some put the heading on the left, some on the right.
 * Side by side that reads fine, but stacked, a right-hand title lands underneath
 * the content it introduces - "Custom Poetry with Base Fee + Word Count" appears
 * after its own formula and examples.
 *
 * The test is a column holding a heading and nothing else, which is exactly the
 * title-on-one-side pattern; a column with prose in it keeps its authored place.
 * An image column is never heading-only, so this does not compete with the
 * image-first rules above.
 */

.wpa-prose .wp-block-columns > .wp-block-column:has(:is(h1, h2, h3, h4, h5, h6)):not(:has(p)):not(:has(li)):not(:has(img)),
.wpa-prose .uagb-container-inner-blocks-wrap > *:has(:is(h1, h2, h3, h4, h5, h6)):not(:has(p)):not(:has(li)):not(:has(img)) {
	order: -1;
}

/*
 * The label inside the button, on hover.
 *
 * Spectra paints these buttons twice: the anchor carries a colour, and so does a
 * .uagb-button__link span nested inside it. Its per-post CSS hovers the span, not
 * the anchor:
 *
 *   .wp-block-uagb-buttons .uagb-block-XXXX .uagb-buttons-repeater:hover
 *     .uagb-button__link { color: var(--ast-global-color-0) }
 *
 * so the anchor stays white while the visible text turns Astra's primary - which
 * is close enough to the button's own purple to read as blank. Styling the anchor
 * alone therefore looks correct when measured and still fails on screen; the span
 * has to be named directly.
 *
 * inherit, not a fixed colour. These buttons come in two shapes: filled ones on a
 * purple background, where the label must be white, and link-style ones on a white
 * card, where white would be invisible. An earlier version of this rule set the
 * label to surface unconditionally and blanked the "Read More" links on the
 * documentation hub. Following the anchor is correct for both, because the
 * anchor's own hover colour is already right in each case.
 */

.wpa-prose .uagb-buttons-repeater:hover .uagb-button__link,
.wpa-prose .uagb-buttons-repeater:focus .uagb-button__link {
	color: inherit !important;
}

.wpa-prose .uagb-buttons-repeater:hover .uagb-button__icon > svg,
.wpa-prose .uagb-buttons-repeater:focus .uagb-button__icon > svg {
	fill: currentColor !important;
}

/*
 * Headings paired with an icon.
 *
 * The article scale gives h2/h3 a generous top margin, which is right for a
 * heading that opens a section and wrong for one sitting beside an icon: the row
 * is display:flex with align-items:center, so the margin is part of the centred
 * box and offsets the visible text by half its value. A 32px top margin puts the
 * title 16px below the icon it belongs to.
 *
 * Both wrappers are named: .wpa-doc-fieldrow is this theme's, and
 * .uagb-ifb-title-wrap is Spectra's own info-box row, which has the same shape.
 */

.wpa-prose :is(.wpa-doc-fieldrow, .uagb-ifb-title-wrap) > :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 !important;
}