/**
 * Core Gutenberg block styles.
 *
 * The theme owns no CSS for core blocks: they have no block.json of ours to
 * hang a stylesheet on, so there is no per-block file to put this in. This
 * sheet is the owner — a sibling of header.css / footer.css, chrome rather
 * than a block.
 *
 * It is loaded twice: on the front end via wp_enqueue_style(), and in the
 * editor via add_editor_style(). The editor scopes theme editor styles with
 * `:where(.editor-styles-wrapper)` (zero added specificity) but leaves any
 * selector that already names `.editor-styles-wrapper` untransformed. Hence
 * the two roots used below:
 *
 *   main.site-main > …                          layout, front end only. In the
 *                                               editor the canvas gets the same
 *                                               geometry from theme.json layout.
 *   :is( .site-main, .editor-styles-wrapper ) … appearance, both contexts.
 *
 * No @media queries except prefers-reduced-motion. Everything responsive here
 * is intrinsic — min(), clamp(), overflow-wrap — so the sheet behaves the same
 * in the iframed canvas, in an un-iframed canvas and in device-preview modes.
 * The two real stacking breakpoints in core content (media-text and columns on
 * mobile) are core's own; overriding them is how they break.
 */

/*--------------------------------------------------------------
# Tokens
--------------------------------------------------------------*/

/*
 * Scoped to the content roots rather than :root so these names cannot leak
 * into the ACF block stylesheets, which namespace everything as --sws-<slug>-*.
 */
