/*
 * Formidable Forms — design bridge.
 *
 * Maps Formidable's output onto the delivered design system. Loaded only on
 * pages that render a form (see inc/formidable.php).
 *
 * Why this file has to restate values that style.css already sets:
 * style.css styles bare elements (`input[type=text]`, `select`, `textarea`),
 * specificity 0,0,1. Formidable scopes its own stylesheet under
 * `.with_frm_style`, specificity 0,1,1 — so Formidable wins every collision.
 * Everything here is therefore scoped to `.with_frm_style` to outrank it, and
 * the values are copied from style.css rather than invented. If a control size
 * changes there, change it here too.
 *
 * Two field settings are expected on the Formidable side, added per field in
 * the field's CSS-classes box. Formidable puts those on the field CONTAINER,
 * not the input, which is why the selectors below reach through it:
 *
 *   js-slimselect   on a Dropdown field  -> SlimSelect enhancement
 *   checkbox-list   on a Checkbox/Radio  -> the design's option grid
 *
 * assets/js/formidable.js promotes js-slimselect from the container down onto
 * the <select>, because main.js looks for `select.js-slimselect`.
 */

.with_frm_style {
	/*
	 * The design has no error state of its own — nothing in the nine comps
	 * shows a validation failure. This red is introduced here, chosen for
	 * ~6:1 contrast on white so error text passes AA at body size.
	 */
	--cml-error: #b3261e;
	--cml-error-bg: #fdf3f2;
	--cml-field-border: #c3c3c3;
	--cml-field-text: #6b6b6b;
}

/* ------------------------------------------------------------------------- *
 * Form shell
 * ------------------------------------------------------------------------- *
 * Formidable ships:
 *
 *   .frm_forms.frm_style_formidable-style.with_frm_style { max-width: var(--form-width) }
 *
 * at specificity 0,3,0 with --form-width: 100%. Core's constrained-layout cap
 * is `.is-layout-constrained > :where(…)` at 0,1,0, so Formidable wins and the
 * form spills to the full width of the content wrapper rather than sitting in
 * the prose column with everything around it.
 *
 * Matched at 0,3,0 and loaded later, scoped to content areas so a form placed
 * inside a full-bleed ACF section block is left alone.
 */

.entry-content > .frm_forms.with_frm_style,
.wp-block-post-content > .frm_forms.with_frm_style {
	max-width: var(--wp--style--global--content-size, var(--cml-content));
	margin-left: auto;
	margin-right: auto;
}

.with_frm_style .frm_form_fields > fieldset {
	border: none;
	display: block;
	padding: 0;
	margin: 0;
	min-width: 0;
}

/*
 * The DEFAULT is one field per row, and it stays that way.
 *
 * Formidable ships `.frm_fields_container` as `repeat(12, 1fr)` so that per-field
 * `frmN` classes can lay fields out. Only one form in this design needs that —
 * the contact form — and it gets it in its own scoped block further down, beside
 * `.cta-form`, `.subscribe-card` and `.subscribe-form`.
 *
 * An earlier revision changed THIS rule to the grid instead. It fixed the contact
 * form's pairing and disturbed every other form on the site to do it, which is
 * the trade this file's whole structure exists to avoid: the base is what every
 * form gets, and a treatment that one form needs belongs in that form's scope.
 */
