/**
 * Stillpoint — core block refinements and block style variations.
 *
 * Loaded on the front end and in the editor (add_editor_style), after
 * components.css. theme.json sets the element defaults (type, colors, button,
 * quote, details…); this file only refines them and adds the block styles
 * registered in inc/core/block-styles.php:
 *
 *   core/image      is-style-arch | is-style-circle | is-style-pebble
 *   core/group      is-style-card | is-style-inverted | is-style-bordered
 *   core/button     is-style-text-arrow (+ core is-style-outline restyled)
 *   core/separator  is-style-ornament | is-style-short
 *   core/list       is-style-checks | is-style-leaves
 *   core/quote      is-style-large
 *   core/paragraph  is-style-eyebrow
 *   core/cover      is-style-arch
 *
 * Selectors never rely on body classes for things that must show in the editor
 * (the editor canvas root is .editor-styles-wrapper). Design tokens only.
 *
 * Contents
 *  1. Text: headings, paragraphs, eyebrow, links in toned sections, inline code
 *  2. Buttons
 *  3. Separators
 *  4. Lists
 *  5. Quotes, pullquotes, verse
 *  6. Details (FAQ)
 *  7. Images, gallery, media & text, cover
 *  8. Groups and columns
 *  9. Table, code, preformatted
 * 10. Search, file, social links, embeds, video, spacer
 * 11. Motion and forced colors
 */

/* ==========================================================================
   1. Text
   ========================================================================== */

.wp-block-heading {
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* The signature italic accent word in headings ("come <em>home</em>"). */
.wp-block-heading:not(.has-text-color) em,
.wp-block-post-title em {
	color: var(--wp--custom--color--link);
	font-style: italic;
}

/*
 * Headings follow the text color of their section: in toned sections (inverted,
 * primary, cover…) and in any block with a custom text color. theme.json paints
 * headings with the contrast color, which would vanish on an inverted band.
 */
:where(.has-text-color, .sp-section--inverted, .is-style-inverted, .has-contrast-background-color, .has-primary-background-color, .has-accent-background-color, .has-muted-background-color, .has-on-primary-background-color, .has-on-accent-background-color, .has-hairline-background-color, .wp-block-cover) :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: inherit;
}

/* Links in toned sections: the link token already follows the text; keep hover visible. */
:where(.sp-section--inverted, .is-style-inverted, .has-contrast-background-color, .has-primary-background-color, .has-accent-background-color, .has-muted-background-color, .has-on-primary-background-color, .has-on-accent-background-color, .has-hairline-background-color, .wp-block-cover) a:where(:not(.wp-element-button, .sp-button)):hover {
	color: inherit;
	text-decoration-thickness: 2px;
}

/* Eyebrow paragraphs: small, tracked, uppercase labels above headings. */
p.is-style-eyebrow {
	color: var(--wp--custom--color--link);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	font-weight: 600;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	line-height: 1.4;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* Keep the label close to the heading it introduces. */
.is-style-eyebrow + .wp-block-heading,
.is-style-eyebrow + h1,
.is-style-eyebrow + h2,
.is-style-eyebrow + h3,
.sp-eyebrow + .wp-block-heading {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Highlights (not the inline text-color marks, which carry .has-inline-color). */
mark:not(.has-inline-color) {
	padding: 0 0.15em;
	border-radius: var(--wp--custom--radius--small);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 32%, transparent);
	color: inherit;
}

/* Inline code and keyboard keys inside text. */
:not(pre) > code,
kbd {
	padding: 0.12em 0.4em;
	border-radius: var(--wp--custom--radius--small);
	background-color: color-mix(in srgb, currentColor 8%, transparent);
	font-family: monospace, monospace;
	font-size: 0.875em;
	overflow-wrap: anywhere;
}

kbd {
	border: 1px solid var(--wp--preset--color--hairline);
	border-block-end-width: 2px;
}

/* Footnotes, abbreviations, small print. */
abbr[title] {
	text-decoration: underline dotted;
	text-underline-offset: 0.2em;
	cursor: help;
}

/* ==========================================================================
   2. Buttons (core/button)
   theme.json styles the `button` element; these add motion, the outline
   restyle, the text-arrow style and safe colors on colored bands.
   ========================================================================== */

.wp-block-button__link,
.wp-element-button {
	transition:
		background-color var(--wp--custom--transition--fast),
		border-color var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast),
		text-decoration-color var(--wp--custom--transition--fast),
		box-shadow var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

/* Outline: a 1px hairline in the link color, soft tint on hover (no fill flip). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1px;
	border-style: solid;
	border-color: currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):focus-visible {
	color: var(--wp--custom--color--link);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: currentColor;
}

/* Hover/focus: a doubled border, not a tint (a tint behind the text lowers its
   contrast below 4.5:1 on surface and colored backgrounds). */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
}

