/**
 * LTS foundation: tokens, type, buttons, links, chips, cards, form fields, focus.
 *
 * The child's shared "global" partial. The parent's resolver auto-enqueues it
 * after global.css (kd-global is its dependency), so it overrides parent rules
 * at equal specificity. Values trace to theme.json (presets + settings.custom)
 * and the Figma variables / Style Guide 90:341. No hex, no raw font family here.
 * Small-text colour roles (Tide Dark) are the J10 default, proposed pending Jenna.
 */

/* -- Token aliases ---------------------------------------------------------- */

:root {
	/* Page column: 1216 (x112 -> 1328 on 1440). The parent derives its column from
	   3 cards + 2 gaps; here it is simply the design's column. */
	--kd-composition: var(--wp--style--global--content-size);
	--kd-content-max: var(--wp--style--global--content-size);
	--kd-gutter: var(--wp--custom--layout--gutter);

	/* Parent button roles -> LTS (the parent's fill rule reads these). */
	--kd-btn-bg: var(--wp--preset--color--contrast);
	--kd-btn-fg: var(--wp--preset--color--surface);
	--kd-btn-bg-hover: var(--wp--preset--color--accent-2);
	--kd-btn-outline: var(--wp--preset--color--contrast);
	--kd-btn-outline-hover: var(--wp--preset--color--accent-2);
	--kd-btn-link: var(--wp--custom--color--small-text);
	--kd-btn-link-accent: var(--wp--preset--color--contrast);
	--kd-btn-min-w: 0; /* Figma buttons hug their label. */
	--kd-size-btn: var(--wp--preset--font-size--medium);

	/* Parent type + shape roles -> LTS. */
	--kd-fw-heading: var(--wp--custom--typography--weight-medium);
	--kd-radius-pill: var(--wp--custom--radius--pill);
	--kd-radius-card: var(--wp--custom--radius--card);
	--kd-shadow-card: var(--wp--custom--shadow--card);
	--kd-color-link: var(--wp--custom--color--small-text);
	--kd-color-accent: var(--wp--preset--color--accent); /* social circles */

	/* Pages without a hero: the parent reserves 134px for its overflowing badge.
	   LTS has no overflow badge, so a plain 64px under the 135px header. */
	--kd-no-hero-top: 4rem;

	/* Small text on LIGHT surfaces = Tide Dark (5.4:1 on Clear). A dark surface
	   (below) flips it to Horizon. Eyebrows, text links, chip labels read this. */
	--lts-accent-text: var(--wp--custom--color--small-text);
	--lts-focus-ring: var(--wp--custom--color--focus-ring);
}

/* Dark surfaces: ring + small-text role flip. :where() keeps this at zero
   specificity and the :not() skips focusables, because WordPress puts
   `has-*-background-color` on a Button link itself (that link draws its OWN ring). */
:where(
	.has-contrast-background-color,
	.has-secondary-background-color,
	.kd-site-footer,
	.lts-dark,
	.kd-mobile-panel,
	.kd-hero-interior,
	.wp-block-cover:not(.is-light)
):not(
	:where(
		a,
		button,
		.wp-element-button,
		details,
		summary,
		input,
		select,
		textarea
	)
) {
	--lts-accent-text: var(--wp--preset--color--tint);
	--lts-focus-ring: var(--wp--custom--color--focus-ring-on-dark);
	--kd-color-link: var(--wp--preset--color--tint);
}
/* Light faces inside a dark band reset it. */
:where(
	.has-base-background-color,
	.has-surface-background-color,
	.has-tint-background-color,
	.lts-card
):not(
	:where(
		a,
		button,
		.wp-element-button,
		details,
		summary,
		input,
		select,
		textarea
	)
) {
	--lts-accent-text: var(--wp--custom--color--small-text);
	--lts-focus-ring: var(--wp--custom--color--focus-ring);
	--kd-color-link: var(--wp--custom--color--small-text);
}
/* Brand-coloured fills: the Tide-Dark / Horizon rings vanish on them, so Deep. */
:where(.has-primary-background-color, .has-accent-background-color):not(
	:where(
		a,
		button,
		.wp-element-button,
		details,
		summary,
		input,
		select,
		textarea
	)
) {
	--lts-focus-ring: var(--wp--preset--color--contrast);
}

/* -- Type: what theme.json cannot express ------------------------------------ */