.site-main,
.editor-styles-wrapper {

	/* Reading measure for ordinary content (theme.json contentSize). */
	--sws-content: 50rem;    /* 800px */

	/* Wide rail — the ACF section inner width and the header content row. */
	--sws-wide: 77.5rem;     /* 1240px */

	/*
	 * Side gutter. Deliberately the same curve the ACF sections use for their
	 * own __inner padding — clamp(1.25rem, 6cqw, 6rem) — because every section
	 * is alignfull, so its container width equals the viewport and cqw == vw.
	 * Matching it is what puts a core block's left edge on the same line as the
	 * text inside the section above it.
	 */
	--sws-gutter: clamp(1.25rem, 6vw, 6rem);

	/*
	 * Rhythm. --sws-flow reads theme.json styles.spacing.blockGap, which is the
	 * same value core's is-layout-flow rules use inside container blocks. One
	 * number drives both the editor canvas and the front end.
	 */
	--sws-flow: var(--wp--style--global--block-gap, 1.5rem);
	--sws-flow-lead: clamp(2rem, 4vw, 3rem);
	--sws-seam: clamp(2.5rem, 6vw, 4.5rem);

	/* Dark surfaces, taken from the ACF blocks so core blocks read as one system. */
	--sws-surface: #11151f;
	--sws-surface-soft: rgba(255, 255, 255, 0.04);
	--sws-line: rgba(255, 255, 255, 0.14);
	--sws-line-strong: rgba(139, 92, 255, 0.38);
	--sws-dim: var(--wp--preset--color--muted, #c7c7d4);
	--sws-dim-2: #9a9aab;
	--sws-radius: 0.875rem;
}

/*
 * Tells the browser to render UA-drawn chrome dark: scrollbars, select popups,
 * date pickers, autofill. It is the only way to reach that shadow DOM, and
 * without it every form control on the page is a white rectangle.
 */
:root {
	color-scheme: dark;
}

/*--------------------------------------------------------------
# Box model
--------------------------------------------------------------*/

/*
 * Border-box for core block markup only.
 *
 * The theme ships no global box-sizing on purpose: the header pill, the footer
 * card and every ACF __inner size a content box and hang their padding outside
 * it. Flipping the box model globally would shrink all of them by their own
 * padding. Core blocks are the opposite case — block supports write padding
 * onto the very element that carries the width — so without border-box any
 * padded block overflows the column by exactly its padding.
 *
 * Core already sets border-box on many .wp-block-* roots; this covers the rest
 * (paragraphs with a background, headings, figures) and their descendants.
 */
main.site-main > *:not([class*="wp-block-sws-theme-"]),
main.site-main > *:not([class*="wp-block-sws-theme-"]) * {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Content column and alignment
--------------------------------------------------------------*/

/*
 * page.php renders the_content() bare inside <main class="site-main">, which
 * carries no width or padding, so a top-level core block would otherwise run
 * edge to edge. Core's own rules for this live on `.wp-site-blocks`, an element
 * only block themes emit — they are inert here.
 *
 * The column is expressed purely as max-width, never padding: min() against
 * `100% - 2 * gutter` keeps the block inside the gutter at narrow widths and at
 * the rail width when there is room, with no dependence on the box model.
 *
 * ACF sections are excluded by namespace, not by alignment: blocks/spacer has
 * "align": false and therefore no alignfull class, but still must not be caged.
 */
main.site-main > :where(:not(.alignfull):not(.alignwide):not([class*="wp-block-sws-theme-"])) {
	max-width: min(var(--sws-content), 100% - 2 * var(--sws-gutter));
	margin-inline: auto;
}

main.site-main > .alignwide:not([class*="wp-block-sws-theme-"]) {
	max-width: min(var(--sws-wide), 100% - 2 * var(--sws-gutter));
	margin-inline: auto;
}

main.site-main > .alignfull:not([class*="wp-block-sws-theme-"]) {
	max-width: none;
	margin-inline: 0;
}

/*
 * A full-bleed core container needs the gutter back on the inside. Its inner
 * column comes free from core's is-layout-constrained rules, which read
 * theme.json contentSize/wideSize. Full-bleed ACF sections already carry their
 * own __inner padding and are excluded above.
 */
main.site-main > .alignfull:is(.wp-block-group, .wp-block-columns, .wp-block-cover, .wp-block-media-text, .wp-block-gallery, .wp-block-query) {
	padding-inline: var(--sws-gutter);
}

/* Cover and media-text position their own background/media; the gutter must
 * not push those off. Core already pads .wp-block-cover, so only the column
 * container inside it needs the treatment. */
main.site-main > .alignfull.wp-block-cover {
	padding-inline: 0;
}

main.site-main > .alignfull.wp-block-cover > .wp-block-cover__inner-container {
	padding-inline: var(--sws-gutter);
}

/*
 * Top-level floats. Core only defines alignleft/alignright inside .is-layout-*,
 * so at the root of a classic <main> they are unstyled. Inset them to the
 * column's own edge instead of the viewport edge — the max() resolves to the
 * column offset when there is room and to the gutter when there is not.
 */
main.site-main > :is(.alignleft, .alignright) {
	max-width: min(50%, 22rem);
}

main.site-main > .alignleft {
	float: left;
	margin-inline: max(var(--sws-gutter), calc(50% - var(--sws-content) / 2)) 2em;
}

main.site-main > .alignright {
	float: right;
	margin-inline: 2em max(var(--sws-gutter), calc(50% - var(--sws-content) / 2));
}

main.site-main > .aligncenter {
	margin-inline: auto;
}

/* Floats must not escape into the footer. */
main.site-main::after {
	content: "";
	display: table;
	clear: both;
}

/*
 * The one width query in this file, and it earns its place: unfloating is the
 * only responsive behaviour here that cannot be expressed intrinsically. At
 * 375px a floated image capped at 50% leaves the text beside it about 150px —
 * two or three words per line. 600px is core's own is-stacked-on-mobile
 * threshold, so media-text and floated images collapse at the same width.
 */
@media (max-width: 600px) {

	main.site-main > :is(.alignleft, .alignright) {
		float: none;
		max-width: min(var(--sws-content), 100% - 2 * var(--sws-gutter));
		margin-inline: auto;
	}
}

/*--------------------------------------------------------------
# Vertical rhythm
--------------------------------------------------------------*/

/*
 * The owl form is deliberate. A plain margin-block-start on every child would
 * collapse out of <main> — it has no padding or border to contain it — and push
 * the whole element down instead of spacing the blocks.
 */
main.site-main > * + * {
	margin-block-start: var(--sws-flow);
}

/*
 * A full-bleed section carries its own vertical padding, so two of them meet
 * flush. That is how the ACF pages look today and it must not change. The seam
 * between a section and loose content does need air.
 */
main.site-main > .alignfull + *,
main.site-main > * + .alignfull {
	margin-block-start: var(--sws-seam);
}

main.site-main > .alignfull + .alignfull {
	margin-block-start: 0;
}

/*
 * Pages built only from ACF sections open and close with a full-bleed block and
 * are untouched by these two rules. A page that opens with loose content gets
 * clearance under the sticky header and above the footer card.
 */
main.site-main > :first-child:not(.alignfull) {
	margin-block-start: var(--sws-seam);
}

main.site-main > :last-child:not(.alignfull) {
	margin-block-end: var(--sws-seam);
}

/* A heading leads the block below it, so it needs more room above than below. */
main.site-main > * + :is(h1, h2, h3) {
	margin-block-start: var(--sws-flow-lead);
}

main.site-main > :is(h1, h2, h3, h4, h5, h6) + * {
	margin-block-start: 0.75em;
}

main.site-main > :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) {
	margin-block-start: 1em;
}

/*--------------------------------------------------------------
# Overflow safety
--------------------------------------------------------------*/

/*
 * `anywhere` rather than `break-word`: it also shrinks the element's min-content
 * contribution, which is what actually stops a flex or grid track from being
 * blown out by one long token. break-word does not.
 */
:is(.site-main, .editor-styles-wrapper) :is(p, li, dt, dd, cite, figcaption, caption, td, th, h1, h2, h3, h4, h5, h6, .wp-block-quote, .wp-block-pullquote, summary, a):not([class*="wp-block-sws-theme-"] *) {
	overflow-wrap: anywhere;
	word-break: normal;
}

/*
 * `hyphens: auto` is deliberately NOT set. overflow-wrap already prevents the
 * overflow, and hyphenation is a typographic judgement that has to be looked at
 * rather than measured — at desktop widths it mostly adds noise.
 */

/* Kills the single-word last line on long headings, and ragged prose edges. */
:is(.site-main, .editor-styles-wrapper) :is(h1, h2, h3):not([class*="wp-block-sws-theme-"] *) {
	text-wrap: balance;
}

:is(.site-main, .editor-styles-wrapper) p:not([class*="wp-block-sws-theme-"] *) {
	text-wrap: pretty;
}

/*
 * The classic flex/grid blowout fix. A flex or grid child defaults to
 * min-width: auto, so its min-content width becomes a floor the track cannot go
 * below — one long word and the whole row overflows. Core does not ship this
 * everywhere.
 */
:is(.site-main, .editor-styles-wrapper) :is(
	.wp-block-column,
	.wp-block-columns > *,
	.wp-block-buttons > *,
	.wp-block-media-text__content,
	.wp-block-media-text__media,
	.wp-block-group.is-layout-flex > *,
	.wp-block-group.is-layout-grid > *,
	.wp-block-social-links > *
) {
	min-width: 0;
}

/* Media never wider than its slot. media-text's is-image-fill deliberately
 * unsets this on its own img, so scope away from it. */
:is(.site-main, .editor-styles-wrapper) :is(img, svg, video, canvas, iframe, embed, object) {
	max-width: 100%;
}

:is(.site-main, .editor-styles-wrapper) :is(img, video) {
	height: auto;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-media-text.is-image-fill .wp-block-media-text__media img {
	height: 100%;
}

/*
 * Scroll containers. Core gives .wp-block-table overflow-x but leaves the other
 * three with only white-space: pre-wrap, which does not save a 300-character
 * token.
 */
:is(.site-main, .editor-styles-wrapper) :is(.wp-block-table, .wp-block-code, .wp-block-preformatted, .wp-block-verse, .wp-block-math) {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--sws-line-strong) transparent;
}

/* A table inside a scrolling figure must be allowed to exceed it. */
:is(.site-main, .editor-styles-wrapper) .wp-block-table > table {
	min-width: max-content;
}

/* …but a table that fits should still fill the column rather than shrink-wrap. */
:is(.site-main, .editor-styles-wrapper) .wp-block-table > table.has-fixed-layout {
	min-width: 100%;
}

/*
 * Last-resort guard for the core/html escape hatch. A client pasting markup
 * with a hard pixel width would otherwise put a horizontal scrollbar on the
 * whole document. overflow-x: clip (not hidden) does not create a scroll
 * container, so it cannot trap position: sticky or break scroll anchoring.
 */
main.site-main {
	overflow-x: clip;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

/*
 * Explicit heading sizes are required, not cosmetic: the ACF blocks render
 * <section> roots, and an h1 inside a <section> still picks up the UA's
 * nested-heading reduction in some browsers — the same markup would render at
 * different sizes across browsers. The top of each range matches the scale the
 * ACF blocks already use. Descendants of those blocks are excluded so their
 * local BEM styles remain the source of truth for component typography.
 */
:is(.site-main, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6):not([class*="wp-block-sws-theme-"] *) {
	font-weight: 800;
	line-height: 1.15;
}

:is(.site-main, .editor-styles-wrapper) h1:not([class*="wp-block-sws-theme-"] *) {
	font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
	line-height: 1.1;
}

:is(.site-main, .editor-styles-wrapper) h2:not([class*="wp-block-sws-theme-"] *) {
	font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.625rem);
	line-height: 1.1;
}

:is(.site-main, .editor-styles-wrapper) h3:not([class*="wp-block-sws-theme-"] *) {
	font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
	line-height: 1.2;
}

:is(.site-main, .editor-styles-wrapper) h4:not([class*="wp-block-sws-theme-"] *) {
	font-size: 1.25rem;
	line-height: 1.3;
}

:is(.site-main, .editor-styles-wrapper) h5:not([class*="wp-block-sws-theme-"] *) {
	font-size: 1.0625rem;
	line-height: 1.35;
}

:is(.site-main, .editor-styles-wrapper) h6:not([class*="wp-block-sws-theme-"] *) {
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sws-dim);
}

