/*
	Gravity Forms — shared theme layer, used by EVERY block that can embed a
	form (Forms today; see inc/gravity-forms.php's own docblock). Lives here,
	not in the block's own {slug}.css, specifically so it loads whenever any
	form-embedding block is present, regardless of which one — see
	sd_page_renders_gravity_form() in inc/enqueue.php. A per-block CSS file
	only ever loads on pages using that ONE block (inc/enqueue.php's
	per-block convention), so a page using a different form-embedding block
	but not Forms would never have loaded blocks/forms/forms.css, the file
	this used to live in before the split.

	The submit button gets the theme's shared .button class added via the
	gform_submit_button filter (inc/gravity-forms.php) — .button itself
	supplies the actual look (colour, border, spacing). This just resets the
	couple of native-form-control quirks a real <button>/<input type="submit">
	has that an <a class="button"> never did: browsers don't inherit font by
	default on form controls, and some retain their own chrome even once
	background/border are overridden.

	!important throughout fights Gravity Forms' own Orbital theme framework
	(gravity-forms-theme-framework.min.css), which styles .gform_button via
	:where()-wrapped selectors carrying an outer, non-:where() class
	(.gform-theme--framework) — that ties our own single-class .button on
	specificity, and GF's stylesheet loads after ours, so on the tie GF
	wins (confirmed: colours were being silently overridden, not missing).
	gform-theme-no-framework (added by the same filter) opts this specific
	button out of that framework's rules, but the native-control resets
	below still need to win against GF's base (non-framework) styles too,
	hence !important rather than relying on the opt-out alone.

	Per-block overrides: add them to that block's own {slug}.css — it's
	enqueued after this shared file whenever both load on the same page, so
	a plain override at equal specificity already wins on source order; a
	more specific selector wins regardless. blocks/forms/forms.css doesn't
	currently exist because Forms has no override of its own yet — recreate
	it if one is ever needed (inc/enqueue.php only enqueues a block's CSS
	file if it exists).
*/
/*
	GF's own .gform_footer rules vary by label position — .top_label (the
	default, and every form this theme has today) makes it a table-cell with
	text-align: start, not the plain flexbox the bare .gform_footer rule
	would suggest. Covering both text-align (the table-cell case) and
	justify-content (the flexbox case some other label position could apply)
	right-aligns the button regardless of which one is actually active.
	!important alone is enough to win here without needing to match GF's own
	higher-specificity .gform_footer.top_label selector: neither of its
	rules carries !important itself, and importance is resolved before
	specificity in the cascade.
*/
.gform_footer {
	text-align: right !important;
	justify-content: flex-end !important;
}