/* Text with arrow: a quiet link-style button. Keeps a 44px tap height. */
.wp-block-button.is-style-text-arrow > .wp-block-button__link {
	min-height: 2.75rem;
	padding-inline: 0;
	padding-block: 0.6rem;
	border-color: transparent;
	border-radius: 0;
	text-align: start;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

.wp-block-button.is-style-text-arrow > .wp-block-button__link:not(.has-background),
.wp-block-button.is-style-text-arrow > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-text-arrow > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: transparent;
}

.wp-block-button.is-style-text-arrow > .wp-block-button__link:not(.has-text-color),
.wp-block-button.is-style-text-arrow > .wp-block-button__link:not(.has-text-color):hover,
.wp-block-button.is-style-text-arrow > .wp-block-button__link:not(.has-text-color):focus-visible {
	color: var(--wp--custom--color--link);
}

.wp-block-button.is-style-text-arrow > .wp-block-button__link:hover,
.wp-block-button.is-style-text-arrow > .wp-block-button__link:focus-visible {
	border-color: transparent;
	text-decoration-color: currentColor;
}

/* With a background color the user clearly wants a pill: give it padding back. */
.wp-block-button.is-style-text-arrow > .wp-block-button__link.has-background {
	padding-inline: var(--wp--custom--button--padding-inline);
	border-radius: var(--wp--custom--radius--button);
}

.wp-block-button.is-style-text-arrow > .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	margin-inline-start: 0.55em;
	background-color: currentColor;
	vertical-align: -0.2em;
	-webkit-mask: var(--sp-icon-arrow) center / contain no-repeat;
	mask: var(--sp-icon-arrow) center / contain no-repeat;
	transition: transform var(--wp--custom--transition--fast);
}

.wp-block-button.is-style-text-arrow > .wp-block-button__link:dir(rtl)::after {
	transform: scaleX(-1);
}

/* A primary button on a primary band would vanish: use the page colors. */
:where(.has-primary-background-color) .wp-block-button:not(.is-style-outline):not(.is-style-text-arrow) > .wp-block-button__link:not(.has-background) {
	border-color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--base);
}

:where(.has-primary-background-color) .wp-block-button:not(.is-style-outline):not(.is-style-text-arrow) > .wp-block-button__link:not(.has-background):hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 86%, var(--wp--preset--color--contrast));
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 86%, var(--wp--preset--color--contrast));
}