/* The parent shrinks h1 / h3 / .has-{huge,xx-large,x-large}-font-size with
   `!important` at 1024 / 768, which defeats the fluid scale in theme.json
   (36 -> 48 H1, 24 -> 27.6 H3). Same specificity + `!important`, loaded later:
   the child wins and hands sizing back to the presets. Upstream: drop those
   !importants in kd-fse-starter. */
@media (max-width: 1024px) {
	h1 {
		font-size: var(
			--lts-h1-size,
			var(--wp--preset--font-size--huge)
		) !important;
	}
	h3 {
		font-size: var(
			--lts-h3-size,
			var(--wp--preset--font-size--xx-large)
		) !important;
	}
	.has-huge-font-size {
		font-size: var(--wp--preset--font-size--huge) !important;
	}
	.has-xx-large-font-size {
		font-size: var(--wp--preset--font-size--xx-large) !important;
	}
	.has-x-large-font-size {
		font-size: var(--wp--preset--font-size--x-large) !important;
	}
}
@media (max-width: 768px) {
	body {
		line-height: var(
			--kd-lh-body
		); /* parent tightens to 1.6; the guide body stays 16/28. */
	}
}

/* Eyebrow: Medium 20/25 uppercase +2.6px (Figma EYEBROW). Block style
   "Eyebrow" on core/paragraph, or the .lts-eyebrow class. */
.is-style-eyebrow,
.lts-eyebrow {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--custom--typography--eyebrow);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.25;
	letter-spacing: var(--wp--custom--typography--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lts-accent-text);
}

/* Large body (guide 1.15rem, page lead 18). */
.lts-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

/* Prose links: Tide Dark + underline (colour alone is not a signal). */
.entry-content
	:where(p, li, dd)
	a:where(:not(.wp-element-button, .wp-block-button__link)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* -- Buttons ------------------------------------------------------------------ */
/* Selectors carry `body .wp-block-button:not(.lts-x)` so they beat the parent's
   `:not()` chains and core's outline rules without !important. Every variant has
   a 2px border (transparent on fills) so all sit on one 54px box; padding is
   (button height - line) / 2 - border, 36 - border on the sides (Figma 24/36). */

body .wp-block-button:not(.lts-x) .wp-block-button__link,
body .kd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box;
	min-height: var(--wp--custom--control--button-height);
	padding: 0.5rem calc(2.25rem - var(--wp--custom--control--border));
	border-width: var(--wp--custom--control--border);
	border-style: solid;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.125;
	letter-spacing: var(--wp--custom--typography--tracking-button);
	text-transform: uppercase;
	text-decoration: none;
}
/* The guide's 18px / 60 tile: the same button with the Large font size. */
body .wp-block-button:not(.lts-x) .wp-block-button__link.has-large-font-size {
	min-height: var(--wp--custom--control--button-height-large);
}

/* Secondary (outline): Hearth border, Deep label; hover = Tide Dark border + label. */
body .wp-block-button:not(.lts-x).is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--accent);
}
body
	.wp-block-button:not(.lts-x).is-style-outline
	.wp-block-button__link:hover {
	background-color: transparent;
	color: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
}

/* Text link: Medium 16 uppercase + arrow, Tide Dark; hover = Deep + arrow nudge.
   (Guide hover is Hearth, 3.0:1 on Clear: fails AA for text. Proposed variant,
   pending Jenna: swap `--lts-link-hover` to the accent slug to restore it.) */
body .wp-block-button:not(.lts-x).is-style-text-link .wp-block-button__link {
	--lts-link-hover: var(--wp--preset--color--contrast);
	min-height: 0;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--lts-accent-text);
	letter-spacing: var(--wp--custom--typography--tracking-button);
	text-decoration: none;
	gap: 0.375rem;
}
body
	.wp-block-button:not(.lts-x).is-style-text-link
	.wp-block-button__link::after {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentcolor;
	-webkit-mask: var(--lts-arrow-icon) center / contain no-repeat;
	mask: var(--lts-arrow-icon) center / contain no-repeat;
	transition: transform var(--kd-transition-fast);
}
body
	.wp-block-button:not(.lts-x).is-style-text-link
	.wp-block-button__link:hover {
	background: none;
	color: var(--lts-link-hover);
	text-decoration: none;
}
body
	.wp-block-button:not(.lts-x).is-style-text-link
	.wp-block-button__link:hover::after {
	transform: translateX(4px);
}
:root {
	--lts-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10h13M11 4.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
}

