/* ==========================================================================
   fse-blocks — component styles (front-end)
   FSE-COMP-01: button component.
   Token rule: only preset vars defined in theme.json (FSE-DS-01); documented
   literals below carry explanatory comments.
   Selector-identical twin section: editor-style.css (editor canvas WYSIWYG).
   ========================================================================== */

/* -- fse-blocks/button styles begin (FSE-COMP-01) -- */

/* Base */
.fse-blocks-button-link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-weight: 600; /* literal: matches theme.json styles.elements.button */
	line-height: 1.2; /* literal: tight display leading for CTA links */
	text-decoration: none;
	border: 2px solid transparent; /* literal 2px: WP 7.1 emits no border-width preset var (D13, accepted); color stays transparent except is-style-outline */
	border-radius: var(--wp--preset--border-radius--small);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s; /* literal 0.2s/0.15s: hover + active feedback */
}
.fse-blocks-button-link:hover {
	transform: translateY(-1px); /* literal: subtle lift on hover */
}
.fse-blocks-button-link:active {
	transform: translateY(0); /* literal: return to rest on active */
}
.fse-blocks-button.is-style-primary .fse-blocks-button-link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}
.fse-blocks-button.is-style-primary .fse-blocks-button-link:hover {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}
.fse-blocks-button.is-style-primary .fse-blocks-button-link:active {
	background-color: var(--wp--preset--color--primary); /* literal: return to primary on active */
}
.fse-blocks-button.is-style-secondary .fse-blocks-button-link {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--foreground);
}
.fse-blocks-button.is-style-secondary .fse-blocks-button-link:hover {
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--background);
}
.fse-blocks-button.is-style-secondary .fse-blocks-button-link:active {
	background-color: var(--wp--preset--color--secondary); /* literal: return to secondary on active */
}
.fse-blocks-button.is-style-outline .fse-blocks-button-link {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.fse-blocks-button.is-style-outline .fse-blocks-button-link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}
.fse-blocks-button.is-style-outline .fse-blocks-button-link:active {
	background-color: var(--wp--preset--color--primary); /* literal: return to primary on active */
}
.fse-blocks-button.is-style-ghost .fse-blocks-button-link {
	color: inherit;
}
.fse-blocks-button.is-style-ghost .fse-blocks-button-link:hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--foreground);
}
.fse-blocks-button.is-style-ghost .fse-blocks-button-link:active {
	background-color: transparent; /* literal: return to transparent on active */
}
.fse-blocks-button.is-size-small .fse-blocks-button-link {
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}
.fse-blocks-button.is-size-medium .fse-blocks-button-link {
	font-size: var(--wp--preset--font-size--normal);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.fse-blocks-button.is-size-large .fse-blocks-button-link {
	font-size: var(--wp--preset--font-size--large);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
.fse-blocks-button.is-full-width {
	display: flex; /* required for justify-content */
	width: 100%;
	justify-content: center;
}
.fse-blocks-icon,
.fse-blocks-button-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	/* literal 1em: the icon must not drive the button's height. IconRegistry
	 * renders every button icon at a fixed 20px (BlockRegistry::render passes 20),
	 * while the label's line box is `line-height: 1.2` of a FLUID preset font
	 * size. Wherever 1.2 x font-size < 20px the 20px icon grew the flex line, so
	 * an icon button came out ~2px TALLER than a non-icon button of the same
	 * variant and size: measured on De Wissel's hero pair at 40px vs 38.06px
	 * (375px) and 40px vs 39.03px (1280px), a visible edge misalignment where the
	 * two sit on one row. Capping the icon BOX at 1em keeps it strictly below the
	 * 1.2 line box at every preset, so the line never grows; the SVG itself still
	 * renders at its own 20px, still centred, and the box's width stays auto so
	 * horizontal metrics are untouched. */
	block-size: 1em;
}
.fse-blocks-button-link:focus-visible {
	/* Two-tone focus indicator (owner decision, 2026-09-12).
	 *
	 * The ring used to be a single `accent` outline. `accent` is a DECORATIVE
	 * token ("call-to-action, highlights") with no contrast contract, so the
	 * indicator's WCAG 2.1 SC 1.4.11 compliance depended entirely on which
	 * colour a brand happened to pick. De Wissel Dokkum's real brand accent
	 * measures 2.13:1 on its page background — below the 3:1 floor. (The hex
	 * is deliberately not written here: this file's contract is that it
	 * contains no raw colour literals.)
	 *
	 * Two rings fix that structurally: a `foreground` outline with a
	 * `background` halo around it. foreground-vs-background is >= 13:1 on
	 * every one of the five sites, so whichever ring sits against the surface,
	 * the other one contrasts against IT. This also covers focus inside
	 * primary-coloured sections, where no single palette token reached 3:1 on
	 * any site — a failure that predates this change and was simply never
	 * asserted. */
	outline: 2px solid var(--wp--preset--color--foreground); /* literal 2px: same border-width limitation as base (D13, accepted) */
	outline-offset: 2px; /* literal: keeps the ring separated from the element border */
	box-shadow: 0 0 0 4px var(--wp--preset--color--background); /* literal 4px: outer halo, guarantees contrast on any surface */
}

/* -- fse-blocks/button styles end -- */
/* ==========================================================================
   fse-blocks/content component styles (FSE-COMP-03)
   Token rule: only preset vars defined in theme.json (FSE-DS-01).
   ========================================================================== */

/* -- fse-blocks/content styles begin (FSE-COMP-03) -- */

.fse-blocks-content {
	margin-bottom: var(--wp--preset--spacing--60); /* literal: vertical rhythm */
}

/* Inner content body */
.fse-blocks-content-body {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
}

/* Layout: narrow — tighter max-width for focused reading */
.fse-blocks-content.layout-narrow .fse-blocks-content-body {
	max-width: 65ch;
}

/* Layout: wide — wider content area */
.fse-blocks-content.layout-wide .fse-blocks-content-body {
	max-width: var(--wp--style--global--wide-size);
}

/* Layout: full — spans container */
.fse-blocks-content.layout-full .fse-blocks-content-body {
	max-width: 100%;
}

/* Layout: two-column grid */
.fse-blocks-content.layout-two-column .fse-blocks-content-body {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--50);
}

