/*
 * components/forms.css — Gravity Forms and core form-block styling.
 *
 * Gravity Forms ships its own theme framework (the "orbital" theme) which sets
 * a large number of --gf-* custom properties. The cheapest way to make GF match
 * this design system is to remap those properties to our theme.json tokens
 * rather than fight its selectors. Fill these in once a real form exists on DEV
 * and we can see which properties the chosen GF theme actually reads.
 *
 * Reference: the GF theme's variables are documented under
 * "Gravity Forms Theme Framework — CSS custom properties".
 */

.gform_wrapper.gravity-theme,
.gform-theme--framework {
	--gf-color-primary: var( --wp--preset--color--primary );
	--gf-color-primary-contrast: var( --wp--preset--color--on-primary );
	--gf-color-secondary: var( --wp--preset--color--surface );
	--gf-color-out-ctrl-light-darker: var( --wp--preset--color--stroke );
	--gf-color-out-ctrl-dark: var( --wp--preset--color--foreground );
	--gf-field-pg-steps-number-color: var( --wp--preset--color--primary );
	--gf-local-radius: var( --wp--preset--border-radius--medium );
	--gf-form-gap-y: 1.25rem;
	--gf-form-gap-x: 1.25rem;
	--gf-label-color-primary: var( --wp--preset--color--foreground );
	--gf-ctrl-border-color: var( --wp--preset--color--stroke );
	--gf-ctrl-radius: var( --wp--preset--border-radius--medium );
	--gf-ctrl-btn-bg-color-primary: var( --wp--preset--color--primary );
	--gf-ctrl-btn-color-primary: var( --wp--preset--color--on-primary );
	--gf-ctrl-btn-font-size: var( --wp--preset--font-size--medium );
	--gf-ctrl-btn-radius: var( --wp--preset--border-radius--medium );

	font-family: var( --wp--preset--font-family--body );
}

/* Core search / comment inputs, so they match GF fields. */
.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
	border: 1px solid var( --wp--preset--color--stroke );
	border-radius: var( --wp--preset--border-radius--medium );
	padding: 0.625rem 0.875rem;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--medium );
	background-color: var( --wp--preset--color--background );
	color: var( --wp--preset--color--foreground );
}

textarea:focus,
select:focus,
input:focus {
	border-color: var( --wp--preset--color--primary );
}

/* ======================================================================
 * .fcs-form — the site's Gravity Forms look
 * ======================================================================
 *
 * Opt-in per form: Forms › <form> › Settings › Form Basics › CSS Class Name
 * → `fcs-form`. Gravity Forms then prints
 *
 *     <div class="gform_wrapper gform-theme--orbital … fcs-form_wrapper">
 *       <form class="fcs-form">
 *
 * so everything below is scoped to .fcs-form_wrapper — the wrapper, not the
 * form, because validation summaries and the confirmation message are printed
 * inside the wrapper but outside the <form>.
 *
 * Also set Settings › Required Field Indicator → "Asterisk", which gives the
 * `Label*` labels the design shows. GF's "* indicates required fields" legend
 * is hidden below; the page states it in its own words, after the form
 * (Figma 10514:9163, the Contact Us form — the reference for all of this).
 *
 * WRITTEN AGAINST GF's ORBITAL THEME, the default for forms created since 2.7.
 * Orbital styles through --gf-* custom properties and selectors like
 * `.gform-theme--framework input[type=text]` (0,2,1). Each rule below leads with
 * `.gform_wrapper.fcs-form_wrapper` (0,2,0) plus the element, so it outweighs
 * Orbital on specificity rather than relying on load order or !important.
 *
 * Figma values:
 *   fields               20px apart, label → control 8px
 *   label                14/20 bold, foreground
 *   input / select       56px tall, 16px padding, 1px stroke, 6px radius, white
 *   textarea             128px tall
 *   submit               right-aligned, 40px under the last field, primary
 *                        button (theme.json styles.elements.button)
 */

.gform_wrapper.fcs-form_wrapper {
	--gf-form-gap-y: 20px;
	--gf-label-space-primary: 8px;
	--gf-ctrl-border-color: var( --wp--preset--color--stroke );
	--gf-ctrl-radius: 6px;
	--gf-ctrl-shadow: none;

	/*
	 * `First Name*` — Orbital pads the label text with this before the
	 * asterisk; Figma has no gap.
	 */
	--gf-label-req-gap: 0;

	/*
	 * Orbital paints its own select arrow as a background-image on :hover,
	 * :focus and :disabled too, each at the same weight as the rule that
	 * removes it below and loaded later — so it came back as a second chevron
	 * whenever the select was focused. The hover/focus/disabled icons are all
	 * defined as var(--gf-ctrl-select-icon), so emptying this one property
	 * removes every state's arrow at the source.
	 */
	--gf-ctrl-select-icon: none;

	font-family: var( --wp--preset--font-family--body );
	color: var( --wp--preset--color--foreground );
}

