/**
 * Studiolo — base styles (handle: studiolo-base).
 *
 * Reset, typography, forms, buttons, layout primitives, components, colour
 * schemes, accessibility helpers, motion, WordPress core classes, form-plugin
 * compatibility and print styles.
 *
 * Everything is built from the --st-* design tokens (tokens.css + the inline
 * primitive block printed by the design core), so any combination of
 * Customizer settings — dark presets, 40px corners, uppercase headings,
 * 0.7 density, 22px type, 1.5 ratio — keeps producing a working, readable page.
 *
 * Conventions
 * - Logical properties throughout (RTL ready).
 * - Bare element selectors are wrapped in :where() where other modules are
 *   expected to override them, so a single class always wins.
 * - Private helper properties use the --st-b-* prefix (module B).
 * - Only tokens are used for colour, type and radius; the exceptions are
 *   transparent, currentColor and #000/#fff in contrast fallbacks/print.
 *
 * Table of contents
 *  1. Private helpers
 *  2. Reset & document
 *  3. Typography
 *  4. Links
 *  5. Lists, quotes, rules, code, tables, figures & media
 *  6. Forms
 *  7. Buttons
 *  8. Text utilities
 *  9. Layout primitives
 * 10. Components: card, media, tag & chip
 * 11. Colour schemes (scopes)
 * 12. Accessibility
 * 13. Motion
 * 14. WordPress core classes & alignments
 * 15. Form plugin compatibility
 * 16. Print
 *
 * @package Studiolo
 */

/* ==========================================================================
   1. Private helpers
   ========================================================================== */

:root {
	/* Legibility floors for the two smallest steps of the type scale. */
	--st-b-fs-xs: max(var(--st-fs--2), calc(var(--st-fs-0) * 0.68), 0.6875rem);
	--st-b-fs-sm: max(var(--st-fs--1), calc(var(--st-fs-0) * 0.75), 0.75rem);

	/* Functional rules (inputs, tables, separators) never disappear at border width 0. */
	--st-b-rule: max(1px, var(--st-border-width));

	/* Root-captured accent pair used by the accent scope (avoids var() cycles). */
	--st-b-root-accent: var(--st-color-accent);
	--st-b-root-on-accent: var(--st-color-accent-contrast);

	/* Code font: an optional --st-font-mono token, else the system monospace stack. */
	--st-b-mono: var(--st-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace);

	/* Writing direction multiplier for directional nudges (1 = LTR, -1 = RTL). */
	--st-b-dir: 1;

	/* Shared hover/focus transition list. */
	--st-b-transition:
		color var(--st-duration-fast) var(--st-ease),
		background-color var(--st-duration-fast) var(--st-ease),
		border-color var(--st-duration-fast) var(--st-ease),
		text-decoration-color var(--st-duration-fast) var(--st-ease),
		box-shadow var(--st-duration-fast) var(--st-ease),
		opacity var(--st-duration-fast) var(--st-ease),
		translate var(--st-duration-fast) var(--st-ease);
}

:root:dir(rtl) {
	--st-b-dir: -1;
}

/* ==========================================================================
   2. Reset & document
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	interpolate-size: allow-keywords;
	-webkit-tap-highlight-color: transparent;
}

/* Anchor targets clear the sticky header. */
html:has(> body.st-header-sticky) {
	scroll-padding-block-start: calc(var(--st-header-h) + var(--st-space-s));
}

body {
	margin: 0;
	background-color: var(--st-color-bg);
	color: var(--st-color-text);
	font-family: var(--st-font-body);
	font-size: var(--st-fs-0);
	font-weight: 400;
	line-height: var(--st-body-leading);
	font-kerning: normal;
	font-optical-sizing: auto;
	font-variant-ligatures: common-ligatures;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, blockquote, figure, pre, table, address, fieldset, details, form) {
	margin-block: 0;
}

:where(figure, blockquote, dd) {
	margin-inline: 0;
}

/*
 * Default rhythm for unclassed prose (comments, widgets, classic content).
 * Zero specificity: .st-flow, WordPress layouts and components all override it.
 */
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, pre, table, address, fieldset, details) + :where(p, ul, ol, dl, blockquote, figure, pre, table, address, fieldset, details):where(:not([class])) {
	margin-block-start: var(--st-space-s);
}

:where(*) + :where(h1, h2, h3, h4, h5, h6):where(:not([class])) {
	margin-block-start: var(--st-space-m);
}

:where(img, picture, video, canvas, svg, iframe, embed, object) {
	max-inline-size: 100%;
}

:where(img, video) {
	block-size: auto;
}

:where(img) {
	vertical-align: middle;
	font-style: italic; /* Styles alt text when an image fails to load. */
}

:where(iframe) {
	border: 0;
}