/* Fill, Tide (the hero CTA): Tide Dark fill, white label (5.5:1). Hover = Deep. */
body .wp-block-button:not(.lts-x).is-style-fill-tide .wp-block-button__link {
	--kd-btn-bg: var(--wp--preset--color--accent-2);
	--kd-btn-bg-hover: var(--wp--preset--color--contrast);
}

/* On dark. Fill = Horizon fill, Deep label; hover = Hearth. */
body .wp-block-button:not(.lts-x).is-style-fill-light .wp-block-button__link {
	--kd-btn-bg: var(--wp--preset--color--tint);
	--kd-btn-fg: var(--wp--preset--color--contrast);
	--kd-btn-bg-hover: var(--wp--preset--color--accent);
}
/* Outline on dark: Tide border, Horizon label; hover = Hearth border. */
body
	:is(
		.wp-block-button.is-style-outline-light,
		.kd-hero-interior .wp-block-button.is-style-outline,
		.wp-block-button.kd-btn-invert.is-style-outline
	):not(.lts-x)
	.wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--primary);
}
body
	:is(
		.wp-block-button.is-style-outline-light,
		.kd-hero-interior .wp-block-button.is-style-outline,
		.wp-block-button.kd-btn-invert.is-style-outline
	):not(.lts-x)
	.wp-block-button__link:hover {
	background-color: transparent;
	color: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--accent);
}
/* Text link on dark. */
body
	:where(
		.has-contrast-background-color,
		.has-secondary-background-color,
		.kd-site-footer,
		.lts-dark,
		.kd-mobile-panel,
		.kd-hero-interior,
		.wp-block-cover:not(.is-light)
	)
	.wp-block-button:not(.lts-x).is-style-text-link
	.wp-block-button__link {
	--lts-link-hover: var(--wp--preset--color--accent);
}

/* Focus: 3px ring, keyboard only. The ring colour is the role var above. */
:focus-visible {
	outline: 3px solid var(--lts-focus-ring);
	outline-offset: 2px;
}
body .wp-block-button__link:focus-visible,
body .kd-btn:focus-visible {
	outline: 3px solid var(--lts-focus-ring);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--pill);
}
.kd-topbar :focus-visible,
.kd-site-footer :focus-visible,
.kd-announcement-bar :focus-visible {
	outline-color: var(--lts-focus-ring);
}

/* Disabled: neutral-300 fill / neutral-500 label; outline = neutral-300 border. */
body
	.wp-block-button:not(.lts-x)
	.wp-block-button__link:is([aria-disabled="true"], .is-disabled),
body
	.wp-block-button:not(.lts-x)
	.wp-block-button__link:is([aria-disabled="true"], .is-disabled):hover {
	background-color: var(--wp--preset--color--neutral-300);
	border-color: var(--wp--preset--color--neutral-300);
	color: var(--wp--preset--color--neutral-500);
	cursor: not-allowed;
	pointer-events: none;
}
body
	.wp-block-button:not(.lts-x):is(.is-style-outline, .is-style-outline-light)
	.wp-block-button__link:is([aria-disabled="true"], .is-disabled),
body
	.wp-block-button:not(.lts-x).is-style-text-link
	.wp-block-button__link:is([aria-disabled="true"], .is-disabled) {
	background: none;
}
body
	.wp-block-button:not(.lts-x).is-style-outline-light
	.wp-block-button__link:is([aria-disabled="true"], .is-disabled) {
	border-color: var(--wp--preset--color--neutral-500);
	color: var(--wp--preset--color--neutral-500);
}
body
	.wp-block-button:not(.lts-x).is-style-fill-light
	.wp-block-button__link:is([aria-disabled="true"], .is-disabled) {
	background-color: var(--wp--preset--color--neutral-500);
	border-color: var(--wp--preset--color--neutral-500);
	color: var(--wp--preset--color--neutral-300);
}
body
	.wp-block-button:not(.lts-x).is-style-text-link
	.wp-block-button__link:is([aria-disabled="true"], .is-disabled) {
	border-color: transparent;
}

/* -- Icon buttons: carousel arrows + social (guide: 46px / 36px circles) ------ */

