/**
 * Trustd — Gravity Forms theme.
 *
 * Gravity Forms' own front-end CSS is switched off in functions.php
 * (`gform_disable_css`), so this file is the *complete* visual layer for
 * every form. It styles GF's real markup (`.gform_wrapper .gfield …`) to the
 * Trustd design system: text inputs, selects, textareas, checkboxes, radios,
 * labels, the "required" badge, hints, errors, and the submit button.
 *
 * Everything reads `--trustd-*` tokens, so a form dropped inside an
 * `.is-style-inverse` section (e.g. the dark "Book a consultation" page)
 * flips automatically. The handful of values that can't live in a token —
 * the translucent hover ring and the SVG glyphs baked into `background-image`
 * data URIs — carry explicit `.is-style-inverse` overrides instead.
 *
 * Figma sources:
 *   - Input    484:1986   (5 states: enabled / hover / focus / error / error-focus)
 *   - Checkbox 484:2097   (8 states incl. checked + error variants)
 *   - Radio    484:2525   (6 states incl. checked + error variants)
 *
 * NOTE: GF's class names use single underscores (`gform_wrapper`,
 * `gfield_label`), which are not BEM. They're third-party hooks we don't own,
 * so `.stylelintrc` exempts this file from the BEM `selector-class-pattern`.
 * Element classes we add ourselves (the submit button inner) stay BEM.
 */

/* -----------------------------------------------------------------------
 * Local custom properties
 *
 * GF-specific values that aren't part of the global token set. The hover
 * ring is a translucent neutral that has to invert by hand (a black glow is
 * invisible on a dark surface, and vice-versa).
 * --------------------------------------------------------------------- */

.gform_wrapper {
	--trustd-gf-control-size: 2.5rem; /* 40px checkbox / radio box */
	--trustd-gf-field-height: 3.5rem; /* 56px input / select        */
	--trustd-gf-ring-width: 4px;
	--trustd-gf-ring-hover: rgb(0 0 0 / 10%);

	color: var(--trustd-color-on-surface);
	font-family: var(--trustd-font-body);
}

.is-style-inverse .gform_wrapper {
	--trustd-gf-ring-hover: rgb(255 255 255 / 14%);
}

/* -----------------------------------------------------------------------
 * Structural reset / backfill
 *
 * Disabling GF's CSS also removes the few structural rules it relied on:
 * the screen-reader-text utility, the hidden-field / honeypot clipping, and
 * the fieldset reset. Backfill them so the form is laid out and accessible.
 * --------------------------------------------------------------------- */

.gform_wrapper fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.gform_wrapper legend {
	width: 100%;
	padding: 0;
}

/* Honeypot + visibility-hidden + hidden inputs must never paint. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_visibility_hidden {
	position: absolute !important;
	left: -9999px;
	visibility: hidden;
}

.gform_wrapper .gform_hidden,
.gform_wrapper input[type='hidden'] {
	display: none;
}

/* WordPress' screen-reader-text (GF reuses it for sub-labels). */
.gform_wrapper .screen-reader-text,
.gform_wrapper .gform-field-label--type-sub.hidden_sub_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

/* -----------------------------------------------------------------------
 * Form skeleton — vertical rhythm
 * --------------------------------------------------------------------- */

.gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	gap: var(--trustd-space-xl); /* 24px between fields */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each field: label → control → hint/error, stacked. 8px is the Figma
 * label↔input gap; choice groups widen it to 16px (see below). */
.gform_wrapper .gfield {
	display: flex;
	flex-direction: column;
	gap: var(--trustd-space-sm); /* 8px */
	margin: 0;
	list-style: none;
}

/* Fieldset-based fields (name, checkbox + radio groups) are labelled with a
 * <legend>. A <legend> is not a reliable flex item — Firefox anchors it to
 * the fieldset border, so a flex fieldset's `gap` never reaches it and the
 * label sits flush against the controls (and `align-items` for the label /
 * badge alignment is ignored too). Lay these out in block flow instead and
 * float the legend into normal flow (see the legend rule below); its own
 * margin then owns the label→controls gap in every browser. */
.gform_wrapper fieldset.gfield {
	display: block;
}

.gform_wrapper .gform_heading {
	margin-bottom: var(--trustd-space-xl);
}

.gform_wrapper .gform_title {
	margin: 0;
	font-family: var(--trustd-font-montserrat);
	font-size: var(--trustd-text-headline-small);
	line-height: var(--trustd-leading-headline-small);
	font-weight: 700;
}