/* Components set display:flex etc.; the hidden attribute must still win. */
[hidden]:not([hidden="until-found"]) {
	display: none !important;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: inherit;
	font-family: var(--st-font-heading);
	font-weight: var(--st-heading-weight);
	line-height: var(--st-heading-leading);
	letter-spacing: var(--st-heading-tracking);
	text-transform: var(--st-heading-case);
	font-synthesis: style;
	font-synthesis-weight: none;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* Fluid tokens plus a vw ceiling (with a rem term, so text zoom still works). */
h1 {
	font-size: min(var(--st-fs-6), calc(10vw + 1rem));
}

h2 {
	font-size: min(var(--st-fs-5), calc(8vw + 1rem));
}

h3 {
	font-size: var(--st-fs-4);
}

h4 {
	font-size: var(--st-fs-3);
	line-height: max(var(--st-heading-leading), 1.15);
}

h5 {
	font-size: var(--st-fs-2);
	line-height: max(var(--st-heading-leading), 1.25);
	letter-spacing: calc(var(--st-heading-tracking) * 0.5);
}

h6 {
	font-size: var(--st-fs-1);
	line-height: max(var(--st-heading-leading), 1.3);
	letter-spacing: calc(var(--st-heading-tracking) * 0.5);
}

/* Large type on narrow screens: allow hyphenation of long words only. */
@media (max-width: 47.99em) {
	h1,
	h2,
	h3,
	.st-display,
	.is-style-display {
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 10 4 4;
		/* Last resort for extreme settings (huge base size, wide tracking,
		   uppercase): break a word that cannot fit on a line at all, so it
		   never pushes the page sideways. Also lowers min-content width
		   inside flex/grid layouts. */
		overflow-wrap: anywhere;
	}
}

p,
li,
dd,
figcaption,
blockquote {
	text-wrap: pretty;
}

small {
	font-size: 0.8125em;
}

:where(sub, sup) {
	position: relative;
	font-size: 0.72em;
	line-height: 0;
	vertical-align: baseline;
}

sub {
	inset-block-end: -0.25em;
}

sup {
	inset-block-start: -0.5em;
}

abbr[title] {
	cursor: help;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

mark:not(.has-inline-color) {
	padding-inline: 0.15em;
	border-radius: var(--st-radius-sm);
	background-color: color-mix(in srgb, var(--st-color-accent) 22%, transparent);
	color: inherit;
}

address {
	font-style: normal;
}

/* ==========================================================================
   4. Links
   ==========================================================================
   :any-link (0,1,0) out-ranks the core global-styles link rule and keeps the
   refined underline; one class from any later stylesheet still overrides it. */

:any-link {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: max(1px, 0.06em);
	text-decoration-color: color-mix(in srgb, var(--st-color-accent) 40%, transparent);
	text-decoration-skip-ink: auto;
	text-underline-offset: 0.22em;
	transition: var(--st-b-transition);
}

:any-link:where(:not(.st-btn, .wp-element-button, .wp-block-button__link, .st-tag, .st-chip, .st-card)):hover {
	color: var(--st-color-accent);
	text-decoration-color: currentColor;
}

:is(h1, h2, h3, h4, h5, h6) :any-link {
	text-decoration-line: none;
}

:is(h1, h2, h3, h4, h5, h6) :any-link:hover {
	text-decoration-line: underline;
	text-decoration-thickness: max(1px, 0.04em);
	text-underline-offset: 0.12em;
}

/* ==========================================================================
   5. Lists, quotes, rules, code, tables, figures & media
   ========================================================================== */

:where(ul, ol) {
	padding-inline-start: 1.25em;
}

/* Only unclassed items (content), never navigation menus. */
:where(li:not([class])) + :where(li:not([class])) {
	margin-block-start: var(--st-space-3xs);
}

:where(li:not([class])) > :where(ul, ol) {
	margin-block-start: var(--st-space-3xs);
}

:where(ul:not([class]), ol:not([class]), .wp-block-list) > li::marker {
	color: var(--st-color-muted);
}

:where(ol:not([class]), ol.wp-block-list) > li::marker {
	font-variant-numeric: tabular-nums;
}

dt {
	font-weight: 600;
}

:where(dd) + :where(dt) {
	margin-block-start: var(--st-space-xs);
}

blockquote {
	margin-inline: 0;
	padding-inline-start: var(--st-space-m);
	border-inline-start: var(--st-b-rule) solid var(--st-color-accent);
	font-family: var(--st-font-heading);
	font-size: var(--st-fs-1);
	line-height: clamp(1.25, calc(var(--st-heading-leading) + 0.25), 1.5);
	letter-spacing: calc(var(--st-heading-tracking) * 0.5);
	hanging-punctuation: first;
}

blockquote > :where(p) + :where(p) {
	margin-block-start: var(--st-space-s);
}

blockquote cite,
.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-block-start: var(--st-space-s);
	color: var(--st-color-muted);
	font-family: var(--st-font-ui);
	font-size: var(--st-b-fs-xs);
	font-style: normal;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: var(--st-ui-tracking);
	text-transform: var(--st-ui-case);
}

blockquote cite::before,
.wp-block-quote cite::before,
.wp-block-pullquote cite::before {
	content: "";
	display: inline-block;
	inline-size: 1.5em;
	block-size: 0;
	margin-inline-end: 0.75em;
	border-block-start: var(--st-b-rule) solid currentColor;
	vertical-align: middle;
}

hr {
	overflow: visible;
	block-size: 0;
	margin-block: var(--st-space-xl);
	border: 0;
	border-block-start: var(--st-b-rule) solid var(--st-color-border);
	color: var(--st-color-border);
}

code,
kbd,
samp,
pre {
	font-family: var(--st-b-mono);
	font-variant-ligatures: none;
}

code,
kbd,
samp {
	font-size: 0.875em;
}

:not(pre) > code {
	padding: 0.12em 0.36em;
	border-radius: var(--st-radius-sm);
	background-color: var(--st-color-surface);
	overflow-wrap: anywhere;
}

kbd {
	padding: 0.1em 0.4em;
	border: var(--st-b-rule) solid var(--st-color-border);
	border-block-end-width: calc(var(--st-b-rule) * 2);
	border-radius: var(--st-radius-sm);
	background-color: var(--st-color-bg);
	font-size: 0.8em;
}

pre {
	overflow-x: auto;
	padding: var(--st-space-m);
	border-radius: var(--st-radius);
	background-color: var(--st-color-surface);
	color: var(--st-color-text);
	font-size: var(--st-b-fs-sm);
	line-height: 1.65;
	tab-size: 4;
	white-space: pre;
}

pre code {
	padding: 0;
	background: none;
	font-size: inherit;
}

table {
	inline-size: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-variant-numeric: tabular-nums lining-nums;
}

th,
td {
	padding: var(--st-space-xs) var(--st-space-s);
	border-block-end: var(--st-b-rule) solid var(--st-color-border);
	text-align: start;
	vertical-align: top;
}

th {
	color: var(--st-color-muted);
	font-family: var(--st-font-ui);
	font-size: var(--st-b-fs-xs);
	font-weight: 500;
	letter-spacing: var(--st-ui-tracking);
	text-transform: var(--st-ui-case);
}

thead :is(th, td) {
	border-block-end-color: var(--st-color-text);
	vertical-align: bottom;
}

tfoot :is(th, td) {
	border-block-start: var(--st-b-rule) solid var(--st-color-text);
	border-block-end: 0;
}

caption {
	padding-block-start: var(--st-space-xs);
	caption-side: bottom;
	color: var(--st-color-muted);
	font-family: var(--st-font-ui);
	font-size: var(--st-b-fs-sm);
	text-align: start;
}

figcaption,
.wp-element-caption,
.wp-caption-text,
.gallery-caption {
	margin-block: var(--st-space-xs) 0;
	color: var(--st-color-muted);
	font-family: var(--st-font-ui);
	font-size: var(--st-b-fs-sm);
	line-height: 1.5;
	text-wrap: pretty;
}

/* ==========================================================================
   6. Forms
   ==========================================================================
   Zero-specificity base so components and plugins can refine it; editor UI
   controls (components-*) are left untouched. */

:where(
	input:not([type]),
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	select,
	textarea
):where(:not([class*="components-"])) {
	-webkit-appearance: none;
	appearance: none;
	max-inline-size: 100%;
	min-block-size: 2.75rem;
	margin: 0;
	padding: var(--st-space-xs) var(--st-space-s);
	border: var(--st-b-rule) solid color-mix(in srgb, var(--st-color-text) 45%, var(--st-color-border));
	border-radius: var(--st-radius-sm);
	background-color: var(--st-color-bg);
	color: var(--st-color-text);
	font-family: inherit;
	font-size: max(1rem, var(--st-fs-0)); /* >= 16px: no iOS zoom on focus. */
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	transition: var(--st-b-transition);
}

:where(
	input:not([type]),
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	select,
	textarea
):where(:not([class*="components-"])):hover {
	border-color: color-mix(in srgb, var(--st-color-text) 70%, var(--st-color-border));
}

:where(
	input:not([type]),
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	select,
	textarea
):where(:not([class*="components-"])):focus {
	border-color: var(--st-color-text);
}

:where(textarea):where(:not([class*="components-"])) {
	display: block;
	inline-size: 100%;
	min-block-size: 9rem;
	line-height: var(--st-body-leading);
	resize: vertical;
}

/* Caret drawn with one conic gradient in currentColor: crisp, follows every scheme. */
:where(select:not([multiple]):not([size])):where(:not([class*="components-"])) {
	padding-inline-end: calc(var(--st-space-s) + 1.25em);
	background-image: conic-gradient(from -45deg at 50% 100%, currentColor 90deg, transparent 0);
	background-position: calc(100% - var(--st-space-s)) 50%;
	background-repeat: no-repeat;
	background-size: 0.62em 0.31em;
	cursor: pointer;
}

:where(select:not([multiple]):not([size])):where(:not([class*="components-"])):dir(rtl) {
	background-position: var(--st-space-s) 50%;
}

:where(select) option {
	background-color: var(--st-color-bg);
	color: var(--st-color-text);
}

:where(input, textarea):where(:not([class*="components-"]))::placeholder {
	color: var(--st-color-muted);
	opacity: 1;
}

:where(input, select, textarea, button):disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

:where(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--st-color-text);
	box-shadow: inset 0 0 0 1px var(--st-color-text);
}