:where(.has-primary-background-color) .wp-block-button:not(.is-style-outline):not(.is-style-text-arrow) > .wp-block-button__link:not(.has-text-color),
:where(.has-primary-background-color) .wp-block-button:not(.is-style-outline):not(.is-style-text-arrow) > .wp-block-button__link:not(.has-text-color):hover {
	color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   3. Separators (core/separator)
   ========================================================================== */

/* Short: a small accent rule, start-aligned (follows the block's alignment). */
.wp-block-separator.is-style-short {
	width: 100%;
	height: 2px;
	border: 0;
	background: linear-gradient(currentColor, currentColor) 0 50% / 3rem 2px no-repeat;
	background-color: transparent !important;
	opacity: 1;
}

.wp-block-separator.is-style-short:not(.has-text-color) {
	color: var(--wp--preset--color--accent);
}

.wp-block-separator.is-style-short:dir(rtl) {
	background-position: 100% 50%;
}

.wp-block-separator.is-style-short.aligncenter,
.is-content-justification-center > .wp-block-separator.is-style-short {
	background-position: 50% 50%;
}

.is-content-justification-right > .wp-block-separator.is-style-short {
	background-position: 100% 50%;
}

/* Ornament: two fading hairlines meeting at a small diamond. */
.wp-block-separator.is-style-ornament {
	position: relative;
	width: min(14rem, 70%);
	max-width: min(14rem, 70%);
	height: 1rem;
	margin-inline: auto;
	border: 0;
	background:
		linear-gradient(to right, transparent, currentColor) left center / calc(50% - 1.15rem) 1px no-repeat,
		linear-gradient(to left, transparent, currentColor) right center / calc(50% - 1.15rem) 1px no-repeat;
	background-color: transparent !important;
	opacity: 1;
}

.wp-block-separator.is-style-ornament:not(.has-text-color) {
	color: var(--wp--preset--color--accent);
}

.wp-block-separator.is-style-ornament::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border: 1px solid currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.wp-block-separator.is-style-ornament::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background-color: currentColor;
	transform: translate(-50%, -50%);
}

/* ==========================================================================
   4. Lists (core/list)
   ========================================================================== */

ul.wp-block-list,
ol.wp-block-list {
	padding-inline-start: 1.3em;
}

.wp-block-list li + li {
	margin-block-start: 0.4em;
}

.wp-block-list > li::marker {
	color: var(--wp--custom--color--link);
}

ol.wp-block-list > li::marker {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--wp--custom--heading--weight);
}

/* Checks and leaves: custom icon bullets. */
.wp-block-list.is-style-checks,
.wp-block-list.is-style-leaves {
	padding-inline-start: 0;
	list-style: none;
}

.wp-block-list.is-style-checks > li,
.wp-block-list.is-style-leaves > li {
	position: relative;
	padding-inline-start: 2.1em;
}

.wp-block-list.is-style-checks > li + li,
.wp-block-list.is-style-leaves > li + li {
	margin-block-start: 0.7em;
}

.wp-block-list.is-style-checks > li::marker,
.wp-block-list.is-style-leaves > li::marker {
	content: "";
}

/* Check: a tinted circle (::before) holding the check mark (::after). */
.wp-block-list.is-style-checks > li::before,
.wp-block-list.is-style-checks > li::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.2em;
	top: calc(0.5lh - 0.7em);
	width: 1.4em;
	height: 1.4em;
}

.wp-block-list.is-style-checks > li::before {
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--custom--color--link) 14%, transparent);
}

.wp-block-list.is-style-checks > li::after {
	background-color: var(--wp--custom--color--link);
	-webkit-mask: var(--sp-icon-check) center / 0.8em no-repeat;
	mask: var(--sp-icon-check) center / 0.8em no-repeat;
}

.wp-block-list.is-style-leaves > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.1em;
	top: 0.25em;
	top: calc(0.5lh - 0.6em);
	width: 1.2em;
	height: 1.2em;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 70%, var(--wp--custom--color--link));
	-webkit-mask: var(--sp-icon-leaf) center / contain no-repeat;
	mask: var(--sp-icon-leaf) center / contain no-repeat;
}

.wp-block-list.is-style-leaves:dir(rtl) > li::before {
	transform: scaleX(-1);
}

/* Nested lists inside styled lists go back to quiet bullets. */
.wp-block-list.is-style-checks ul,
.wp-block-list.is-style-leaves ul {
	margin-block-start: 0.4em;
	list-style: disc;
}

/* ==========================================================================
   5. Quotes, pullquotes, verse
   ========================================================================== */

.wp-block-quote {
	text-wrap: pretty;
}

.wp-block-quote > p {
	margin-block: 0;
}

.wp-block-quote > p + p {
	margin-block-start: 0.6em;
}

.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-style: normal;
}

/* Centered/right quotes drop the side rule. */
.wp-block-quote.has-text-align-center {
	padding-inline: 0;
	border-left: 0;
	border-inline-start: 0;
}