.gform_wrapper .gform_description {
	display: block;
	margin-top: var(--trustd-space-sm);
	font-size: var(--trustd-text-body-medium);
	line-height: var(--trustd-leading-body-medium);
	color: var(--trustd-color-on-surface-variant);
}

/* -----------------------------------------------------------------------
 * Field label + "required" badge
 *
 * Figma: label/large (Montserrat 18/24 600). The required indicator becomes
 * the overline pill from the design system — functions.php normalises the
 * text from "(Required)" to "Required"; CSS uppercases it.
 * --------------------------------------------------------------------- */

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--trustd-space-sm); /* 8px label↔badge */
	margin: 0;
	font-family: var(--trustd-font-montserrat);
	font-size: 1.125rem; /* 18px — label/large */
	line-height: 1.3333;
	font-weight: 600;
	color: var(--trustd-color-on-surface);
}

.gform_wrapper .gfield_required {
	display: inline-flex;
	align-items: center;
	vertical-align: middle; /* fallback centring if the legend can't flex */
}

/* Float the legend into normal block flow (cross-browser, unlike relying on
 * it being a flex item) and keep it a flex row so the label text + required
 * badge stay vertically centred. Its margin owns the label→controls gap. */
.gform_wrapper legend.gfield_label {
	float: left;
	width: 100%;
	margin: 0 0 var(--trustd-space-sm); /* 8px label → controls (name, etc.) */
}

.gform_wrapper .gfield--type-choice legend.gfield_label {
	margin-bottom: var(--trustd-space-lg); /* 16px for choice groups */
}

/* Clear the floated legend so the controls + hint/error drop below it. */
.gform_wrapper fieldset.gfield > .ginput_container,
.gform_wrapper fieldset.gfield > .gfield_description {
	clear: both;
}

.gform_wrapper .gfield--type-choice > .gfield_description {
	margin-top: var(--trustd-space-lg); /* 16px controls → hint / error */
}

/* The inner span is the badge. */
.gform_wrapper .gfield_required_text {
	display: inline-flex;
	align-items: center;
	padding: var(--trustd-space-xs) var(--trustd-space-sm); /* 4px 8px */
	border-radius: var(--trustd-radius-sm); /* 4px */
	background-color: var(--trustd-color-surface-container);
	color: var(--trustd-color-on-surface-variant);
	font-family: var(--trustd-font-montserrat);
	font-size: var(--trustd-text-overline); /* 14px */
	line-height: var(--trustd-leading-overline);
	font-weight: 700;
	letter-spacing: var(--trustd-tracking-overline);
	text-transform: uppercase;
}

/* Asterisk fallback (if a form is set to "*" rather than text). */
.gform_wrapper .gfield_required_asterisk {
	color: var(--trustd-color-error);
}

/* -----------------------------------------------------------------------
 * Text-like controls — input / textarea / select
 *
 * Figma: 56px tall, 1px outline border, radius-md, body/large (Inter 20/28),
 * value = on-surface, placeholder = on-surface-variant.
 * --------------------------------------------------------------------- */

.gform_wrapper input[type='text'],
.gform_wrapper input[type='email'],
.gform_wrapper input[type='tel'],
.gform_wrapper input[type='url'],
.gform_wrapper input[type='number'],
.gform_wrapper input[type='password'],
.gform_wrapper input[type='search'],
.gform_wrapper input[type='date'],
.gform_wrapper textarea,
.gform_wrapper select {
	box-sizing: border-box;
	width: 100%;
	height: var(--trustd-gf-field-height);
	margin: 0;
	padding: 0 var(--trustd-space-xl); /* 0 24px */
	border: 1px solid var(--trustd-color-outline);
	border-radius: var(--trustd-radius-md);
	background-color: var(--trustd-color-surface);
	color: var(--trustd-color-on-surface);
	font-family: var(--trustd-font-body);
	font-size: var(--trustd-text-body-large); /* 20px */
	line-height: var(--trustd-leading-body-large);
	font-weight: 400;
	outline: 2px solid transparent; /* keeps a focus ring in forced-colors mode */
	outline-offset: 2px;
	transition:
		border-color var(--trustd-duration-base) var(--trustd-easing-snap),
		box-shadow var(--trustd-duration-base) var(--trustd-easing-snap);
	appearance: none;
}

.gform_wrapper textarea {
	height: auto;
	min-height: 8.5rem;
	padding: var(--trustd-space-lg) var(--trustd-space-xl); /* 16px 24px */
	resize: vertical;
}

.gform_wrapper ::placeholder {
	color: var(--trustd-color-on-surface-variant);
	opacity: 1;
}

/* Hover — grey border + soft neutral ring. */
.gform_wrapper input[type='text']:hover,
.gform_wrapper input[type='email']:hover,
.gform_wrapper input[type='tel']:hover,
.gform_wrapper input[type='url']:hover,
.gform_wrapper input[type='number']:hover,
.gform_wrapper input[type='password']:hover,
.gform_wrapper input[type='search']:hover,
.gform_wrapper input[type='date']:hover,
.gform_wrapper textarea:hover,
.gform_wrapper select:hover {
	border-color: var(--trustd-color-on-surface-variant);
	box-shadow: 0 0 0 var(--trustd-gf-ring-width) var(--trustd-gf-ring-hover);
}

/* Focus — primary border + primary-container ring. Applied on :focus (not
 * just :focus-visible) so click-to-type matches the Figma focus state. */
.gform_wrapper input[type='text']:focus,
.gform_wrapper input[type='email']:focus,
.gform_wrapper input[type='tel']:focus,
.gform_wrapper input[type='url']:focus,
.gform_wrapper input[type='number']:focus,
.gform_wrapper input[type='password']:focus,
.gform_wrapper input[type='search']:focus,
.gform_wrapper input[type='date']:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: var(--trustd-color-primary);
	box-shadow: 0 0 0 var(--trustd-gf-ring-width) var(--trustd-color-primary-container);
}

/* Select — drop GF's native arrow, paint the design-system chevron. The
 * glyph colour is baked into the data URI, so inverse mode swaps in a
 * light-stroke copy below. */
.gform_wrapper select {
	padding-right: var(--trustd-space-5xl);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555c65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--trustd-space-xl) center;
	background-size: 1.5rem 1.5rem;
	cursor: pointer;
}

.is-style-inverse .gform_wrapper select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7cdd4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Empty select reads as a placeholder until a real option is chosen. */
.gform_wrapper select:has(option.gf_placeholder:checked) {
	color: var(--trustd-color-on-surface-variant);
}

/* -----------------------------------------------------------------------
 * Choice rows — checkbox + radio
 * --------------------------------------------------------------------- */

.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
	display: flex;
	flex-direction: column;
	gap: var(--trustd-space-md); /* 12px row↔row */
	margin: 0;
	padding: 0;
	list-style: none;
}

.gform_wrapper .gchoice {
	display: flex;
	align-items: center;
	gap: var(--trustd-space-md); /* 12px box↔label */
	margin: 0;
}

.gform_wrapper .gchoice label {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-family: var(--trustd-font-body);
	font-size: var(--trustd-text-body-large); /* 20px */
	line-height: var(--trustd-leading-body-large);
	font-weight: 400;
	color: var(--trustd-color-on-surface);
	cursor: pointer;
}

/* Shared box chrome for both control types. */
.gform_wrapper .gfield-choice-input {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: var(--trustd-gf-control-size);
	height: var(--trustd-gf-control-size);
	margin: 0;
	border: 1px solid var(--trustd-color-outline);
	background-color: var(--trustd-color-surface);
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition:
		border-color var(--trustd-duration-base) var(--trustd-easing-snap),
		background-color var(--trustd-duration-base) var(--trustd-easing-snap),
		box-shadow var(--trustd-duration-base) var(--trustd-easing-snap);
	appearance: none;
}

.gform_wrapper input[type='checkbox'].gfield-choice-input {
	border-radius: var(--trustd-radius-md); /* 8px */
}

.gform_wrapper input[type='radio'].gfield-choice-input {
	border-radius: var(--trustd-radius-full);
}

/* Hover (unchecked) — grey border + neutral ring. */
.gform_wrapper .gfield-choice-input:hover {
	border-color: var(--trustd-color-on-surface-variant);
	box-shadow: 0 0 0 var(--trustd-gf-ring-width) var(--trustd-gf-ring-hover);
}

/* Focus / press (unchecked) — primary border + primary-container ring. */
.gform_wrapper .gfield-choice-input:focus,
.gform_wrapper .gfield-choice-input:active {
	border-color: var(--trustd-color-primary);
	box-shadow: 0 0 0 var(--trustd-gf-ring-width) var(--trustd-color-primary-container);
}

/* ----- Checkbox: checked = navy fill + white tick --------------------- */

