/**
 * Gravity Forms — Redefine Web design-system overrides.
 *
 * GF 2.7+ ships the "Orbital" theme framework — every input, label, button,
 * and choice control reads its color/radius/padding/font from CSS custom
 * properties (`--gf-ctrl-*`, `--gf-label-*`). The framework's own selectors
 * are `.gform-theme.gform-theme--framework.gform_wrapper :where(...)`, which
 * out-specifies any class-only override we could write — so we drive
 * everything through token overrides instead of fighting the cascade.
 * One source of truth, no specificity arms race.
 *
 * Each form picks a variant via Form Settings → Form CSS Class:
 *   rdw-form-light       — default, light card on paper bg
 *   rdw-form-dark-glass  — dark glass card (services, industry hubs, B2B)
 *   rdw-form-partners    — semi-dark Partners apply card
 *   rdw-form-news        — white press-subscribe card, single column
 *   rdw-form-newsletter  — inline email + button row (footer / blog sidebar)
 *   rdw-form-ppc         — solid ink card, full-width submit (PPC landings)
 *
 * REQUIRED: Form Settings → Form Theme = "Orbital". If a form is set to
 * Legacy or None, these tokens won't apply and the form falls back to default
 * GF styling.
 */

/* ============================================================
 * Universal base — light variant defaults that every form inherits.
 * ============================================================ */