:where(input, select, textarea):user-invalid {
	border-color: var(--st-color-text);
	box-shadow: inset 0 0 0 1px var(--st-color-text);
}

:where(input[type="search"])::-webkit-search-decoration {
	-webkit-appearance: none;
}

:where(input[type="checkbox"], input[type="radio"]) {
	inline-size: 1.125em;
	block-size: 1.125em;
	margin-block: 0;
	margin-inline: 0 0.5em;
	accent-color: var(--st-color-accent);
	cursor: pointer;
	vertical-align: -0.15em;
}

:where(input[type="range"], progress, meter) {
	accent-color: var(--st-color-accent);
}

:where(input[type="range"]) {
	inline-size: 100%;
	cursor: pointer;
}

:where(input[type="color"]) {
	inline-size: 3rem;
	block-size: 2.75rem;
	padding: 0.2rem;
	border: var(--st-b-rule) solid var(--st-color-border);
	border-radius: var(--st-radius-sm);
	background-color: var(--st-color-bg);
	cursor: pointer;
}

:where(input[type="file"]) {
	max-inline-size: 100%;
	color: var(--st-color-muted);
	font-family: inherit;
	font-size: var(--st-b-fs-sm);
}

:where(input[type="file"])::file-selector-button {
	min-block-size: 2.75rem;
	margin-inline-end: var(--st-space-s);
	padding: var(--st-space-2xs) var(--st-space-s);
	border: var(--st-b-rule) solid var(--st-color-text);
	border-radius: var(--st-radius-button);
	background-color: transparent;
	color: var(--st-color-text);
	font-family: var(--st-font-ui);
	font-size: var(--st-b-fs-sm);
	font-weight: 500;
	letter-spacing: var(--st-ui-tracking);
	text-transform: var(--st-ui-case);
	cursor: pointer;
	transition: var(--st-b-transition);
}

:where(input[type="file"])::file-selector-button:hover {
	background-color: var(--st-color-text);
	color: var(--st-color-bg);
}

fieldset {
	min-inline-size: 0;
	margin: 0;
	padding: var(--st-space-m);
	border: var(--st-b-rule) solid var(--st-color-border);
	border-radius: var(--st-radius);
}

legend {
	padding-inline: var(--st-space-2xs);
	color: var(--st-color-muted);
	font-family: var(--st-font-ui);
	font-size: var(--st-b-fs-xs);
	font-weight: 500;
	letter-spacing: var(--st-ui-tracking);
	text-transform: var(--st-ui-case);
}

/* ==========================================================================
   7. Buttons
   ==========================================================================
   Bare <button>/<input> controls get the look at zero specificity (one class
   resets them), excluding editor UI, the Customizer, core navigation/lightbox
   controls and the MediaElement audio/video player. */