.gform_wrapper .button {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: var(--space-2) !important;
	padding: var(--space-3) var(--space-5) !important;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	background-color: var(--color-dark-bg) !important;
	color: var(--color-dark-fg) !important;
	font-weight: var(--font-weight-medium) !important;
	line-height: 1.0 !important;
	text-decoration: none;
	text-align: center;
	transition: background-color var(--transition), color var(--transition);
	height: auto !important;
	width: auto !important;
	font-size: var(--gform-button-text-size) !important; /* 17px */

	&:hover {
		background-color: color-mix(in srgb, var(--color-dark-bg) 85%, #000) !important;
		color: var(--color-dark-fg) !important;
	}
}

/*
	Gravity Forms lays fields out on a 12-column grid (.gform_fields,
	gravity-forms-theme-foundation.min.css) whose row/column gap comes from
	its own --gf-form-gap-x/-y custom properties, set on this same
	.gform-theme--foundation class GF adds to .gform_wrapper — not a fixed
	value we can just override where it's consumed. Redeclaring the two
	properties here, on the same selector, is what actually reaches every
	place GF's own CSS reads them (both the horizontal and vertical field
	gap at once), rather than fighting each individual gap rule. !important
	is still needed: that stylesheet loads after ours (see the docblock
	above), so on the tie GF's own declaration would otherwise win back.
*/
.gform-theme--foundation {
	--gf-form-gap-x: 1.5rem !important; /* 24px */
	--gf-form-gap-y: 1.5rem !important; /* 24px */
}

/*
	appearance: none strips the native OS chrome browsers (Safari especially)
	draw on text inputs/textareas/selects by default — including an inset
	shadow that isn't set by any CSS at all, ours or Gravity Forms', so
	box-shadow: none alone wouldn't have touched it. Text size/colour match
	this theme's own body copy (base.css's global `p, li` rule) —
	--color-dark-bg reused as a text colour, not a background, same choice
	this file already made for .gfield_label before that rule became
	visually-hidden-only. background-color/border match the checkbox's own
	look (below) — white surface, subtle 1px --color-border — rather than
	the flat --color-muted-bg/no-border look this used before; a real
	border is what actually distinguishes a white field from the page
	behind it now, since white-on-white had nothing else to read against.
	border-radius: 0 is explicit, not just an omitted declaration — GF's
	own framework stylesheet sets its own radius via :where(), which an
	absent declaration here would let show through.

	select is included here so a dropdown field (e.g. a Select "Preferred
	Location") gets the exact same surface/padding/text treatment as every
	other field on the same form, not GF's own framework select styling.
	appearance: none also strips a select's native dropdown arrow, though —
	unlike an input, that arrow is the only visual cue it's a dropdown at
	all, so it needs a replacement; see the dedicated select rule below.

	line-height: GF's own framework sets line-height: var(--gf-ctrl-size)
	on every input/select — literally the field's OWN fixed 38px height
	token, reused as a line-height purely so single-line text sits centered
	without needing flexbox. Once block-size: auto (below) lets the box
	size itself from content + padding instead of that fixed 38px, this
	fixed-38px line-height becomes an invisible floor of its own: the box
	can never render shorter than roughly line-height + padding, so
	shrinking padding alone stops visibly shrinking the field once padding
	gets small enough for line-height to be what's actually holding the
	height up. --line-height-body (tokens.css) — the same relative
	line-height this theme's own body copy uses — replaces it, so the
	field's height genuinely tracks font-size + padding like normal text.
*/
.gform-theme--framework input,
.gform-theme--framework select,
.gform-theme--framework textarea {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--color-border) !important;
	border-radius: 0 !important;
	background-color: var(--color-white) !important;
	box-shadow: none !important;
	padding: var(--space-4) !important; /* 16px, all sides */
	font-size: var(--gform-input-text-size) !important; /* 17px */
	line-height: var(--line-height-body) !important;
	color: var(--color-dark-bg) !important;
}

/*
	The replacement dropdown arrow appearance: none (above) removes — same
	arrow-down.svg shape used elsewhere in this theme (e.g. the nav
	submenu toggle, inc/nav-walker.php), just as a background-image data URI
	rather than an inline <svg>, since a native <select> can't contain real
	child markup for one to live in. Hardcoded to #000000 (--color-dark-bg's
	own literal value, tokens.css) rather than currentColor/var() — neither
	resolves inside a data URI's own embedded SVG. padding-inline-end is
	widened specifically on this side so the arrow has clear room and never
	overlaps the field's own text/placeholder.
*/
.gform-theme--framework select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6' fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1.5 .75 6 5.25 10.5 .75'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right var(--space-4) center !important;
	background-size: 0.75rem !important; /* 12px */
	padding-inline-end: calc(var(--space-4) + var(--space-6)) !important; /* 16px + 32px, room for the arrow */
}

/*
	Same size/colour as the field's own real text, above — Gravity Forms'
	framework stylesheet drives placeholder styling off its own
	--gf-ctrl-placeholder-* custom properties (a muted grey by default), and
	sets opacity below 1 as part of that, so opacity needs resetting to 1
	here too or the colour match would still look faded next to real input.
*/
.gform-theme--framework input::placeholder,
.gform-theme--framework textarea::placeholder {
	font-size: var(--gform-input-text-size) !important; /* 17px */
	color: var(--color-dark-bg) !important;
	opacity: 1 !important;
}