.wp-block-quote.has-text-align-right {
	padding-inline: 0 var(--wp--preset--spacing--40);
	border-left: 0;
	border-inline-start: 0;
	border-inline-end: 2px solid var(--wp--preset--color--accent);
}

/* Large: a statement quote with an oversized opening mark. */
blockquote.wp-block-quote.is-style-large {
	position: relative;
	margin-block-end: 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: var(--wp--custom--heading--letter-spacing);
	line-height: 1.3;
	text-wrap: balance;
}

blockquote.wp-block-quote.is-style-large::before {
	content: "\201C";
	content: "\201C" / "";
	display: block;
	height: 0.5em;
	margin-block-end: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.4em;
	font-style: normal;
	font-weight: 400;
	line-height: 0.9;
}

blockquote.wp-block-quote.is-style-large p {
	font-size: inherit;
	font-style: inherit;
	line-height: inherit;
}

blockquote.wp-block-quote.is-style-large cite {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	line-height: 1.5;
	text-align: inherit;
	text-transform: uppercase;
}

.wp-block-pullquote {
	text-wrap: balance;
}

.wp-block-pullquote blockquote > p {
	margin-block: 0;
}

.wp-block-pullquote blockquote > p + p {
	margin-block-start: 0.6em;
}

.wp-block-verse {
	padding: 0;
	background: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

/* ==========================================================================
   6. Details (FAQ accordions)
   theme.json sets the hairline, padding and summary type.
   ========================================================================== */

:where(:not(.wp-block-details)) + .wp-block-details,
.wp-block-details:first-child {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	min-height: 2.75rem;
	list-style: none;
	overflow-wrap: anywhere;
	transition: color var(--wp--custom--transition--fast);
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::marker {
	content: "";
}

/* A plus in a hairline circle that becomes a minus when open. */
.wp-block-details > summary::after {
	content: "";
	flex: none;
	box-sizing: border-box;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center / 0.75rem 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 0.75rem no-repeat;
	color: var(--wp--custom--color--link);
	transition:
		background-size var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--fast),
		background-color var(--wp--custom--transition--fast);
}

.wp-block-details[open] > summary::after {
	background-size: 0.75rem 1.5px, 1.5px 0;
}

.wp-block-details > summary:hover {
	color: var(--wp--custom--color--link);
}

.wp-block-details > summary:hover::after {
	border-color: currentColor;
}

.wp-block-details > summary:focus-visible {
	border-radius: var(--wp--custom--radius--small);
	outline: 2px solid var(--sp-ring, var(--wp--custom--color--link));
	outline-offset: 4px;
}

.wp-block-details > :not(summary) {
	color: var(--wp--preset--color--muted);
}

.wp-block-details > :last-child:not(summary) {
	margin-block-end: var(--wp--preset--spacing--10);
}

/* ==========================================================================
   7. Images, gallery, media & text, cover
   ========================================================================== */

.wp-block-image figcaption,
.wp-block-gallery > figcaption,
.wp-block-media-text figcaption {
	margin-block: var(--wp--preset--spacing--20) 0;
	letter-spacing: 0.02em;
}

/* Arch: semicircular top, the theme's signature shape. */
.wp-block-image.is-style-arch img,
.wp-block-image.is-style-arch .wp-block-image__crop-area,
.wp-block-image.is-style-arch .components-placeholder {
	border-radius: var(--sp-radius-arch);
}

.wp-block-image.is-style-arch img {
	object-fit: cover;
}

/* Circle: always a true circle, whatever the source ratio. */
.wp-block-image.is-style-circle img {
	aspect-ratio: 1 !important;
	border-radius: 50%;
	object-fit: cover;
}

.wp-block-image.is-style-circle .wp-block-image__crop-area,
.wp-block-image.is-style-circle .components-placeholder {
	border-radius: 50%;
}

/* Pebble: a soft, organic river-stone outline. */
.wp-block-image.is-style-pebble img,
.wp-block-image.is-style-pebble .wp-block-image__crop-area,
.wp-block-image.is-style-pebble .components-placeholder {
	border-radius: 62% 38% 54% 46% / 47% 55% 45% 53%;
}

.wp-block-image.is-style-pebble img {
	object-fit: cover;
}

/* Gallery captions keep the overlay legible but use the theme type. */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Media & text: soft corners on the media, comfortable inner spacing. */
.wp-block-media-text > .wp-block-media-text__media img,
.wp-block-media-text > .wp-block-media-text__media video {
	border-radius: var(--wp--custom--radius--image);
}

.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media,
.wp-block-media-text.is-image-fill > .wp-block-media-text__media {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--image);
}