.st-btn,
.wp-element-button,
.wp-block-button__link,
.wp-block-search__button,
:where(button, input[type="submit"], input[type="button"], input[type="reset"]):where(:not([class*="components-"], [class*="block-editor-"], [class*="editor-"], [class*="edit-post-"], [class*="customize-"], [class*="wp-block-navigation"], [class*="lightbox"], .close-button, .mejs-container *)),
body div.wpforms-container .wpforms-form :is(button[type="submit"], .wpforms-submit, .wpforms-page-button),
body .gform_wrapper :is(.gform_button, .gform_next_button, .gform_previous_button),
body .fluentform .ff-btn-submit {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-block-size: 2.75rem;
	margin: 0;
	padding: var(--st-space-xs) var(--st-space-m);
	border: var(--st-b-rule) solid transparent;
	border-radius: var(--st-radius-button);
	background-color: var(--st-color-accent);
	background-image: none;
	box-shadow: none;
	color: var(--st-color-accent-contrast);
	font-family: var(--st-font-ui);
	font-size: max(var(--st-b-fs-sm), 0.875rem);
	font-style: normal;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--st-ui-tracking);
	text-align: center;
	text-decoration: none;
	text-transform: var(--st-ui-case);
	vertical-align: middle;
	cursor: pointer;
	transition: var(--st-b-transition);
}

/* Hover tints with the label colour, so it works on every accent and custom colour. */
.st-btn:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-block-search__button:hover,
:where(button, input[type="submit"], input[type="button"], input[type="reset"]):where(:not([class*="components-"], [class*="block-editor-"], [class*="editor-"], [class*="edit-post-"], [class*="customize-"], [class*="wp-block-navigation"], [class*="lightbox"], .close-button, .mejs-container *)):hover,
body div.wpforms-container .wpforms-form :is(button[type="submit"], .wpforms-submit, .wpforms-page-button):hover,
body .gform_wrapper :is(.gform_button, .gform_next_button, .gform_previous_button):hover,
body .fluentform .ff-btn-submit:hover {
	box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 13%, transparent);
}

.st-btn:active,
.wp-element-button:active,
.wp-block-button__link:active,
.wp-block-search__button:active {
	translate: 0 1px;
}

.st-btn:disabled,
.st-btn[aria-disabled="true"],
.wp-element-button:disabled,
.wp-element-button[aria-disabled="true"],
.wp-block-search__button:disabled {
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.5;
	translate: none;
}

.st-btn .st-icon,
.wp-block-button__link .st-icon {
	flex: none;
	inline-size: 1.15em;
	block-size: 1.15em;
	transition: translate var(--st-duration-fast) var(--st-ease);
}

.st-btn:hover .st-icon--arrow-right {
	translate: calc(var(--st-b-dir) * 0.25em) 0;
}

.st-btn:hover .st-icon--arrow-left {
	translate: calc(var(--st-b-dir) * -0.25em) 0;
}

.st-btn:hover .st-icon--arrow-up-right,
.st-btn:hover .st-icon--external {
	translate: calc(var(--st-b-dir) * 0.15em) -0.15em;
}

/* Outline. */
.st-btn--outline,
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	padding: var(--st-space-xs) var(--st-space-m);
	border: var(--st-b-rule) solid currentColor;
	background-color: transparent;
	color: var(--st-color-text);
}

.st-btn--outline:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):not(.has-background):hover,
.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color):not(.has-background):hover {
	border-color: var(--st-color-text);
	background-color: var(--st-color-text);
	box-shadow: none;
	color: var(--st-color-bg);
}

/* Ghost. */
.st-btn--ghost {
	border-color: transparent;
	background-color: transparent;
	color: var(--st-color-text);
}

.st-btn--ghost:hover {
	box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 8%, transparent);
	color: var(--st-color-text);
}

/* Text (no box). */
.st-btn--text {
	padding-block: 0;
	padding-inline: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--st-color-text);
	text-decoration-line: underline;
	text-decoration-thickness: max(1px, 0.08em);
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.45em;
}

.st-btn--text:hover {
	box-shadow: none;
	color: var(--st-color-accent);
	text-decoration-color: currentColor;
}

/* Sizes. */
.st-btn--sm {
	position: relative;
	min-block-size: 2.25rem;
	padding: var(--st-space-2xs) var(--st-space-s);
	font-size: max(var(--st-b-fs-xs), 0.8125rem);
}

/* Invisible hit area keeps the 44px target. */
.st-btn--sm::after {
	content: "";
	position: absolute;
	inset: -0.25rem 0;
}

.st-btn--lg {
	min-block-size: 3.5rem;
	padding: var(--st-space-s) var(--st-space-l);
	font-size: max(var(--st-fs-0), 1rem);
}

/* ==========================================================================
   8. Text utilities
   ========================================================================== */

.st-label,
.is-style-label {
	color: var(--st-color-muted);
	font-family: var(--st-font-ui);
	font-size: var(--st-b-fs-xs);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: var(--st-ui-tracking);
	text-transform: var(--st-ui-case);
}

.st-label :any-link,
.is-style-label :any-link {
	color: inherit;
	text-decoration-line: none;
}

.st-label :any-link:hover,
.is-style-label :any-link:hover {
	color: var(--st-color-text);
	text-decoration-line: underline;
}

.st-muted {
	color: var(--st-color-muted);
}

.st-lead,
.is-style-lead {
	font-family: var(--st-font-heading);
	font-size: var(--st-fs-1);
	font-weight: 400;
	line-height: clamp(1.3, calc(var(--st-heading-leading) + 0.3), 1.6);
	letter-spacing: calc(var(--st-heading-tracking) * 0.4);
	text-wrap: pretty;
}

.st-display,
.is-style-display {
	font-family: var(--st-font-heading);
	font-size: min(var(--st-fs-7), calc(12vw + 1rem));
	font-weight: var(--st-heading-weight);
	line-height: var(--st-heading-leading);
	letter-spacing: var(--st-heading-tracking);
	text-transform: var(--st-heading-case);
	font-synthesis: style;
	font-synthesis-weight: none;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* ==========================================================================
   9. Layout primitives
   ========================================================================== */

.st-container {
	inline-size: min(100% - 2 * var(--st-gutter), var(--st-wide-width));
	margin-inline: auto;
}

.st-container--content {
	inline-size: min(100% - 2 * var(--st-gutter), var(--st-content-width));
}

/* Nested containers do not subtract the gutter twice. */
.st-container .st-container {
	inline-size: min(100%, var(--st-wide-width));
}

.st-container .st-container--content {
	inline-size: min(100%, var(--st-content-width));
}

.st-container--full,
.st-container.st-container--full {
	inline-size: auto;
	max-inline-size: none;
	margin-inline: 0;
	padding-inline: var(--st-gutter);
}

.st-section {
	padding-block: var(--st-section);
}

.st-section--tight {
	padding-block: calc(var(--st-section) * 0.5);
}

/* Vertical flow. Override the gap per instance with --st-stack-gap. */
.st-stack > * {
	margin-block: 0;
}

.st-stack > * + * {
	margin-block-start: var(--st-stack-gap, var(--st-space-m));
}

/* Wrapping row. Override the gap per instance with --st-cluster-gap. */
.st-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--st-cluster-gap, var(--st-space-s));
}

