/**
 * Article content.
 *
 * Everything an editor writes in Gutenberg lands inside .wpx-prose. Rather
 * than pushing each post into fixed fields — which fights content that
 * genuinely differs post to post — the blocks themselves are styled to match
 * the rest of the theme.
 *
 * Covers: headings, tables, lists, quotes, code, images with captions,
 * buttons, separators, embeds, and the details/summary accordions used for
 * FAQ sections.
 */

/* ==========================================================================
   Rhythm
   ========================================================================== */

.wpx-prose {
	color: var(--wpx-text-muted);
	font-size: var(--wpx-text-base);
	line-height: 1.75;
}

.wpx-prose > * + * { margin-block-start: var(--wpx-space-4); }

.wpx-prose > h2 + *,
.wpx-prose > h3 + * { margin-block-start: var(--wpx-space-3); }

/* ==========================================================================
   Headings
   ========================================================================== */

.wpx-prose h2 {
	position: relative;
	margin-block: var(--wpx-space-7) var(--wpx-space-4);
	padding-inline-start: var(--wpx-space-4);
	font-size: var(--wpx-text-2xl);
	color: var(--wpx-text);
	line-height: 1.25;
}

/* An accent bar rather than an underline: it survives a two-line heading,
   which the underline did not. */
.wpx-prose h2::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.18em;
	bottom: 0.18em;
	width: 4px;
	border-radius: var(--wpx-radius-pill);
	background: linear-gradient( 180deg, var(--wpx-accent), var(--wpx-secondary) );
}

.wpx-prose h3 {
	margin-block: var(--wpx-space-6) var(--wpx-space-3);
	font-size: var(--wpx-text-xl);
	color: var(--wpx-text);
}

.wpx-prose h4 {
	margin-block: var(--wpx-space-5) var(--wpx-space-2);
	font-size: var(--wpx-text-lg);
	color: var(--wpx-text);
}

.wpx-prose h2:first-child,
.wpx-prose h3:first-child { margin-block-start: 0; }

/* ==========================================================================
   Text
   ========================================================================== */

.wpx-prose p { margin: 0; }

.wpx-prose strong,
.wpx-prose b { color: var(--wpx-text); font-weight: var(--wpx-weight-bold); }

.wpx-prose a {
	color: var(--wpx-accent);
	text-decoration: underline;
	text-decoration-color: rgb(from var(--wpx-accent) r g b / 0.35);
	text-underline-offset: 3px;
	transition: color var(--wpx-transition), text-decoration-color var(--wpx-transition);
}

.wpx-prose a:hover {
	color: var(--wpx-accent-hover);
	text-decoration-color: currentColor;
}

/* A centred link line on its own — the "you may also like" pattern — reads
   as a callout rather than a stray sentence. */
.wpx-prose p.has-text-align-center:has(> a:only-child),
.wpx-prose p[style*="text-align:center"]:has(> a:only-child) {
	padding: var(--wpx-space-4);
	background: var(--wpx-surface-2);
	border: 1px solid var(--wpx-border);
	border-inline-start: 3px solid var(--wpx-accent);
	border-radius: var(--wpx-radius);
}

/* ==========================================================================
   Lists
   ========================================================================== */

.wpx-prose ul,
.wpx-prose ol {
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.wpx-prose li {
	position: relative;
	padding-inline-start: var(--wpx-space-6);
	margin-block-end: var(--wpx-space-3);
}

.wpx-prose ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 6px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--wpx-accent);
	transform: rotate(45deg);
}

/* Numbered steps get a real numeral in an accent chip. */
.wpx-prose ol { counter-reset: wpx-step; }

.wpx-prose ol > li { counter-increment: wpx-step; padding-inline-start: var(--wpx-space-7); }

.wpx-prose ol > li::before {
	content: counter(wpx-step);
	position: absolute;
	inset-inline-start: 0;
	top: 0.1em;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	background: var(--wpx-surface-3);
	border: 1px solid var(--wpx-border-strong);
	border-radius: var(--wpx-radius-pill);
	color: var(--wpx-accent);
	font-size: var(--wpx-text-xs);
	font-weight: var(--wpx-weight-bold);
	line-height: 1;
}

