/**
 * Component: the firm's Gravity Forms forms (Orbital theme), in two Figma
 * sizes. Loads only where Gravity Forms renders a form (gform_enqueue_scripts).
 *
 * - Main (contact section above the footer; Contact Us form card):
 *   visible labels, filled inputs (white and outlined on Contact Us), two
 *   columns from tablet (48em), the required note under the fields, the
 *   button centered.
 * - Sidebar (`.sidebar-form`): labels hidden
 *   visually (screen readers still get them), the placeholder shows the
 *   label instead, outlined inputs, one column.
 *
 * Orbital reads its look from --gf-* custom properties. Gravity Forms sets
 * them on the wrapper with an ID selector, so they are set again here on the
 * <form> inside it, where they win for every field and the button.
 */

/* Containers like the contact card center their text; the form doesn't. */
.firm-form_wrapper {
	text-align: start;
}

/* The heading only holds Gravity Forms' required legend, replaced by our note. */
.firm-form_wrapper .gform_heading {
	display: none;
}

form.firm-form {
	--gf-ctrl-font-family: var(--wp--preset--font-family--body);
	--gf-ctrl-font-size: var(--wp--preset--font-size--body);
	--gf-ctrl-font-weight: 400;
	--gf-ctrl-size: calc(var(--wp--preset--font-size--body) * var(--wp--custom--line-height--body) + var(--wp--preset--spacing--40) * 2);
	--gf-ctrl-padding-x: var(--wp--preset--spacing--40);
	--gf-ctrl-radius: 0;
	--gf-ctrl-shadow: none;
	--gf-ctrl-border-width: var(--wp--custom--border-width--thin);
	--gf-ctrl-bg-color: var(--wp--preset--color--divider);
	--gf-ctrl-bg-color-hover: var(--wp--preset--color--divider);
	--gf-ctrl-bg-color-focus: var(--wp--preset--color--divider);
	--gf-ctrl-border-color: var(--wp--preset--color--divider);
	--gf-ctrl-border-color-hover: var(--wp--preset--color--muted);
	--gf-ctrl-border-color-focus: var(--wp--preset--color--primary);
	--gf-ctrl-border-color-error: var(--wp--preset--color--error);
	--gf-ctrl-outline-color-focus: var(--wp--preset--color--primary);
	--gf-ctrl-outline-width-focus: var(--wp--custom--border-width--thick);
	--gf-ctrl-outline-offset: var(--wp--custom--border-width--thin);
	--gf-color-in-ctrl-contrast: var(--wp--preset--color--foreground);
	--gf-ctrl-placeholder-color: var(--wp--custom--text--subtle, var(--wp--preset--color--muted));
	--gf-ctrl-placeholder-opacity: 1;
	--gf-ctrl-placeholder-font-size: var(--gf-ctrl-font-size);
	--gf-ctrl-placeholder-font-family: var(--gf-ctrl-font-family);
	--gf-ctrl-label-color-primary: var(--wp--preset--color--foreground-secondary);
	--gf-ctrl-label-font-family-primary: var(--wp--preset--font-family--body);
	--gf-ctrl-label-font-size-primary: var(--wp--preset--font-size--body);
	--gf-ctrl-label-font-weight-primary: 400;
	--gf-ctrl-label-line-height-primary: var(--wp--custom--line-height--body);
	--gf-ctrl-label-color-req: var(--wp--preset--color--foreground-secondary);
	--gf-ctrl-desc-color: var(--wp--preset--color--foreground-secondary);
	--gf-color-danger: var(--wp--preset--color--error);

	/* Errors: the derived variables are resolved on the wrapper, so each is set here. */
	--gf-ctrl-color-error: var(--wp--preset--color--foreground);
	--gf-ctrl-bg-color-error: var(--wp--preset--color--base);
	--gf-ctrl-desc-color-error: var(--wp--preset--color--error);
	--gf-ctrl-desc-font-family-error: var(--wp--preset--font-family--body);
	--gf-ctrl-desc-font-size-error: var(--wp--preset--font-size--body-xs);
	--gf-ctrl-desc-line-height-error: var(--wp--custom--line-height--body-xs);
	--gf-form-validation-bg-color: var(--wp--preset--color--base);
	--gf-form-validation-border-color: var(--wp--preset--color--error);
	--gf-form-validation-radius: 0;
	--gf-form-validation-shadow: none;
	--gf-form-validation-heading-color: var(--wp--preset--color--error);
	--gf-form-validation-heading-font-family: var(--wp--preset--font-family--body);
	--gf-form-validation-heading-font-size: var(--wp--preset--font-size--body-sm);
	--gf-form-validation-heading-line-height: var(--wp--custom--line-height--body-sm);
	--gf-form-validation-heading-icon-color: var(--wp--preset--color--error);
	--gf-form-validation-heading-icon-border-color: var(--wp--preset--color--error);
	--gf-form-validation-summary-color: var(--wp--preset--color--error);
	--gf-form-validation-summary-font-family: var(--wp--preset--font-family--body);
	--gf-form-validation-summary-font-size: var(--wp--preset--font-size--body-sm);
	--gf-form-validation-summary-line-height: var(--wp--custom--line-height--body-sm);
	--gf-form-gap-x: var(--wp--preset--spacing--50);
	--gf-form-gap-y: var(--wp--preset--spacing--40);
	--gf-label-space-primary: var(--wp--preset--spacing--20);

	/* Submit button: the theme button (accent, on-accent; primary on hover). */
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--accent);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--primary);
	--gf-ctrl-btn-bg-color-press-primary: var(--wp--preset--color--primary-dark);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--on-accent);
	--gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--base);
	--gf-ctrl-btn-border-color-primary: var(--wp--preset--color--base);
	--gf-ctrl-btn-border-width-primary: var(--wp--custom--border-width--medium);
	--gf-ctrl-btn-radius: var(--wp--custom--radius--sm);
	--gf-ctrl-btn-font-family: var(--wp--preset--font-family--body);
	--gf-ctrl-btn-font-size: var(--wp--custom--button--font-size);
	--gf-ctrl-btn-font-weight: 700;
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-padding-x: var(--wp--custom--button--padding-x);
	--gf-ctrl-btn-size: var(--wp--custom--button--min-height);
	--gf-ctrl-btn-shadow: none;
	--gf-ctrl-btn-border-color-hover-primary: var(--wp--preset--color--base);

	/* Focus: as the theme buttons (theme.json): primary background, a primary
	   ring outside the button (Gravity Forms draws focus with box-shadow). */
	--gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--primary);
	--gf-ctrl-btn-color-focus-primary: var(--wp--preset--color--base);
	--gf-ctrl-btn-border-color-focus-primary: var(--wp--preset--color--base);
	--gf-ctrl-btn-shadow-focus: 0 0 0 var(--wp--custom--border-width--thick) var(--wp--preset--color--base), 0 0 0 calc(var(--wp--custom--border-width--thick) * 2) var(--wp--preset--color--primary);
}