/*
	Text inputs, selects, and textareas aren't actually sized the same way by
	Gravity Forms' own framework stylesheet, which is why simply not
	declaring our own height wasn't enough: the framework sets its own fixed
	block-size: 38px on text inputs and selects specifically
	(--gform-theme-control-size -> --gform-theme-control-size-md), a
	completely separate mechanism from textarea's own 130px
	--gform-theme-control-textarea-block-size (itself overridden below to
	160px). With nothing here to cancel it, that 38px — smaller than even
	our own top+bottom padding alone — clamps the field's rendered height,
	squeezing the padding rather than actually removing it: the padding
	value is still applied, the BOX is just too short to show it.
	block-size: auto (not height — matching the exact logical property GF's
	own rule sets, same reasoning as textarea's own min-block-size override
	below) lets the box size itself from content + padding instead, the
	same way it already does for textarea.
*/
.gform-theme--framework input,
.gform-theme--framework select {
	block-size: auto !important;
}

/*
	min-height (min-block-size) always wins over a smaller height, regardless
	of !important on height alone — that's a CSS box-sizing rule, not a
	cascade/specificity fight. Gravity Forms' own gfield textarea.large sets
	min-block-size: 18rem (288px, every textarea in this theme gets the
	.large class), which was silently clamping height: 10rem below it. Both
	properties need overriding to the same value, using the same
	min-block-size (not plain min-height) GF itself declared, so this is
	guaranteed to target the exact same box dimension.
*/
.gform-theme--framework textarea {
	height: 10rem !important; /* 160px */
	min-block-size: 10rem !important; /* 160px */
}

/*
	Labels are visually hidden, not removed — the design shows only each
	field's placeholder text, but a placeholder is not a substitute for a
	real label (it disappears the moment a field has a value, and isn't
	reliably exposed as an accessible name by every screen reader/browser
	combination). Gravity Forms already renders a real <label for="..."> (or
	<legend>, for a complex field like Name) correctly associated with its
	input — this only needs hiding VISUALLY, with the same technique
	.screen-reader-text (base.css) and .visually-hidden (utilities.css) both
	already use elsewhere in this theme. display:none or visibility:hidden
	would remove it from the accessibility tree entirely, defeating the
	point; position:absolute + clip-path keeps it in the DOM and readable by
	assistive tech while taking no visual space.

	A field marked Required in Gravity Forms adds its own asterisk INSIDE
	the label (.gfield_required) — hiding the whole label hides that visual
	cue too. There's no required field in the forms this theme ships with
	today, so this doesn't yet need its own carve-out, but a form that adds
	one will need a follow-up rule un-hiding just .gfield_required (e.g.
	positioning it inside .ginput_container instead) if the asterisk should
	stay visible.

	Placeholder text itself is set per-field in Gravity Forms' own admin
	(Field settings), not here — a field with no Placeholder configured will
	look blank now that its label isn't shown, so every field visible under
	this design needs one set.
*/
.gform-theme--framework .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
	Carve-out for Checkboxes/Radio/Consent fields (Gravity Forms' own
	.gfield--type-choice class, form_display.php) — the one kind of field
	this design's placeholder-only approach genuinely can't cover. A
	placeholder lives inside a single input; a choice field has no single
	input for the group itself to hold one — only its individual options,
	which don't take placeholders either. Left hidden like every other
	label, a Checkboxes field (e.g. "Treatments," letting a visitor pick
	several) would have no visible indication of what the choices below it
	even are. Un-hides the same real <legend class="gfield_label"> Gravity
	Forms already renders (not new markup), styled plainly — this is the
	one field type where a real, visible label is the correct fix, not
	something a placeholder should have covered but doesn't.

	Higher specificity than the framework rule above (two classes vs. one)
	so it wins regardless of source order — no !important needed.