.wpx-prose li > ul,
.wpx-prose li > ol { margin-block-start: var(--wpx-space-2); }

/* ==========================================================================
   Tables
   ========================================================================== */

/* Wrapped so a wide spec table scrolls instead of breaking the column. */
.wpx-prose .wp-block-table,
.wpx-prose figure.wp-block-table {
	margin: 0;
	overflow-x: auto;
	border-radius: var(--wpx-radius);
	border: 1px solid var(--wpx-border);
}

.wpx-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wpx-text-sm);
	background: var(--wpx-surface-1);
}

.wpx-prose thead th,
.wpx-prose table tr:first-child th {
	background: linear-gradient( 180deg, var(--wpx-surface-4), var(--wpx-surface-3) );
	color: var(--wpx-text);
	font-weight: var(--wpx-weight-bold);
	font-size: var(--wpx-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: start;
	border-block-end: 2px solid var(--wpx-accent);
}

.wpx-prose th,
.wpx-prose td {
	padding: var(--wpx-space-3) var(--wpx-space-4);
	border-block-end: 1px solid var(--wpx-border);
	vertical-align: top;
}

.wpx-prose tbody tr:nth-child(odd) { background: rgb(from var(--wpx-surface-2) r g b / 0.55); }

.wpx-prose tbody tr:last-child th,
.wpx-prose tbody tr:last-child td { border-block-end: 0; }

.wpx-prose tbody tr { transition: background var(--wpx-transition); }
.wpx-prose tbody tr:hover { background: rgb(from var(--wpx-accent) r g b / 0.07); }

/* First column of a two-column spec table reads as the label. */
.wpx-prose tbody td:first-child,
.wpx-prose tbody th:first-child {
	color: var(--wpx-text);
	font-weight: var(--wpx-weight-medium);
	white-space: nowrap;
}

/* ==========================================================================
   Images and figures
   ========================================================================== */

.wpx-prose figure,
.wpx-prose .wp-block-image { margin: 0; }

.wpx-prose img {
	border-radius: var(--wpx-radius);
	border: 1px solid var(--wpx-border);
}

.wpx-prose figcaption {
	margin-block-start: var(--wpx-space-2);
	font-size: var(--wpx-text-xs);
	color: var(--wpx-text-dim);
	text-align: center;
}

.wpx-prose .wp-block-gallery { gap: var(--wpx-space-3); }

/* Embeds keep their ratio without an inline style per post. */
.wpx-prose .wp-block-embed__wrapper { position: relative; }

.wpx-prose iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--wpx-radius);
}

/* ==========================================================================
   Quotes, code, separators
   ========================================================================== */

.wpx-prose blockquote {
	margin: 0;
	padding: var(--wpx-space-4) var(--wpx-space-5);
	background: var(--wpx-surface-2);
	border-inline-start: 3px solid var(--wpx-accent);
	border-radius: 0 var(--wpx-radius) var(--wpx-radius) 0;
	color: var(--wpx-text-muted);
}

.wpx-prose blockquote p { margin: 0; }
.wpx-prose blockquote cite { display: block; margin-block-start: var(--wpx-space-2); font-size: var(--wpx-text-sm); color: var(--wpx-text-dim); }

.wpx-prose code {
	background: var(--wpx-surface-3);
	border: 1px solid var(--wpx-border);
	padding: 0.15em 0.45em;
	border-radius: var(--wpx-radius-sm);
	font-size: 0.9em;
	color: var(--wpx-secondary);
	white-space: nowrap;
}

.wpx-prose pre {
	padding: var(--wpx-space-4);
	background: var(--wpx-surface-1);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius);
	overflow-x: auto;
}

.wpx-prose pre code { background: none; border: 0; padding: 0; white-space: pre; color: var(--wpx-text-muted); }