/* One column, 20px between fields. */
.gform_wrapper.fcs-form_wrapper .gform_fields {
	row-gap: 20px;
}

/* The page carries its own required-fields note. */
.gform_wrapper.fcs-form_wrapper .gform_required_legend {
	display: none;
}

/* Labels --------------------------------------------------------------- */

.gform_wrapper.fcs-form_wrapper .gfield_label,
.gform_wrapper.fcs-form_wrapper .gform-field-label--type-sub,
.gform_wrapper.fcs-form_wrapper legend.gfield_label {
	margin-block-end: 8px;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	line-height: 1.4286; /* 20px */
	color: var( --wp--preset--color--foreground );
}

/* `First Name*` — the asterisk in the label's own colour, no gap, not red. */
.gform_wrapper.fcs-form_wrapper .gfield_label .gfield_required {
	margin-inline-start: 0;
	padding-inline-start: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Controls ------------------------------------------------------------- */

.gform_wrapper.fcs-form_wrapper :is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="password"],
	input[type="date"],
	select,
	textarea
) {
	box-sizing: border-box;
	width: 100%;
	min-block-size: 56px;
	padding: 16px;
	border: 1px solid var( --wp--preset--color--stroke );
	border-radius: 6px;
	background-color: var( --wp--preset--color--background );
	box-shadow: none;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.5; /* 24px */
	color: var( --wp--preset--color--foreground );
}

.gform_wrapper.fcs-form_wrapper textarea {
	block-size: 128px;
	min-block-size: 128px;
	resize: vertical;
}

/*
 * Focus: the border goes primary (as every input on the site does) and a 1px
 * ring of the same colour doubles it, so the change is visible to keyboard
 * users and not only a subtle hue shift on a 1px line.
 */
.gform_wrapper.fcs-form_wrapper :is( input, select, textarea ):focus {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 1px var( --wp--preset--color--primary );
	outline: none;
}

/*
 * Select: Orbital's own arrow is a background-image on the <select>. It is
 * removed and the site's chevron is painted as a mask on the container instead
 * — the calendar filter's idiom — because the SVG file is navy and a mask
 * lets it take the foreground colour Figma uses here.
 */
.gform_wrapper.fcs-form_wrapper .ginput_container_select {
	position: relative;
}

.gform_wrapper.fcs-form_wrapper select,
.gform_wrapper.fcs-form_wrapper select:is( :hover, :focus, :disabled ) {
	appearance: none;
	padding-inline-end: 48px;
	background-image: none;
	cursor: pointer;
}

.gform_wrapper.fcs-form_wrapper .ginput_container_select::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 16px;
	width: 16px;
	height: 16px;
	margin-block: auto;
	background-color: var( --wp--preset--color--foreground );
	pointer-events: none;
	-webkit-mask: url( "../../images/icons/FCS_Chevron_Down.svg" ) center / contain no-repeat;
	mask: url( "../../images/icons/FCS_Chevron_Down.svg" ) center / contain no-repeat;
}

/* A multi-select has no arrow. */
.gform_wrapper.fcs-form_wrapper .ginput_container_multiselect::after {
	content: none;
}

/* Submit --------------------------------------------------------------- */

/*
 * GF prints an <input type="submit"> (or a <button>) that core's button
 * element styles never reach, so the primary button is restated from
 * theme.json's styles.elements.button: 16/32 padding, 6px radius, 14/20 bold
 * uppercase, button-primary → button-primary-hover.
 *
 * DERIVED: full width on Small, like every other button on the site
 * (components/buttons.css); right-aligned at its natural width from Medium up,
 * as drawn.
 */
.gform_wrapper.fcs-form_wrapper .gform_footer,
.gform_wrapper.fcs-form_wrapper .gform_page_footer {
	display: flex;
	justify-content: flex-end;
	margin-block-start: 40px;
	padding: 0;
}

.gform_wrapper.fcs-form_wrapper :is( .gform_footer, .gform_page_footer ) :is( input[type="submit"], button, .gform_button ) {
	width: 100%;
	min-block-size: 0;
	padding: 16px 32px;
	border: 0;
	border-radius: 6px;
	background-color: var( --wp--preset--color--button-primary );
	box-shadow: none;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	line-height: 1.4286; /* 20px */
	text-transform: uppercase;
	color: var( --wp--preset--color--on-primary );
	cursor: pointer;
	transition: background-color var( --fcs-transition );
}

