/*
 * Gravity Forms and WooCommerce form elements, brought into the palette.
 *
 * Both plugins are functional and stay, per DECISIONS.md D16, so their markup is
 * theirs and only the values are ours. Measured in a real browser first: the
 * default Gravity Forms button computes rgb(240, 240, 240) on a black border, and
 * the required marker computes rgb(192, 43, 10). That red is the awkward one,
 * because the palette has no red at all.
 *
 * The required marker and validation messages therefore use brass, and never rely
 * on colour to carry the meaning: the marker keeps its asterisk and validation
 * messages keep their text. See DECISIONS.md D21.
 */

/* ------------------------------------------------------------ Gravity Forms */

.gform_wrapper .gform_title {
	font-family: var(--fms-font-heading);
	font-weight: var(--fms-weight-semibold);
	font-size: var(--fms-size-h3);
	line-height: var(--fms-leading-heading);
	color: var(--fms-ink);
}

.gform_wrapper .gfield_label {
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-ink);
}

/* The required marker. Brass, and it keeps its asterisk. */
/*
 * The required marker. Gravity Forms paints it #C02B0A, which is a ninth colour
 * and was measured on the homepage's newsletter form.
 *
 * The `body` prefix is what makes this work, and it took three attempts to find
 * out why. The plugin's own selector is `.gform_wrapper.gravity-theme
 * .gfield_required`, character for character the same specificity as the
 * obvious override, and `theme.min.css` is enqueued after this file, so source
 * order handed it to the plugin. One more element in the selector settles it.
 * The class also ships as `gfield_required_asterisk`, one underscore, not the
 * two the plugin's documentation uses.
 */
body .gform_wrapper.gravity-theme .gfield_required,
body .gform_wrapper.gravity-theme .gfield_required_asterisk,
body .gform_wrapper.gravity-theme .gfield_required__asterisk {
	color: var(--fms-brass);
}

.gform_wrapper .gform_button,
.gform_wrapper input[type='submit'],
.gform_wrapper button.gform-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--fms-tap-min);
	padding: 13px 32px 11px;
	border: 0;
	border-radius: var(--fms-radius-pill);
	background: var(--fms-forest);
	color: var(--fms-cream);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background var(--fms-transition), color var(--fms-transition);
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type='submit']:hover {
	background: linear-gradient(var(--fms-shade-22), var(--fms-shade-22)), var(--fms-forest);
	color: var(--fms-white);
}

/* Validation. Brass border and brass text, plus the plugin's own wording. */
.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors > h2 {
	color: var(--fms-brass);
}

.gform_wrapper .gform_validation_errors {
	border: 1px solid var(--fms-brass);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	border-color: var(--fms-brass);
	border-width: 2px;
}

/*
 * The same treatment, at the specificity Gravity Forms actually uses.
 *
 * The rules above name `.gform_wrapper`. Every rule the plugin uses for its
 * validation state names `.gform_wrapper.gravity-theme`, two classes on one
 * element, so the plugin won every one of them and the block above styled
 * nothing. Submitting the contact form empty drew #C02B0A on the message text,
 * the banner border and every failed field, on a #FFF9F9 ground, with a
 * `rgba(0,0,0,.11)` shadow: three colours the palette does not have, and the
 * red the brief ruled out before a line was written.
 *
 * It was never caught because a validation state only exists after a failed
 * submission, and every check until now has read a page at rest.
 *
 * Every selector below starts with `body`. Matching the plugin's shape exactly
 * is not enough: its stylesheet is enqueued after the theme's, so an equal
 * score is settled by source order and the plugin takes it. One element in
 * front adds a type to the score and settles it the other way. The same fight,
 * and the same remedy, as the required asterisk recorded in DECISIONS.md.
 */
body .gform_wrapper.gravity-theme .gform_validation_errors {
	border: 1.5px solid var(--fms-brass);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
}

body .gform_wrapper.gravity-theme .gform_validation_errors > h2,
body .gform_wrapper.gravity-theme .gform_validation_errors > ol li,
body .gform_wrapper.gravity-theme .gform_validation_errors > ol a {
	color: var(--fms-brass);
}

body .gravity-theme .gfield_validation_message,
body .gform_wrapper.gravity-theme .validation_message {
	border: 1px solid var(--fms-brass);
	border-radius: var(--fms-radius-note);
	background: var(--fms-white);
	color: var(--fms-brass);
}

/*
 * The prefix the brief asks for, so the message never depends on colour alone.
 * `content` on a pseudo element is announced by every current screen reader,
 * which is what makes this a textual cue rather than a decorative one.
 */
body .gravity-theme .gfield_validation_message::before,
body .gform_wrapper.gravity-theme .validation_message::before {
	content: "! Error: ";
	font-weight: var(--fms-weight-bold);
}

body .gform_wrapper.gravity-theme .gfield_error [aria-invalid="true"] {
	border: 2px solid var(--fms-brass);
}

body .gform_wrapper.gravity-theme .gfield_error .gfield_label,
body .gform_wrapper.gravity-theme .gfield_required {
	color: var(--fms-brass);
}

.gform_wrapper .gform_confirmation_message {
	padding: 20px 24px;
	border-left: 4px solid var(--fms-brass);
	background: var(--fms-white);
	color: var(--fms-ink);
	box-shadow: var(--fms-shadow-card);
}

/* ---------------------------------------------------------- WooCommerce ---- */

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
	min-height: var(--fms-tap-min);
	padding: 13px 32px 11px;
	border: 0;
	border-radius: var(--fms-radius-pill);
	background: var(--fms-forest);
	color: var(--fms-cream);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
	background: linear-gradient(var(--fms-shade-22), var(--fms-shade-22)), var(--fms-forest);
	color: var(--fms-white);
}

.woocommerce .button.alt,
.woocommerce button.button.alt {
	background: var(--fms-brass);
	color: var(--fms-white);
}

.woocommerce .button.disabled,
.woocommerce .button:disabled,
.woocommerce a.button.disabled {
	background: var(--fms-muted);
	color: var(--fms-cream);
	cursor: not-allowed;
}

/*
 * WooCommerce notices. Info, success and error all arrive with their own colours
 * from woocommerce.css. Brought into the palette, with the accent border carrying
 * the distinction and the wording carrying the meaning.
 */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
	border-top: 3px solid var(--fms-forest);
	background: var(--fms-white);
	color: var(--fms-ink);
	box-shadow: var(--fms-shadow-card);
}

.woocommerce-message {
	border-top-color: var(--fms-brass);
}

.woocommerce-error {
	border-top-color: var(--fms-brass);
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	color: var(--fms-brass);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--fms-brass);
	border-width: 2px;
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--fms-border);
}

.woocommerce .required {
	color: var(--fms-brass);
}

/* Star ratings. Brass, which is the accent the design uses for emphasis. */
.woocommerce .star-rating span,
.woocommerce p.stars a {
	color: var(--fms-brass);
}