/* Grid: 1 column < 640px, 2 < 960px, then the modifier's count. */
.st-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--st-grid-row-gap, var(--st-space-xl)) var(--st-grid-gap, var(--st-space-l));
}

.st-grid > * {
	min-inline-size: 0;
}

.st-grid--2,
.st-grid--3,
.st-grid--4 {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40em) {
	.st-grid--2,
	.st-grid--3,
	.st-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 60em) {
	.st-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.st-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   10. Components
   ========================================================================== */

/*
 * Card. The base rule is the "flat" look (also the fallback where no body
 * class exists, e.g. the block editor — see inc/blocks/block-styles.php).
 * Keep the editor map in block-styles.php in sync with these rules.
 */
.st-card,
.wp-block-group.is-style-card {
	position: relative;
	padding: var(--st-space-m) 0 0;
	border: 0;
	border-block-start: var(--st-border-width) solid var(--st-color-border);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: inherit;
	transition: var(--st-b-transition);
}

.st-cards-outline .st-card,
.st-cards-outline .wp-block-group.is-style-card {
	padding: var(--st-space-l);
	border: var(--st-b-rule) solid var(--st-color-border);
	border-radius: var(--st-radius-card);
	background-color: transparent;
	box-shadow: none;
}

.st-cards-elevated .st-card,
.st-cards-elevated .wp-block-group.is-style-card {
	padding: var(--st-space-l);
	border: 0;
	border-radius: var(--st-radius-card);
	background-color: var(--st-color-bg);
	box-shadow: var(--st-shadow-md);
}

.st-cards-filled .st-card,
.st-cards-filled .wp-block-group.is-style-card {
	padding: var(--st-space-l);
	border: 0;
	border-radius: var(--st-radius-card);
	background-color: var(--st-color-surface);
	box-shadow: none;
}

/* On a surface section, elevated cards sit on paper (the scope's surface). */
.st-cards-elevated :is(.st-scheme-surface, .is-style-surface, .st-footer-surface .st-footer) :is(.st-card, .wp-block-group.is-style-card) {
	background-color: var(--st-color-surface);
}

/* Shadows vanish on dark scopes: elevated cards use the scope surface there. */
.st-cards-elevated :is(.st-scheme-inverted, .is-style-inverted, .st-footer-inverted .st-footer, .st-scheme-accent, .is-style-accent, .st-footer-accent .st-footer, .st-scheme-custom) :is(.st-card, .wp-block-group.is-style-card) {
	background-color: var(--st-color-surface);
	box-shadow: none;
}

a.st-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.st-card--link {
	cursor: pointer;
}

.st-card--link :is(.st-card__link, .st-stretched-link) {
	color: inherit;
	text-decoration: none;
}

/* A .st-card__link / .st-stretched-link inside makes the whole card clickable. */
.st-card--link :is(.st-card__link, .st-stretched-link)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.st-card--link:hover,
.st-card--link:focus-within {
	border-color: var(--st-color-text);
}

.st-cards-elevated .st-card--link:hover,
.st-cards-elevated .st-card--link:focus-within {
	box-shadow: var(--st-shadow-lg);
}

.st-cards-filled .st-card--link:hover,
.st-cards-filled .st-card--link:focus-within {
	background-color: var(--st-color-surface-strong);
}

/* Other controls inside a linked card stay above the stretched link. */
.st-card--link :where(a, button, input, select, textarea, summary, label):where(:not(.st-card__link, .st-stretched-link)) {
	position: relative;
	z-index: 2;
}

/* The focus ring wraps the whole card when its main link has focus.
   Without :has() support the link keeps its own ring. */
@supports selector(:has(*)) {
	.st-card--link:has(:is(.st-card__link, .st-stretched-link):focus-visible) {
		outline: 2px solid var(--st-color-focus);
		outline-offset: 3px;
	}

	.st-card--link :is(.st-card__link, .st-stretched-link):focus-visible {
		outline: 0;
	}
}

/* Media frame. */
.st-media {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--st-radius-media);
	background-color: var(--st-color-surface);
}

.st-media > :is(img, video, iframe, svg),
.st-media > picture,
.st-media > picture > img,
.st-media > a > img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.st-media :is(img, video) {
	transition: scale var(--st-duration) var(--st-ease), opacity var(--st-duration) var(--st-ease);
}

.st-media--ratio {
	aspect-ratio: var(--st-ratio, 4 / 3);
}

.st-media--ratio > :is(img, video, iframe, svg),
.st-media--ratio > picture,
.st-media--ratio > picture > img,
.st-media--ratio > a,
.st-media--ratio > a > img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Tag & chip. */
.st-tag,
.st-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	border: var(--st-b-rule) solid var(--st-color-border);
	border-radius: var(--st-radius-button);
	background-color: transparent;
	color: var(--st-color-text);
	font-family: var(--st-font-ui);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--st-ui-tracking);
	text-decoration: none;
	text-transform: var(--st-ui-case);
	white-space: nowrap;
	transition: var(--st-b-transition);
}

.st-tag {
	position: relative;
	min-block-size: 2rem;
	padding: 0.3em 0.85em;
	font-size: var(--st-b-fs-xs);
}

/* Invisible hit area: 2rem chip, 2.75rem target. */
.st-tag:is(a, button)::after {
	content: "";
	position: absolute;
	inset: -0.375rem 0;
}

.st-chip {
	min-block-size: 2.75rem;
	padding: 0.4em var(--st-space-s);
	font-size: max(var(--st-b-fs-sm), 0.8125rem);
}