.lts-icon-btn,
.kd-social-menu .kd-social-item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
	cursor: pointer;
	transition: background-color var(--kd-transition-fast);
}
.lts-icon-btn {
	width: var(--wp--custom--control--icon-button);
	height: var(--wp--custom--control--icon-button);
}
.lts-icon-btn svg {
	width: 1.25rem;
	height: 1.25rem;
}
.kd-social-menu .kd-social-item a {
	width: var(--wp--custom--control--social);
	height: var(--wp--custom--control--social);
}
.kd-social-menu .kd-social-item a svg {
	width: 1.125rem;
	height: 1.125rem;
}
.entry-content .kd-social-menu .kd-social-item a,
.kd-site-footer .kd-social-menu .kd-social-item a {
	color: var(
		--wp--preset--color--surface
	); /* beats the parent's prose-link colour. */
}
.lts-icon-btn:hover,
.kd-social-menu .kd-social-item a:hover {
	background: var(--wp--preset--color--accent);
	opacity: 1;
}
/* On dark: Tide circles (guide "on dark"), Hearth hover. */
:where(
		.has-contrast-background-color,
		.has-secondary-background-color,
		.kd-site-footer,
		.lts-dark,
		.kd-mobile-panel,
		.kd-hero-interior,
		.wp-block-cover:not(.is-light)
	)
	:is(.lts-icon-btn, .kd-social-menu .kd-social-item a) {
	background: var(--wp--preset--color--primary);
}
:where(
		.has-contrast-background-color,
		.has-secondary-background-color,
		.kd-site-footer,
		.lts-dark,
		.kd-mobile-panel,
		.kd-hero-interior,
		.wp-block-cover:not(.is-light)
	)
	:is(.lts-icon-btn, .kd-social-menu .kd-social-item a):hover {
	background: var(--wp--preset--color--accent);
}

/* -- Filter chips (Content Hub / Board / Events): 40px, r20, 14px +0.13em ------ */
/* Proposed states (not drawn): hover = Horizon fill; on = Deep fill (drawn). */

.lts-chip {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--wp--custom--control--chip-height);
	padding: 0 1.375rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--chip);
	background: var(--wp--preset--color--base);
	color: var(--wp--custom--color--small-text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--wp--custom--typography--tracking-chip);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--kd-transition-fast),
		color var(--kd-transition-fast),
		border-color var(--kd-transition-fast);
}
.lts-chip:hover {
	background: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-2);
}
.lts-chip:is(
	.is-active,
	[aria-pressed="true"],
	[aria-current="true"],
	[aria-current="page"]
) {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: var(--wp--custom--typography--weight-medium);
}
.lts-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -- Cards (shell only: patterns own their content) --------------------------- */
/* Rest = Figma card (Clear, r22, shadow). Hover/focus-within are proposed:
   the shadow deepens + a 2px lift, and a keyboard ring shows on the card. */

.lts-card {
	position: relative;
	overflow: clip;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--card);
	transition:
		box-shadow var(--kd-transition-base),
		transform var(--kd-transition-base);
}
.lts-card:hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
	transform: translateY(-2px);
}
.lts-card:has(:is(h1, h2, h3, h4, h5, h6) a:focus-visible) {
	outline: 3px solid var(--lts-focus-ring);
	outline-offset: 2px;
}
/* The card draws the ring for its stretched title link; any other focusable keeps its own.
   Only where :has() works; otherwise the link keeps its own ring. */
