/*
 * LiveSpecial — Forms (LSRD26-61)
 *
 * Every Gravity Form on the site, styled from docs/design/contact.html:
 * inputs "border border-border/60 rounded-xl px-4 py-3 text-sm
 * focus:outline-none focus:border-primary", labels "text-xs font-bold
 * text-muted-foreground uppercase tracking-wide".
 *
 * GF 2.9's "orbital" theme resolves sizing and colour through --gf-ctrl-*
 * custom properties on the wrapper, so setting those is the supported way to
 * theme it and avoids out-specifying GF's own 0,4,0 selectors. GF also
 * prints each form's style settings inline under an ID selector
 * (#gform_wrapper_N[data-form-index].gform-theme, 1,2,0); ":not(#ls-gf)"
 * adds ID-level specificity so these values win without !important.
 * Placement variants (the footer's single-row pill, dark rail cards) only
 * override what differs.
 */

:root {
	--ls-danger: #DC2626;              /* design red-600 */
	--ls-danger-bg: #FEF2F2;           /* red-50 */
}

/* Native fields too: no focus ring, the border turns navy (PM, LSRD26-61). */
input:not( [type="checkbox"] ):not( [type="radio"] ):not( [type="submit"] ):focus-visible,
select:focus-visible,
textarea:focus-visible { outline: none; }

body .gform_wrapper.gform-theme:not( #ls-gf ) {
	--gf-color-danger: var( --ls-danger );
	--gf-color-danger-rgb: 220, 38, 38;

	/* Inputs */
	--gf-ctrl-radius: 0.75rem;
	--gf-ctrl-border-color: rgba( 25, 54, 103, 0.06 );
	--gf-ctrl-border-color-hover: rgba( 25, 54, 103, 0.2 );
	--gf-ctrl-border-color-focus: var( --ls-primary );
	--gf-ctrl-border-color-error: var( --ls-danger );
	--gf-ctrl-bg-color: var( --ls-background );
	--gf-ctrl-bg-color-hover: var( --ls-background );
	--gf-ctrl-bg-color-focus: var( --ls-background );
	--gf-ctrl-color: var( --ls-foreground );
	--gf-ctrl-size: 2.875rem;
	--gf-ctrl-padding-x: 1rem;
	--gf-ctrl-font-size: var( --ls-fs-sm );
	--gf-ctrl-font-family: var( --ls-font );
	--gf-ctrl-shadow: none;
	--gf-ctrl-shadow-focus: none;
	--gf-ctrl-outline-width-focus: 0;
	--gf-ctrl-placeholder-color: var( --ls-muted-foreground );

	/* Labels */
	--gf-ctrl-label-color-primary: var( --ls-muted-foreground );
	--gf-ctrl-label-font-size-primary: 0.75rem;
	--gf-ctrl-label-font-weight-primary: var( --ls-fw-bold );
	--gf-ctrl-label-letter-spacing-primary: 0.025em;
	--gf-ctrl-label-line-height-primary: 1rem;
	--gf-ctrl-label-color-req: var( --ls-danger );
	--gf-ctrl-label-font-size-req: 0.75rem;

	/* Descriptions and messages */
	--gf-ctrl-desc-color: var( --ls-muted-foreground );
	--gf-ctrl-desc-color-error: var( --ls-danger );
	--gf-ctrl-desc-font-size: 0.75rem;

	/* Submit — the primary button (base.css .ls-btn--primary). */
	--gf-ctrl-btn-radius: var( --ls-radius-full );
	--gf-ctrl-btn-size: 2.75rem;
	--gf-ctrl-btn-padding-x: 1.5rem;
	--gf-ctrl-btn-font-family: var( --ls-font );
	--gf-ctrl-btn-font-size: var( --ls-fs-sm );
	--gf-ctrl-btn-font-weight: var( --ls-fw-semibold );
	--gf-ctrl-btn-shadow: none;
	--gf-ctrl-btn-shadow-hover: none;
	--gf-ctrl-btn-shadow-focus: none;
	--gf-ctrl-btn-bg-color-primary: var( --ls-primary );
	--gf-ctrl-btn-bg-color-hover-primary: var( --ls-primary-hover );
	--gf-ctrl-btn-bg-color-focus-primary: var( --ls-primary-hover );
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-border-color-hover-primary: transparent;
	--gf-ctrl-btn-border-color-focus-primary: transparent;
	--gf-ctrl-btn-color-primary: var( --ls-white );
	--gf-ctrl-btn-color-hover-primary: var( --ls-white );
	--gf-ctrl-btn-color-focus-primary: var( --ls-white );

	/* Field spacing (design: grid gap-5). */
	--gf-form-gap-y: 1.25rem;
	--gf-form-gap-x: 1rem;
	--gf-label-space-primary: 0.375rem;
}