:is(a, button).st-tag:hover,
:is(a, button).st-chip:hover {
	border-color: var(--st-color-text);
	box-shadow: none;
	color: var(--st-color-text);
}

.st-tag[aria-current]:not([aria-current="false"]),
.st-tag.is-active,
.st-chip[aria-current]:not([aria-current="false"]),
.st-chip.is-active,
:is(a, button).st-chip[aria-current]:not([aria-current="false"]):hover,
:is(a, button).st-chip.is-active:hover {
	border-color: var(--st-color-accent);
	background-color: var(--st-color-accent);
	color: var(--st-color-accent-contrast);
}

/* Forced colours drop the fill, so mark the current chip with system colours. */
@media (forced-colors: active) {
	.st-tag[aria-current]:not([aria-current="false"]),
	.st-tag.is-active,
	.st-chip[aria-current]:not([aria-current="false"]),
	.st-chip.is-active {
		forced-color-adjust: none;
		border-color: Highlight;
		background-color: Highlight;
		color: HighlightText;
		outline-color: CanvasText;
	}
}

/* ==========================================================================
   11. Colour schemes (scopes)
   ==========================================================================
   Each scope re-derives every colour token from its own bg/text so nothing
   inherits stale values from :root. Root-captured copies (--st-ink,
   --st-paper, --st-tint, --st-b-root-*) avoid var() cycles. */

.st-scheme-surface,
.is-style-surface,
.st-footer-surface .st-footer,
.st-scheme-inverted,
.is-style-inverted,
.st-footer-inverted .st-footer,
.st-scheme-accent,
.is-style-accent,
.st-footer-accent .st-footer,
.st-scheme-custom {
	--st-color-muted: color-mix(in srgb, var(--st-color-text) 72%, var(--st-color-bg));
	--st-color-border: color-mix(in srgb, var(--st-color-text) 16%, var(--st-color-bg));
	--st-color-surface: color-mix(in srgb, var(--st-color-text) 7%, var(--st-color-bg));
	--st-color-surface-strong: color-mix(in srgb, var(--st-color-text) 8%, var(--st-color-surface));
	--st-color-accent-hover: color-mix(in srgb, var(--st-color-accent) 82%, var(--st-color-text));
	--st-color-focus: var(--st-color-accent);
	--st-color-overlay: color-mix(in srgb, var(--st-color-text) 55%, transparent);
	background-color: var(--st-color-bg);
	color: var(--st-color-text);
}

/* Surface: the tint; cards inside sit on paper. Accent unchanged. */
.st-scheme-surface,
.is-style-surface,
.st-footer-surface .st-footer {
	--st-color-bg: var(--st-tint);
	--st-color-text: var(--st-ink);
	--st-color-surface: var(--st-paper);
}

/* Inverted: ink and paper swap; accent becomes monochrome (always readable). */
.st-scheme-inverted,
.is-style-inverted,
.st-footer-inverted .st-footer {
	--st-color-bg: var(--st-ink);
	--st-color-text: var(--st-paper);
	--st-color-accent: var(--st-color-text);
	--st-color-accent-contrast: var(--st-color-bg);
}

/* Accent: accent background; inside, the accent pair flips.
   Mid-tone backgrounds leave no room for a dimmer "muted" text that still
   reads at 4.5:1, so muted text uses the full text colour here. */
.st-scheme-accent,
.is-style-accent,
.st-footer-accent .st-footer {
	--st-color-bg: var(--st-b-root-accent);
	--st-color-text: var(--st-b-root-on-accent);
	--st-color-accent: var(--st-color-text);
	--st-color-accent-contrast: var(--st-color-bg);
	--st-color-muted: var(--st-color-text);
	/* Stronger rules on mid-tone accents so form-field borders keep 3:1. */
	--st-color-border: color-mix(in srgb, var(--st-color-text) 40%, var(--st-color-bg));
}

/* Custom: bg/text come from an inline style; accent follows the text.
   Muted = text for the same reason as the accent scope. */
.st-scheme-custom {
	--st-color-muted: var(--st-color-text);
	--st-color-accent: var(--st-color-text);
	--st-color-accent-contrast: var(--st-color-bg);
}

/* Match: no colour change, a hairline separates the footer instead. */
.st-footer-match .st-footer {
	border-block-start: var(--st-border-width) solid var(--st-color-border);
}

/* ==========================================================================
   12. Accessibility
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	overflow: hidden;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

/* :focus-within covers visually hidden wrappers around a link, e.g. the
   site title when "Display Site Title" is off and there is no logo. */
.screen-reader-text:focus,
.screen-reader-text:focus-within {
	inset-block-start: 5px;
	inset-inline-start: 5px;
	z-index: 100000;
	display: block;
	inline-size: auto;
	block-size: auto;
	padding: 15px 23px 14px;
	border-radius: var(--st-radius-sm);
	background-color: var(--st-color-bg);
	box-shadow: var(--st-shadow-md);
	clip: auto !important;
	clip-path: none;
	color: var(--st-color-text);
	font-family: var(--st-font-ui);
	font-size: var(--st-b-fs-sm);
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
}

.skip-link:focus {
	inset-block-start: var(--st-space-xs);
	inset-inline-start: var(--st-space-xs);
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	padding: var(--st-space-xs) var(--st-space-m);
	border-radius: var(--st-radius-button);
	background-color: var(--st-color-accent);
	color: var(--st-color-accent-contrast);
	letter-spacing: var(--st-ui-tracking);
	text-transform: var(--st-ui-case);
}

.admin-bar .skip-link:focus {
	inset-block-start: calc(32px + var(--st-space-xs));
}

@media (max-width: 782px) {
	.admin-bar .skip-link:focus {
		inset-block-start: calc(46px + var(--st-space-xs));
	}
}

:focus-visible {
	outline: 2px solid var(--st-color-focus);
	outline-offset: 3px;
}

:focus:not(:focus-visible) {
	outline: 0;
}

/* Programmatic focus targets (skip link, live regions) need no ring. */
[tabindex="-1"]:focus:not(:focus-visible),
.st-main:focus {
	outline: 0;
}

::selection {
	background-color: var(--st-color-accent);
	color: var(--st-color-accent-contrast);
}