/* Layout: centered — center-align text content */
.fse-blocks-content.layout-centered .fse-blocks-content-body {
	text-align: center;
}

/* Card-like container — modern professional look */
.fse-blocks-content.is-style-card {
	background-color: var(--wp--preset--color--background);
	border-radius: var(--wp--preset--border-radius--medium);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); /* literal: subtle elevation */
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/* Alignment: WordPress generates `align{value}` CLASSES from the block's
   `align` support. These used to be bare boolean attributes (`[alignwide]`),
   which the renderer emitted as invalid HTML and which matched any element
   on the page carrying that attribute. Scoped to the component now. */
.fse-blocks-content.alignleft {
	float: left;
	margin-right: var(--wp--preset--spacing--40);
	width: 50%;
}

.fse-blocks-content.alignright {
	float: right;
	margin-left: var(--wp--preset--spacing--40);
	width: 50%;
}

.fse-blocks-content.aligncenter {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.fse-blocks-content.alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
}

.fse-blocks-content.alignfull {
	width: 100vw;
	max-width: 100%;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* ==========================================================================
   fse-blocks/image component styles (FSE-COMP-03)
   Token rule: only preset vars defined in theme.json (FSE-DS-01).
   ========================================================================== */


/* -- fse-blocks/content styles end -- */

/* -- fse-blocks/image styles begin (FSE-COMP-03) -- */
.fse-blocks-image {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Image link wrapper */
.fse-blocks-image-link {
	display: inline-block;
}

/* Responsive image */
.fse-blocks-image img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* Caption */
.fse-blocks-image figcaption {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* Style: rounded corners */
.fse-blocks-image.is-style-rounded img {
	border-radius: var(--wp--preset--border-radius--medium);
}

/* Style: circular */
.fse-blocks-image.is-style-circle img {
	border-radius: 50%;
}

/* Alignment */
.fse-blocks-image.alignleft {
	float: left;
	margin-right: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}

.fse-blocks-image.alignright {
	float: right;
	margin-left: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}

.fse-blocks-image.aligncenter {
	text-align: center;
}
.fse-blocks-image.alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
}

.fse-blocks-image.alignfull {
	width: 100vw;
	max-width: 100%;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* -- fse-blocks/image styles end -- */
/* ==========================================================================
   fse-blocks/form component styles (FSE-COMP-03)
   Token rule: preset vars defined in theme.json (FSE-DS-01), plus ONE intentional
   custom semantic token: var(--wp--custom--color--error). It is a UI state, not a
   brand colour, so it is deliberately not a palette slug — see DESIGN-SYSTEM.md §1.1.
   Note: form validation feedback colours are NO LONGER emitted inline by FormBlock;
   they live in this section, where the zero-raw-hex contract tests can see them.
   ========================================================================== */

/* -- fse-blocks/form styles begin (FSE-COMP-03) -- */

/* Form wrapper */
.fse-blocks-form {
	max-width: var(--wp--style--global--content-size);
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Field wrapper */
/* The form block wraps its fields in <fieldset><legend>. Without these rules the
   browser default border and inset legend render, which reads as an unstyled
   developer scaffold on every site that uses the block. The legend stays in the
   markup for assistive technology; it is positioned as a normal heading rather
   than notched into a border. */
.fse-blocks-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.fse-blocks-form > fieldset > legend {
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.fse-blocks-form-field {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Field labels */
.fse-blocks-form-field label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	font-weight: 600; /* literal: matches theme.json styles.elements.label */
}

/*
 * Required indicator.
 *
 * INHERITS THE LABEL'S COLOUR, DELIBERATELY. It used to be painted
 * `accent`, and that could not be made to pass contrast on either site that
 * renders it — measured on rendered output, `accent` on `secondary`:
 *
 *   Eldering  2.43:1        Zuidema  3.36:1        floor 4.5:1
 *
 * This asterisk is NOT decorative. It is `aria-hidden`, because `required` and
 * `aria-required` already carry the state to assistive technology — but no site
 * writes "verplicht" into its labels, so for a SIGHTED user the glyph is the
 * only visual indication that a field is required. It therefore carries
 * information, which is exactly what SC 1.4.3 exempts "pure decoration" from
 * and this is not, so the 4.5:1 floor applies.
 *
 * Every alternative was measured against BOTH palettes before this was written.
 * Of the six slugs each site declares, `foreground` is the ONLY one that clears
 * 4.5:1 on both (Eldering 17.89, Zuidema 14.29) — `primary` clears Eldering at
 * 4.62 and fails Zuidema at 4.44; `muted` clears Eldering at 4.55 and fails
 * Zuidema at 4.26. And `foreground` is already what the surrounding label
 * resolves to on both sites, so naming it would hard-code one site's answer to
 * a question the label has already answered correctly for every ground.
 *
 * `currentColor` states that directly: whatever colour the label is legible in,
 * the marker is legible in. It needs no palette slug, survives a form placed on
 * a dark section (where a hard-coded `foreground` would be invisible), and
 * cannot drift when a site changes its palette — which is how the previous
 * value broke in the first place.
 *
 * It also strengthens SC 1.4.1: the indicator no longer depends on colour to be
 * distinguished from the label text. The glyph, its leading space and its
 * position after the label carry it.
 *
 * Kept in sync with editor-style.css — FseBlocksStylesContractTest asserts this
 * class has a selector in both stylesheets.
 */
.fse-blocks-form-required {
	color: currentColor;
	margin-left: 0.25em; /* literal: small separation from label text */
}

/* Form inputs, selects, textareas */
.fse-blocks-form-input {
	width: 100%;
	/* width:100% + padding + border overflows the container under the default
	   content-box model: at a 375px viewport the input measured 361px wide and
	   pushed the page 2px past the viewport, so every page carrying a form
	   scrolled horizontally on mobile. Scoped to this component rather than a
	   global `*` reset, which would be a platform-wide visual change.
	   Found by the RESPONSIVE lifecycle stage. */
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--muted); /* literal 1px: WP 7.1 border-width presets silent-drop (D13, accepted) */
	border-radius: var(--wp--preset--border-radius--small);
	font-size: var(--wp--preset--font-size--normal);
	line-height: 1.5; /* literal: comfortable form input leading */
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.15s; /* literal 0.2s/0.15s: focus + hover feedback */
}
.fse-blocks-form-input:hover {
	border-color: var(--wp--preset--color--primary); /* literal: subtle border color shift on hover */
}
.fse-blocks-form-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary); /* literal 2px: same border-width limitation (D13, accepted) */
}
.fse-blocks-form-input::placeholder {
	color: var(--wp--preset--color--muted); /* literal: muted placeholder text */
	opacity: 0.7; /* literal: softer placeholder visibility */
}

/* Submit button area */
.fse-blocks-form-actions {
	margin-top: var(--wp--preset--spacing--40);
}

/* Submit button */
.fse-blocks-form-submit {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	border: 2px solid transparent; /* literal 2px: WP 7.1 border-width preset silent-drop (D13, accepted) */
	border-radius: var(--wp--preset--border-radius--small);
	font-size: var(--wp--preset--font-size--normal);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s; /* literal 0.2s: hover feedback */
}

/* Radio group wrapper */
.fse-blocks-form-radio-group {
	margin-bottom: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--secondary); /* literal: field border */
	border-radius: var(--wp--preset--border-radius--small);
}

.fse-blocks-form-radio-label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	cursor: pointer;
}

