/**
 * Fluent Forms, restated in the AHBenayan system.
 *
 * Loaded only on pages that actually render the contact form. Fluent Forms
 * ships a blue/purple accent and rounded controls; rather than patching those
 * one property at a time, the controls below are redefined from the theme
 * tokens so the form reads as part of the page.
 *
 * Accessibility notes:
 *  - labels stay visible and associated; placeholders are never the only label
 *  - focus is a gold outline with offset, matching the rest of the site
 *  - required fields carry a visible asterisk plus the native required attribute
 *  - error text sits next to the field it describes and is not colour-only
 *  - every control clears the 24px WCAG 2.2 minimum target by a wide margin
 */

.ahb-form-section__note {
	max-inline-size: 44rem;
	margin-block: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.fluentform {
	max-inline-size: 44rem;
	margin-block-start: var(--wp--preset--spacing--50);
}

.fluentform .ff-el-group {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Labels ------------------------------------------------------- */

.fluentform .ff-el-input--label label {
	display: inline-block;
	margin-block-end: 0.4rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--deep-green);
}

/* Required marker: visible, and not conveyed by colour alone. */
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before {
	content: " *";
	color: var(--wp--preset--color--gold);
	font-weight: 700;
}

/* Controls ------------------------------------------------------ */

.fluentform .ff-el-form-control {
	inline-size: 100%;
	box-sizing: border-box;
	padding-block: 0.75rem;
	padding-inline: 0.9rem;
	min-block-size: 3rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--charcoal);
	background-color: var(--wp--preset--color--white);
	border: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: none;
	transition: border-color 0.18s ease;
}

.fluentform textarea.ff-el-form-control {
	min-block-size: 9rem;
	resize: vertical;
}

.fluentform select.ff-el-form-control {
	/* Keep the native control: its picker is accessible on every platform. */
	appearance: auto;
}

.fluentform .ff-el-form-control:hover {
	border-color: var(--wp--preset--color--muted);
}

.fluentform .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--deep-green);
}

.fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* Help text ----------------------------------------------------- */

.fluentform .ff-el-help-message {
	margin-block-start: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* Errors -------------------------------------------------------- */

/*
 * Error state is carried by the border, an icon-free message and the field's
 * own aria state — never by colour alone.
 */
.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-form-control[aria-invalid="true"] {
	border-color: var(--wp--preset--color--signal-red);
	border-inline-start-width: 3px;
}

.fluentform .error,
.fluentform .text-danger,
.fluentform .ff-el-is-error .error {
	display: block;
	margin-block-start: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--signal-red);
}

.fluentform .ff-errors-in-stack,
.fluentform .ff_submit_failed {
	margin-block-end: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--signal-red);
	border-radius: var(--wp--custom--radius--sm);
	background-color: transparent;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
}

/* Submit -------------------------------------------------------- */

.fluentform .ff-btn-submit,
.fluentform .ff-btn.ff-btn-submit {
	display: inline-block;
	inline-size: auto;
	min-block-size: 3rem;
	padding-block: 0.85rem;
	padding-inline: 1.9rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--deep-green);
	background-image: none;
	border: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--deep-green);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.fluentform .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--green);
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--white);
}

.fluentform .ff-btn-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* Success ------------------------------------------------------- */

.ff-message-success,
.fluentform .ff-message-success {
	padding: var(--wp--preset--spacing--40);
	border: 0;
	border-inline-start: var(--wp--custom--rule--accent) solid var(--wp--preset--color--green);
	border-radius: 0;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--deep-green);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

/* Fluent Forms' own accent variables, mapped onto the brand palette. */
.fluentform {
	--fluentform-primary: var(--wp--preset--color--deep-green);
	--fluentform-secondary: var(--wp--preset--color--gold);
	--ff-primary-color: var(--wp--preset--color--deep-green);
}

@media (max-width: 47.999rem) {
	.fluentform {
		margin-block-start: var(--wp--preset--spacing--40);
	}

	.fluentform .ff-el-group {
		margin-block-end: var(--wp--preset--spacing--30);
	}

	.fluentform .ff-btn-submit {
		inline-size: 100%;
	}
}