/*
 * 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;
}

.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. */
.with_frm_style .frm_verify,
.with_frm_style .frm_screen_reader {
	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;
}

.with_frm_style textarea {
	resize: none;
	vertical-align: top;
	overflow: auto;
	border: none;
	background: #fff;
	padding: 16px;
	height: 188px;
	border-radius: 4px;
}

.with_frm_style ::placeholder {
	opacity: 1;
	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;
}

@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;
	}

	.with_frm_style textarea {
		border-width: 0;
		padding: 1.6rem;
		height: 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;
}

/*
 * 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;
}

.with_frm_style .frm_checkbox label,
.with_frm_style .frm_radio label {
	display: inline-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;
}

.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;
	width: 32px;
	height: 32px;
	margin: 0;
	border: 1px solid var(--cml-field-border);
	border-radius: 6px;
	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%;
}

/*
 * 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, matching the design's filled-disc radio. */
.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;
	}

	.with_frm_style .frm_checkbox label,
	.with_frm_style .frm_radio label {
		font-size: max(14px, 1.8rem);
		gap: 1.2rem;
	}

	.with_frm_style .frm_checkbox input[type="checkbox"],
	.with_frm_style .frm_radio input[type="radio"] {
		width: max(32px, 3.2rem);
		height: max(32px, 3.2rem);
	}
}

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

.with_frm_style .frm_submit {
	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.
 */

.with_frm_style .frm_blank_field input[type="text"],
.with_frm_style .frm_blank_field input[type="tel"],
.with_frm_style .frm_blank_field input[type="email"],
.with_frm_style .frm_blank_field input[type="url"],
.with_frm_style .frm_blank_field input[type="number"],
.with_frm_style .frm_blank_field select,
.with_frm_style .frm_blank_field textarea {
	border-color: var(--cml-error);
}

.with_frm_style .frm_blank_field textarea {
	border: 1px solid var(--cml-error);
}

.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. */
.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. */
.with_frm_style .frm_message,
.frm_message {
	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;
}

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

@media (min-width: 1024px) {
	.with_frm_style .frm_error {
		font-size: max(14px, 1.8rem);
		margin-top: 0.8rem;
	}

	.with_frm_style .frm_error_style,
	.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;
	}
}