.gform_wrapper input[type='checkbox'].gfield-choice-input:checked {
	border-color: var(--trustd-color-primary);
	background-color: var(--trustd-color-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L18 6'/%3E%3C/svg%3E");
	background-size: 1.5rem 1.5rem;
}

/* On dark surfaces primary flips to light-blue, so the tick goes dark. */
.is-style-inverse .gform_wrapper input[type='checkbox'].gfield-choice-input:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1419' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L18 6'/%3E%3C/svg%3E");
}

/* Checked + hover/focus — keep the fill, add the primary-container ring. */
.gform_wrapper input[type='checkbox'].gfield-choice-input:checked:hover,
.gform_wrapper input[type='checkbox'].gfield-choice-input:checked:focus {
	box-shadow: 0 0 0 var(--trustd-gf-ring-width) var(--trustd-color-primary-container);
}

/* Checked + press — tick nudges down a touch (Figma check-press = 20px). */
.gform_wrapper input[type='checkbox'].gfield-choice-input:checked:active {
	background-size: 1.25rem 1.25rem;
}

/* ----- Radio: checked = navy donut (8px ring, white centre) ----------- */

/* 1px border + 7px inset = 8px ring; 24px white centre. */
.gform_wrapper input[type='radio'].gfield-choice-input:checked {
	border-color: var(--trustd-color-primary);
	background-color: var(--trustd-color-surface);
	box-shadow: inset 0 0 0 7px var(--trustd-color-primary);
}

/* Checked + keyboard focus — donut plus the outer focus ring. */
.gform_wrapper input[type='radio'].gfield-choice-input:checked:focus-visible {
	box-shadow:
		inset 0 0 0 7px var(--trustd-color-primary),
		0 0 0 var(--trustd-gf-ring-width) var(--trustd-color-primary-container);
}

/* -----------------------------------------------------------------------
 * Error states
 *
 * GF adds `.gfield_error` to the field wrapper and prints a
 * `.gfield_validation_message`. Figma: red border on the control, red
 * message; no field-background tint.
 * --------------------------------------------------------------------- */

.gform_wrapper .gfield_error input[type='text'],
.gform_wrapper .gfield_error input[type='email'],
.gform_wrapper .gfield_error input[type='tel'],
.gform_wrapper .gfield_error input[type='url'],
.gform_wrapper .gfield_error input[type='number'],
.gform_wrapper .gfield_error input[type='password'],
.gform_wrapper .gfield_error input[type='search'],
.gform_wrapper .gfield_error input[type='date'],
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error .gfield-choice-input {
	border-color: var(--trustd-color-error);
}

/* Error + hover — faint error ring (rgba(error, 0.1)). */
.gform_wrapper .gfield_error input[type='text']:hover,
.gform_wrapper .gfield_error input[type='email']:hover,
.gform_wrapper .gfield_error input[type='tel']:hover,
.gform_wrapper .gfield_error input[type='url']:hover,
.gform_wrapper .gfield_error input[type='number']:hover,
.gform_wrapper .gfield_error input[type='password']:hover,
.gform_wrapper .gfield_error input[type='search']:hover,
.gform_wrapper .gfield_error input[type='date']:hover,
.gform_wrapper .gfield_error textarea:hover,
.gform_wrapper .gfield_error select:hover,
.gform_wrapper .gfield_error .gfield-choice-input:hover {
	border-color: var(--trustd-color-error);
	box-shadow: 0 0 0 var(--trustd-gf-ring-width)
		color-mix(in srgb, var(--trustd-color-error) 10%, transparent);
}

/* Error + focus — stronger error ring (rgba(error, 0.25)). */
.gform_wrapper .gfield_error input[type='text']:focus,
.gform_wrapper .gfield_error input[type='email']:focus,
.gform_wrapper .gfield_error input[type='tel']:focus,
.gform_wrapper .gfield_error input[type='url']:focus,
.gform_wrapper .gfield_error input[type='number']:focus,
.gform_wrapper .gfield_error input[type='password']:focus,
.gform_wrapper .gfield_error input[type='search']:focus,
.gform_wrapper .gfield_error input[type='date']:focus,
.gform_wrapper .gfield_error textarea:focus,
.gform_wrapper .gfield_error select:focus,
.gform_wrapper .gfield_error .gfield-choice-input:focus {
	border-color: var(--trustd-color-error);
	box-shadow: 0 0 0 var(--trustd-gf-ring-width)
		color-mix(in srgb, var(--trustd-color-error) 25%, transparent);
}

