/*
 * Contact form styles.
 *
 * Fluent Forms ships its own base CSS; this only aligns the form with the
 * theme tokens and hardens accessibility (focus visibility, non-color error
 * cues). Kept intentionally light — full visual design comes later, matching
 * the scaffold note in main.css.
 */

.fluentform {
	max-width: 640px;
}

.fluentform .ff-el-group {
	margin-bottom: 1.25rem;
}

.fluentform .ff-el-input--label label {
	font-weight: 600;
}

.fluentform .ff-el-form-control {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--border);
	border-radius: 4px;
	font: inherit;
	color: var(--text);
	background: var(--surface);
}

/* Strong, always-visible focus for keyboard users (WCAG 2.4.7, 1.4.11), in
 * Dark Pine (10.3:1 on white). Fields keep :focus so the active field is
 * always marked; the button uses :focus-visible so a mouse click doesn't
 * leave a ring behind. */
.fluentform .ff-el-form-control:focus,
.fluentform .ff-btn-submit:focus-visible {
	outline: 3px solid var(--text);
	outline-offset: 2px;
}

.fluentform .ff-btn-submit:focus:not(:focus-visible) {
	outline: none;
}

/* Submit button in Fire, square-cornered. Fluent Forms paints it from its own
 * per-form rule (`form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)`,
 * which outranks ours), so point that rule's --fluentform-primary at Fire on
 * the button itself rather than fight its specificity. */
.fluentform .ff-btn-submit {
	--fluentform-primary: var(--button-bg);
	background: var(--button-bg);
	color: var(--button-text);
	border: 0;
	border-radius: 0;
	padding: 0.7rem 1.4rem;
	font: inherit;
	cursor: pointer;
}

/* Fluent Forms' per-form rule also forces white text, which is 3.98:1 on Fire
 * (fails AA). The doubled class outranks it so the brand Blackberry wins. */
.fluentform .ff-btn-submit.ff-btn-submit:not(.ff_btn_no_style) {
	color: var(--button-text);
}

/* The extra :not() lifts this above Fluent Forms' rule so the hover wins. */
.fluentform .ff-btn-submit.ff-btn-submit:not(.ff_btn_no_style):hover {
	background: var(--button-bg-hover);
	color: var(--button-text-hover);
}

/* Validation errors: readable contrast, never color-only (text + aria handled
   by Fluent Forms). #b3261e on white is ~5.9:1 — AA compliant. */
.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #b3261e;
}

.fluentform .text-danger,
.fluentform .error {
	color: #b3261e;
}

.fluentform .ff-message-success {
	padding: 1rem;
	border: 1px solid var(--border);
	border-radius: 4px;
}