.with_frm_style .frm_fields_container {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (min-width: 1024px) {
	.with_frm_style .frm_fields_container {
		gap: 3rem;
	}
}

/*
 * Formidable's honeypot must stay hidden — and hiding the input is not enough.
 * The plugin wraps it in `<div id="frm_field_NN_container">` with NO class of
 * its own, alongside a plain `<label>If you are human, leave this field
 * blank.</label>`, and its own stylesheet says nothing about either: `frm_verify`
 * does not appear in formidableforms.css at all. So the input went out of flow
 * and the sentence stayed, visible under every form on the site.
 *
 * `:has()` reaches the unclassed wrapper, which is the only handle there is. The
 * `.frm_verify` rule stays as the fallback: in a browser without `:has()` the
 * input is still hidden, and one stray line of text is a better failure than a
 * live honeypot field a person can type into.
 *
 * This is also what makes `.cta-form`'s "exactly two children land in flow"
 * true — it was three.
 */
.with_frm_style .frm_verify,
.with_frm_style .frm_screen_reader,
.with_frm_style div:has( > .frm_verify ) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.with_frm_style .frm_form_field {
	margin: 0;
	width: 100%;
}

/* ------------------------------------------------------------------------- *
 * Labels, descriptions, required marker
 * ------------------------------------------------------------------------- */

.with_frm_style .frm_primary_label {
	display: block;
	font-size: 16px;
	line-height: 1.1;
	font-weight: 300;
	color: var(--cml-field-text);
	margin-bottom: 16px;
	padding: 0;
}

.with_frm_style .frm_required {
	color: var(--cml-error);
	font-weight: 600;
	margin-left: 2px;
}

.with_frm_style .frm_description {
	font-size: 14px;
	line-height: 1.4;
	color: var(--cml-field-text);
	margin-top: 8px;
}

@media (min-width: 1024px) {
	.with_frm_style .frm_primary_label {
		font-size: max(16px, 2.2rem);
		margin-bottom: 1.6rem;
	}

	.with_frm_style .frm_description {
		font-size: max(14px, 1.8rem);
		margin-top: 0.8rem;
	}
}

/* ------------------------------------------------------------------------- *
 * Text controls — mirrors style.css exactly
 * ------------------------------------------------------------------------- */

.with_frm_style input[type="text"],
.with_frm_style input[type="tel"],
.with_frm_style input[type="email"],
.with_frm_style input[type="search"],
.with_frm_style input[type="password"],
.with_frm_style input[type="url"],
.with_frm_style input[type="number"],
.with_frm_style input[type="date"],
.with_frm_style input[type="file"],
.with_frm_style select,
.with_frm_style textarea {
	display: block;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	max-width: 100%;
	width: 100%;
	height: 55px;
	color: var(--cml-field-text);
	border: 1px solid var(--cml-field-border);
	padding: 0 20px;
	background: transparent;
	border-radius: 9px;
}

/*
 * Only the geometry a textarea actually needs. Border, background and radius are
 * left to the shared control rule above, so the message box matches the fields
 * around it.
 *
 * style.css:2282 writes `border: none; background: #fff; border-radius: 4px`
 * here, and that is NOT followed. No comp contains a textarea — comp 05's contact
 * form has no message field at all — so that rule has never rendered anywhere,
 * and what it describes is a white borderless block. Every page that has a form
 * on it has a white background, which makes the field invisible: no border, and
 * nothing to separate it from the page. Its 4px corner against the inputs' 9px
 * is the other half of the same tell. Treated as untested vendor code rather
 * than as design intent.
 *
 * `overflow: auto` where style.css writes `overflow: hidden`, for a separate
 * reason: a textarea is the one field a visitor can overfill, and hiding the
 * overflow scrolls what they typed out of sight with no way to bring it back.
 */
.with_frm_style textarea {
	resize: none;
	vertical-align: top;
	overflow: auto;
	padding: 16px;
	height: 188px;
}

/*
 * `font-size: inherit` on the placeholder, because Formidable pins it:
 *
 *     .with_frm_style input::placeholder,
 *     .with_frm_style textarea::placeholder { font-size: var(--field-font-size) }
 *
 * — 14px, at 0,1,2. The rule below was `.with_frm_style ::placeholder` at 0,1,1
 * and set no size at all, so every placeholder on the site rendered at 14px while
 * the field's own text was 16px / max(16px, 2.2rem). On the contact form that is
 * most of what a visitor sees, since those fields show a placeholder and no label.
 *
 * style.css sets no placeholder size anywhere — the design lets it inherit — so
 * `inherit` is the faithful value AND the safe one: it resolves to whatever the
 * field itself is, which keeps the footer's 14px field and the sidebar card's
 * 1.9rem field each internally consistent without naming either.
 *
 * `.frm_forms.with_frm_style` and not just `.with_frm_style`, because the COLOUR
 * has a second contender the size does not:
 *
 *     .frm_style_formidable-style.with_frm_style input::placeholder {
 *         color: var(--text-color-disabled)
 *     }
 *
 * at 0,2,2 against 0,1,2. So the placeholder painted `#667085` — the plugin's
 * disabled grey — while the text a visitor types into the same field is
 * `#6b6b6b`. Two greys where the design has one, most visible on the contact
 * form, where the placeholder IS the field's label. Not the style slug, which is
 * a Formidable setting and would stop matching if the client changed it.
 */
.frm_forms.with_frm_style input::placeholder,
.frm_forms.with_frm_style textarea::placeholder,
.frm_forms.with_frm_style select::placeholder,
.with_frm_style ::placeholder {
	opacity: 1;
	font-size: inherit;
	color: var(--cml-field-text);
}

.with_frm_style input:focus-visible,
.with_frm_style select:focus-visible,
.with_frm_style textarea:focus-visible {
	outline: 2px solid #6fcf97;
	outline-offset: 2px;
}

/*
 * Formidable repaints the field on focus from its own tokens:
 *
 *     .frm_style_formidable-style.with_frm_style .form-field
 *       input:not([type=file]):not([type=range]):not([readonly]):focus
 *       { background-color: var(--bg-color-active); … }
 *
 * --bg-color-active is white, so a transparent field fills in solid the moment
 * it is clicked. The design has `background: transparent` with no focus
 * override anywhere, so the field must stay transparent throughout.
 *
 * This is GLOBAL, not scoped to .cta-form. It applies to every form on the
 * site; it is simply invisible on a light background and obvious on the green
 * band, which is where it was spotted. The green focus-visible outline above is
 * the focus indicator and is untouched.
 *
 * !important rather than out-specifying (0,7,1) — the same route this file
 * already takes against Formidable's submit rules.
 *
 * textarea is included. It used to be excluded because the bridge gave it a solid
 * #fff of its own; it no longer does, so without this it would fill white on
 * click exactly as the inputs did.
 */
.frm_forms.with_frm_style .form-field input:not([type="file"]):not([type="range"]):not([readonly]):focus,
.frm_forms.with_frm_style .form-field textarea:not([readonly]):focus {
	background-color: transparent !important;
}

@media (min-width: 1024px) {
	.with_frm_style input[type="text"],
	.with_frm_style input[type="tel"],
	.with_frm_style input[type="email"],
	.with_frm_style input[type="search"],
	.with_frm_style input[type="password"],
	.with_frm_style input[type="url"],
	.with_frm_style input[type="number"],
	.with_frm_style input[type="date"],
	.with_frm_style input[type="file"],
	.with_frm_style select,
	.with_frm_style textarea {
		font-size: max(16px, 2.2rem);
		height: max(55px, 6.5rem);
		border-width: 0.2rem;
		padding: 0 2rem;
		border-radius: 0.9rem;
	}

	/*
	 * `max(188px, 18.8rem)`, not a bare `18.8rem`. The same floor the input
	 * heights above already carry, and for the same reason: 18.8rem is 100px at a
	 * 1024px viewport, so a bare value shrinks the message box by nearly half the
	 * moment the layout crosses into desktop — the rem inversion. Floored it is
	 * 188px through the narrow end and lands on the design's 188px at 1920.
	 */
	.with_frm_style textarea {
		padding: 1.6rem;
		height: max(188px, 18.8rem);
	}
}

/* ------------------------------------------------------------------------- *
 * Select
 * ------------------------------------------------------------------------- *
 * A field carrying `js-slimselect` is replaced by SlimSelect, whose .ss-main
 * styling already lives in style.css — so hide nothing and add no chevron
 * there. Everything else is a native select and needs one, since
 * appearance: none removes the platform arrow.
 */

.with_frm_style select {
	padding-right: 52px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 8" fill="%236b6b6b"><path transform="rotate(180 6.5 4)" d="M12.6195 6.16992C12.9899 6.54025 12.9899 7.14139 12.6195 7.51172C12.2492 7.88204 11.6481 7.88204 11.2777 7.51172L6.44864 2.68262L1.61954 7.51172C1.24922 7.88204 0.648068 7.88204 0.277744 7.51172C-0.0925812 7.14139 -0.0925812 6.54025 0.277744 6.16992L6.44864 0L12.6195 6.16992Z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 13px 8px;
	cursor: pointer;
}

/* SlimSelect renders its own control; the original select is hidden by the
   library. Make sure the wrapper fills the field. */
.with_frm_style .ss-main {
	width: 100%;
}

@media (min-width: 1024px) {
	.with_frm_style select {
		padding-right: 5.2rem;
		background-position: right 2rem center;
	}
}

/* ------------------------------------------------------------------------- *
 * Checkbox and radio
 * ------------------------------------------------------------------------- *
 * The design's markup uses a hidden input plus a .checkbox__box span, which
 * Formidable does not emit. Styling the native input directly with
 * appearance: none reaches the same visual result and keeps focus, keyboard
 * behaviour and the accessibility tree intact — strictly better than hiding
 * the control and faking it.
 *
 * The checked state uses background-image rather than a pseudo-element:
 * pseudo-elements on replaced elements such as inputs are not reliable across
 * browsers, background-image always is.
 */

.with_frm_style .frm_opt_container {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: none;
}

/*
 * `checkbox-list` is a CSS class set on the FIELD in Formidable, so style.css's
 * `.checkbox-list { display: grid }` lands on the field container — whose two
 * children are the question label and the option container. The result is the
 * question sitting in column one and its own answers in column two.
 *
 * In the comps that class is on the `<ul>` of options and nothing else. Returning
 * the field container to block flow puts the label back above, full width, and
 * leaves the grid to `.frm_opt_container` below, which is the element the design
 * actually means.
 */
.with_frm_style .frm_form_field.checkbox-list {
	display: block;
}

/*
 * Fields tagged `checkbox-list` follow the design's option grid exactly:
 * one column below 768px, two above, with the row/column gap split on
 * desktop. Values copied from .checkbox-list in style.css.
 */
.with_frm_style .checkbox-list .frm_opt_container {
	gap: 12px;
}

@media (min-width: 768px) {
	.with_frm_style .checkbox-list .frm_opt_container {
		grid-template-columns: repeat(2, 1fr);
	}
}

.with_frm_style .frm_checkbox,
.with_frm_style .frm_radio {
	margin: 0;
	padding: 0;
}

/*
 * `.vertical_radio` is in the selector list because Formidable ships:
 *
 *     .with_frm_style .vertical_radio .frm_checkbox label,
 *     .with_frm_style .vertical_radio .frm_radio label { display: block; width: 100% }
 *
 * at 0,3,1 — one class more than this rule was, so it won and the option labels
 * were block-level. The box and its text stopped being a flex row and stacked.
 * Formidable adds `vertical_radio` to any checkbox or radio field whose options
 * are listed vertically, which is every one of them here.
 *
 * Matching that specificity and settling it on load order, same as the box
 * metrics above. `flex` rather than `inline-flex`: the plugin's `width: 100%`
 * stays, so the label is the full-width click target for its option.
 */
.with_frm_style .frm_checkbox label,
.with_frm_style .frm_radio label,
.with_frm_style .vertical_radio .frm_checkbox label,
.with_frm_style .vertical_radio .frm_radio label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.3;
	color: var(--cml-field-text);
	margin-bottom: 0;
}