.gform_wrapper {
	font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
	color: var(--ink, #0a0a0a);

	/* — Submit button (primary CTA) — */
	--gf-ctrl-btn-bg-color-primary: var(--accent, #d24a16);
	--gf-ctrl-btn-bg-color-hover-primary: var(--accent-deep, #b03f12);
	--gf-ctrl-btn-color-primary: #fff;
	--gf-ctrl-btn-color-hover-primary: #fff;
	--gf-ctrl-btn-border-color-primary: var(--accent, #d24a16);
	--gf-ctrl-btn-border-color-hover-primary: var(--accent-deep, #b03f12);
	--gf-ctrl-btn-border-width-primary: 0;
	--gf-ctrl-btn-radius: 999px;
	--gf-ctrl-btn-padding-y: 14px;
	--gf-ctrl-btn-padding-x: 22px;
	--gf-ctrl-btn-font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
	--gf-ctrl-btn-font-size: 14.5px;
	--gf-ctrl-btn-font-weight: 500;
	--gf-ctrl-btn-letter-spacing: -0.005em;
	--gf-ctrl-btn-line-height: 1.2;
	--gf-ctrl-btn-text-transform: none;
	--gf-ctrl-btn-shadow: 0 8px 24px -8px rgba(255, 91, 31, 0.5);
	--gf-ctrl-btn-shadow-hover: 0 12px 30px -10px rgba(255, 91, 31, 0.6);
	--gf-ctrl-btn-size-sm: auto;
	--gf-ctrl-btn-size: auto;
	--gf-ctrl-btn-size-lg: auto;

	/* — Inputs / selects / textareas — */
	--gf-ctrl-bg-color: #fff;
	--gf-ctrl-bg-color-focus: #fff;
	--gf-ctrl-color: var(--ink, #0a0a0a);
	--gf-ctrl-color-placeholder: var(--muted-2, #6b6b6b);
	--gf-ctrl-border-color: var(--line, rgba(10, 10, 10, 0.12));
	--gf-ctrl-border-color-hover: rgba(10, 10, 10, 0.25);
	--gf-ctrl-border-color-focus: var(--ink, #0a0a0a);
	--gf-ctrl-border-style: solid;
	--gf-ctrl-border-width: 1px;
	--gf-ctrl-radius: 10px;
	--gf-ctrl-padding-y: 12px;
	--gf-ctrl-padding-x: 14px;
	--gf-ctrl-font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
	--gf-ctrl-font-size: 14.5px;
	--gf-ctrl-line-height: 1.5;
	--gf-ctrl-shadow-focus: 0 0 0 3px rgba(10, 10, 10, 0.06);

	/* — Labels — */
	--gf-label-color-primary: var(--muted, #6b6b6b);
	--gf-label-color-secondary: var(--muted-2, #6b6b6b);
	--gf-label-font-family: var(--mono, 'JetBrains Mono', monospace);
	--gf-label-font-size-md: 10.5px;
	--gf-label-font-weight: 500;
	--gf-label-letter-spacing: 0.12em;
	--gf-label-line-height: 1.4;
	--gf-label-text-transform: uppercase;

	/* — Choice controls (checkbox / radio) — */
	--gf-ctrl-choice-color: var(--muted, #555);
	--gf-ctrl-choice-color-selected: var(--accent, #d24a16);
	--gf-ctrl-choice-bg-color: #fff;
	--gf-ctrl-choice-border-color: var(--line, rgba(10, 10, 10, 0.18));
}

/* Hide GF's auto-rendered title/description — our pages supply their own
   heading, so duplicates would look messy. */
.gform_wrapper .gform_heading,
.gform_wrapper .gform_title,
.gform_wrapper .gform_description {
	display: none;
}

/* 12-column grid container. Per-field width modifiers come from GF's
   Appearance → Field Width picker. */
.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 14px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gform_wrapper .gfield {
	margin: 0 !important;
	padding: 0 !important;
	grid-column: span 12;
}
.gform_wrapper .gfield--width-third      { grid-column: span 4; }
.gform_wrapper .gfield--width-half       { grid-column: span 6; }
.gform_wrapper .gfield--width-two-thirds { grid-column: span 8; }
.gform_wrapper .gfield--width-full       { grid-column: span 12; }

@media (max-width: 640px) {
	.gform_wrapper .gfield--width-third,
	.gform_wrapper .gfield--width-half,
	.gform_wrapper .gfield--width-two-thirds {
		grid-column: span 12;
	}
}

.gform_wrapper .gfield_required { color: var(--accent, #d24a16); margin-left: 3px; }

.gform_wrapper .gform_footer {
	margin-top: 18px;
	padding: 0;
}

/* Validation + confirmation states — Orbital doesn't tokenise these. */
.gform_wrapper .gform_validation_errors {
	background: #fff5ed;
	border: 1px solid #f1c2a8;
	color: #b3261e;
	padding: 14px 16px;
	border-radius: 10px;
	margin-bottom: 16px;
	font-size: 13.5px;
}
.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
	color: #b3261e;
	font-size: 12.5px;
	margin-top: 6px;
}
.gform_confirmation_wrapper .gform_confirmation_message {
	padding: 22px 24px;
	background: #ecfae6;
	border: 1px solid #97c69d;
	border-radius: 12px;
	color: #0d4716;
	font-size: 15px;
	line-height: 1.55;
}

/* Honeypot — visually hidden but focusable. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_visibility_hidden {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ============================================================
 * Variant 1 — Dark glass card
 * Translucent inputs over dark .form-card sections, accent-orange focus.
 * Used on every "Get a proposal" form, industry hubs, B2B service pages.
 * Add CSS class to the GF: rdw-form-dark-glass
 * ============================================================ */

.gform_wrapper.rdw-form-dark-glass {
	--gf-ctrl-bg-color: rgba(255, 255, 255, 0.04);
	--gf-ctrl-bg-color-focus: rgba(255, 255, 255, 0.07);
	--gf-ctrl-color: var(--paper, #f5f3ee);
	--gf-ctrl-color-placeholder: var(--muted-light-2, rgba(245, 243, 238, 0.4));
	--gf-ctrl-border-color: var(--line-light, rgba(245, 243, 238, 0.12));
	--gf-ctrl-border-color-hover: rgba(245, 243, 238, 0.2);
	--gf-ctrl-border-color-focus: var(--accent, #d24a16);
	--gf-ctrl-shadow-focus: none;
	--gf-label-color-primary: rgba(245, 243, 238, 0.55);
	--gf-label-color-secondary: var(--muted-light-2, rgba(245, 243, 238, 0.55));
	--gf-ctrl-choice-color: var(--muted-light-2, rgba(245, 243, 238, 0.7));
	--gf-ctrl-choice-bg-color: rgba(255, 255, 255, 0.06);
	--gf-ctrl-choice-border-color: rgba(245, 243, 238, 0.2);
}
/* Native <option>s render in browser chrome and are not tokenised. */
.gform_wrapper.rdw-form-dark-glass select option {
	background: var(--ink, #0a0a0a);
	color: var(--paper, #f5f3ee);
}

/* ============================================================
 * Variant 2 — Light card on paper background  (DEFAULT — no class needed)
 * Used inside <div class="form-page-card"> on paper bg.
 * Add CSS class to the GF: rdw-form-light
 * ============================================================ */

.gform_wrapper.rdw-form-light {
	/* No-op — base tokens already match. Class exists for marker clarity so a
	   marketer can see "this form intentionally uses the light variant". */
}

/* ============================================================
 * Variant 3 — Partners apply card
 * Semi-dark inputs over deep partners section, slightly denser typography.
 * Add CSS class to the GF: rdw-form-partners
 * ============================================================ */

.gform_wrapper.rdw-form-partners {
	--gf-ctrl-bg-color: rgba(0, 0, 0, 0.25);
	--gf-ctrl-bg-color-focus: rgba(0, 0, 0, 0.4);
	--gf-ctrl-color: var(--paper, #f5f3ee);
	--gf-ctrl-color-placeholder: var(--muted-light-2, rgba(245, 243, 238, 0.4));
	--gf-ctrl-border-color: var(--line-light, rgba(245, 243, 238, 0.12));
	--gf-ctrl-border-color-focus: var(--accent, #d24a16);
	--gf-ctrl-padding-y: 13px;
	--gf-ctrl-padding-x: 14px;
	--gf-ctrl-shadow-focus: none;
	--gf-label-color-primary: var(--muted-light-2, rgba(245, 243, 238, 0.7));
	--gf-label-font-size-md: 11px;
	--gf-ctrl-choice-color: var(--muted-light, rgba(245, 243, 238, 0.85));
	--gf-ctrl-choice-bg-color: rgba(0, 0, 0, 0.25);
	--gf-ctrl-choice-border-color: rgba(245, 243, 238, 0.18);
}
.gform_wrapper.rdw-form-partners select option {
	background: var(--ink, #0a0a0a);
	color: var(--paper, #f5f3ee);
}
.gform_wrapper.rdw-form-partners textarea {
	min-height: 96px;
}

/* ============================================================
 * Variant 4 — News press-subscribe card
 * Single column, paper-coloured inputs on white card.
 * Add CSS class to the GF: rdw-form-news
 * ============================================================ */

.gform_wrapper.rdw-form-news {
	--gf-ctrl-bg-color: var(--paper, #f5f3ee);
	--gf-ctrl-bg-color-focus: var(--paper, #f5f3ee);
	--gf-ctrl-padding-y: 13px;
	--gf-ctrl-padding-x: 16px;
	--gf-ctrl-border-color-focus: var(--ink, #0a0a0a);
	--gf-ctrl-shadow-focus: none;
}
.gform_wrapper.rdw-form-news .gform_fields {
	grid-template-columns: 1fr;
	gap: 14px;
}
.gform_wrapper.rdw-form-news .gfield {
	grid-column: span 1;
}

/* ============================================================
 * Variant 5 — Inline newsletter (email + button on one row)
 * Pill input flush against pill submit button on the right.
 * Add CSS class to the GF: rdw-form-newsletter
 * ============================================================ */

.gform_wrapper.rdw-form-newsletter {
	display: block;
	--gf-ctrl-radius: 999px;
	--gf-ctrl-padding-y: 12px;
	--gf-ctrl-padding-x: 18px;
	--gf-ctrl-font-size: 14px;
	--gf-ctrl-btn-padding-y: 12px;
	--gf-ctrl-btn-padding-x: 22px;
	--gf-ctrl-btn-font-size: 13.5px;
}
.gform_wrapper.rdw-form-newsletter form {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.gform_wrapper.rdw-form-newsletter .gform_body {
	flex: 1;
	min-width: 0;
}
.gform_wrapper.rdw-form-newsletter .gform_fields {
	gap: 0;
	grid-template-columns: 1fr;
}
.gform_wrapper.rdw-form-newsletter .gfield {
	grid-column: span 1;
}
.gform_wrapper.rdw-form-newsletter .gfield_label {
	display: none;
}
.gform_wrapper.rdw-form-newsletter .gform_footer {
	margin: 0;
	flex-shrink: 0;
}
.gform_wrapper.rdw-form-newsletter .gform_button {
	white-space: nowrap;
}

/* ============================================================
 * Variant 6 — PPC landing application card
 * Dark inputs on solid ink card, full-width submit, larger conversion type.
 * Add CSS class to the GF: rdw-form-ppc
 * ============================================================ */

.gform_wrapper.rdw-form-ppc {
	--gf-ctrl-bg-color: rgba(245, 243, 238, 0.06);
	--gf-ctrl-bg-color-focus: rgba(245, 243, 238, 0.1);
	--gf-ctrl-color: var(--paper, #f5f3ee);
	--gf-ctrl-color-placeholder: rgba(245, 243, 238, 0.35);
	--gf-ctrl-border-color: rgba(245, 243, 238, 0.14);
	--gf-ctrl-border-color-focus: var(--accent, #d24a16);
	--gf-ctrl-padding-y: 13px;
	--gf-ctrl-padding-x: 14px;
	--gf-ctrl-font-size: 15px;
	--gf-ctrl-shadow-focus: none;
	--gf-label-color-primary: rgba(245, 243, 238, 0.55);
	--gf-label-font-size-md: 10px;
	--gf-ctrl-choice-color: rgba(245, 243, 238, 0.7);
	--gf-ctrl-choice-bg-color: rgba(245, 243, 238, 0.06);
	--gf-ctrl-choice-border-color: rgba(245, 243, 238, 0.2);
	--gf-ctrl-btn-padding-y: 16px;
	--gf-ctrl-btn-padding-x: 24px;
	--gf-ctrl-btn-font-size: 15.5px;
}
.gform_wrapper.rdw-form-ppc .gform_footer .gform_button {
	width: 100%;
}
.gform_wrapper.rdw-form-ppc select option {
	background: var(--ink, #0a0a0a);
	color: var(--paper, #f5f3ee);
}

/* ============================================================
 * Container alignment helpers — when a Gravity Form replaces a static <form>
 * inside a static .form-card / .form-page-card / .apply-form / .dist-form
 * container, these tweaks keep spacing consistent with the surrounding card
 * chrome the static templates already define.
 * ============================================================ */

.form-card .gform_wrapper,
.form-page-card .gform_wrapper,
.apply-form .gform_wrapper,
.dist-form .gform_wrapper {
	margin: 0;
}
.form-card .gform_wrapper form,
.form-page-card .gform_wrapper form,
.apply-form .gform_wrapper form,
.dist-form .gform_wrapper form {
	margin: 0;
}