.gform_wrapper .gfield_label { text-transform: uppercase; }

/* The "* indicates required fields" legend: small, muted, moved under the
 * form so it no longer pushes the fields down (the wrapper is a flex column,
 * the heading is ordered last). */
.gform_wrapper.gform-theme { display: flex; flex-direction: column; }
.gform_wrapper.gform-theme > form { order: 1; }
.gform_wrapper.gform-theme > .gform_heading { order: 2; margin: 0.75rem 0 0; }
.gform_wrapper.gform-theme > .gform_validation_errors { order: 0; }
.gform_wrapper .gform_required_legend {
	margin: 0;
	color: var( --ls-muted-foreground );
	font-size: 0.75rem;
	line-height: 1rem;
}
.gform_wrapper .gform_required_legend .gfield_required { color: var( --ls-danger ); }

/* Validation: red and compact. */
.gform_wrapper.gform-theme .gform_validation_errors {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid rgba( 220, 38, 38, 0.25 );
	border-radius: 0.75rem;
	background: var( --ls-danger-bg );
	box-shadow: none;
}
.gform_wrapper.gform-theme .gform_validation_errors .gform_submission_error {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var( --ls-danger );
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-semibold );
	line-height: 1.25rem;
}
.gform_wrapper.gform-theme .gform_validation_errors .gform-icon { display: none; }
.gform_wrapper.gform-theme .gfield_validation_message,
.gform_wrapper.gform-theme .validation_message {
	margin-top: 0.375rem;
	padding: 0;
	border: 0;
	background: none;
	color: var( --ls-danger );
	font-size: 0.75rem;
	line-height: 1rem;
}

/* The submit is a <button> with the site arrow (inc/forms.php). GF's reset
 * wipes inline SVG paths inside a form, so icons here are CSS masks of the
 * theme's own icon files. */
.gform_wrapper .gform_footer .gform_button { gap: 0.5rem; }
.gform_wrapper:not( #ls-gf ) .ls-arrow--mask,
.gform_wrapper:not( #ls-gf ) .ls-form-dismiss::before {
	display: inline-block;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url( "../icons/arrow-right.svg" ) center / contain no-repeat;
	mask: url( "../icons/arrow-right.svg" ) center / contain no-repeat;
}
.gform_wrapper:not( #ls-gf ) .ls-form-dismiss::before {
	content: "";
	background: var( --ls-muted-foreground );
	-webkit-mask-image: url( "../icons/close.svg" );
	mask-image: url( "../icons/close.svg" );
}

.gform_wrapper .gform_confirmation_message {
	color: var( --ls-primary );
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-semibold );
}

/*
 * Footer newsletter: one row — white pill field + navy pill button (design
 * footer.html: "px-4 py-2.5 rounded-full bg-white", "px-5 py-2.5"). An error
 * shows as a small white note under the field with a close button
 * (assets/js/forms.js) instead of GF's full-width summary, so the band keeps
 * its shape.
 */
.ls-footer .gform_wrapper.gform-theme:not( #ls-gf ) {
	--gf-ctrl-radius: var( --ls-radius-full );
	--gf-ctrl-border-color: transparent;
	--gf-ctrl-border-color-hover: transparent;
	--gf-ctrl-border-color-focus: var( --ls-primary );
	--gf-ctrl-border-color-error: var( --ls-white );
	--gf-ctrl-bg-color: var( --ls-white );
	--gf-ctrl-size: 2.5rem;
	--gf-ctrl-btn-size: 2.5rem;
	--gf-ctrl-btn-padding-x: 1.25rem;
	position: relative;
	margin: 0;
}
.ls-footer .gform_wrapper .gform_heading,
.ls-footer .gform_wrapper .gfield_label,
.ls-footer .gform_wrapper .gfield_description:not( .validation_message ),
.ls-footer .gform_wrapper .gform_validation_errors { display: none; }
.ls-footer .gform_wrapper form { position: relative; display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0.5rem; }
.ls-footer .gform_wrapper .gform-body,
.ls-footer .gform_wrapper .gform_body { flex: 1; min-width: 0; margin: 0; }
.ls-footer .gform_wrapper .gform_fields { display: block !important; margin: 0; padding: 0; }
.ls-footer .gform_wrapper .gfield { position: static; margin: 0; padding: 0; }
.ls-footer .gform_wrapper .gform_footer,
.ls-footer .gform_wrapper .gform-footer { flex-shrink: 0; width: auto; margin: 0 !important; padding: 0; }
@media ( min-width: 640px ) {
	.ls-footer .gform_wrapper input[type="email"] { width: 15rem; }
}