.wp-block-media-text.has-background {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--large);
}

.wp-block-media-text.has-background > .wp-block-media-text__media,
.wp-block-media-text.has-background > .wp-block-media-text__media img,
.wp-block-media-text.has-background > .wp-block-media-text__media video {
	border-radius: 0;
}

.wp-block-media-text > .wp-block-media-text__content {
	padding-inline: var(--wp--preset--spacing--50);
}

@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--40) 0 0;
	}

	.wp-block-media-text.is-stacked-on-mobile.has-background > .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--40);
	}
}

/* Cover: soft corners when it is not full width. */
.wp-block-cover:not(.alignfull):not(.is-style-arch):not([style*="border-radius"]) {
	border-radius: var(--wp--custom--radius--large);
}

.wp-block-cover .wp-block-cover__inner-container > :first-child {
	margin-block-start: 0;
}

.wp-block-cover .wp-block-cover__inner-container > :last-child {
	margin-block-end: 0;
}

/*
 * Cover text and focus rings. Core picks white or black text once, when the
 * overlay is chosen (`is-light`), so switching a style preset can leave white
 * text on a now-light overlay. With a palette overlay the theme instead uses
 * that color's matching text color (see the table in components.css), in the
 * current preset, but only when nothing shows through it: a 100% overlay or no
 * image. On a photo with a lighter overlay the photo decides the contrast, so
 * core's white/black choice stays (round-5 audit, #3). Rings inside the cover
 * use the same color.
 */
.wp-block-cover > .wp-block-cover__inner-container {
	--sp-cover-fg: #fff;
}

.wp-block-cover.is-light > .wp-block-cover__inner-container {
	--sp-cover-fg: #000;
}

.wp-block-cover:has(> .wp-block-cover__background.has-base-background-color) > .wp-block-cover__inner-container {
	--sp-cover-fg: var(--wp--preset--color--contrast);
}

.wp-block-cover:has(> .wp-block-cover__background.has-surface-background-color) > .wp-block-cover__inner-container {
	--sp-cover-fg: var(--wp--preset--color--contrast);
}

.wp-block-cover:has(> .wp-block-cover__background.has-contrast-background-color) > .wp-block-cover__inner-container {
	--sp-cover-fg: var(--wp--preset--color--base);
}

.wp-block-cover:has(> .wp-block-cover__background.has-muted-background-color) > .wp-block-cover__inner-container {
	--sp-cover-fg: var(--wp--preset--color--base);
}

.wp-block-cover:has(> .wp-block-cover__background.has-primary-background-color) > .wp-block-cover__inner-container {
	--sp-cover-fg: var(--wp--preset--color--on-primary);
}

.wp-block-cover:has(> .wp-block-cover__background.has-on-primary-background-color) > .wp-block-cover__inner-container {
	--sp-cover-fg: var(--wp--preset--color--primary);
}

.wp-block-cover:has(> .wp-block-cover__background.has-accent-background-color) > .wp-block-cover__inner-container {
	--sp-cover-fg: var(--wp--preset--color--on-accent);
}

.wp-block-cover:has(> .wp-block-cover__background.has-on-accent-background-color) > .wp-block-cover__inner-container {
	--sp-cover-fg: var(--wp--preset--color--accent);
}

.wp-block-cover:has(> .wp-block-cover__background.has-hairline-background-color) > .wp-block-cover__inner-container {
	--sp-cover-fg: var(--wp--preset--color--contrast);
}

/* A photo (img, video, parallax) under an overlay under 100%: keep core's white/black. */
.wp-block-cover:is(.has-parallax, :has(> :is(img, video, .wp-block-cover__image-background))):not(:has(> .wp-block-cover__background.has-background-dim-100)) > .wp-block-cover__inner-container {
	--sp-cover-fg: #fff;
}