:is(.site-main, .editor-styles-wrapper) p:not([class*="wp-block-sws-theme-"] *) {
	line-height: 1.65;
}

/* A paragraph or heading with a background needs padding, or the text sits on
 * the edge of its own fill. wp-block-styles only does this for groups. */
:is(.site-main, .editor-styles-wrapper) :is(p, h1, h2, h3, h4, h5, h6).has-background {
	padding: 1.25em 1.5em;
	border-radius: var(--sws-radius);
}

/*
 * The bare-list arm also has to skip lists INSIDE an ACF section — same
 * namespace exclusion used for the content column above, but on the descendant
 * rather than the element. Every sws-theme block builds its card grids out of
 * `ul role="list"` with `padding: 0`, and a single block class cannot outweigh
 * the (0-3-1) this selector would otherwise carry: without the exclusion every
 * card grid on the site is indented by 1.5em and inherits the prose line-height.
 */
:is(.site-main, .editor-styles-wrapper) :is(ul, ol):not([class*="wp-block-"], .wp-block-list, [class*="wp-block-sws-theme-"] *),
:is(.site-main, .editor-styles-wrapper) .wp-block-list {
	padding-inline-start: 1.5em;
	line-height: 1.65;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-list li + li {
	margin-block-start: 0.35em;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-list ::marker {
	color: var(--sws-dim);
}

/* Nested lists sit closer to their parent than sibling items do. */
:is(.site-main, .editor-styles-wrapper) .wp-block-list :is(ul, ol) {
	margin-block: 0.35em 0;
}

:is(.site-main, .editor-styles-wrapper) .has-drop-cap:not(:focus)::first-letter {
	color: var(--wp--preset--color--accent-cyan, #00d4ff);
	margin-inline-end: 0.1em;
}

:is(.site-main, .editor-styles-wrapper) :is(code, kbd, samp, tt) {
	font-size: 0.9em;
	padding: 0.15em 0.4em;
	border: 1px solid var(--sws-line);
	border-radius: 0.3em;
	background: var(--sws-surface-soft);
}

/* The surface belongs to the block, not to every code element inside it. */
:is(.site-main, .editor-styles-wrapper) :is(.wp-block-code, .wp-block-preformatted, .wp-block-verse) code {
	padding: 0;
	border: 0;
	background: none;
	font-size: inherit;
}

:is(.site-main, .editor-styles-wrapper) kbd {
	font-size: 0.85em;
	box-shadow: 0 1px 0 var(--sws-line);
}

/* An inline highlight picks its background from the palette; force a dark text
 * colour so a light highlight is not white on white. */
:is(.site-main, .editor-styles-wrapper) mark.has-background {
	color: var(--wp--preset--color--base, #0a0d14);
	padding: 0.1em 0.3em;
	border-radius: 0.25em;
}

:is(.site-main, .editor-styles-wrapper) abbr[title] {
	text-decoration-color: var(--sws-dim-2);
	text-underline-offset: 0.2em;
}

:is(.site-main, .editor-styles-wrapper) :is(sub, sup) {
	font-size: 0.7em;
}

/*--------------------------------------------------------------
# Captions
--------------------------------------------------------------*/

/*
 * The single most important rule in this file. add_theme_support('wp-block-styles')
 * loads core's theme.css, which sets figcaption to #555 — 2.6:1 on this
 * background, effectively invisible. Its dark-mode replacement is gated behind
 * `.is-dark-theme`, a class the editor iframe gets and the front end never
 * does, so captions read fine in the editor and vanish on the site.
 *
 * Specificity here is (0,2,1), which clears both the front-end rule and the
 * editor's `.is-dark-theme :root :where(…)` at (0,2,0).
 */
:is(.site-main, .editor-styles-wrapper) :is(figure, .wp-block-gallery, .wp-block-embed, .wp-block-audio, .wp-block-video, .wp-block-image, .wp-block-table) figcaption,
:is(.site-main, .editor-styles-wrapper) .wp-element-caption,
:is(.site-main, .editor-styles-wrapper) .blocks-gallery-caption {
	color: var(--sws-dim);
	font-size: 0.8125rem;
	line-height: 1.5;
	margin-block-start: 0.75em;
}

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

:is(.site-main, .editor-styles-wrapper) .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-table :is(td, th) {
	border: 1px solid var(--sws-line);
	padding: 0.625rem 0.875rem;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-table th {
	background: var(--sws-surface);
	font-weight: 700;
	text-align: start;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-table :is(thead, tfoot) {
	border-color: var(--sws-line-strong);
}

/*
 * Core's stripe is #f0f0f0 — a near-white band under near-white text, measured
 * at 1.02:1. Replace it, and the #f0f0f0 bottom border with it.
 */
:is(.site-main, .editor-styles-wrapper) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--sws-surface-soft);
}

:is(.site-main, .editor-styles-wrapper) .wp-block-table.is-style-stripes {
	border-bottom-color: var(--sws-line);
}

:is(.site-main, .editor-styles-wrapper) .wp-block-table.is-style-stripes :is(td, th) {
	border-color: transparent;
}

/*--------------------------------------------------------------
# Quotes, code surfaces, separators
--------------------------------------------------------------*/

:is(.site-main, .editor-styles-wrapper) .wp-block-quote {
	border-inline-start: 0.25em solid var(--sws-line-strong);
	padding-inline-start: 1.25em;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-quote.is-style-plain {
	border-inline-start: 0;
	padding-inline-start: 0;
}

:is(.site-main, .editor-styles-wrapper) :is(.wp-block-quote, .wp-block-pullquote) cite {
	color: var(--sws-dim-2);
	font-size: 0.8125rem;
	font-style: normal;
	display: block;
	margin-block-start: 0.75em;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-pullquote {
	border-block: 3px solid var(--sws-line-strong);
	padding: 2rem 1rem;
}

:is(.site-main, .editor-styles-wrapper) :is(.wp-block-code, .wp-block-preformatted, .wp-block-verse) {
	background: var(--sws-surface);
	border: 1px solid var(--sws-line);
	border-radius: var(--sws-radius);
	padding: 1.125rem 1.25rem;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-code {
	font-size: 0.875rem;
	line-height: 1.6;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-separator {
	border-color: var(--sws-line);
	opacity: 1;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-separator.is-style-dots::before {
	color: var(--sws-dim-2);
}

/*--------------------------------------------------------------
# Details and accordion
--------------------------------------------------------------*/

:is(.site-main, .editor-styles-wrapper) :is(.wp-block-details, .wp-block-accordion-item) {
	background: var(--sws-surface);
	border: 1px solid var(--sws-line);
	border-radius: var(--sws-radius);
	padding: 1rem 1.25rem;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-accordion .wp-block-accordion-item + .wp-block-accordion-item {
	margin-block-start: 0.75rem;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-details summary::marker {
	color: var(--wp--preset--color--accent-cyan, #00d4ff);
}

:is(.site-main, .editor-styles-wrapper) .wp-block-accordion-heading__toggle {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	font-weight: 700;
	text-align: start;
	width: 100%;
	cursor: pointer;
}

/*--------------------------------------------------------------
# Forms and buttons
--------------------------------------------------------------*/

/*
 * Search, comment and the classic get_search_form() markup all render raw UA
 * controls here — white background, black text — because core styles none of
 * them beyond a #ccc border on the button.
 */
:is(.site-main, .editor-styles-wrapper) :is(
	.wp-block-search__input,
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	input[type="date"],
	textarea,
	select
) {
	background: var(--sws-surface);
	color: var(--wp--preset--color--contrast, #f2f2f6);
	border: 1px solid var(--sws-line);
	border-radius: 0.625rem;
	padding: 0.625rem 0.875rem;
	font: inherit;
	max-width: 100%;
}

/* Windows renders the popup list from the option elements, not the select. */
:is(.site-main, .editor-styles-wrapper) select option {
	background: var(--sws-surface);
	color: var(--wp--preset--color--contrast, #f2f2f6);
}

:is(.site-main, .editor-styles-wrapper) ::placeholder {
	color: var(--sws-dim-2);
	opacity: 1;
}

/* Core hard-codes #fff on the wrapper when the button sits inside the field. */
:is(.site-main, .editor-styles-wrapper) .wp-block-search__button-inside .wp-block-search__inside-wrapper {
	background: var(--sws-surface);
	border: 1px solid var(--sws-line);
	border-radius: 0.625rem;
	padding: 0.25rem;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-search__button-inside .wp-block-search__input {
	border: 0;
	background: none;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-search__label {
	display: block;
	margin-block-end: 0.5rem;
	font-weight: 700;
}

/*
 * Buttons. theme.json styles.elements.button sets the palette; these rules add
 * the parts theme.json cannot express — the outline variant, the tap target and
 * the #ccc border core puts on the search button.
 */
:is(.site-main, .editor-styles-wrapper) :is(.wp-element-button, .wp-block-button__link, .wp-block-search__button, .wp-block-file__button, .search-submit) {
	border: 0;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: none;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-search__button {
	background: var(--wp--preset--color--accent-purple, #6a00ff);
	color: var(--wp--preset--color--contrast, #f2f2f6);
	border-radius: 0.625rem;
	padding-inline: 1.25rem;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
	background: var(--sws-surface);
	border: 1px solid var(--sws-line);
	border-radius: var(--sws-radius);
	padding: 1rem 1.25rem;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-file__embed {
	width: 100%;
	height: min(70vh, 40rem);
	border-radius: var(--sws-radius);
}

/*--------------------------------------------------------------
# List and feed blocks
--------------------------------------------------------------*/

:is(.site-main, .editor-styles-wrapper) :is(
	.wp-block-latest-posts,
	.wp-block-latest-comments,
	.wp-block-archives-list,
	.wp-block-categories-list,
	.wp-block-rss,
	.wp-block-page-list
) {
	padding-inline-start: 0;
	list-style: none;
}

:is(.site-main, .editor-styles-wrapper) :is(
	.wp-block-latest-posts__post-date,
	.wp-block-latest-posts__post-author,
	.wp-block-latest-comments__comment-meta,
	.wp-block-latest-comments__comment-date,
	.wp-block-rss__item-publish-date,
	.wp-block-rss__item-author
) {
	color: var(--sws-dim);
	font-size: 0.8125rem;
}

/* Core draws the grid variants with a #ddd border. */
:is(.site-main, .editor-styles-wrapper) :is(.wp-block-latest-posts.is-grid > li, .wp-block-rss.is-grid > li) {
	border-color: var(--sws-line);
	border-radius: var(--sws-radius);
	padding: 1rem;
	background: var(--sws-surface-soft);
}

:is(.site-main, .editor-styles-wrapper) .wp-block-tag-cloud a {
	display: inline-block;
	border: 1px solid var(--sws-line);
	border-radius: 999px;
	padding: 0.25rem 0.75rem;
	margin: 0 0.25rem 0.5rem 0;
	text-decoration: none;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-calendar {
	background: var(--sws-surface);
	border: 1px solid var(--sws-line);
	border-radius: var(--sws-radius);
	padding: 1rem;
}

/* Core hard-codes #40464d on the table and #ddd on the borders. */
:is(.site-main, .editor-styles-wrapper) .wp-block-calendar table:not(.has-text-color) {
	color: var(--wp--preset--color--contrast, #f2f2f6);
}

:is(.site-main, .editor-styles-wrapper) .wp-block-calendar :is(th, tbody td) {
	border-color: var(--sws-line);
	background: none;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-calendar caption {
	color: var(--sws-dim);
	margin-block-end: 0.5rem;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-calendar #today {
	background: var(--sws-line-strong);
	font-weight: 700;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-footnotes {
	border-block-start: 1px solid var(--sws-line);
	padding-block-start: 1rem;
	color: var(--sws-dim);
	font-size: 0.875rem;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-breadcrumbs {
	color: var(--sws-dim);
	font-size: 0.875rem;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/

:is(.site-main, .editor-styles-wrapper) .wp-block-image :is(img, a) {
	border-radius: 0.5rem;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-image.is-style-rounded img {
	border-radius: 9999px;
}

:is(.site-main, .editor-styles-wrapper) .wp-block-gallery figcaption {
	background: linear-gradient(0deg, rgba(10, 13, 20, 0.85) 0%, rgba(10, 13, 20, 0) 100%);
}

:is(.site-main, .editor-styles-wrapper) :is(.wp-block-audio audio, .wp-block-video video) {
	width: 100%;
}

/*--------------------------------------------------------------
# Interaction chrome
--------------------------------------------------------------*/

:is(.site-main, .editor-styles-wrapper) ::selection {
	background: var(--sws-line-strong);
	color: var(--wp--preset--color--contrast, #f2f2f6);
}

.site-main :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-cyan, #00d4ff);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

/*--------------------------------------------------------------
# Reduced motion
--------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {

	:is(.site-main, .editor-styles-wrapper) :is(.wp-element-button, .wp-block-button__link, .wp-block-search__button, .wp-block-file__button) {
		transition: none;
	}
}