.fse-blocks-form-radio-label input[type="radio"] {
	margin-right: var(--wp--preset--spacing--20);
}

.fse-blocks-form-submit:hover {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

.fse-blocks-form-submit:focus-visible {
	/* Two-tone focus indicator (owner decision, 2026-09-12).
	 *
	 * The ring used to be a single `accent` outline. `accent` is a DECORATIVE
	 * token ("call-to-action, highlights") with no contrast contract, so the
	 * indicator's WCAG 2.1 SC 1.4.11 compliance depended entirely on which
	 * colour a brand happened to pick. De Wissel Dokkum's real brand accent
	 * measures 2.13:1 on its page background — below the 3:1 floor. (The hex
	 * is deliberately not written here: this file's contract is that it
	 * contains no raw colour literals.)
	 *
	 * Two rings fix that structurally: a `foreground` outline with a
	 * `background` halo around it. foreground-vs-background is >= 13:1 on
	 * every one of the five sites, so whichever ring sits against the surface,
	 * the other one contrasts against IT. This also covers focus inside
	 * primary-coloured sections, where no single palette token reached 3:1 on
	 * any site — a failure that predates this change and was simply never
	 * asserted. */
	outline: 2px solid var(--wp--preset--color--foreground); /* literal 2px: same border-width limitation (D13, accepted) */
	outline-offset: 2px; /* literal: keeps the ring separated from the element border */
	box-shadow: 0 0 0 4px var(--wp--preset--color--background); /* literal 4px: outer halo, guarantees contrast on any surface */
}

/* Visually hidden text (WordPress standard) */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
}

