/* Fluent Forms, matched to the live site (measured values, see docs/hero-form-test.md and docs/sections-test.md).
   Fluent's own stylesheet stays active, and each form also carries its own inline CSS with !important
   (padding 16px 35px, white outlined button), which the hero form overrides on live with more !important.
   Part 1: rules every form gets. Part 2: the form hero (live scopes these to `.hero.hasForm`). */

/* Part 1: all forms */
.fluentform .ff-el-form-control { font-size: var(--text-m); line-height: 1; }
.fluentform select.ff-el-form-control { -webkit-appearance: none; appearance: none; line-height: 1; } /* live shows no browser arrow */
.fluentform textarea.ff-el-form-control { line-height: var(--text-line-height); }
.fluentform input[type="checkbox"] { width: 1em; height: 1em; font: inherit; }

/* Part 2: form hero */
.hero--form .fluentform label {
	font-size: var(--text-s);
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
}
.hero--form .fluentform .ff-el-is-required label::after { color: var(--primary); }
.hero--form .fluentform .ff-el-form-control { padding: 12px !important; }
.hero--form .fluentform .ff_t_c { padding-right: 0; }
.hero--form .fluentform button.ff-btn {
	font-family: inherit;
	transition: all 0.3s ease;
	color: var(--white) !important;
	border-color: var(--primary) !important;
	background-color: var(--primary) !important;
}
.hero--form .fluentform button.ff-btn:hover,
.hero--form .fluentform button.ff-btn:focus-visible {
	border-color: var(--base) !important;
	background-color: var(--base) !important;
}
.hero--form .fluentform :is(input, textarea, select, button):focus-visible { outline: 2px solid var(--primary); }

/* The real file input is visually hidden; show the ring on the button it stands for */
.fluentform .ff_file_upload_holder:has(input[type="file"]:focus-visible) .ff_upload_btn { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }