/*
	Gravity Forms — shared theme layer, used by EVERY block that can embed a
	form (Forms, Connect Callout; see inc/gravity-forms.php's own docblock).
	Lives here, not in either block's own {slug}.css, specifically so it
	loads whenever any form-embedding block is present, regardless of which
	one — see rd_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 with Connect Callout but no Forms block
	would never have loaded blocks/forms/forms.css, the file this used to
	live in — the same fight was already being re-fought (and only working
	by coincidence of load order) in connect-callout.css's own textarea
	height override.

	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 (e.g.
	connect-callout.css's taller textarea, below) — 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: var(--radius) !important;
	background-color: var(--color-accent-bg) !important;
	color: var(--color-accent-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;
	text-transform: uppercase !important;
	font-size: var(--font-size-4) !important;

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

/*
	Same mobile step-down as the theme's own .button (components.css) —
	the submit button reuses that class, so this keeps the two in sync at
	this width. Still needs !important: without it this loses to the
	unconditional rule above at the same specificity, and GF's own
	competing styles would win back regardless once this stops beating it.
*/
@media (max-width: 47.99em) {
	.gform_wrapper .button {
		font-size: var(--font-size-2) !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 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.
*/
.gform-theme--framework input:not([type="radio"], [type="checkbox"]),
.gform-theme--framework textarea {
	appearance: none;
	-webkit-appearance: none;
	border: none !important;
	border-radius: var(--radius-lg) !important;
	background-color: var(--color-default-bg) !important;
	box-shadow: none !important;
	padding: var(--space-5) !important; /* 24px */
	font-size: var(--font-size-4) !important; /* 25px */
	color: var(--color-dark-bg) !important;
}

@media (max-width: 47.99em) {
	.gform-theme--framework input:not([type="radio"], [type="checkbox"]),
	.gform-theme--framework textarea {
		padding: var(--space-3) !important; /* 12px */
		font-size: var(--font-size-3) !important;
	}
}

/*
	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(--font-size-4) !important; /* 25px */
	color: var(--color-dark-bg) !important;
	opacity: 1 !important;
}

.gform-theme--framework input:not([type="radio"], [type="checkbox"]) {
	height: var(--space-10) !important; /* 80px */
}

@media (max-width: 47.99em) {
	.gform-theme--framework input:not([type="radio"], [type="checkbox"]) {
		height: var(--space-9) !important; /* 64px */
	}
}

/*
	Radio (and checkbox) choice labels — "New Patient", "Existing Patient",
	etc — are a different element from the field's own question label
	(.gfield_label, hidden above): each choice's visible text is its own
	<label class="gform-field-label gform-field-label--type-inline"> inside
	a .gchoice wrapper, so hiding .gfield_label never touches it. Matched to
	the same size/colour as real input text and its placeholder, above, so
	a choice reads as part of the same field style rather than GF's own
	smaller, lighter default label text.
*/
.gform-theme--framework .gchoice .gform-field-label {
	font-size: var(--font-size-4) !important; /* 25px */
	color: var(--color-dark-bg) !important;
}

/*
	Labels and placeholders only, at mobile — not the two rules' shared
	sibling above (real input/textarea text, line ~136), which the user
	didn't ask to change and stays at --font-size-4 at every width.
*/
@media (max-width: 47.99em) {
	.gform-theme--framework input::placeholder,
	.gform-theme--framework textarea::placeholder,
	.gform-theme--framework .gchoice .gform-field-label {
		font-size: var(--font-size-3) !important;
	}
}

/*
	Radio inputs are deliberately excluded from the text-input rule above —
	Gravity Forms already renders a real, native circular radio (browser
	default appearance, themed via accent-color + its own ::before check
	dot in gravity-forms-theme-framework.min.css); the text-input rule's
	appearance:none/padding/height was silently flattening that into an
	80px padded box before the exclusion above. Only size and colour are
	overridden here, on top of GF's own working implementation, rather than
	rebuilding a circle from scratch with appearance:none + border-radius.
*/
.gform-theme--framework input[type="radio"] {
	inline-size: 1.5rem !important; /* 24px */
	block-size: 1.5rem !important; /* 24px */
	accent-color: var(--color-accent-bg) !important;
}

/*
	.gchoice is Gravity Forms' own two-column grid for a single choice
	(input column, label column — gravity-forms-theme-framework.min.css).
	It doesn't set align-items itself, so the label's own line-height was
	top-aligning against whatever the input's box height happened to be;
	now that the radio is a fixed, small 24px rather than the stretched
	80px it inherited before the exclusion above, align-items: center
	keeps the circle centred against the label's own text line rather than
	sitting flush with its top.
*/
.gform-theme--framework .gfield--type-choice .gchoice {
	align-items: center !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;
}

/*
	Gravity Forms auto-renders a `"*" indicates required fields` sentence
	(<p class="gform_required_legend">, inside .gform_heading) above any
	form with a required field, unless the form's own Required Field
	Indicator setting is "Text" rather than "Asterisk" (form_display.php).
	Unlike .gfield_label above, this isn't a real label anything else
	depends on — display: none removes it outright, visually and from the
	accessibility tree, rather than the visually-hidden-but-present
	technique real labels need: the individual required field itself still
	carries the real `required`/`aria-required` attribute regardless of
	whether this summary sentence exists, so nothing is lost by dropping it
	entirely. Every gravity_form() call in this theme passes
	$display_title/$display_description as false, so .gform_heading has
	nothing else inside it to preserve.
*/
.gform-theme--framework .gform_required_legend {
	display: none !important;
}