/*
 * Formidable Forms, wearing the theme.
 *
 * Loaded from inc/formidable.php only when the plugin is active.
 *
 * This works by remapping Formidable's own design tokens rather than
 * out-specifying its rules. It exposes 108 custom properties on the form
 * wrapper and drives its entire stylesheet from them, so setting those is
 * both far less code and far more durable: no specificity war, and nothing
 * to re-fight when the plugin updates its selectors.
 *
 * Out-specifying was the first attempt and it does not work. Formidable
 * targets its submit with
 *   .frm_style_formidable-style.with_frm_style .frm_submit button
 * which is (0,3,1); a sensible theme selector like `.frm_forms
 * .frm_button_submit` is (0,2,0) and loses regardless of source order.
 *
 * Four of Formidable's defaults fail WCAG AA, so this is a correctness fix as
 * much as a cosmetic one:
 *   submit label   white on #4199FD    2.92:1
 *   error text     #F04438 on white    3.76:1
 *   required mark  #F04438 on white    3.76:1
 *   success text   #468847 on #DFF0D8  3.61:1
 */

.frm_forms.with_frm_style {

	/* Type */
	--base-font-size: var(--fs-16);
	--font-size: var(--fs-16);
	--field-font-size: var(--fs-16);
	--description-font-size: var(--fs-14);
	--error-font-size: var(--fs-14);
	--success-font-size: var(--fs-16);
	--section-font-size: var(--fs-20);

	/* Fields */
	--bg-color: var(--c-bg);
	--bg-color-active: var(--c-bg);
	--bg-color-error: var(--c-bg);
	--border-color: var(--c-field-border);
	--border-color-active: var(--c-accent);
	--border-radius: var(--radius);
	--field-height: auto;
	--field-margin: var(--space-sm);
	--field-pad: 0.55em 0.75em;
	--field-width: 100%;
	--text-color: var(--c-text);
	--text-color-error: var(--c-text);

	/* Labels and help text */
	--label-color: var(--c-heading);
	--label-padding: 0 0 0.35em 0;
	--description-color: var(--c-text-muted);
	--check-label-color: var(--c-text);
	--section-color: var(--c-heading);
	--title-color: var(--c-heading);
	--form-desc-color: var(--c-text-muted);

	/* Validation — all four of these replace a failing default */
	--required-color: var(--c-error);
	--error-text: var(--c-error);
	--error-bg: var(--c-surface);
	--error-border: var(--c-error);
	--border-color-error: var(--c-error);
	--success-text-color: var(--c-text);
	--success-bg-color: var(--c-surface);
	--success-border-color: var(--c-accent);

	/* Submit */
	--submit-bg-color: var(--c-accent);
	--submit-border-color: var(--c-accent);
	--submit-text-color: var(--c-white);
	--submit-border-radius: var(--radius);
	--submit-font-size: var(--fs-16);
	--submit-padding: 0.7em 1.5em;
	--submit-weight: 500;
	--submit-hover-bg-color: var(--c-accent-deep);
	--submit-hover-border-color: var(--c-accent-deep);
	--submit-hover-color: var(--c-white);
	--submit-active-bg-color: var(--c-accent-deep);
	--submit-active-border-color: var(--c-accent-deep);
	--submit-active-color: var(--c-white);
}

/*
 * The rest is what Formidable does not expose as a token: typeface, the
 * submit colours, and label size and weight.
 */
.frm_forms.with_frm_style input,
.frm_forms.with_frm_style select,
.frm_forms.with_frm_style textarea,
.frm_forms.with_frm_style .frm_primary_label {
	font-family: var(--font-body);
}

.frm_forms.with_frm_style .frm_primary_label {
	font-size: var(--fs-14);
	font-weight: 500;
}

.frm_forms.with_frm_style textarea {
	min-height: 8em;
	resize: vertical;
}

/*
 * The submit is the one control the token remap cannot reach. Formidable
 * defines --submit-bg-color and then does not use it here: the rule in
 * formidableforms.css writes #4199FD literally. So this needs a real
 * selector, matched to the specificity of theirs:
 *
 *   theirs  .frm_style_formidable-style.with_frm_style .frm_submit button
 *   ours    .frm_forms.with_frm_style .frm_submit button
 *
 * Both are (0,3,1). A tie is broken by source order, and this file is
 * enqueued after theirs, so it wins without !important — and without
 * depending on the `frm_style_formidable-style` class, which changes name if
 * the site uses a different Formidable style.
 */
.frm_forms.with_frm_style .frm_submit button,
.frm_forms.with_frm_style .frm_submit input[type="submit"],
.frm_forms.with_frm_style .frm_submit input[type="button"] {
	background-color: var(--c-accent);
	border-color: var(--c-accent);
	border-radius: var(--radius);
	color: var(--c-white);
	font-family: var(--font-accent);
	font-weight: 500;
	transition: background-color var(--transition);
}

.frm_forms.with_frm_style .frm_submit button:hover,
.frm_forms.with_frm_style .frm_submit button:focus,
.frm_forms.with_frm_style .frm_submit input[type="submit"]:hover,
.frm_forms.with_frm_style .frm_submit input[type="submit"]:focus {
	background-color: var(--c-accent-deep);
	border-color: var(--c-accent-deep);
	color: var(--c-white);
}

/*
 * Focus. Formidable only recolours the border, which is a 1px cue; the theme
 * ring from section 6 of style.css is the real indicator, so make sure it is
 * not suppressed here.
 */
.frm_forms.with_frm_style input:focus-visible,
.frm_forms.with_frm_style select:focus-visible,
.frm_forms.with_frm_style textarea:focus-visible,
.frm_forms.with_frm_style button:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}

/*
 * The landing page quote card: a full-width yellow submit with a trailing
 * chevron. More specific than the rule above, so it wins inside the card
 * only. --c-heading on the yellow is 6.09:1, and 5.29:1 on the hover.
 */
.quote-card .frm_forms.with_frm_style .frm_submit button,
.quote-card .frm_forms.with_frm_style .frm_submit input[type="submit"] {
	width: 100%;
	background-color: var(--c-yellow);
	border-color: var(--c-yellow);
	color: var(--c-heading);
}

.quote-card .frm_forms.with_frm_style .frm_submit button:hover,
.quote-card .frm_forms.with_frm_style .frm_submit button:focus,
.quote-card .frm_forms.with_frm_style .frm_submit input[type="submit"]:hover,
.quote-card .frm_forms.with_frm_style .frm_submit input[type="submit"]:focus {
	background-color: var(--c-yellow-deep);
	border-color: var(--c-yellow-deep);
	color: var(--c-heading);
}

/* Decoration, so it is kept out of the button's accessible name. */
.quote-card .frm_forms.with_frm_style .frm_submit button::after {
	content: " >";
	content: " >" / "";
}

.quote-card .frm_forms.with_frm_style .frm_submit {
	margin-bottom: 0;
}


/*
 * A label hidden from sight but not from screen readers, applied per field
 * with the mp-label-sr class (see inc/formidable.php).
 *
 * Formidable's own "Hidden" label position is not this: it sets
 * visibility:hidden, which removes the label from the accessibility tree as
 * well and leaves the input announced as nothing but its type. The mockup
 * draws the part details field with a placeholder and no visible label, and
 * a placeholder is not a label -- it vanishes on the first keystroke and is
 * not reliably announced. This keeps the label for anyone who needs it.
 *
 * Matches .screen-reader-text in section 6 of style.css.
 */
.frm_forms.with_frm_style .mp-label-sr .frm_primary_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal !important;
}