/* ==========================================================================
   13. Motion
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth;
	}

	.st-will-reveal {
		opacity: 0;
		translate: 0 1.5rem;
		transition:
			opacity var(--st-duration) var(--st-ease) var(--st-reveal-delay, 0ms),
			translate var(--st-duration) var(--st-ease) var(--st-reveal-delay, 0ms);
	}

	.st-will-reveal.is-revealed {
		opacity: 1;
		translate: none;
	}

	.st-motion .st-card--link:hover,
	.st-motion .st-card--link:focus-within {
		translate: 0 -0.25rem;
	}

	.st-motion .st-card--link:hover .st-media :is(img, video),
	.st-motion a:hover > .st-media :is(img, video) {
		scale: 1.03;
	}
}

/* Global kill switch. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   14. WordPress core classes & alignments
   ========================================================================== */

.alignleft {
	float: left;
	float: inline-start;
	margin-block: var(--st-space-3xs) var(--st-space-s);
	margin-inline: 0 var(--st-space-m);
}

.alignright {
	float: right;
	float: inline-end;
	margin-block: var(--st-space-3xs) var(--st-space-s);
	margin-inline: var(--st-space-m) 0;
}

.aligncenter {
	clear: both;
	margin-inline: auto;
}

img.aligncenter {
	display: block;
}

.wp-caption {
	max-inline-size: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	margin-inline: auto;
}

.wp-caption.aligncenter {
	text-align: center;
}

/* Theme-check markers: styled in context by the content templates. */
.sticky {
	--st-is-sticky: 1;
}

.bypostauthor {
	--st-is-post-author: 1;
}

/* Classic [gallery] shortcode (html5 markup, no core inline styles). */
.gallery {
	display: grid;
	grid-template-columns: repeat(var(--st-b-gallery-cols, 3), minmax(0, 1fr));
	gap: var(--st-space-s);
}

.gallery-columns-1 { --st-b-gallery-cols: 1; }
.gallery-columns-2 { --st-b-gallery-cols: 2; }
.gallery-columns-3 { --st-b-gallery-cols: 3; }
.gallery-columns-4 { --st-b-gallery-cols: 4; }
.gallery-columns-5 { --st-b-gallery-cols: 5; }
.gallery-columns-6 { --st-b-gallery-cols: 6; }
.gallery-columns-7 { --st-b-gallery-cols: 7; }
.gallery-columns-8 { --st-b-gallery-cols: 8; }
.gallery-columns-9 { --st-b-gallery-cols: 9; }

@media (max-width: 39.99em) {
	.gallery:not(.gallery-columns-1) {
		--st-b-gallery-cols: 2;
	}
}

.gallery-item {
	margin: 0;
}

.gallery-icon img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--st-radius-media);
}

/* ==========================================================================
   15. Form plugin compatibility
   ==========================================================================
   Contact Form 7, WPForms, Gravity Forms (2.5 & Orbital), Fluent Forms.
   Specificity is raised just enough to beat each plugin's own defaults. */

/* Plugin design APIs (CSS custom properties). */
.wpforms-container {
	--wpforms-field-border-radius: var(--st-radius-sm);
	--wpforms-field-border-size: var(--st-b-rule);
	--wpforms-field-border-color: color-mix(in srgb, var(--st-color-text) 45%, var(--st-color-border));
	--wpforms-field-border-color-spare: color-mix(in srgb, var(--st-color-text) 45%, var(--st-color-border));
	--wpforms-field-background-color: var(--st-color-bg);
	--wpforms-field-text-color: var(--st-color-text);
	--wpforms-field-menu-color: var(--st-color-bg);
	--wpforms-label-color: var(--st-color-text);
	--wpforms-label-sublabel-color: var(--st-color-muted);
	--wpforms-label-error-color: var(--st-color-text);
	--wpforms-button-border-radius: var(--st-radius-button);
	--wpforms-button-border-size: var(--st-b-rule);
	--wpforms-button-border-color: transparent;
	--wpforms-button-background-color: var(--st-color-accent);
	--wpforms-button-text-color: var(--st-color-accent-contrast);
	--wpforms-page-break-color: var(--st-color-accent);
}

/* Orbital prints per-form defaults with id selectors; the theme palette wins. */
.gform-theme--framework {
	--gf-color-primary: var(--st-color-accent) !important;
	--gf-color-primary-contrast: var(--st-color-accent-contrast) !important;
	--gf-color-primary-darker: var(--st-color-accent-hover) !important;
	--gf-color-primary-lighter: color-mix(in srgb, var(--st-color-accent) 70%, var(--st-color-bg)) !important;
	--gf-color-in-ctrl: var(--st-color-bg) !important;
	--gf-color-in-ctrl-contrast: var(--st-color-text) !important;
	--gf-color-out-ctrl-dark: var(--st-color-text) !important;
	--gf-color-out-ctrl-light: var(--st-color-border) !important;
	--gf-ctrl-border-color: color-mix(in srgb, var(--st-color-text) 45%, var(--st-color-border)) !important;
	--gf-ctrl-label-color-primary: var(--st-color-text) !important;
	--gf-ctrl-label-color-secondary: var(--st-color-muted) !important;
	--gf-radius: var(--st-radius-sm) !important;
}