@supports selector(:has(a)) {
	.lts-card :is(h1, h2, h3, h4, h5, h6) a:focus-visible {
		outline: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lts-card,
	.lts-card:hover {
		transform: none;
	}
}

/* -- Form fields (GF inherits via the parent's form skin; restyled to Figma) --- */
/* Figma field: 45px, r10, Clear fill, Tide 1px border, 15px uppercase +0.13em
   placeholder. Placeholder ink is neutral-500 (4.7:1; Figma #ADADAD is 2.2:1).
   Hover/focus/error are proposed: focus = Tide Dark 2px border + 3px ring;
   error = accessible red border + message. */

body
	:is(
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="url"],
		input[type="search"],
		input[type="number"],
		select,
		textarea
	):not(.kd-nav-search):not([class*="wp-block-search"]):not(
		.kd-news-search__input
	):not(.kd-event-search__input) {
	box-sizing: border-box;
	min-height: var(--wp--custom--control--input-height);
	padding: 0.65rem 1.4375rem;
	border: 1px solid;
	border-color: var(--lts-field-border, var(--wp--preset--color--primary));
	border-radius: var(--wp--custom--radius--input);
	background-color: var(--lts-field-bg, var(--wp--preset--color--base));
	color: var(--lts-field-ink, var(--wp--preset--color--contrast));
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
}
body textarea:not([class*="wp-block-search"]) {
	min-height: 10rem;
	border-radius: var(--wp--custom--radius--input);
}
body :is(input, textarea)::placeholder,
body .gform-theme--framework :is(input, textarea)::placeholder {
	color: var(--wp--preset--color--neutral-500);
	font-size: 0.9375rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	opacity: 1;
}
body
	:is(
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="url"],
		input[type="number"],
		input[type="search"],
		select,
		textarea
	):hover:not(
		:disabled,
		[readonly],
		.kd-nav-search,
		.kd-news-search__input,
		.kd-event-search__input
	) {
	/* The variable feeds the field rule below; the direct property covers fields
	   that rule excludes (core search block, GF-less inputs). */
	--lts-field-border: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
}
body
	:is(
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="url"],
		input[type="number"],
		input[type="search"],
		select,
		textarea
	):focus:not(
		.kd-nav-search,
		.kd-news-search__input,
		.kd-event-search__input
	) {
	--lts-field-border: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent-2);
	outline: 3px solid var(--lts-focus-ring);
	outline-offset: 2px;
}
body :is(input, select, textarea):disabled {
	--lts-field-bg: var(--wp--preset--color--neutral-100);
	--lts-field-border: var(--wp--preset--color--neutral-300);
	--lts-field-ink: var(--wp--preset--color--neutral-500);
	background-color: var(--wp--preset--color--neutral-100);
	border-color: var(--wp--preset--color--neutral-300);
	color: var(--wp--preset--color--neutral-500);
	cursor: not-allowed;
}
/* Pill variant: the newsletter band's inline email field (Figma r50). */
body
	input.lts-input--pill:not(.kd-nav-search):not(
		[class*="wp-block-search"]
	):not(.kd-news-search__input):not(.kd-event-search__input) {
	border-radius: var(--wp--custom--radius--pill);
}
/* Specificity: hover (0,3,2), focus (0,3,2), disabled (0,1,2); this rule is
   (0,4,2) on both the [aria-invalid] and .kd-field--error branches, and comes
   after hover and focus, so error wins both. Hover excludes :disabled. Disabled
   and readonly never show the error ring: the rule after this one clears the
   shadow. */
body
	:is(input, textarea, select)[aria-invalid="true"]:not(:disabled):not(
		[readonly]
	):not(.kd-nav-search, .kd-news-search__input, .kd-event-search__input),
body
	.kd-form
	.kd-field--error
	:is(input, select, textarea):not(:disabled):not([readonly]) {
	--lts-field-border: var(--wp--preset--color--error);
	border-color: var(--wp--preset--color--error);
	box-shadow: 0 0 0 1px var(--wp--preset--color--error);
}
/* (0,2,2) beats the parent's invalid shadow (0,2,1). */
body
	:is(input, select, textarea):is(:disabled, [readonly])[aria-invalid="true"],
body
	.kd-form
	.kd-field--error
	:is(input, select, textarea):is(:disabled, [readonly]) {
	box-shadow: none;
}
body .kd-form .kd-field__error,
body .kd-field__error {
	color: var(--wp--preset--color--error);
	font-weight: var(--wp--custom--typography--weight-medium);
}
/* Labels: Medium 14 uppercase +0.13em (the Figma fields carry the text as a
   placeholder; real labels stay visible for accessibility). */
body .kd-form label,
body .kd-field__label,
body .lts-field__label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--typography--weight-medium);
	letter-spacing: var(--wp--custom--typography--tracking-chip);
	text-transform: uppercase;
}
/* Form submit = a button. */
body .kd-form :is(button[type="submit"], input[type="submit"]) {
	min-height: var(--wp--custom--control--button-height);
	padding: 0.5rem 2.125rem;
	border-width: var(--wp--custom--control--border);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: var(--wp--custom--typography--tracking-button);
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}
body .kd-form :is(button[type="submit"], input[type="submit"]):hover {
	background-color: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
}