/* One column on phones, Gravity Forms' half widths from tablet (our breakpoint, not its 640px). */
.firm-form_wrapper.gform-theme--framework .gform_fields .gfield--width-half {
	grid-column: 1 / -1;
}

@media (min-width: 48em) {
	.firm-form_wrapper.gform-theme--framework .gform_fields .gfield--width-half {
		grid-column: span 6;
	}
}

.firm-form_wrapper .gfield_required_asterisk {
	color: inherit;
	font-size: inherit;
}

.firm-form_wrapper textarea.textarea {
	block-size: calc(var(--gf-ctrl-size) * 1.8);
	min-block-size: var(--gf-ctrl-size);
	resize: vertical;
}

/* Selects: center the value like the other inputs (same height formula). */
.firm-form_wrapper.gform-theme--framework select {
	padding-block: var(--wp--preset--spacing--40);
	line-height: var(--wp--custom--line-height--body);
}

.sidebar-form .firm-form_wrapper.gform-theme--framework select {
	line-height: var(--wp--custom--line-height--body-sm);
}

/* Select placeholder ("Are you a New Client *") in the muted placeholder color. */
.firm-form_wrapper select:has(option.gf_placeholder:checked) {
	color: var(--wp--custom--text--subtle, var(--wp--preset--color--muted));
}