*/
.gform-theme--framework .gfield--type-choice .gfield_label {
	position: static;
	width: auto;
	height: auto;
	padding: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	display: block;
	margin-block-end: var(--space-3); /* 12px */
	font-size: var(--font-size-2); /* 16px */
	font-weight: var(--font-weight-medium);
	color: var(--color-dark-bg);
}

/*
	Consent field (.gfield--type-consent — the "I agree to..." checkbox,
	Consent is one of the choice_fields form_display.php groups under
	.gfield--type-choice, same as Checkboxes/Radio, so it also gets the
	visible .gfield_label carve-out above). Its own checkbox + inline
	"I agree..." text (<label class="gfield_consent_label">, a SEPARATE
	element GF always renders visible — not the .gfield_label this file
	otherwise hides) render as one centered row, rather than the browser's
	small native checkbox left-aligned against its text.

	ginput_container_consent is a real flex row so the checkbox and its
	label center as a single unit, not independently — justify-content
	only has one flex line to work with here (one checkbox, one label), so
	centering the row centers both together.
*/
.gform-theme--framework .ginput_container_consent {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2); /* 8px, checkbox to its label */
}

/*
	Checkboxes/Radio fields (.gfield--type-choice) lay each choice out as
	.gchoice — GF's own framework rule sets it to display: inline-grid,
	checkbox in column 1, label in column 2, with no align-items declared
	of its own (default: stretch). That was fine against GF's own smaller
	native checkbox, but once the checkbox above renders at a real 24px
	instead, stretch no longer visually centers it against its label's own
	line-height the way it did at the old, smaller size — the two drift out
	of line with each other. align-items: center keeps the checkbox and its
	label vertically centered on the same row regardless of the checkbox's
	own height, matching how ginput_container_consent's own flex row
	already centers Consent's checkbox against its label, just via Grid's
	own alignment property instead of Flexbox's.
*/
.gform-theme--framework .gfield--type-choice .gchoice {
	align-items: center !important;
}

/*
	Every checkbox on any form, not just Consent's — a Checkboxes field
	(e.g. "Treatments," letting a visitor pick several) renders one real
	<input type="checkbox"> per choice, same element, so one rule here
	covers both instead of duplicating it per field type.

	appearance: none clears the native checkbox so its size/radius/checked
	state can be drawn here instead — same reasoning as the select's own
	appearance: none above, just applied to a checkbox rather than a
	dropdown. The checkmark is a background-image data URI (same technique
	as the select's own arrow, above), shown only once :checked, hardcoded
	to #ffffff (--color-white's own literal value) since neither
	currentColor nor var() resolves inside a data URI's embedded SVG —
	white against the checked state's own --color-dark-bg fill is the same
	dark-surface/light-content pairing every other filled control in this
	theme (the submit button, --color-dark-fg) already uses.

	!important throughout, same reasoning as every other rule in this file
	(see the docblock at the top): Gravity Forms' own framework styles
	input[type=checkbox] itself, through a selector chain
	(.gform-theme--framework.gform-theme.gform_wrapper input[type=checkbox])
	specific enough to outweigh a single-class override here even before
	its stylesheet's own later load order is considered — the checkbox
	staying a plain, unstyled native square despite this rule (rather than
	visibly half-applying) is exactly that symptom. Its own ::before
	pseudo-element (the same rule, an icon-font checkmark GF draws itself)
	is suppressed the same way, or it would still render on top of/instead
	of this rule's own background-image checkmark once :checked.
*/
.gform-theme--framework input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: none !important;
	margin: 0 !important;
	inline-size: 1.5rem !important; /* 24px */
	block-size: 1.5rem !important; /* 24px */
	border: 1px solid var(--color-border) !important;
	border-radius: 4px !important;
	background-color: var(--color-white) !important;
	cursor: pointer !important;

	&:checked {
		border-color: var(--color-dark-bg) !important;
		background-color: var(--color-dark-bg) !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 0.75rem !important; /* 12px */
	}
}

.gform-theme--framework input[type="checkbox"]::before {
	content: none !important;
}