.skip-link:focus,
.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	overflow: visible;
	position: static;
	z-index: 100000;
}
/* Error / success containers */
.fse-blocks-form-errors,
.fse-blocks-form-success {
	padding: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
	border-radius: var(--wp--preset--border-radius--small);
}

.fse-blocks-form-errors {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.fse-blocks-form-success {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

/* Empty/error state for form block */
.fse-blocks-form--empty,
.fse-blocks-form--error {
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--foreground);
	border-radius: var(--wp--preset--border-radius--small);
}

/*
 * Field-level validation feedback.
 *
 * THESE TWO RULES USED TO BE AN INLINE <style> INSIDE FormBlock::render(), with
 * the colour written out twice as a hex literal. That put a colour where no guard in
 * this repository could see it: both stylesheet contract tests assert "zero raw
 * hex", but they read the SECTIONS of this file and of editor-style.css, and a
 * colour declared in PHP is in neither. Moving the rules here is the fix; the
 * token is settings.custom.color.error in the parent theme.json.
 *
 * THE VALUE ALSO CHANGED, deliberately, in the same pass: the colour the block
 * shipped with failed WCAG AA for this 14px text on three of the five committed
 * site `secondary` bands — which is where both committed form patterns put the
 * form — and cleared it by under 0.06 on the other two. The replacement is the
 * next darker step of the same ramp at the same hue, worst case 5.36:1 across
 * every committed ground and 6.57:1 on the page background. Owner-approved
 * 2026-09-28. No hex is written here on purpose: this section is under a
 * zero-raw-hex contract, so both the value and its per-site measurements live in
 * the parent theme.json's settings._comment and in DESIGN-SYSTEM.md §1.1.
 *
 * `--wp--custom--color--error` and not a palette slug: this is a UI state, not a
 * brand colour, and it must not appear in the editor's colour picker.
 */
.fse-blocks-form-input.fse-blocks-invalid {
	border-color: var(--wp--custom--color--error);
}

.fse-blocks-form-field-error {
	color: var(--wp--custom--color--error);
	font-size: 0.875em; /* literal: relative to the field it belongs to, not to the root */
	margin-top: 0.25em; /* literal: hairline gap, deliberately tighter than spacing|20 */
}

/*
 * Consent field (forms-engine `consent` type, H3 2026-10-05).
 *
 * A single tick-box reads checkbox-then-statement, with the privacy link and
 * any error aligned under the statement rather than under the box. Grid, so
 * a long statement wraps beside the box instead of under it. The box keeps a
 * 24px minimum target (WCAG 2.2 SC 2.5.8) without a raw pixel colour or hex.
 */
.fse-blocks-form-field--consent {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--wp--preset--spacing--20);
	align-items: start;
}