.firm-form_wrapper select option {
	color: var(--wp--preset--color--foreground);
}

/* Footer: required note, the button, the notice. */
.firm-form_wrapper.gform-theme--framework .gform_footer {
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--20);
}

.firm-form_wrapper .firm-form__required {
	align-self: stretch;
	margin: 0;
	color: var(--wp--preset--color--foreground-secondary);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
	text-align: start;
}

.firm-form_wrapper .firm-form__notice {
	margin: 0;
	color: var(--wp--preset--color--foreground-secondary);
	font-size: var(--wp--preset--font-size--body-xs);
	line-height: var(--wp--custom--line-height--body-xs);
	text-align: center;
}

/* The confirmation replaces the form; its wrapper gets the form's CSS class (firm-form). */
.gform_confirmation_wrapper.firm-form .gform_confirmation_message {
	padding: var(--wp--preset--spacing--50);
	border-inline-start: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--success);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	text-align: start;
}

.gform_confirmation_wrapper.firm-form .gform_confirmation_message:focus-visible {
	outline: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--border-width--thin);
}

/* Main size: the labels are visible, so the placeholders stay empty (Figma). */
:is(.contact-cta, .contact-block) form.firm-form {
	--gf-ctrl-placeholder-color: transparent;
}

:is(.contact-cta, .contact-block) .firm-form_wrapper select:has(option.gf_placeholder:checked) {
	color: transparent;
}

/* Contact Us form card: white, outlined inputs (Figma "Contact Page" form). */
.contact-block form.firm-form {
	--gf-ctrl-bg-color: var(--wp--preset--color--base);
	--gf-ctrl-bg-color-hover: var(--wp--preset--color--base);
	--gf-ctrl-bg-color-focus: var(--wp--preset--color--base);
	--gf-ctrl-border-color: var(--wp--preset--color--surface-alt);
}

/* Sidebar size */
.sidebar-form form.firm-form {
	--gf-ctrl-font-size: var(--wp--preset--font-size--body-sm);
	--gf-ctrl-size: calc(var(--wp--preset--font-size--body-sm) * var(--wp--custom--line-height--body-sm) + var(--wp--preset--spacing--40) * 2);
	--gf-ctrl-bg-color: var(--wp--preset--color--base);
	--gf-ctrl-bg-color-hover: var(--wp--preset--color--base);
	--gf-ctrl-bg-color-focus: var(--wp--preset--color--base);
	--gf-ctrl-border-color: var(--wp--preset--color--surface-alt);
	--gf-form-gap-y: var(--wp--preset--spacing--20);
}

.sidebar-form .firm-form_wrapper.gform-theme--framework .gform_fields .gfield--width-half {
	grid-column: 1 / -1;
}

.sidebar-form .firm-form_wrapper .gfield_label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sidebar-form .firm-form_wrapper textarea.textarea {
	block-size: calc(var(--gf-ctrl-size) * 2.6);
}

.sidebar-form .firm-form_wrapper .firm-form__required {
	color: var(--wp--custom--text--subtle, var(--wp--preset--color--muted));
	font-size: var(--wp--preset--font-size--body-xs);
	line-height: var(--wp--custom--line-height--body-xs);
	text-transform: uppercase;
}

.sidebar-form .firm-form_wrapper.gform-theme--framework .gform_footer {
	gap: var(--wp--preset--spacing--50);
}