.wpx-prose hr,
.wpx-prose .wp-block-separator {
	border: 0;
	height: 1px;
	margin-block: var(--wpx-space-6);
	background: linear-gradient( 90deg, transparent, var(--wpx-border-strong), transparent );
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* A download button written as a block should match the theme's buttons
   rather than arriving in the editor's default blue. */
.wpx-prose .wp-block-button__link,
.wpx-prose .wp-block-buttons .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wpx-space-2);
	padding: var(--wpx-space-4) var(--wpx-space-6);
	background: linear-gradient( 135deg, var(--wpx-accent), var(--wpx-secondary) );
	color: var(--wpx-accent-ink);
	border: 0;
	border-radius: var(--wpx-radius);
	font-weight: var(--wpx-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	box-shadow: 0 8px 22px -8px rgb(from var(--wpx-accent) r g b / 0.7);
	transition: transform 220ms var(--wpx-ease-out), box-shadow 220ms var(--wpx-ease), filter 220ms var(--wpx-ease);
}

.wpx-prose .wp-block-button__link:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 12px 28px -8px rgb(from var(--wpx-accent) r g b / 0.85);
	color: var(--wpx-accent-ink);
}

.wpx-prose .wp-block-buttons { justify-content: center; gap: var(--wpx-space-3); }

.wpx-prose .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wpx-accent);
	color: var(--wpx-accent);
	box-shadow: none;
}

/* ==========================================================================
   FAQ accordions
   ==========================================================================
   Styles the native details/summary element, which is what most FAQ blocks
   and plugins output underneath.
   ========================================================================== */

.wpx-prose details {
	margin: 0;
	background: var(--wpx-surface-2);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius);
	overflow: hidden;
	transition: border-color var(--wpx-transition);
}

.wpx-prose details + details { margin-block-start: var(--wpx-space-2); }

.wpx-prose details[open] { border-color: var(--wpx-accent); }

.wpx-prose summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wpx-space-3);
	padding: var(--wpx-space-4);
	background: var(--wpx-surface-3);
	color: var(--wpx-text);
	font-weight: var(--wpx-weight-bold);
	cursor: pointer;
	list-style: none;
	transition: background var(--wpx-transition), color var(--wpx-transition);
}

.wpx-prose summary::-webkit-details-marker { display: none; }

.wpx-prose summary:hover { background: var(--wpx-surface-4); }

.wpx-prose details[open] summary { color: var(--wpx-accent); }

/* A plus that becomes a minus, drawn rather than typed so it lines up. */
.wpx-prose summary::after {
	content: "";
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
	background:
		linear-gradient( var(--wpx-accent), var(--wpx-accent) ) center / 14px 2px no-repeat,
		linear-gradient( var(--wpx-accent), var(--wpx-accent) ) center / 2px 14px no-repeat;
	transition: transform 260ms var(--wpx-ease-out);
}

.wpx-prose details[open] summary::after {
	background: linear-gradient( var(--wpx-accent), var(--wpx-accent) ) center / 14px 2px no-repeat;
	transform: rotate(180deg);
}

.wpx-prose details > *:not(summary) {
	padding: var(--wpx-space-4);
	margin: 0;
}