.wp-block-cover.is-light:is(.has-parallax, :has(> :is(img, video, .wp-block-cover__image-background))):not(:has(> .wp-block-cover__background.has-background-dim-100)) > .wp-block-cover__inner-container {
	--sp-cover-fg: #000;
}

.wp-block-cover:not(.has-text-color):has(> .wp-block-cover__background[class*="-background-color"]):is(:has(> .wp-block-cover__background.has-background-dim-100), :not(.has-parallax, :has(> :is(img, video, .wp-block-cover__image-background)))) > .wp-block-cover__inner-container {
	color: var(--sp-cover-fg);
}

.wp-block-cover > .wp-block-cover__inner-container > * {
	--sp-ring: var(--sp-cover-fg);
}

/* Cover arch: a semicircle in columns, a gentle dome when wide or full width. */
.wp-block-cover.is-style-arch {
	padding-top: max(var(--wp--preset--spacing--70), 18%);
	border-radius: var(--sp-radius-arch);
}

.wp-block-cover.is-style-arch.alignwide,
.wp-block-cover.is-style-arch.alignfull {
	padding-top: var(--wp--preset--spacing--80);
	border-radius:
		50% 50% var(--wp--custom--radius--image) var(--wp--custom--radius--image) /
		clamp(4rem, 20vw, 18rem) clamp(4rem, 20vw, 18rem) var(--wp--custom--radius--image) var(--wp--custom--radius--image);
}

.wp-block-cover.is-style-arch.alignfull {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

/* ==========================================================================
   8. Groups and columns
   ========================================================================== */

/* Card: a soft surface panel (pricing tiers, offerings…). */
.wp-block-group.is-style-card {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--large);
}

/* Its own surface and text colors only while no background color is chosen;
   with one, the color's own text rules apply (e.g. on-primary on Primary). */
.wp-block-group.is-style-card:not(.has-background) {
	background-color: var(--wp--preset--color--surface);
}

.wp-block-group.is-style-card:not(.has-background):not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}

/* On surface sections the card takes the page color instead. */
:is(.has-surface-background-color, .sp-section--surface) .wp-block-group.is-style-card:not(.has-background) {
	background-color: var(--wp--preset--color--base);
}

.wp-block-group.is-style-card > .wp-block-image:first-child,
.wp-block-group.is-style-card > figure:first-child {
	margin-block-start: 0;
}

/* Inverted: contrast background, page-colored text (components.css). With a
   background color chosen, that color's own text rules apply instead. */
.wp-block-group.is-style-inverted:not(.has-background) {
	background-color: var(--wp--preset--color--contrast);
}

/* Not full width: a rounded panel. Class specificity beats core's nested
   has-global-padding reset; padding set in the editor (inline) still wins. */
.wp-block-group.is-style-inverted:not(.alignfull) {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--large);
}

/* Bordered: a hairline frame without a fill. */
.wp-block-group.is-style-bordered {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--large);
}

.wp-block-group.has-background:not(.alignfull):not(.is-style-card):not(.is-style-inverted):not([style*="border-radius"]) {
	border-radius: var(--wp--custom--radius--large);
}

.wp-block-column {
	min-width: 0;
}

/* ==========================================================================
   9. Table, code, preformatted
   ========================================================================== */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-variant-numeric: tabular-nums;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.75em 1em;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	text-align: start;
	vertical-align: top;
}

.wp-block-table thead {
	border-bottom: 1px solid var(--wp--custom--color--border-strong, var(--wp--preset--color--muted));
}

.wp-block-table thead th {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-transform: uppercase;
	vertical-align: bottom;
}

.wp-block-table tfoot {
	border-top: 1px solid var(--wp--custom--color--border-strong, var(--wp--preset--color--muted));
	font-weight: 600;
}

.wp-block-table tfoot td {
	border-bottom: 0;
}