.ls-footer .gform_wrapper.gform-theme .gfield_validation_message {
	position: absolute;
	top: calc( 100% + 0.375rem );
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.375rem 0.5rem 0.375rem 0.75rem;
	border-radius: var( --ls-radius-lg );
	background: var( --ls-white );
	box-shadow: var( --ls-shadow-md );
	color: var( --ls-danger );
	font-weight: var( --ls-fw-semibold );
}
.ls-footer .gform_wrapper .gfield_validation_message[hidden] { display: none; }

.gform_wrapper.gform-theme:not( #ls-gf ) .ls-form-dismiss {
	flex-shrink: 0;
	width: auto;
	height: auto;
	min-height: 0;
	box-shadow: none;
	display: inline-flex;
	padding: 0.125rem;
	border: 0;
	border-radius: 0.25rem;
	background: none;
	color: var( --ls-muted-foreground );
	cursor: pointer;
}
.gform_wrapper.gform-theme:not( #ls-gf ) .ls-form-dismiss:hover { background: none; }
.gform_wrapper:not( #ls-gf ) .ls-form-dismiss:hover::before { background: var( --ls-primary ); }

.ls-footer .gform_wrapper .gform_confirmation_message { color: var( --ls-white ); }

/* Forms on the navy rail cards ("Stay informed"): white field, magenta button. */
.ls-form--on-dark .gform_wrapper.gform-theme:not( #ls-gf ) {
	--gf-ctrl-radius: var( --ls-radius-full );
	--gf-ctrl-border-color: transparent;
	--gf-ctrl-border-color-hover: transparent;
	--gf-ctrl-bg-color: var( --ls-white );
	--gf-ctrl-btn-bg-color-primary: var( --ls-secondary );
	--gf-ctrl-btn-bg-color-hover-primary: var( --ls-secondary-hover );
	--gf-ctrl-btn-bg-color-focus-primary: var( --ls-secondary-hover );
	--gf-form-gap-y: 0.75rem;
}
.ls-form--on-dark .gform_wrapper .gform_heading,
.ls-form--on-dark .gform_wrapper .gfield_label { display: none; }
.ls-form--on-dark .gform_wrapper .gform_footer { margin-top: 0.75rem; padding: 0; }
.ls-form--on-dark .gform_wrapper .gform_footer .gform_button { width: 100%; justify-content: center; }
.ls-form--on-dark .gform_wrapper .gfield_validation_message { color: #FCA5A5; }
.ls-form--on-dark .gform_wrapper .gform_confirmation_message { color: var( --ls-white ); }

/* Provider "Request Information" (design: placeholder-only inputs,
 * "rounded-lg px-3 py-2.5", magenta Send Request). */
.ls-contact-request .gform_wrapper.gform-theme:not( #ls-gf ) {
	--gf-ctrl-radius: 0.5rem;
	--gf-ctrl-size: 2.625rem;
	--gf-ctrl-padding-x: 0.75rem;
	--gf-ctrl-border-color: rgba( 25, 54, 103, 0.06 );
	--gf-form-gap-y: 0.75rem;
	--gf-ctrl-btn-bg-color-primary: var( --ls-secondary );
	--gf-ctrl-btn-bg-color-hover-primary: var( --ls-secondary-hover );
	--gf-ctrl-btn-bg-color-focus-primary: var( --ls-secondary-hover );
}
.ls-contact-request .gform_wrapper .gfield_label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; }
.ls-contact-request .gform_wrapper textarea { min-height: 5rem; height: 5rem; }
.ls-contact-request .gform_wrapper .gform_footer { margin-top: 1rem; padding: 0; }
.ls-contact-request .gform_wrapper .gform_footer .gform_button { width: 100%; justify-content: center; }