.wpx-prose details > *:not(summary) + *:not(summary) { padding-block-start: 0; }

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 899px) {
	.wpx-prose { font-size: var(--wpx-text-sm); }
	.wpx-prose h2 { font-size: var(--wpx-text-xl); margin-block-start: var(--wpx-space-6); }
	.wpx-prose h3 { font-size: var(--wpx-text-lg); }
	.wpx-prose th, .wpx-prose td { padding: var(--wpx-space-2) var(--wpx-space-3); }
	.wpx-prose tbody td:first-child { white-space: normal; }
	.wpx-prose .wp-block-button__link { width: 100%; justify-content: center; padding-inline: var(--wpx-space-4); }
	.wpx-prose li { padding-inline-start: var(--wpx-space-5); }
	.wpx-prose ol > li { padding-inline-start: var(--wpx-space-6); }
	.wpx-prose ol > li::before { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.wpx-prose .wp-block-button__link:hover { transform: none; }
	.wpx-prose summary::after { transition: none; }
}

/* ==========================================================================
   Alignment
   ==========================================================================
   base.css sets images to display:block for layout reasons, which silently
   cancels the text-align an editor uses to centre a picture. Handle every
   way WordPress expresses alignment, for both block and classic content.
   ========================================================================== */

/* Classic editor and pasted HTML. */
.wpx-prose img.aligncenter,
.wpx-prose figure.aligncenter,
.wpx-prose .aligncenter {
	display: block;
	margin-inline: auto;
}

.wpx-prose img.alignleft,
.wpx-prose figure.alignleft,
.wpx-prose .alignleft {
	float: left;
	margin: 0 var(--wpx-space-5) var(--wpx-space-4) 0;
	max-width: 50%;
}

.wpx-prose img.alignright,
.wpx-prose figure.alignright,
.wpx-prose .alignright {
	float: right;
	margin: 0 0 var(--wpx-space-4) var(--wpx-space-5);
	max-width: 50%;
}

.wpx-prose .alignnone { display: block; margin-inline: 0; }

/* Clear floats so a following heading is not pulled up beside an image. */
.wpx-prose h2,
.wpx-prose h3 { clear: both; }

/* Block editor: a paragraph centred in the editor holds an inline image. */
.wpx-prose p.has-text-align-center,
.wpx-prose .has-text-align-center { text-align: center; }

.wpx-prose p.has-text-align-center img,
.wpx-prose .has-text-align-center img {
	display: inline-block;
	margin-inline: auto;
}

.wpx-prose p.has-text-align-right { text-align: right; }
.wpx-prose p.has-text-align-left { text-align: left; }

/* An image block with no alignment set still centres, because a lone
   screenshot floating against the left margin reads as a mistake. */
.wpx-prose .wp-block-image,
.wpx-prose figure:not(.alignleft):not(.alignright) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wpx-prose .wp-block-image img,
.wpx-prose figure:not(.alignleft):not(.alignright) img {
	margin-inline: auto;
}

/* A bare image on its own line — no figure, no class — is the commonest
   case in imported content. */
.wpx-prose > p > img:only-child {
	display: block;
	margin-inline: auto;
}

.wpx-prose .alignwide,
.wpx-prose .alignfull { margin-inline: auto; }

/* ==========================================================================
   Buttons written as plain HTML
   ==========================================================================
   Imported posts often carry a download button as an anchor with its own
   class rather than a button block. Pick up the usual names so it matches
   the theme instead of arriving in the source site's colour.
   ========================================================================== */

.wpx-prose a.button,
.wpx-prose a.btn,
.wpx-prose a.download-button,
.wpx-prose a.wp-block-button__link,
.wpx-prose .su-button,
.wpx-prose .maxbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wpx-space-2);
	padding: var(--wpx-space-4) var(--wpx-space-6);
	background: linear-gradient( 135deg, var(--wpx-accent), var(--wpx-secondary) ) !important;
	color: var(--wpx-accent-ink) !important;
	border: 0;
	border-radius: var(--wpx-radius);
	font-weight: var(--wpx-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	box-shadow: 0 8px 22px -8px rgb(from var(--wpx-accent) r g b / 0.7);
	transition: transform 220ms var(--wpx-ease-out), filter 220ms var(--wpx-ease);
}

.wpx-prose a.button:hover,
.wpx-prose a.btn:hover,
.wpx-prose a.download-button:hover,
.wpx-prose .su-button:hover,
.wpx-prose .maxbutton:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
}

/* Inline background colours pasted from another site win over a class, so
   an anchor styled inline is normalised too — but only when it is alone on
   its line, which is what a download button always is. */
.wpx-prose p:has(> a[style*="background"]:only-child) { text-align: center; }

.wpx-prose a[style*="background"]:only-child {
	background-image: linear-gradient( 135deg, var(--wpx-accent), var(--wpx-secondary) ) !important;
	background-color: transparent !important;
	color: var(--wpx-accent-ink) !important;
	border-radius: var(--wpx-radius) !important;
	text-decoration: none;
}