/**
 * Realist token bridge + client skin overrides.
 *
 * The Realist plugin ships two CSS layers:
 *   - STRUCTURE (functional; always loaded, never dequeue it)
 *   - SKIN (default look; every value reads a `--realist-*` token)
 *
 * This file maps the theme's design tokens onto Realist's, so property cards,
 * filters, buttons and forms inherit the theme automatically — and change with
 * each style variation — without overriding a single Realist selector.
 *
 * Because theme.json emits its palette as `--wp--preset--color--*`, the mapping
 * is a one-liner per token. Style variations in /styles/*.json redefine those
 * presets, so Realist restyles along with the rest of the site for free.
 */

:root {
	/* Brand — falls back to the plugin's per-site Settings colours if a preset is absent. */
	--realist-color-primary: var( --wp--preset--color--primary, #737F83 );
	--realist-color-secondary: var( --wp--preset--color--secondary, #22224A );

	/* Neutrals
	 *
	 * `surface` is the card/filter-bar background and must contrast with the page
	 * background, so it maps to `neutral` (#fff) rather than `base` (#f1f1f1) —
	 * `base` IS the page background, which made cards look transparent.
	 * `border` takes `base` so dividers stay visible on those white surfaces.
	 */
	--realist-color-text: var( --wp--preset--color--contrast, #0D0B05 );
	--realist-color-surface: var( --wp--preset--color--neutral, #FFFFFF );
	--realist-color-border: var( --wp--preset--color--base, #F1F1F1 );
	--realist-color-on-brand: var( --wp--preset--color--neutral, #FFFFFF );

	/* Shape & rhythm — set these to restyle Realist's density and roundness. */
	--realist-radius: 8px;
	--realist-radius-sm: 4px;
	--realist-radius-pill: 50px;
	--realist-space: var( --wp--custom--spacing--small, 15px );
	--realist-space-lg: var( --wp--custom--spacing--medium, 30px );
	--realist-card-min: 320px;
	--realist-card-ratio: 66.66%;
	--realist-transition: 0.3s ease;
}

/* ---------------------------------------------------------------------------
 * Form-control token bridge
 *
 * This theme's style.css styles `input, select, textarea` at element level
 * (0,0,1). The plugin's skin is wrapped in :where() (0,0,0) so that themes can
 * override it — which means the base rule wins, and every field token the plugin
 * exposes resolves to exactly the right value and is then discarded before it
 * paints. That is not theoretical: MX's dark form rendered white-on-white for a
 * release with `--realist-form-field-bg` computing to `transparent` throughout.
 *
 * Re-asserting the tokens here, at 0,2,0, puts them back in charge. It is what
 * lets a style variation restyle an entire form from theme.json `settings`
 * alone — and settings are merged by key, unlike a variation's `styles.css`,
 * which is a string and concatenates every time the variation is applied.
 *
 * Deliberately absent: font-family. The base theme should keep deciding that, so
 * form controls stay in the site's typeface without every variation restating it.
 * ------------------------------------------------------------------------ */

.realist-lead-field input[type="text"],
.realist-lead-field input[type="email"],
.realist-lead-field input[type="tel"],
.realist-lead-field input[type="number"],
.realist-lead-field input[type="datetime-local"],
.realist-lead-field select,
.realist-lead-field textarea {
	background-color: var( --realist-form-field-bg );
	border: 1px solid var( --realist-form-field-border );
	border-radius: var( --realist-form-field-radius );
	color: var( --realist-form-field-color );
	font-size: var( --realist-form-field-size );
	font-weight: var( --realist-form-field-weight );
	padding: var( --realist-form-field-padding );
}

/* ---------------------------------------------------------------------------
 * Client-specific overrides
 *
 * Brand tweaks for THIS site belong here — never in the Realist plugin, which
 * ships to every client. Prefer setting a token above; only write selectors
 * below when a token can't express it.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Lead-form block styles — shared shape, no client colour
 *
 * `dark` and `inline` are registered in functions.php and ship to every client,
 * so this layer describes SHAPE (borders, radii, padding, flow) and takes its
 * colour from `currentColor` / `inherit` rather than any literal — a brand colour
 * here would leak one client's identity into every other site. Per-client values
 * belong in styles/<variation>.json.
 *
 * These declare real properties and not only Realist's `--realist-form-*` tokens,
 * which is a correction worth stating plainly: the plugin's skin is wrapped in
 * :where() at ZERO specificity, and this theme's own style.css carries a bare
 * `input, select, textarea` rule setting background, border and colour. An
 * element selector (0,0,1) beats :where() (0,0,0), so a token set here resolves
 * perfectly and is then overridden by the base theme before it reaches the page —
 * which is exactly what happened: the dark form rendered white-on-white with the
 * tokens computing to the right values the whole time. Anything that must survive
 * the base theme has to be declared as a property on a real selector.
 *
 * No !important anywhere: every selector below is at least 0,2,0 and so already
 * outranks both layers. Keeping it that way is what lets Global Styles override
 * the form per site.
 *
 * `is-style-*` lands on the block wrapper (`.wp-block-realist-lead-form`), never
 * on the inner `<form>` — so these are descendant selectors. The bare
 * [realist_lead_form] shortcode renders no wrapper and is unaffected by design.
 * ------------------------------------------------------------------------ */

/* Dark — for a form on a dark background: fields drop to a single underline and
   take the surrounding text colour, so the cover the block sits on (or the
   block's own colour setting) drives the palette without a hardcoded white.

   These are tokens again rather than properties. That only became possible with
   the bridge above: before it, a token here resolved correctly and was then
   overridden by the base theme's `input, select, textarea` rule, so the values
   had to be restated as properties on a more specific selector. Now the bridge
   carries them, and one declaration serves every client.

   `currentColor`, not `inherit`. On a *custom property* `inherit` means "the
   parent's value of this same property", not "the inherited text colour" — it
   computes to the empty string and takes `color` down with it. */
.is-style-dark .realist-lead-form {
	--realist-form-field-bg: transparent;
	--realist-form-field-border: currentColor;
	--realist-form-field-color: currentColor;
	--realist-form-label-color: currentColor;
	--realist-form-heading-color: currentColor;
	--realist-form-accent: currentColor;
}

/* Shape, which no token expresses: the underline treatment. The textarea keeps
   its full box and the field radius, so it is deliberately not listed. */
.is-style-dark .realist-lead-field input[type="text"],
.is-style-dark .realist-lead-field input[type="email"],
.is-style-dark .realist-lead-field input[type="tel"],
.is-style-dark .realist-lead-field input[type="number"],
.is-style-dark .realist-lead-field input[type="datetime-local"],
.is-style-dark .realist-lead-field select {
	border-width: 0 0 1px;
	border-radius: 0;
	padding-left: 0;
}

.is-style-dark .realist-lead-consent {
	color: inherit;
}

.is-style-dark .realist-lead-submit {
	width: 100%;
	text-align: center;
}

/* Inline — a single-row strip (newsletter / quick enquiry). Fields share the row
   and the button sizes to its text; the flex basis lets them wrap to their own
   lines on narrow screens without a media query. */
.is-style-inline .realist-lead-form {
	align-items: flex-end;
}

/* Short fields share the strip's row. The consent line and any textarea are
   excluded by name: the plugin spans them with `flex: 1 1 100%` from a :where()
   rule that carries no specificity, so a blanket `.realist-lead-field` rule here
   would silently override it and squeeze the consent wording into a 12rem
   column — which is not something to do to the text recording a legal basis. */
.is-style-inline .realist-lead-field:not( .realist-lead-consent ):not( .realist-lead-field--wide ) {
	flex: 1 1 12rem;
}

.is-style-inline .realist-lead-submit {
	flex: 0 0 auto;
	width: auto;
}

/* Consent renders before the button in the markup — correct for reading and tab
   order — but being full-width it would then split the strip in two. Ordering it
   last moves it visually below the row while leaving the DOM untouched, so the
   small print sits under the strip in the conventional place. Tab order still
   reaches the checkbox before the submit button. */
.is-style-inline .realist-lead-consent {
	order: 1;
}

/* A strip has no room for a label above every field, so the block's "Use
   placeholders" option moves the field name into the input. The <label> stays in
   the DOM and stays associated with its input — it is taken out of the visual
   flow only. `display: none` would remove it from the accessibility tree too,
   and a placeholder is not a label substitute: it vanishes on the first
   keystroke, so a screen-reader user (or anyone returning to a half-filled form)
   would have nothing left identifying the field. */
.is-style-inline .realist-lead-field label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* The consent line is a checkbox with its text in the label, so hiding the label
   would hide the consent wording itself. It also cannot share the strip's row —
   it takes a line of its own beneath.

   `color: inherit` matters more than it looks. Every other label in this style is
   visually hidden, so a variation has no reason to give the strip a label colour
   — which leaves this one inheriting whichever colour the variation set for the
   *default* style's labels, a value chosen for a light form. A strip is exactly
   the component most likely to be dropped onto a dark band, and then the only
   visible text in it is unreadable. Following the block's own text colour is the
   only thing that works in both places. */
.is-style-inline .realist-lead-consent label {
	color: inherit;
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}