.gform_wrapper.fcs-form_wrapper :is( .gform_footer, .gform_page_footer ) :is( input[type="submit"], button, .gform_button ):is( :hover, :focus-visible ) {
	background-color: var( --wp--preset--color--button-primary-hover );
	color: var( --wp--preset--color--on-primary );
}

@media ( min-width: 768px ) {
	.gform_wrapper.fcs-form_wrapper :is( .gform_footer, .gform_page_footer ) :is( input[type="submit"], button, .gform_button ) {
		width: auto;
	}
}

/* Messages ------------------------------------------------------------- */

/*
 * Validation errors and the confirmation keep GF's structure (and its red,
 * which is an accessibility signal, not decoration); only the type is brought
 * into the body face and scale.
 */
.gform_wrapper.fcs-form_wrapper :is( .gform_validation_errors, .validation_message ),
.fcs-form_wrapper .gform_confirmation_message {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4286;
}

/* Checkmark pop -------------------------------------------------------- */

/*
 * A small blue check pops in at the right edge of a required field once the
 * visitor has filled it in validly and moved on — a little reward, and quiet
 * confirmation that the email address was accepted before they hit Send.
 *
 * WHY :user-valid
 * ---------------
 * Unlike :valid, it only matches after the visitor has interacted with the
 * field, so a page never loads wearing a column of ticks, and a field they are
 * still typing into does not flicker between states. Browsers without it (or
 * without :has) simply show no check; nothing else about the form changes.
 *
 * WHY ONLY REQUIRED FIELDS
 * ------------------------
 * An empty optional field is "valid" too — the Message box would earn a tick
 * for being skipped. GF marks every required control aria-required="true".
 *
 * WHY THE WRAPPER
 * ---------------
 * <input>, <select> and <textarea> cannot carry pseudo-elements, so the check
 * is drawn on GF's .ginput_container around the control, found with :has().
 * The select's ::after is already its chevron, so its check is the ::before,
 * parked just left of the chevron.
 *
 * The tick itself is CSS: a 6 × 11 box with a bottom and right border, turned
 * 45°. No asset to load or keep in step.
 */
.gform_wrapper.fcs-form_wrapper .ginput_container {
	position: relative;
}

.gform_wrapper.fcs-form_wrapper .ginput_container:has( > :is( input, textarea )[aria-required="true"]:user-valid )::after,
.gform_wrapper.fcs-form_wrapper .ginput_container_select:has( > select[aria-required="true"]:user-valid )::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 20px;
	width: 6px;
	height: 11px;
	margin-block: auto;
	border-inline-end: 2px solid var( --wp--preset--color--link );
	border-block-end: 2px solid var( --wp--preset--color--link );
	transform: rotate( 45deg );
	pointer-events: none;
	animation: fcs-check-pop 280ms cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;
}

/* Textarea: pinned level with the first line, not the middle of the box. */
.gform_wrapper.fcs-form_wrapper .ginput_container_textarea:has( > textarea[aria-required="true"]:user-valid )::after {
	inset-block-end: auto;
	inset-block-start: 20px;
	margin-block: 0;
}

/* Select: left of the chevron (16px icon + 16px inset + a 12px gap). */
.gform_wrapper.fcs-form_wrapper .ginput_container_select:has( > select[aria-required="true"]:user-valid )::before {
	inset-inline-end: 46px;
}

/* Room for the check, so long text never runs underneath it. */
.gform_wrapper.fcs-form_wrapper :is( input, textarea )[aria-required="true"]:user-valid {
	padding-inline-end: 48px;
}

.gform_wrapper.fcs-form_wrapper select[aria-required="true"]:user-valid {
	padding-inline-end: 72px;
}

@keyframes fcs-check-pop {
	0% {
		opacity: 0;
		transform: rotate( 45deg ) scale( 0 );
	}

	60% {
		opacity: 1;
		transform: rotate( 45deg ) scale( 1.25 );
	}

	100% {
		opacity: 1;
		transform: rotate( 45deg ) scale( 1 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.gform_wrapper.fcs-form_wrapper .ginput_container::after,
	.gform_wrapper.fcs-form_wrapper .ginput_container_select::before {
		animation: none;
	}
}

/* reCAPTCHA badge ------------------------------------------------------ */

/*
 * Google lets a site hide the floating reCAPTCHA badge ONLY if the page shows
 * "This site is protected by reCAPTCHA and the Google Privacy Policy and Terms
 * of Service apply." in the user flow. So the badge is hidden only on a page
 * that actually carries that notice — any paragraph with .fcs-recaptcha-notice
 * (patterns/contact.php has one under the form). Delete the notice and the
 * badge comes back by itself.
 */
body:has( .fcs-recaptcha-notice ) .grecaptcha-badge {
	visibility: hidden;
}