/* Stripes: a tint of the text color works on every background (core uses a fixed gray). */
.wp-block-table.is-style-stripes table tbody tr:nth-child(odd) {
	background-color: color-mix(in srgb, currentColor 5%, transparent);
}

figure.wp-block-table.is-style-stripes {
	border-bottom: 0;
}

.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes td {
	border-color: transparent;
}

.wp-block-code {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--hairline);
	line-height: 1.6;
}

.wp-block-code code {
	padding: 0;
	background: none;
	font-size: inherit;
}

.wp-block-preformatted {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30);
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--small);
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent);
	line-height: 1.6;
	white-space: pre-wrap;
}

/* ==========================================================================
   10. Search, file, social links, embeds, video, spacer
   ========================================================================== */

/* Search: theme fields and buttons instead of core's fixed grays. */
.wp-block-search__label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--10);
}

.wp-block-search .wp-block-search__input {
	box-sizing: border-box;
	min-height: 3rem;
	padding: 0.7em 1em;
	border: 1px solid var(--wp--custom--color--border-strong, var(--wp--preset--color--muted));
	border-radius: min(var(--wp--custom--radius--button), 1.5rem);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: max(1rem, var(--wp--preset--font-size--small));
	transition: border-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}

.wp-block-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.wp-block-search .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--contrast);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 1px var(--wp--preset--color--contrast), 0 0 0 5px color-mix(in srgb, var(--wp--custom--color--link) 28%, transparent);
}

.wp-block-search .wp-block-search__button {
	min-height: 3rem;
	margin-inline-start: 0;
	border-radius: var(--wp--custom--radius--button);
}

.wp-block-search .wp-block-search__button.has-icon {
	min-width: 3rem;
	padding-inline: 0.75rem;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	padding: 0.25rem;
	border: 1px solid var(--wp--custom--color--border-strong, var(--wp--preset--color--muted));
	border-radius: min(var(--wp--custom--radius--button), 1.75rem);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transition: border-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
	min-height: 2.5rem;
	padding-block: 0.4em;
	border: 0;
	box-shadow: none;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__button {
	min-height: 2.5rem;
	padding-block: 0.4em;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 1px var(--wp--preset--color--contrast), 0 0 0 5px color-mix(in srgb, var(--wp--custom--color--link) 28%, transparent);
}

/* On colored backgrounds the soft halo vanishes: a solid ring in the context's ring color. */
:is(.sp-section--inverted, .is-style-inverted:not(.has-background), .has-contrast-background-color, .wp-block-cover__inner-container, .has-primary-background-color, .has-accent-background-color, .has-muted-background-color, .has-on-primary-background-color, .has-on-accent-background-color, .has-hairline-background-color) .wp-block-search .wp-block-search__input:focus,
:is(.sp-section--inverted, .is-style-inverted:not(.has-background), .has-contrast-background-color, .wp-block-cover__inner-container, .has-primary-background-color, .has-accent-background-color, .has-muted-background-color, .has-on-primary-background-color, .has-on-accent-background-color, .has-hairline-background-color) .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
	box-shadow:
		0 0 0 1px var(--wp--preset--color--contrast),
		0 0 0 4px var(--sp-ring, var(--wp--custom--color--link));
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
	box-shadow: none;
}

/*
 * Navigation submenus: a page-colored panel of their own (core paints a fixed
 * white box), so their text, links and focus rings use the page tokens, not
 * those of the colored section the menu sits in.
 */
body .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	border-color: var(--sp-border-base, var(--wp--preset--color--hairline));
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	--wp--custom--color--link: var(--sp-link-base);
	--wp--preset--color--muted: var(--sp-muted-base);
	--wp--preset--color--hairline: var(--sp-border-base);
	--sp-text: var(--wp--preset--color--contrast);
}

body .wp-block-navigation .wp-block-navigation__submenu-container > * {
	--sp-ring: var(--sp-link-base);
}