/*
 * `!important` on the BOX METRICS, because Formidable's are:
 *
 *     .with_frm_style .frm_radio input[type=radio],
 *     .with_frm_style .frm_checkbox input[type=checkbox] {
 *         display: inline-block !important;
 *         width: 16px !important;
 *         min-width: 16px !important;
 *         height: 16px !important;
 *     }
 *     .with_frm_style .frm_checkbox input[type=checkbox] {
 *         border-radius: calc(var(--border-radius) / 2) !important;
 *     }
 *
 * Same 0,3,1 as this rule, so specificity is a tie and `!important` decides it.
 * Without it the design's 32px box lost to the plugin's 16px on every form on
 * the site, at every width — including the `@media (min-width: 1024px)` block
 * below, which also had to match. The checkbox has been half its designed size
 * since this treatment was written, and reading the file could not show it: the
 * declarations are all present and all correct, and all of them were losing.
 *
 * `appearance`, `background-color` and `border` are NOT flagged. The plugin sets
 * those without `!important`, so the tie goes to this file for being later.
 */
.with_frm_style .frm_checkbox input[type="checkbox"],
.with_frm_style .frm_radio input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
	position: relative;
	display: inline-block !important;
	width: 32px !important;
	min-width: 32px !important;
	height: 32px !important;
	margin: 0;
	border: 1px solid var(--cml-field-border);
	border-radius: 6px !important;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.with_frm_style .frm_radio input[type="radio"] {
	border-radius: 50% !important;
}

/*
 * Formidable draws its own tick through a ::before on the input, with
 * !important on every property. Suppress it and let the input's own
 * background-image carry the mark.
 */
.frm_forms.with_frm_style .frm_checkbox input[type="checkbox"]::before,
.frm_forms.with_frm_style .frm_radio input[type="radio"]::before,
.frm_forms.with_frm_style .frm_checkbox input[type="checkbox"]::after,
.frm_forms.with_frm_style .frm_radio input[type="radio"]::after {
	content: none !important;
	background-image: none !important;
	display: none !important;
}

/*
 * The checked state has to be fought for. Formidable ships:
 *
 *   .frm_forms.with_frm_style .frm_fields_container .frm_checkbox
 *     input[type=checkbox]:not([disabled]):checked
 *       { background-color: var(--border-color-active) !important }
 *
 * — 0,5,1 plus !important, which paints the box its default blue. Matched
 * selector, matched !important.
 */
.frm_forms.with_frm_style .frm_fields_container .frm_checkbox input[type="checkbox"]:not([disabled]):checked,
.frm_forms.with_frm_style .frm_fields_container .frm_radio input[type="radio"]:not([disabled]):checked {
	background-color: #6fcf97 !important;
	border-color: #6fcf97 !important;
}