/* Fields. */
.wpcf7 :is(input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"], select, textarea),
body div.wpforms-container .wpforms-form :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"], select, textarea),
body .gform_wrapper.gravity-theme :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"], select, textarea),
body .fluentform .ff-el-form-control {
	inline-size: 100%;
	max-inline-size: 100%;
	min-block-size: 2.75rem;
	padding: var(--st-space-xs) var(--st-space-s);
	border: var(--st-b-rule) solid color-mix(in srgb, var(--st-color-text) 45%, var(--st-color-border));
	border-radius: var(--st-radius-sm);
	background-color: var(--st-color-bg);
	box-shadow: none;
	color: var(--st-color-text);
	font-family: inherit;
	font-size: max(1rem, var(--st-fs-0));
	line-height: 1.4;
	transition: var(--st-b-transition);
}

.wpcf7 textarea,
body div.wpforms-container .wpforms-form textarea,
body .gform_wrapper.gravity-theme textarea,
body .fluentform textarea.ff-el-form-control {
	min-block-size: 9rem;
	line-height: var(--st-body-leading);
}

.wpcf7 :is(input, select, textarea):focus,
body div.wpforms-container .wpforms-form :is(input, select, textarea):focus,
body .gform_wrapper.gravity-theme :is(input, select, textarea):focus,
body .fluentform .ff-el-form-control:focus {
	border-color: var(--st-color-text);
	box-shadow: none;
	outline: 2px solid var(--st-color-focus);
	outline-offset: 3px;
}

/* Labels. */
.wpcf7 label,
body div.wpforms-container .wpforms-form .wpforms-field-label,
body .gform_wrapper.gravity-theme .gfield_label,
body .fluentform .ff-el-input--label label {
	display: block;
	margin-block-end: var(--st-space-2xs);
	color: var(--st-color-text);
	font-family: inherit;
	font-size: var(--st-b-fs-sm);
	font-weight: 500;
	line-height: 1.4;
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-block-start: var(--st-space-2xs);
}

.wpcf7 .wpcf7-list-item {
	margin-block: 0;
	margin-inline: 0 var(--st-space-s);
}

.wpcf7 .wpcf7-list-item label,
body div.wpforms-container .wpforms-form .wpforms-field-label-inline,
body .gform_wrapper.gravity-theme :is(.gchoice label, .ginput_container_consent label) {
	display: inline;
	margin: 0;
	font-size: inherit;
	font-weight: 400;
}

body div.wpforms-container .wpforms-form :is(.wpforms-field-sublabel, .wpforms-field-description),
body .gform_wrapper.gravity-theme :is(.gfield_description, .gform-field-label--type-sub),
body .fluentform .ff-el-help-message {
	color: var(--st-color-muted);
	font-size: var(--st-b-fs-sm);
}

body div.wpforms-container .wpforms-form .wpforms-required-label,
body .gform_wrapper.gravity-theme .gfield_required,
body .fluentform .ff-el-is-required.asterisk-right label::after {
	color: var(--st-color-muted);
}

/* Invalid fields. */
.wpcf7 .wpcf7-not-valid,
body div.wpforms-container .wpforms-form :is(input, select, textarea).wpforms-error,
body .gform_wrapper.gravity-theme .gfield_error :is(input, select, textarea),
body .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--st-color-text);
	box-shadow: inset 0 0 0 1px var(--st-color-text);
}

/* Validation messages: text + a hairline in the accent, never colour alone. */
.wpcf7 .wpcf7-not-valid-tip,
body div.wpforms-container .wpforms-form :is(label.wpforms-error, em.wpforms-error),
body .gform_wrapper.gravity-theme :is(.gfield_validation_message, .validation_message),
body .fluentform :is(.error, .text-danger) {
	display: block;
	margin-block-start: var(--st-space-2xs);
	padding: 0;
	padding-inline-start: var(--st-space-xs);
	border: 0;
	border-inline-start: 2px solid var(--st-color-accent);
	background: none;
	color: var(--st-color-text);
	font-family: var(--st-font-ui);
	font-size: var(--st-b-fs-sm);
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
}

/* Form-level responses. */
.wpcf7 .wpcf7-form .wpcf7-response-output[class],
body div.wpforms-container :is(.wpforms-confirmation-container-full, .wpforms-error-container),
body .gform_wrapper.gravity-theme .gform_validation_errors,
.gform_confirmation_message,
body .fluentform :is(.ff-message-success, .ff-errors-in-stack) {
	margin: var(--st-space-m) 0 0;
	padding: var(--st-space-s) var(--st-space-m);
	border: var(--st-b-rule) solid var(--st-color-border);
	border-inline-start: 3px solid var(--st-color-accent);
	border-radius: var(--st-radius-sm);
	background-color: var(--st-color-surface);
	box-shadow: none;
	color: var(--st-color-text);
	font-size: var(--st-b-fs-sm);
}

body .gform_wrapper.gravity-theme .gform_validation_errors > h2 {
	color: var(--st-color-text);
	font-family: var(--st-font-ui);
	font-size: var(--st-b-fs-sm);
	font-weight: 500;
}

body .gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon {
	display: none;
}

.wpcf7 .wpcf7-spinner {
	background-color: var(--st-color-text);
}

.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}

/* ==========================================================================
   16. Print
   ========================================================================== */

@media print {
	html:root,
	:root {
		--st-color-bg: #fff !important;
		--st-color-text: #000 !important;
		--st-color-surface: #fff !important;
		--st-color-accent: #000 !important;
		--st-color-accent-contrast: #fff !important;
		--st-color-muted: color-mix(in srgb, #000 70%, #fff) !important;
		--st-color-border: color-mix(in srgb, #000 30%, #fff) !important;
		--st-shadow-sm: none !important;
		--st-shadow-md: none !important;
		--st-shadow-lg: none !important;
		--st-color-scheme: light !important;
	}

	body,
	.st-scheme-surface,
	.is-style-surface,
	.st-scheme-inverted,
	.is-style-inverted,
	.st-scheme-accent,
	.is-style-accent,
	.st-scheme-custom,
	.st-footer {
		--st-color-bg: #fff !important;
		--st-color-text: #000 !important;
		--st-color-accent: #000 !important;
		--st-color-accent-contrast: #fff !important;
		background: #fff !important;
		color: #000 !important;
	}

	.skip-link,
	.st-header nav,
	.st-header button,
	.st-header .st-btn,
	.st-menu-overlay,
	.st-footer,
	.st-load-more,
	.st-pagination,
	.comment-respond,
	.wp-block-search,
	.wp-block-navigation,
	.wp-block-buttons,
	.wp-block-embed,
	.wp-block-video,
	.wp-block-audio,
	iframe {
		display: none !important;
	}

	.st-will-reveal {
		opacity: 1 !important;
		translate: none !important;
	}

	.st-flow a[href^="http"]:not(:has(img))::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		overflow-wrap: anywhere;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		break-after: avoid;
	}

	img,
	figure,
	pre,
	blockquote,
	tr,
	.st-card {
		break-inside: avoid;
	}

	p,
	li {
		orphans: 3;
		widows: 3;
	}
}