.fse-blocks-form-input.fse-blocks-form-consent {
	width: 1.5rem; /* literal: 24px target at the default root size (WCAG 2.5.8) */
	height: 1.5rem; /* literal: as above */
	margin: 0;
	padding: 0;
}

.fse-blocks-form-consent-privacy,
.fse-blocks-form-field--consent .fse-blocks-form-field-error {
	grid-column: 2;
	margin: 0;
	font-size: 0.875em; /* literal: secondary line, relative to the field */
}

/* -- fse-blocks/form styles end -- */

/* Button row -------------------------------------------------------------- */
/*
 * Intentionally empty.
 *
 * A `.fse-button-row { gap }` rule used to live here because
 * `settings.spacing.blockGap` was off, so a `blockGap` block attribute was
 * stripped and the gap had to be smuggled in behind a className. The platform
 * now declares `settings.spacing.blockGap: true` with an explicit
 * `styles.spacing.blockGap`, so the row states its own gap as a block
 * attribute (`var:preset|spacing|30`) and WordPress renders it.
 *
 * Do not reinstate the class. At (0,2,0) it outranks core's layout gap rule
 * `:root :where(.is-layout-flex)` at (0,1,0), so it would silently win over
 * whatever the block declares — the block would look editable and not be.
 * bin/check-theme-json.js fails if the class reappears in CSS or markup.
 */

/* ==========================================================================
   REDUCED MOTION — the platform's own components
   ==========================================================================
   THE GAP THIS CLOSES. `fse-motion.css` has guarded its reveals since it was
   written, and the sites guard their own interactions diligently — Zuidema
   carries nine `prefers-reduced-motion` blocks, De Wissel five. This file
   carried none, while declaring three transitions and a hover transform:

     .fse-blocks-button-link   background-color, color, border-color, transform
                               + translateY(-1px) on :hover, translateY(0) on :active
     .fse-blocks-form-input    border-color, box-shadow, background-color
     .fse-blocks-form-submit   background-color, color, border-color

   So every site inherited motion it could not switch off from its own
   stylesheet, on the two components every site uses. It was reported in five
   consecutive site passes as a platform gap and is fixed here, once, for all of
   them.

   WHAT IS REMOVED IS MOTION, NOT STATE. Hover and focus keep every colour,
   border and shadow they had — a button still looks pressable and a focused
   field still shows its ring; they simply arrive instantly instead of easing.

   THE LIFT GOES TOO, AND THAT IS THE POINT. `translateY(-1px)` is movement, not
   colour: dropping only the `transition` would make it jump rather than glide,
   which is the outcome `prefers-reduced-motion` exists to prevent. It is a
   `transform`, so removing it moves nothing else on the page — no reflow, no
   layout shift.

   WCAG 2.1 SC 2.3.3 (Animation from Interactions, AAA). */
@media (prefers-reduced-motion: reduce) {

	.fse-blocks-button-link,
	.fse-blocks-form-input,
	.fse-blocks-form-submit {
		transition: none;
	}

	.fse-blocks-button-link:hover,
	.fse-blocks-button-link:active {
		transform: none;
	}
}