/**
 * Gravity Forms theme override (Figma node 1637:6520, Request for Property
 * Use). Kept OUT of main.css / any block's style.css on purpose: this has
 * to be enqueued with Gravity Forms' own `gravity_forms_orbital_theme`
 * stylesheet as an explicit dependency (functions.php) so it always loads
 * after GF's CSS, regardless of which page/block pulls the form in —
 * `gravityforms/form` isn't scoped to the Contact Form block, it can be
 * inserted into any InnerBlocks area (Basic Left Right Text, Jump Nav
 * Content, etc).
 *
 * Values are hardcoded, not `var(--color-...)`/`var(--spacing-...)`, on
 * purpose: this file is never scanned by Tailwind (it's plain CSS, not
 * part of the Vite build), and Tailwind v4 only emits an `@theme` token
 * into main.css's compiled `:root` if some scanned template references it
 * as a *named* utility class (`font-mono`) — most of this theme's spacing
 * and color tokens are only ever used via arbitrary-value syntax
 * (`text-[var(--color-warm-neutral-800)]`), which doesn't count, so they
 * get tree-shaken out. Confirmed 2026-08-28: `--spacing-sm`/`-md`,
 * `--color-warm-neutral-500`/`-600`, and `--color-brand-goldenrod` were
 * all silently missing from the built CSS, so `gap: var(--spacing-md)`
 * resolved to nothing. See docs/design-system.md for the token source of
 * truth if these values drift from main.css.
 *
 * The real GF wrapper class is `gform-theme` (hyphen) — confirmed via
 * live DOM, not `gravity-theme`.
 *
 * Several rules need `!important`: GF's own `gravity-forms-theme-foundation`
 * stylesheet sets `.gform_fields` row/column gap and `.gfield_label`
 * margin using the same specificity we can reach with a class selector, so
 * without `!important` the later-loaded GF rule (foundation loads before
 * ours, but per-property, not everything is beaten this way — verified
 * against the live page) can still win.
 *
 * Simplification: checkboxes/radios use native controls with `accent-color`
 * rather than reproducing Figma's exact check_box/check_box_outline_blank
 * icon assets — close in color/weight, not a pixel-for-pixel icon swap.
 */

.gform_wrapper.gform-theme {
	--gf-field-bg: #f5eee6; /* --color-warm-neutral-150 */
	--gf-field-text: #4b4234; /* --color-warm-neutral-800 */
	--gf-field-placeholder: #aa9374; /* --color-warm-neutral-500 */
	font-family: 'DM Sans', sans-serif; /* --font-secondary */
}

.gform_wrapper.gform-theme .gform_fields {
	row-gap: 24px !important; /* --spacing-md */
}

.gform_wrapper.gform-theme .gfield_label,
.gform_wrapper.gform-theme legend.gfield_label {
	font-family: 'DM Mono', monospace; /* --font-mono */
	font-size: 1rem;
	font-weight: 400;
	color: var(--gf-field-text);
	margin-bottom: 12px !important; /* --spacing-sm */
}

.gform_wrapper.gform-theme .gfield_description,
.gform_wrapper.gform-theme .gfield_consent_description {
	font-family: 'DM Sans', sans-serif;
	font-style: italic;
	font-size: 0.625rem;
	color: #8c775a; /* --color-warm-neutral-600 */
}

.gform_wrapper.gform-theme input[type='text'],
.gform_wrapper.gform-theme input[type='email'],
.gform_wrapper.gform-theme input[type='tel'],
.gform_wrapper.gform-theme input[type='number'],
.gform_wrapper.gform-theme input[type='url'],
.gform_wrapper.gform-theme input[type='date'],
.gform_wrapper.gform-theme input[type='time'],
.gform_wrapper.gform-theme select,
.gform_wrapper.gform-theme textarea {
	background-color: var(--gf-field-bg);
	border: none;
	border-radius: 4px;
	color: var(--gf-field-text);
	font-family: 'DM Sans', sans-serif;
	font-size: 0.875rem;
	padding: 10px 12px;
	min-height: 42px;
	width: 100%;
}

.gform_wrapper.gform-theme textarea {
	min-height: 168px;
	resize: vertical;
}

.gform_wrapper.gform-theme ::placeholder {
	color: var(--gf-field-placeholder);
	opacity: 1;
}

.gform_wrapper.gform-theme select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3e%3cpath d='M5 7l4 4 4-4' stroke='%234b4234' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 42px;
}

.gform_wrapper.gform-theme .ginput_container_checkbox input[type='checkbox'],
.gform_wrapper.gform-theme .ginput_container_radio input[type='radio'] {
	accent-color: #ecbb20; /* --color-brand-goldenrod */
	width: 24px;
	height: 24px;
}

.gform_wrapper.gform-theme .gfield_checkbox,
.gform_wrapper.gform-theme .gfield_radio {
	gap: 12px !important;
}

.gform_wrapper.gform-theme .gfield_checkbox label,
.gform_wrapper.gform-theme .gfield_radio label {
	font-family: 'DM Sans', sans-serif;
	color: var(--gf-field-text);
}

.gform_wrapper.gform-theme .gform_footer,
.gform_wrapper.gform-theme .gform_page_footer {
	margin-top: 0;
	padding: 0;
}

/**
 * GF's own theme-framework rule for this button reaches
 * `.gform-theme.gform-theme--framework.gform_wrapper input[type=submit]
 * .button.gform_button` (five classes + a tag + an attribute) for its
 * default blue — our class-only selector can't out-specificity that, so
 * `!important`. Also: GF renders this as `<input type="submit">`, not a
 * `<button>`, so it can't carry `::after` generated content — no arrow,
 * unlike the "Link Block" button style (a real `<button>`/`<a>`).
 */
.gform_wrapper.gform-theme .gform_button {
	background-color: #ecbb20 !important; /* --color-brand-goldenrod */
	color: #4b4234 !important;
	font-family: 'DM Mono', monospace !important;
	font-size: 1rem !important;
	border: none !important;
	border-radius: 4px !important;
	padding: 15px 20px !important;
	cursor: pointer;
}

.gform_wrapper.gform-theme .gform_button:hover {
	background-color: #ecbb20 !important;
	opacity: 0.9;
}