.frm_forms.with_frm_style .frm_fields_container .frm_checkbox input[type="checkbox"]:not([disabled]):checked {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 10" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 5l4 4 8-8"/></svg>') !important;
	background-size: 14px 10px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

/*
 * The dot is an inset white ring. There is no design radio to match — style.css
 * has `.checkbox` and nothing else, because no comp draws a radio group — so the
 * circular variant is the theme's, built from the checkbox's own dimensions and
 * colours. A square radio would be a straightforward UI error, whatever the
 * design does not say.
 */
.frm_forms.with_frm_style .frm_fields_container .frm_radio input[type="radio"]:not([disabled]):checked {
	box-shadow: inset 0 0 0 5px #fff !important;
}

/* Formidable's focus ring is its own blue; use the brand colour instead. */
.frm_forms.with_frm_style .frm_checkbox input[type="checkbox"]:focus,
.frm_forms.with_frm_style .frm_radio input[type="radio"]:focus {
	box-shadow: none !important;
}

.frm_forms.with_frm_style .frm_fields_container .frm_radio input[type="radio"]:not([disabled]):checked:focus {
	box-shadow: inset 0 0 0 5px #fff !important;
}

.with_frm_style .frm_checkbox input[type="checkbox"]:focus-visible,
.with_frm_style .frm_radio input[type="radio"]:focus-visible {
	outline: 2px solid #6fcf97;
	outline-offset: 2px;
}

@media (min-width: 1024px) {
	.with_frm_style .frm_opt_container {
		gap: 1.2rem;
	}

	/* .checkbox-list is 0.6rem row / 2.4rem column in style.css. */
	.with_frm_style .checkbox-list .frm_opt_container {
		gap: 0.6rem 2.4rem;
	}

	/*
	 * REVERTED to the values that were here before the field-type reference form
	 * went in. Reading style.css, `.checkbox__box` is `4.2rem` at this width with
	 * a `0.2rem` border and a `1.6rem × 1rem` tick, and those were applied — a
	 * 42px box where this draws 32px. On the contact page, which is the only
	 * client-facing page with checkboxes, that read as broken rather than as
	 * corrected, and it is the design's live form that decides.
	 *
	 * So the transcription is left as it was and the discrepancy is recorded
	 * instead — BUILD-PLAN open decision 19. It is a real difference from
	 * style.css and wants a look at both together, not another swing at it from
	 * the stylesheet alone.
	 */
	/*
	 * `.checkbox` is `max(15px, 1.9rem)` at this width in style.css — this said
	 * `max(14px, 1.8rem)`.
	 *
	 * The `.vertical_radio` selectors have to be repeated here too. Adding them to
	 * the base rule to beat Formidable's `display: block` took that rule to 0,3,1,
	 * which then outranked THIS one at 0,2,1 — so the label was pinned to the
	 * base's 14px at every width and the desktop size stopped applying. Raising a
	 * base rule's specificity silently outranks its own responsive half.
	 */
	.with_frm_style .frm_checkbox label,
	.with_frm_style .frm_radio label,
	.with_frm_style .vertical_radio .frm_checkbox label,
	.with_frm_style .vertical_radio .frm_radio label {
		font-size: max(15px, 1.9rem);
		gap: 1.2rem;
	}

	/* `!important` for the same reason as the base rule — see the note there. */
	.with_frm_style .frm_checkbox input[type="checkbox"],
	.with_frm_style .frm_radio input[type="radio"] {
		width: max(32px, 3.2rem) !important;
		min-width: max(32px, 3.2rem) !important;
		height: max(32px, 3.2rem) !important;
	}
}

/* ------------------------------------------------------------------------- *
 * Submit
 * ------------------------------------------------------------------------- *
 * Mirrors .btn / .btn--primary from style.css.
 */

/*
 * `.frm_flex` is in the selector because Formidable puts it on every submit
 * container and ships `.with_frm_style .frm_submit.frm_flex { gap: 2% }` at
 * 0,3,0 — one class more than this rule was. Latent rather than visible: every
 * form here has a single button, so the gap has nothing to space. It would
 * appear the first time a form gained a "save draft" or "previous" control.
 */
.with_frm_style .frm_submit,
.with_frm_style .frm_submit.frm_flex {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
}

/*
 * Formidable skins the submit from its --submit-* tokens (blue, 8px radius,
 * 14px). Selectors here carry the .frm_forms + .frm_fields_container weight
 * plus !important on the paint properties, because several of Formidable's
 * submit rules are themselves !important.
 */
.frm_forms.with_frm_style .frm_submit .frm_button_submit,
.frm_forms.with_frm_style .frm_submit .frm_save_draft,
.frm_forms.with_frm_style .frm_submit .frm_prev_page,
.with_frm_style .frm_button_submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: inherit;
	font-size: 15px !important;
	line-height: 1;
	padding: 8px 30px !important;
	font-weight: 800 !important;
	vertical-align: middle;
	border: none !important;
	width: auto;
	height: auto;
	cursor: pointer;
	text-decoration: none;
	border-radius: 50px !important;
	background-color: #6fcf97 !important;
	color: #fff !important;
	box-shadow: none !important;
	transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

.frm_forms.with_frm_style .frm_submit .frm_button_submit:hover,
.frm_forms.with_frm_style .frm_submit .frm_button_submit:focus,
.with_frm_style .frm_button_submit:hover,
.with_frm_style .frm_button_submit:focus {
	background-color: #50ac76 !important;
	color: #fff !important;
}

/* Secondary actions read as outline buttons. */
.with_frm_style .frm_save_draft,
.with_frm_style .frm_prev_page {
	background-color: transparent;
	border: 1px solid #333;
	color: #333;
}

.with_frm_style .frm_save_draft:hover,
.with_frm_style .frm_prev_page:hover {
	background-color: #333;
	color: #fff;
}

.with_frm_style .frm_start_over {
	align-self: center;
	font-size: 14px;
	color: var(--cml-field-text);
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.with_frm_style .frm_button_submit,
	.with_frm_style .frm_save_draft,
	.with_frm_style .frm_prev_page {
		font-size: max(15px, 1.5rem);
	}
}

/* On the dark bands the button text flips, matching .bg-dark .btn--primary. */
.bg-dark .with_frm_style .frm_button_submit,
.bg-gray .with_frm_style .frm_button_submit,
.has-charcoal-background-color .with_frm_style .frm_button_submit,
.has-near-black-background-color .with_frm_style .frm_button_submit {
	color: #333;
}

/* ------------------------------------------------------------------------- *
 * Validation and messages
 * ------------------------------------------------------------------------- *
 * The design ships no error state, so this is new work rather than a mirror.
 * It stays deliberately quiet: a red border on the offending control and a
 * short message beneath it, no icons, no shouting.
 */

/*
 * Formidable's error styling is (0,4,1) and repaints far more than the border:
 *
 *     .frm_style_formidable-style.with_frm_style .frm_blank_field input[type=text] {
 *         color: var(--text-color-error);
 *         background-color: var(--bg-color-error);
 *         border-color: var(--border-color-error);
 *         border-width: var(--border-width-error);
 *         border-style: var(--border-style-error);
 *     }
 *
 * The rule here was (0,2,1) and lost outright, so NONE of the theme's error
 * treatment was reaching the page. Formidable's own red is close enough to the
 * intended one that it went unnoticed — but the width and background came with
 * it, which is how a 2px transparent field became 1px on a tinted panel.
 *
 * Restated at (0,4,1): equal weight to Formidable's, and this file prints in
 * the footer, so it wins on order — the mechanism 11.14 describes. Only the
 * COLOUR moves on error. The field keeps its width and stays transparent,
 * which is what the design does everywhere.
 */
.frm_forms.with_frm_style .frm_blank_field input[type="text"],
.frm_forms.with_frm_style .frm_blank_field input[type="tel"],
.frm_forms.with_frm_style .frm_blank_field input[type="email"],
.frm_forms.with_frm_style .frm_blank_field input[type="url"],
.frm_forms.with_frm_style .frm_blank_field input[type="number"],
.frm_forms.with_frm_style .frm_blank_field textarea,
.frm_forms.with_frm_style .frm_blank_field select {
	color: var(--cml-field-text);
	background-color: transparent;
	border-color: var(--cml-error);
	border-width: 1px;
	border-style: solid;
}

@media (min-width: 1024px) {
	.frm_forms.with_frm_style .frm_blank_field input[type="text"],
	.frm_forms.with_frm_style .frm_blank_field input[type="tel"],
	.frm_forms.with_frm_style .frm_blank_field input[type="email"],
	.frm_forms.with_frm_style .frm_blank_field input[type="url"],
	.frm_forms.with_frm_style .frm_blank_field input[type="number"],
	.frm_forms.with_frm_style .frm_blank_field textarea,
	.frm_forms.with_frm_style .frm_blank_field select {
		border-width: 0.2rem;
	}
}


/*
 * The SAME correction as the field border above, which these three rules missed.
 * Formidable scopes its message styling to the form's style slug —
 * `.frm_style_formidable-style.with_frm_style .frm_error` at 0,3,1 and
 * `.frm_error_style` / `.frm_message` at 0,3,0 — and these sat at 0,2,1 and
 * 0,1,0. So none of the validation work reached the page: the inline error was
 * the plugin's 12px `#F04438` rather than 14px at the ~6:1 red chosen to pass
 * AA, and the summary and success boxes were its defaults throughout.
 *
 * `.frm_forms.with_frm_style` rather than the style slug, because the slug is a
 * Formidable setting and would silently stop matching if the client ever picked
 * a different form style. `.frm_forms` is always on the wrapper. Equal weight,
 * and this file prints in the footer, so it wins on order — 11.14's mechanism.
 */
.frm_forms.with_frm_style .frm_error {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	color: var(--cml-error);
	margin-top: 8px;
}

/* Form-level error summary. */
.frm_forms.with_frm_style .frm_error_style {
	font-size: 16px;
	line-height: 1.5;
	color: var(--cml-error);
	background-color: var(--cml-error-bg);
	border: 1px solid var(--cml-error);
	border-radius: 9px;
	padding: 16px 20px;
	margin-bottom: 24px;
}

/* Success message after submission. */
.frm_forms.with_frm_style .frm_message,
.frm_message {
	/*
	 * Centred on every form. `text-align` inherits, so the paragraph inside
	 * follows without a rule of its own — and the scoped treatments below only
	 * restate colour, padding and size, so none of them undoes it. The plugin's
	 * `--form-align` left rule targets `.frm_description p`, not this.
	 */
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
	color: #246840;
	background-color: rgba(111, 207, 151, 0.14);
	border: 1px solid #6fcf97;
	border-radius: 9px;
	padding: 16px 20px;
}

.frm_forms.with_frm_style .frm_message p:last-child,
.frm_message p:last-child {
	margin-bottom: 0;
}

@media (min-width: 1024px) {
	/* Same selectors as the base half — 11.49. */
	.frm_forms.with_frm_style .frm_error {
		font-size: max(14px, 1.8rem);
		margin-top: 0.8rem;
	}

	.frm_forms.with_frm_style .frm_error_style,
	.frm_forms.with_frm_style .frm_message,
	.frm_message {
		font-size: max(16px, 2.2rem);
		padding: 1.6rem 2rem;
		border-radius: 0.9rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.with_frm_style .frm_button_submit,
	.with_frm_style .frm_checkbox input[type="checkbox"],
	.with_frm_style .frm_radio input[type="radio"] {
		transition: none;
	}
}

/* --- .cta-form — the inline email capture in cml/cta-banner ------------- *
 *
 * `.cta-form` is set as the form's CSS class in Formidable, so it lands on the
 * <form>. `with_frm_style` is on the WRAPPER div, not the form — they are
 * different elements, which is why these selectors are `.with_frm_style
 * .cta-form` and not `.with_frm_style.cta-form`.
 *
 * style.css puts the grid on `.cta-form` itself, with the field and the button
 * as its two children. Formidable nests
 *
 *     form.cta-form > .frm_form_fields > fieldset > .frm_fields_container
 *
 * and makes the field and `.frm_submit` siblings inside that container, so the
 * grid moves one level down. Exactly two children land in flow: the honeypot is
 * position:absolute (Formidable injects that at runtime via a <script>) and
 * frm_state is input[type=hidden], which the UA stylesheet hides.
 */

.with_frm_style .cta-form .frm_fields_container {
	display: grid;
	grid-template-columns: 1fr;
	align-items: flex-start;
	gap: 24px;
}

/*
 * Formidable runs its own 12-column grid and pins every direct child across all
 * of it:
 *
 *     .frm_fields_container > .frm_form_field,
 *     .frm_fields_container > .frm_submit { grid-column: 1 / span 12 !important }
 *
 * so the field and the button stack no matter what grid-template-columns says.
 * `auto` lets them flow into the two columns above. !important is required
 * because theirs is — this is the case the file's submit-button note already
 * describes.
 */
.with_frm_style .cta-form .frm_fields_container > .frm_form_field,
.with_frm_style .cta-form .frm_fields_container > .frm_submit {
	grid-column: auto !important;
}

/*
 * THE FORM ELEMENT ITSELF MUST BE ONE COLUMN.
 *
 * style.css:2305 and :5331 style `.cta-form` directly — `display: grid` with
 * `grid-template-columns: repeat(2, 1fr)` from 768px — because in the delivered
 * markup the field and the button are its two direct children.
 *
 * Under Formidable they are not. The form's only child is `.frm_form_fields`,
 * so that single wrapper takes column 1 and column 2 is left empty: the form
 * renders at half width with a hole beside it. The two-up split belongs on
 * `.frm_fields_container` below, where the real children are.
 */
.with_frm_style .cta-form {
	grid-template-columns: 1fr;
}

/*
 * The CTA banner keeps Formidable's OWN success panel, not the theme's.
 *
 * The theme's success box is a pale green tint with a green border, which is
 * right on white and disappears on this block: the banner is `bg-primary`, so a
 * 14%-green panel on brand green is a panel you cannot see. Formidable's default
 * is a distinct light-green card, which reads as a message rather than as part
 * of the band.
 *
 * Scoped on `.section-cta`, the BLOCK's own class, and not on `.cta-form`.
 * `.cta-form` is on the `<form>` element, and Formidable puts the success message
 * where the form was — `FrmFormsController::get_message_placement()` returns
 * before, after or submit, all of which are outside the form, and on a normal
 * submit the form is not redisplayed at all. A rule scoped to the form can never
 * match the message that replaces it. Same correction on the contact form below.
 *
 * Written with the plugin's own tokens rather than its literal hex values, so
 * the panel follows the form style if the client ever changes it in Formidable —
 * which is where these belong.
 *
 * ONE DEVIATION, and it is deliberate: `--success-text-color` is `#468847`,
 * which on `--success-bg-color` `#DFF0D8` is **3.61:1** and fails WCAG AA for
 * normal text. `#3C753D` is the same hue and saturation two steps darker, at
 * 4.59:1. The panel is unchanged and looks the same. This file's error red was
 * chosen at ~6:1 for exactly this reason; shipping a success message that fails
 * where the failure message passes would be an odd place to stop caring.
 *
 * The `p` rule is not optional. Formidable sets `.frm_message p { color:
 * var(--success-text-color) }`, and the message's text is always in a paragraph,
 * so colouring only the container would change nothing at all.
 */
.section-cta .frm_forms.with_frm_style .frm_message,
.section-cta .with_frm_style .frm_message {
	margin: 5px 0 15px;
	padding: 15px;
	border: 1px solid var(--success-border-color);
	border-radius: var(--border-radius);
	background-color: var(--success-bg-color);
	font-size: var(--success-font-size);
	line-height: 1.5;
	color: #3c753d;
}

.section-cta .frm_forms.with_frm_style .frm_message p,
.section-cta .with_frm_style .frm_message p {
	color: #3c753d;
}

/* Field and button side by side, which is what .cta-form does in the comp. */
@media (min-width: 768px) {
	.with_frm_style .cta-form .frm_fields_container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.with_frm_style .cta-form .frm_fields_container {
		gap: 3.2rem;
	}
}

/* .cta-form__field — the design gives it width only. */
.with_frm_style .cta-form .frm_form_field {
	width: 100%;
	margin: 0;
}

/*
 * The comp has NO label, only a placeholder — a WCAG 1.3.1 and 3.3.2 failure,
 * since a placeholder disappears on input and is not an accessible name.
 * Formidable emits a real label, so it is KEPT and hidden visually rather than
 * removed: identical to the comp on screen, correct to a screen reader.
 */
.with_frm_style .cta-form .frm_primary_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* input.cta-form__input — white on the green band. */
/*
 * border-width carries !important because the field must not change thickness
 * in ANY state, and Formidable moves it in several.
 *
 * The visible case is typing: `frm_blank_field` is toggled on the container by
 * Formidable's live validation, and a half-typed address is invalid, so the
 * class is present for most of the time the user is typing. Its error rule
 * carries `border-width: var(--border-width-error)` — 1px — so the border
 * visibly thinned mid-keystroke and snapped back once the address parsed.
 *
 * Pinning the width here once is more durable than answering each state
 * separately; the error and focus rules below then only move the COLOUR, which
 * is all the design ever changes.
 */
.with_frm_style .cta-form input[type="email"],
.with_frm_style .cta-form input[type="text"] {
	border-color: #fff;
	border-width: 2px !important;
	border-style: solid !important;
	border-radius: 50px;
	color: #fff;
}

/*
 * `font-size: inherit` is load-bearing. Formidable sizes the placeholder
 * SEPARATELY from its input —
 *
 *     .with_frm_style input::placeholder { font-size: var(--field-font-size) }
 *
 * — so a placeholder does not follow the font-size set on the field, and the
 * hint renders at Formidable's token size against the design's much larger
 * input. Inheriting puts it back on the input's own size.
 */
.with_frm_style .cta-form input[type="email"]::placeholder,
.with_frm_style .cta-form input[type="text"]::placeholder {
	color: #fff;
	opacity: 1;
	font-size: inherit;
}

/*
 * Formidable's focus rule also sets `color: var(--text-color)`, which is dark.
 * On the green band the typed text has to stay white, so it is restated here —
 * the global focus rule above only neutralises the background.
 */
.with_frm_style .cta-form input[type="email"]:focus,
.with_frm_style .cta-form input[type="text"]:focus {
	color: #fff !important;
	border-color: #fff !important;
}

/*
 * Error state on the green band — COLOUR ONLY. Width and style are pinned on
 * the base rule above, and the background is neutralised globally, so there is
 * nothing to restate here but the border colour and the white text.
 */
.frm_forms.with_frm_style .cta-form .frm_blank_field input[type="email"],
.frm_forms.with_frm_style .cta-form .frm_blank_field input[type="text"] {
	color: #fff;
	background-color: transparent;
	border-color: var(--cml-error);
}

@media (min-width: 1024px) {
	.with_frm_style .cta-form input[type="email"],
	.with_frm_style .cta-form input[type="text"] {
		height: 8.3rem;
		padding: 2.8rem;
		font-size: max(20px, 2.2rem);
		/* !important to match the base rule's, or 2px would win here. */
		border-width: 0.3rem !important;
		border-radius: 5rem;
	}
}

/* .cta-form__btn — full-width white button, taller than the default. */
.with_frm_style .cta-form .frm_submit {
	display: block;
	margin: 0;
}

.frm_forms.with_frm_style .cta-form .frm_submit .frm_button_submit,
.with_frm_style .cta-form .frm_button_submit {
	width: 100%;
	min-height: 55px;
	margin: 0;
	background-color: #fff !important;
	color: #246840 !important;
}

.frm_forms.with_frm_style .cta-form .frm_submit .frm_button_submit:hover,
.frm_forms.with_frm_style .cta-form .frm_submit .frm_button_submit:focus,
.with_frm_style .cta-form .frm_button_submit:hover,
.with_frm_style .cta-form .frm_button_submit:focus {
	background-color: #50ac76 !important;
	color: #fff !important;
}

@media (min-width: 1024px) {
	.frm_forms.with_frm_style .cta-form .frm_submit .frm_button_submit,
	.with_frm_style .cta-form .frm_button_submit {
		min-height: 8.3rem;
		font-size: max(20px, 2.2rem) !important;
	}
}

/* --- The contact form in cml/contact ------------------------------------ *
 *
 * Two pieces the comps draw by hand and Formidable draws its own way: the goal
 * checkboxes and the submit button. Everything else in this form already lands
 * on the shared field styling above.
 *
 * Scoped to `.form-tile__body`, the block's own wrapper, rather than to a
 * Formidable class — the form ID is a dropdown, so a re-imported form must not
 * need a CSS edit.
 */

/* --- Submit -------------------------------------------------------------- *
 *
 * The comps' button is `.btn.btn--primary.btn--arrow.text-gray` with an inline
 * `<svg class="btn__icon">`. Formidable emits a bare
 * `<button class="frm_button_submit">`, so the arrow is drawn with the same
 * CSS mask theme-bridge.css uses for `core/button`'s arrow style — identical
 * path, so the two cannot drift apart visually.
 *
 * `text-gray` is the charcoal label, and it is not optional here: white on brand
 * green is 1.90:1, a hard WCAG 1.4.3 failure, against 6.65:1 for #333. See
 * BUILD-PLAN open decision 16 — the comps apply it to this very button.
 */
.form-tile__body .frm_forms.with_frm_style .frm_submit {
	justify-content: center;
	width: 100%;
	margin: 0;
}

.form-tile__body .frm_forms.with_frm_style .frm_button_submit,
.form-tile__body .with_frm_style .frm_button_submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	text-align: center;
	font-size: 15px;
	line-height: 1;
	padding: 8px 30px;
	font-weight: 800;
	vertical-align: middle;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	background-color: var(--brand-color) !important;
	color: #333 !important;
	transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

.form-tile__body .frm_forms.with_frm_style .frm_button_submit:hover,
.form-tile__body .with_frm_style .frm_button_submit:hover {
	background-color: var(--accent-color) !important;
}

.form-tile__body .with_frm_style .frm_button_submit::before {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 11px;
	background-color: currentColor;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 11"><path d="M0 7V4H9.5L6.5 0H9.5L14 5.5L9.5 11H6.5L9.5 7H0Z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 11"><path d="M0 7V4H9.5L6.5 0H9.5L14 5.5L9.5 11H6.5L9.5 7H0Z"/></svg>');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

@media (min-width: 1024px) {
	.form-tile__body .frm_forms.with_frm_style .frm_button_submit,
	.form-tile__body .with_frm_style .frm_button_submit {
		font-size: max(15px, 1.5rem);
		gap: max(6px, 0.6rem);
	}

	.form-tile__body .with_frm_style .frm_button_submit::before {
		width: max(14px, 1.4rem);
		height: max(11px, 1.1rem);
	}
}

/* --- .subscribe-card__form — the newsletter card in the blog sidebar ------ *
 *
 * Scoped on `.subscribe-card` as an ANCESTOR, not on a class Formidable puts on
 * the form. `.cta-form` works the other way round — the design class is set as
 * the form's own CSS class — and that cannot work here for two reasons:
 * `cml/subscribe-card` lets the client pick which form to show, and the same
 * newsletter form is also wanted in the footer under `.subscribe-form`. One form
 * cannot carry two mutually exclusive design classes.
 *
 * The consequence is that the form's stored field classes are not used by this
 * treatment. That is deliberate: the card styles what is inside it, whatever
 * form that turns out to be.
 */

/* The Formidable wrapper stands in for <form class="subscribe-card__form">, so
   it takes that element's margin and becomes the card's third flex child. */
.subscribe-card .frm_forms {
	margin: 0;
	width: 100%;
}

/*
 * style.css gives `.subscribe-card__form` `flex-direction: column; gap: 10px`
 * with the fields and the button as its direct children. Under Formidable they
 * are one level down, inside `.frm_fields_container` — the same shift `.cta-form`
 * documents above — so the column goes there.
 *
 * Declaring `display: flex` outright also neutralises Formidable's 12-column
 * grid without having to fight the `grid-column: … !important` it pins every
 * child with: in a flex container that declaration is simply inert.
 */
.subscribe-card .with_frm_style .frm_fields_container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* .subscribe-card__field — the design gives it width only. */
.subscribe-card .with_frm_style .frm_form_field {
	width: 100%;
	margin: 0;
}

/*
 * The comp has no label at all, only a placeholder and an aria-label — a
 * placeholder disappears on input and is not an accessible name. Formidable
 * emits a real label, so it is KEPT and hidden visually: identical on screen,
 * correct to a screen reader. Same call as `.cta-form`.
 */
.subscribe-card .with_frm_style .frm_primary_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* input.subscribe-card__input — a dark pill outlined in brand green. */
.subscribe-card .with_frm_style input[type="text"],
.subscribe-card .with_frm_style input[type="email"] {
	font-weight: 800;
	color: #fff;
	border-color: #6fcf97;
	background-color: #00211b;
	border-radius: 100px;
}

.subscribe-card .with_frm_style input::placeholder {
	color: #fff;
	opacity: 1;
}

/*
 * The global rule above forces `background-color: transparent !important` on
 * focus, to stop Formidable filling a transparent field with white. On this card
 * the field is NOT transparent — it is `#00211b` over a background image — so
 * transparent-on-focus would let the artwork show through the moment the field
 * was clicked. The design has no focus background change at all, so it is pinned
 * back to the resting colour.
 */
.subscribe-card .frm_forms.with_frm_style .form-field input:not([type="file"]):not([type="range"]):not([readonly]):focus {
	background-color: #00211b !important;
	color: #fff !important;
}

/*
 * Error state on the card — COLOUR ONLY, like `.cta-form` above, but it has to
 * restate more because this card's field is not transparent.
 *
 * The global error rule sets `background-color: transparent` and
 * `color: var(--cml-field-text)`, which is right where a field sits on white and
 * wrong here: this one is `#00211b` with white type over a background image, so
 * failing validation dropped the fill out and let the artwork show through the
 * field, with grey text on top of it. The card was the only treatment without a
 * scoped error rule; `.cta-form` has had one since it was built.
 *
 * 0,5,1 against the global rule's 0,4,1. Only the border moves, which is what
 * "the error state changes colour and nothing else" is supposed to mean.
 */
/*
 * Success panel on the card — Formidable's own, the same call as `.cta-form`.
 *
 * The theme's success box is a 14%-green tint with a green border, drawn for
 * white. This card is `#00211b` over a background image, where a translucent
 * green panel is a smear rather than a message. Formidable's light-green card
 * reads as a distinct object on it.
 *
 * Same one deviation as the banner: `--success-text-color` `#468847` on
 * `--success-bg-color` `#DFF0D8` is 3.61:1 and fails AA, so the text is two
 * steps darker at the same hue — `#3C753D`, 4.59:1. The panel is unchanged.
 * The `p` rule is required because Formidable colours the paragraph directly.
 */
.subscribe-card .frm_forms.with_frm_style .frm_message,
.subscribe-card .with_frm_style .frm_message {
	margin: 5px 0 15px;
	padding: 15px;
	border: 1px solid var(--success-border-color);
	border-radius: var(--border-radius);
	background-color: var(--success-bg-color);
	font-size: var(--success-font-size);
	line-height: 1.5;
	color: #3c753d;
}

.subscribe-card .frm_forms.with_frm_style .frm_message p,
.subscribe-card .with_frm_style .frm_message p {
	color: #3c753d;
}

.subscribe-card .frm_forms.with_frm_style .frm_blank_field input[type="text"],
.subscribe-card .frm_forms.with_frm_style .frm_blank_field input[type="email"],
.subscribe-card .frm_forms.with_frm_style .frm_form_field input:invalid {
	color: #fff;
	background-color: #00211b;
	border-color: var(--cml-error);
}

/* .subscribe-card__btn — full width, and taller than the default button. */
.subscribe-card .with_frm_style .frm_submit {
	display: block;
	width: 100%;
	margin: 0;
}

.subscribe-card .frm_forms.with_frm_style .frm_submit .frm_button_submit,
.subscribe-card .with_frm_style .frm_button_submit {
	width: 100%;
	min-height: 55px;
	margin: 0;
}

@media (min-width: 1024px) {
	.subscribe-card .with_frm_style .frm_fields_container {
		gap: 1rem;
	}

	.subscribe-card .with_frm_style input[type="text"],
	.subscribe-card .with_frm_style input[type="email"] {
		height: 6.3rem;
		padding: 0 2.5rem;
		font-size: max(14px, 1.9rem);
		border-radius: 10rem;
	}

	.subscribe-card .frm_forms.with_frm_style .frm_submit .frm_button_submit,
	.subscribe-card .with_frm_style .frm_button_submit {
		min-height: 6.3rem;
		font-size: max(14px, 1.9rem) !important;
	}
}

/* --- .subscribe-form — the newsletter sign-up in the footer ---------------- *
 *
 * Scoped on `.subscribe-form` as an ancestor, like `.subscribe-card` and for the
 * same reason: the form is chosen in Site Options, so the treatment cannot hang
 * off a class stored on one particular form. The two treatments are why — one
 * newsletter form is wanted in the blog sidebar AND in the footer, and a form
 * cannot carry two mutually exclusive design classes.
 *
 * The shape is different from every other form here. `.cta-form` and
 * `.subscribe-card__form` put the field and the button in a grid or a column;
 * this one puts them INSIDE a single bordered pill, with the label outside it.
 * So `.frm_fields_container` becomes `.subscribe-form__field` — the pill — and
 * the label is theme markup outside the plugin's wrapper entirely. See
 * cml_footer_subscribe_form() for why the label cannot be the plugin's own.
 */

/*
 * The copy is a `<p>` where the design has a `<label>`, and style.css puts
 * `line-height: 1.1` on `label, .label` — a base rule `.subscribe-form__label`
 * never restates because it never had to. A paragraph inherits `1.55` from the
 * body instead, so the two-line copy sat half a line taller than designed and
 * pushed the whole footer block out of alignment with the logo beside it.
 *
 * Only the line-height is missing. Everything else the base `label` rule sets is
 * already overridden by `.subscribe-form__label` itself: `display: block` (a `p`
 * already is), `font-size` (12px), `color` (#fff) and `margin` (0).
 */
.subscribe-form__label {
	line-height: 1.1;
}

/* The wrapper is the second flex child of .subscribe-form, standing in for the
   <form> element the design draws. */
.subscribe-form .frm_forms {
	margin: 0;
	width: 100%;
}

/*
 * `.subscribe-form__field` — the pill. Formidable's own grid is neutralised by
 * declaring flex outright, which makes its `grid-column: … !important` inert
 * rather than something to out-specify.
 *
 * `padding: 6px 6px 6px 0` is the design's: no left padding, because the input
 * supplies its own, and 6px on the other three so the button clears the border.
 */
.subscribe-form .with_frm_style .frm_fields_container {
	/* The inline error is absolute against THIS, so it lands under the pill
	   rather than under the label-and-pill row above 1024px. */
	position: relative;
	display: flex;
	/*
	 * `row` is not the default here and MUST be stated. The base treatment at the
	 * top of this file already makes every `.frm_fields_container` a flex COLUMN,
	 * because that is what every other form on the site wants. Declaring
	 * `display: flex` again changed nothing, so the field and the button stayed
	 * stacked, and `align-items: center` — meant to centre them vertically in the
	 * pill — centred them horizontally instead. The pill was right and its
	 * contents were in a column inside it.
	 */
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 48px;
	padding: 6px 6px 6px 0;
	border: 1px solid #fff;
	border-radius: 9px;
	gap: 0;
}

/*
 * The email field takes the space the button does not. `flex: 1 1 0` with
 * `width: auto`, not `1 1 auto` against the inherited `width: 100%` — that also
 * lands in roughly the right place, but only because the field overflows the
 * pill by the width of the button and is then shrunk back by it. Free space is
 * what should be distributed here, not overflow.
 */
.subscribe-form .with_frm_style .frm_form_field {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	margin: 0;
}

/*
 * Kept and hidden, not removed — the comp has only a placeholder on this input,
 * and a placeholder is not an accessible name. Same call as `.cta-form` and
 * `.subscribe-card`. The visible line beside the pill is a separate paragraph.
 */
.subscribe-form .with_frm_style .frm_primary_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * `input.subscribe-form__input.form-control` — the pill draws the border, so the
 * field itself draws nothing.
 *
 * The padding is the design's `0 20px`, inherited from the shared `.form-control`
 * group rather than restated on `.subscribe-form__input`. This said `0 12px`,
 * which is what set the text 8px closer to the pill's left edge than designed —
 * and the pill has `padding-left: 0` precisely because the input is supposed to
 * supply that inset itself.
 */
.subscribe-form .with_frm_style input[type="text"],
.subscribe-form .with_frm_style input[type="email"] {
	height: auto;
	min-height: 0;
	padding: 0 20px;
	font-size: 14px;
	color: #fff;
	background-color: transparent;
	border: none;
	box-shadow: none;
}

.subscribe-form .with_frm_style input::placeholder {
	color: #fff;
	opacity: 1;
}

/*
 * The design has no focus treatment on this field — the pill around it is the
 * visible boundary. Formidable's focus rule repaints the background white, which
 * on a charcoal footer would flash a white block, so it is pinned transparent.
 * The focus RING is untouched: removing the outline here would leave a keyboard
 * user with no indication at all.
 */
/*
 * `color` belongs in here, and its absence was the "placeholder is white but
 * the text is black" report. Formidable's focus rule sets
 * `color: var(--text-color)` — `#1D2939` — alongside the background it repaints,
 * so the field was white until someone typed in it and dark from the first
 * keystroke. The placeholder was never affected, which is exactly why it looked
 * like a placeholder-versus-value problem rather than a focus one.
 */
.subscribe-form .frm_forms.with_frm_style .form-field input:not([type="file"]):not([type="range"]):not([readonly]):focus {
	background-color: transparent !important;
	color: #fff !important;
	border: none !important;
	box-shadow: none !important;
}

/*
 * No ring on the field itself — the PILL takes the focus instead.
 *
 * The base treatment draws `outline: 2px solid #6fcf97` on `:focus-visible`, and
 * a green ring inside a white pill on a charcoal footer is the wrong shape for
 * this control. It is not simply removed: an input with no visible focus state
 * is a WCAG 2.4.7 failure, and this one is the last field on every page, so a
 * keyboard user arrives at it after everything else.
 *
 * So the indicator moves outward. The pill already draws a 1px white border, and
 * on focus it thickens to the brand green — a change of the boundary the design
 * already has, rather than a second boundary drawn inside it.
 */
.subscribe-form .with_frm_style input:focus,
.subscribe-form .with_frm_style input:focus-visible {
	outline: none;
}

.subscribe-form .with_frm_style .frm_fields_container:has(input:focus-visible) {
	border-color: var(--brand-color, #6fcf97);
	box-shadow: 0 0 0 1px var(--brand-color, #6fcf97);
}

/*
 * `:invalid` is in here, and it is the state that was actually being reported.
 *
 * `.frm_blank_field` is Formidable's class, added by its JS after a failed
 * submit. `:invalid` is the BROWSER's, and an `<input type="email">` matches it
 * the moment its value is not a valid address — no submit, no JavaScript, no
 * class. Formidable styles it:
 *
 *     .frm_style_formidable-style.with_frm_style .frm_form_field :invalid {
 *         color: var(--text-color-error);
 *         background-color: var(--bg-color-error);
 *         border-color: var(--border-color-error);
 *     }
 *
 * at 0,4,0, against a resting rule at 0,3,1 — four classes beat three. So typing
 * anything unfinished into the field turned it white with dark text and a red
 * rule, before the visitor had submitted anything or even finished typing.
 *
 * The empty case is quiet only by luck: Formidable uses `aria-required` rather
 * than the native `required` attribute, so an untouched field does not match
 * `:invalid` and no form on this site shows an error on page load.
 *
 * Error state — the border stays invisible, as asked. The pill is the only
 * boundary this control has, and a red rule inside it reads as a second field
 * rather than as a warning.
 *
 * The message below carries the failure instead, and the input keeps
 * `aria-invalid` and `aria-describedby` from Formidable, so the state is still
 * announced. Colour was never the only signal here.
 */
.subscribe-form .frm_forms.with_frm_style .frm_blank_field input[type="text"],
.subscribe-form .frm_forms.with_frm_style .frm_blank_field input[type="email"],
.subscribe-form .frm_forms.with_frm_style .frm_form_field input:invalid {
	color: #fff;
	background-color: transparent;
	border: none;
}

/*
 * The inline error sits BELOW the whole control rather than inside it.
 *
 * In flow it would land inside the 48px pill, between the field and the button,
 * and push both out of the row. `.subscribe-form` is already `position: relative`
 * in style.css, so `top: 100%` puts the message under the pill on mobile and
 * under the label-and-pill row above 1024px, without the pill changing height.
 */
.subscribe-form .frm_forms.with_frm_style .frm_error {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.3;
}

/*
 * Success on the footer — white text in a white-outlined box, sized like the
 * error beside it rather than like Formidable's card.
 *
 * The whole control here is transparent with white rules, so a filled light-green
 * panel would be the only opaque thing in the footer. This keeps the treatment
 * the design already uses and lets the copy carry the message. White on the
 * footer's charcoal is 18.4:1, so nothing is at risk in dropping the tint.
 *
 * The `p` rule again: Formidable colours the paragraph, not the container.
 */
.subscribe-form .frm_forms.with_frm_style .frm_message,
.subscribe-form .with_frm_style .frm_message {
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #fff;
	border-radius: 6px;
	background-color: transparent;
	font-size: 13px;
	line-height: 1.4;
	color: #fff;
}

.subscribe-form .frm_forms.with_frm_style .frm_message p,
.subscribe-form .with_frm_style .frm_message p {
	color: #fff;
}

/* The summary box is a footer aside, not a page-level alert. */
.subscribe-form .frm_forms.with_frm_style .frm_error_style {
	font-size: 13px;
	line-height: 1.4;
	padding: 8px 12px;
	margin-bottom: 12px;
	border-radius: 6px;
}

@media (min-width: 1024px) {
	.subscribe-form .frm_forms.with_frm_style .frm_error {
		font-size: max(12px, 1.3rem);
		margin-top: 0.6rem;
	}

	.subscribe-form .frm_forms.with_frm_style .frm_error_style,
	.subscribe-form .frm_forms.with_frm_style .frm_message {
		font-size: max(12px, 1.3rem);
		padding: 0.8rem 1.2rem;
		border-radius: 0.6rem;
	}

	.subscribe-form .frm_forms.with_frm_style .frm_error_style {
		margin-bottom: 1.2rem;
	}
}

/* `.subscribe-form__btn` sits inside the pill and fills its height. */
.subscribe-form .with_frm_style .frm_submit {
	flex-shrink: 0;
	display: flex;
	align-items: stretch;
	height: 100%;
	margin: 0;
}

/*
 * `!important` throughout because the base treatment above uses it — Formidable's
 * own button rules are `!important` and had to be beaten there, so anything
 * overriding THAT has to match. `color: #333` is the design's: dark type on the
 * brand green, which is also the only primary button in the comps that passes
 * contrast. See open decision 16.
 */
.subscribe-form .frm_forms.with_frm_style .frm_submit .frm_button_submit,
.subscribe-form .with_frm_style .frm_button_submit {
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 15px !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	color: #333 !important;
	border-radius: 6px !important;
}

@media (min-width: 1024px) {
	/*
	 * The pill is a FIXED 436px in the design, not a rem value — one of the few
	 * places style.css does not scale with the viewport. Reproduced as written.
	 */
	.subscribe-form .frm_forms {
		width: auto;
	}

	.subscribe-form .with_frm_style .frm_fields_container {
		width: 436px;
		height: max(48px, 4.8rem);
		padding: 0.6rem 0.6rem 0.6rem 0;
		border-width: 0.1rem;
		border-radius: 0.9rem;
	}

	.subscribe-form .with_frm_style input[type="text"],
	.subscribe-form .with_frm_style input[type="email"] {
		padding: 0 2rem;
		font-size: max(14px, 1.4rem);
	}

	.subscribe-form .frm_forms.with_frm_style .frm_submit .frm_button_submit,
	.subscribe-form .with_frm_style .frm_button_submit {
		font-size: max(14px, 1.4rem) !important;
		border-radius: 0.6rem !important;
	}
}

/* --- .cml-form--contact — the full contact form ---------------------------- *
 *
 * The fourth scoped treatment, and the only one that needs Formidable's own
 * layout engine rather than a replacement for it.
 *
 * Comp 05 lays the form out in five rows: First/Last, Work E-mail/Phone,
 * Website/Annual Revenue paired two across, then the referral select, the
 * checkbox group and the button full width. `.form-row__col` does that with
 * `repeat(2, 1fr)` from 768px.
 *
 * Formidable's equivalent is per-field — `frm6` is `grid-column: span 6` inside a
 * container the plugin ships as `repeat(12, 1fr)` — so the six paired fields
 * carry `frm6` in the form builder, and this restores the grid the base
 * treatment flattens. Scoped to this form's own class: the base is one field per
 * row, which is right for every other form here, and an earlier revision of this
 * change altered the base instead and moved every form on the site.
 *
 * Gaps are the design's own — `.form-row` is 24px / 3rem between rows,
 * `.form-row__col` is 20px / 2rem between the pair.
 */
.with_frm_style .cml-form--contact .frm_fields_container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: max-content;
	gap: 24px 20px;
}

/*
 * One column below 768px, which is where `.form-row__col` becomes two. Formidable
 * stops its own full-width rule at 600px, which is not this design's breakpoint.
 */
@media (max-width: 767px) {
	.with_frm_style .cml-form--contact .frm_fields_container > .frm_form_field,
	.with_frm_style .cml-form--contact .frm_fields_container > .frm_submit {
		grid-column: 1 / span 12;
	}

	/*
	 * Tightened to 2px on mobile, by request, from the 24px the base rule above
	 * carries. Worth recording that this is a deliberate departure from the
	 * comps rather than a correction: `.form-row` is 24px between rows at every
	 * width in style.css, and the 24px was reproducing it.
	 *
	 * It is also the WHOLE gap. `.with_frm_style .frm_form_field` is `margin: 0`
	 * at the top of this file, so nothing of Formidable's is adding to the grid
	 * here — 2px of grid gap renders as 2px of space.
	 *
	 * Only the row axis has any effect inside this query: every child is
	 * `grid-column: 1 / span 12` immediately above, so the form is one column
	 * and the 20px column gap has nothing to separate. Set as `gap` rather than
	 * `row-gap` so the two axes cannot drift apart if that ever changes.
	 */
	.with_frm_style .cml-form--contact .frm_fields_container {
		gap: 2px;
	}
}

@media (min-width: 1024px) {
	.with_frm_style .cml-form--contact .frm_fields_container {
		gap: 3rem 2rem;
	}
}

/*
 * Field text at the design's weight, matching the dropdown beside it.
 *
 * The SIZE was never the difference — the inputs and the select both resolve to
 * `16px` / `max(16px, 2.2rem)`, from this file and from theme-bridge.css's
 * `.ss-main` respectively. The weight is: Formidable sets
 * `font-weight: var(--field-weight)` — `normal`, 400 — on every input, select and
 * textarea at 0,2,1, while style.css sets none at all and the design's fields
 * inherit the body's 300. SlimSelect replaces the `<select>` with a `<div>`, which
 * the plugin's input selectors never reach, so the dropdown kept 300 and the text
 * inputs beside it rendered heavier.
 *
 * Scoped to the contact form on request. The same mismatch is on `.cta-form`,
 * `.subscribe-form` and any other form using the base treatment — `.subscribe-card`
 * is exempt, it sets `font-weight: 800` itself — and fixing those is a one-line
 * move of this rule up to the base once someone has looked at them.
 */
.with_frm_style .cml-form--contact input[type="text"],
.with_frm_style .cml-form--contact input[type="tel"],
.with_frm_style .cml-form--contact input[type="email"],
.with_frm_style .cml-form--contact input[type="url"],
.with_frm_style .cml-form--contact input[type="number"],
.with_frm_style .cml-form--contact select,
.with_frm_style .cml-form--contact textarea {
	font-weight: 300;
}