/* File: a hairline row with the name and a small download button. */
.wp-block-file {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--medium);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-file > a:not(.wp-block-file__button) {
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.wp-block-file .wp-block-file__embed {
	flex-basis: 100%;
	margin-block-end: 0;
	border-radius: var(--wp--custom--radius--small);
}

.wp-block-file .wp-block-file__button,
.wp-block-file * + .wp-block-file__button {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin-inline-start: 0;
	padding: 0.5rem 1.15rem;
	border-radius: var(--wp--custom--radius--button);
	font-size: var(--wp--preset--font-size--x-small);
}

.wp-block-file .wp-block-file__button:where(a):hover,
.wp-block-file .wp-block-file__button:where(a):focus,
.wp-block-file .wp-block-file__button:where(a):visited {
	color: var(--wp--preset--color--on-primary);
	opacity: 1;
}

/* Social links: calm, monochrome hairline circles unless icon colors are chosen. */
.wp-block-social-links {
	gap: var(--wp--preset--spacing--10);
}

.wp-block-social-links:not(.is-style-logos-only):not(.has-icon-color):not(.has-icon-background-color) .wp-social-link {
	border: 1px solid var(--wp--preset--color--hairline);
	background-color: transparent;
	color: var(--sp-text);
	transition: background-color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}

.wp-block-social-links:not(.is-style-logos-only):not(.has-icon-color):not(.has-icon-background-color) .wp-social-link:hover {
	border-color: var(--sp-text);
	background-color: color-mix(in srgb, var(--sp-text) 7%, transparent);
}

.wp-block-social-links.is-style-logos-only:not(.has-icon-color) .wp-social-link {
	color: var(--sp-text);
}

.wp-block-social-links .wp-social-link a {
	box-sizing: border-box;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
}

.wp-block-social-links.is-style-pill-shape .wp-social-link a {
	padding-inline: 1em;
}

.wp-block-social-links .wp-social-link a:focus-visible {
	border-radius: var(--wp--custom--radius--pill);
	outline: 2px solid var(--sp-ring, var(--wp--custom--color--link));
	outline-offset: 2px;
}

/* Embeds and video: rounded like images. */
.wp-block-embed.is-type-video .wp-block-embed__wrapper,
.wp-block-embed.is-type-rich.is-provider-vimeo .wp-block-embed__wrapper,
.wp-block-video video {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--image);
}

.wp-block-embed figcaption,
.wp-block-video figcaption,
.wp-block-audio figcaption {
	margin-block: var(--wp--preset--spacing--20) 0;
}

.wp-block-spacer {
	clear: both;
}

/* ==========================================================================
   11. Motion and forced colors
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.sp-has-motion .wp-block-button:not(.is-style-text-arrow) > .wp-block-button__link:hover {
		transform: translateY(-1px);
	}

	.sp-has-motion .wp-block-button.is-style-text-arrow > .wp-block-button__link:hover::after {
		transform: translateX(0.25em);
	}

	.sp-has-motion .wp-block-button.is-style-text-arrow > .wp-block-button__link:dir(rtl):hover::after {
		transform: scaleX(-1) translateX(0.25em);
	}

	/* Smooth open/close where the browser supports animating details content. */
	.sp-has-motion .wp-block-details {
		interpolate-size: allow-keywords;
	}

	.sp-has-motion .wp-block-details::details-content {
		height: 0;
		overflow-y: clip;
		transition:
			height var(--wp--custom--transition--base),
			content-visibility var(--wp--custom--transition--base) allow-discrete;
	}

	.sp-has-motion .wp-block-details[open]::details-content {
		height: auto;
	}
}

.wp-block-button.is-style-text-arrow > .wp-block-button__link::after,
.wp-block-list.is-style-checks > li::after,
.wp-block-list.is-style-leaves > li::before {
	forced-color-adjust: none;
}

@media (forced-colors: active) {
	.wp-block-group.is-style-card,
	.wp-block-group.is-style-bordered,
	.wp-block-file {
		border-color: CanvasText;
	}

	.wp-block-separator.is-style-short,
	.wp-block-separator.is-style-ornament {
		border-top: 1px solid CanvasText;
		background: none;
	}

	.wp-block-separator.is-style-ornament::before,
	.wp-block-separator.is-style-ornament::after {
		display: none;
	}

	.wp-block-separator.is-style-short {
		width: 3rem;
		height: 0;
	}
}