/* Hint text + error message (Figma: body/small). */
.gform_wrapper .gfield_description {
	margin: 0;
	padding: 0;
	font-family: var(--trustd-font-body);
	font-size: var(--trustd-text-body-small); /* 14px */
	line-height: var(--trustd-leading-body-small);
	font-weight: 400;
	color: var(--trustd-color-on-surface-variant);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	color: var(--trustd-color-error);
}

/* Form-level error banner + summary. */
.gform_wrapper .gform_validation_errors {
	margin: 0 0 var(--trustd-space-xl);
	padding: var(--trustd-space-lg) var(--trustd-space-xl);
	border: 1px solid var(--trustd-color-error);
	border-radius: var(--trustd-radius-md);
	background-color: var(--trustd-color-surface-container);
}

.gform_wrapper .gform_submission_error {
	display: flex;
	align-items: center;
	gap: var(--trustd-space-sm);
	margin: 0;
	font-family: var(--trustd-font-montserrat);
	font-size: var(--trustd-text-label-large);
	line-height: var(--trustd-leading-label-large);
	font-weight: 600;
	color: var(--trustd-color-error);
}

/* GF's icon-font glyph would be a broken box now that its CSS is gone. */
.gform_wrapper .gform_submission_error .gform-icon {
	display: none;
}

.gform_wrapper .gform_validation_errors ul {
	margin: var(--trustd-space-sm) 0 0;
	padding-left: var(--trustd-space-lg);
}

.gform_wrapper .gform_validation_error_link {
	color: var(--trustd-color-error);
}

/* -----------------------------------------------------------------------
 * Complex fields — Name (first / last side by side)
 * --------------------------------------------------------------------- */

.gform_wrapper .ginput_complex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--trustd-space-lg); /* 16px */
}

.gform_wrapper .ginput_complex > span {
	flex: 1 1 12rem;
	min-width: 0;
}

/* -----------------------------------------------------------------------
 * Submit button — the primary CTA.
 *
 * functions.php rewrites GF's `<input type="submit">` into a `<button>` so it
 * can host the layered gradient + arrow, mirroring `trustd/button` (variant
 * primary, size normal). The drifting `::after` bloom + `::before` hover
 * crossfade only render on the `<button>`; a plain `<input>` fallback still
 * gets the static gradient set on the element itself.
 * --------------------------------------------------------------------- */

.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer {
	display: flex;
	margin: var(--trustd-space-xl) 0 0;
	padding: 0;
}

.gform_wrapper .gform_button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: var(--trustd-space-lg) var(--trustd-space-xl); /* 16px 24px */
	border: 0;

	/* Flat brand fill matching trustd/button (2026-07 reskin): solid navy, 6px
	 * corner, no gradient bloom / glow. Inverts to white-on-navy on dark. */
	border-radius: 6px;
	background: var(--trustd-color-primary);
	color: var(--trustd-color-on-primary);
	font-family: var(--trustd-font-montserrat);
	font-size: var(--trustd-text-label-large);
	line-height: var(--trustd-leading-label-large);
	font-weight: 600;
	cursor: pointer;
	transition: translate var(--trustd-duration-base) var(--trustd-easing-snap);
	will-change: translate;
}

/* Dark surface (the booking page): white fill + navy text, straight off the
 * inverse token flip — same as trustd/button. */
.is-style-inverse .gform_wrapper .gform_button {
	background: var(--trustd-color-on-surface);
	color: var(--trustd-color-surface);
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus-visible {
	translate: 0 -2px;
}

.trustd-gform-button__inner {
	display: inline-flex;
	align-items: center;
	gap: var(--trustd-space-md);
	transition: scale var(--trustd-duration-fast) var(--trustd-easing-snap);
}

.trustd-gform-button__label {
	white-space: nowrap;
}

/* Trailing arrow removed to match the flat trustd/button (no arrow). The
 * submit filter still emits the markup; hiding it keeps this a CSS-only change. */
.trustd-gform-button__icon {
	display: none;
}

.gform_wrapper .gform_button:active .trustd-gform-button__inner {
	scale: var(--trustd-scale-press);
}

/* -----------------------------------------------------------------------
 * Confirmation message (post-submit)
 * --------------------------------------------------------------------- */

.gform_confirmation_message {
	font-family: var(--trustd-font-body);
	font-size: var(--trustd-text-body-large);
	line-height: var(--trustd-leading-body-large);
	color: var(--trustd-color-on-surface);
}