/**
 * Bedloe form design for Gravity Forms.
 *
 * Mirrors the consultation form in the homepage hero section. The design is
 * built for dark surfaces; it keeps its own background transparent so it
 * inherits the section it sits in.
 *
 * Everything is scoped to the single class .bedloe-form-design_wrapper, which
 * Gravity Forms puts on the div wrapping the form. The <form> itself also
 * carries .bedloe-form-design, but no rule here uses it.
 *
 * That is deliberate. The design tokens below live on the wrapper, so when
 * rules were split across both classes, losing the form class left the dark
 * token values applied while the rules drawing the field underlines and radio
 * circles vanished — dark text on dark fields, worse than no styling at all.
 * One scope makes it all-or-nothing: either the design applies, or the form
 * falls back cleanly to the stock Gravity Forms theme.
 *
 * Most of the work is done by overriding Gravity Forms' own theme custom
 * properties, so we inherit its layout and only restate the look.
 */

/* ============================================
   Design tokens — taken from the Elementor kit
   ============================================ */

.bedloe-form-design_wrapper {
	--bedloe-font: "Inter Tight", "Inter", sans-serif;

	--bedloe-ink: #f2efe8; /* input text   */
	--bedloe-label: #a9a59d; /* field labels */
	--bedloe-accent: #8cc0b3; /* submit       */
	--bedloe-field-bg: #161513;
	--bedloe-hairline: #f2efe838;
	--bedloe-note: #66635d; /* html field   */
	--bedloe-helper: #77746f;
	--bedloe-divider: #2d2b29;

	--bedloe-error: #d98b7b;
	--bedloe-choice-label: #ffffff;
	--bedloe-choice-border: #575552;
	--bedloe-choice-border-hover: #8a8783;
	--bedloe-choice-on: #6fa99b;

	--bedloe-text-size: 17px;
	--bedloe-label-size: 12px;
	--bedloe-gap-x: 40px;
	--bedloe-gap-y: 45px;
	--bedloe-label-space: 25px;
}

/* ============================================
   Gravity Forms theme variable overrides
   ============================================ */

.bedloe-form-design_wrapper.gform_wrapper,
.bedloe-form-design_wrapper .gform-theme--framework,
.bedloe-form-design_wrapper .bedloe-form-design_wrapper {
	/* Row / column rhythm */
	--gf-form-gap-y: var(--bedloe-gap-y);
	--gf-field-gap-x: var(--bedloe-gap-x);
	--gf-field-gap-y: var(--bedloe-gap-y);
	--gf-label-space-primary: var(--bedloe-label-space);

	/* Controls */
	--gf-ctrl-bg-color: var(--bedloe-field-bg);
	--gf-ctrl-bg-color-hover: var(--bedloe-field-bg);
	--gf-ctrl-bg-color-focus: var(--bedloe-field-bg);
	--gf-ctrl-color: var(--bedloe-ink);
	--gf-ctrl-color-hover: var(--bedloe-ink);
	--gf-ctrl-color-focus: var(--bedloe-ink);
	--gf-ctrl-border-color: var(--bedloe-hairline);
	--gf-ctrl-border-color-hover: var(--bedloe-hairline);
	--gf-ctrl-border-color-focus: var(--bedloe-accent);
	--gf-ctrl-border-width: 0 0 1px;
	--gf-ctrl-border-style: solid;
	--gf-ctrl-radius: 0;
	--gf-ctrl-font-family: var(--bedloe-font);
	--gf-ctrl-font-size: var(--bedloe-text-size);
	--gf-ctrl-font-weight: 400;

	/* Field labels */
	--gf-ctrl-label-color-primary: var(--bedloe-label);
	--gf-ctrl-label-font-family-primary: var(--bedloe-font);
	--gf-ctrl-label-font-size-primary: var(--bedloe-label-size);
	--gf-ctrl-label-font-weight-primary: 500;
	--gf-ctrl-label-letter-spacing-primary: 2px;
	--gf-ctrl-label-line-height-primary: 1.4em;

	/* Choice labels (radio text) */
	--gf-ctrl-label-color-secondary: var(--bedloe-choice-label);
	--gf-ctrl-label-font-family-secondary: var(--bedloe-font);
	--gf-ctrl-label-font-size-secondary: var(--bedloe-text-size);
	--gf-ctrl-label-font-weight-secondary: 400;

	/* Descriptions */
	--gf-ctrl-desc-color: var(--bedloe-note);
	--gf-ctrl-desc-font-family: var(--bedloe-font);
	--gf-ctrl-desc-font-size: 13px;
	--gf-ctrl-desc-font-weight: 300;

	/* Radio rhythm */
	--gf-ctrl-choice-size: 18px;
	--gf-field-choice-gap: 10px;
	--gf-field-choice-meta-space: 9px;
	--gf-field-choice-align-x-gap-x: 28px;
	--gf-field-choice-align-x-gap-y: 10px;

	/*
	 * Submit button. The framework resolves these into --gf-local-* and they
	 * are the only reliable way to unset the default blue pill.
	 */
	--gf-ctrl-btn-bg-color-primary: transparent;
	--gf-ctrl-btn-bg-color-hover-primary: transparent;
	--gf-ctrl-btn-bg-color-focus-primary: transparent;
	--gf-ctrl-btn-color-primary: var(--bedloe-accent);
	--gf-ctrl-btn-color-hover-primary: var(--bedloe-accent);
	--gf-ctrl-btn-color-focus-primary: var(--bedloe-accent);
	--gf-ctrl-btn-border-color-primary: var(--bedloe-accent);
	--gf-ctrl-btn-border-color-hover-primary: var(--bedloe-accent);
	--gf-ctrl-btn-border-color-focus-primary: var(--bedloe-accent);
	--gf-ctrl-btn-border-width: 0 0 1px;
	--gf-ctrl-btn-border-width-primary: 0 0 1px;
	--gf-ctrl-btn-radius: 0;
	--gf-ctrl-btn-padding-x: 0;
	--gf-ctrl-btn-padding-y: 0;
	--gf-ctrl-btn-size: auto;
	--gf-ctrl-btn-font-family: var(--bedloe-font);
	--gf-ctrl-btn-font-size: 12px;
	--gf-ctrl-btn-font-weight: 400;
	--gf-ctrl-btn-line-height: 1;
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-letter-spacing: 2px;

	/* Validation — muted to sit on the dark palette */
	--gf-ctrl-bg-color-error: var(--bedloe-field-bg);
	--gf-ctrl-border-color-error: var(--bedloe-error);
	--gf-ctrl-color-error: var(--bedloe-ink);
	--gf-ctrl-desc-color-error: var(--bedloe-error);
	--gf-ctrl-desc-font-family-error: var(--bedloe-font);
	--gf-ctrl-desc-font-size-error: 13px;
	--gf-ctrl-desc-letter-spacing-error: normal;

	--gf-form-validation-bg-color: rgba(217, 139, 123, 0.08);
	--gf-form-validation-border-color: rgba(217, 139, 123, 0.35);
	--gf-form-validation-border-width: 1px;
	--gf-form-validation-color: var(--bedloe-error);
	--gf-form-validation-font-family: var(--bedloe-font);
	--gf-form-validation-font-size: 14px;
	--gf-form-validation-radius: 0;
	--gf-form-validation-shadow: none;
	--gf-form-validation-heading-color: var(--bedloe-error);
	--gf-form-validation-heading-font-family: var(--bedloe-font);
	--gf-form-validation-heading-font-size: 14px;
	--gf-form-validation-heading-font-weight: 400;
	--gf-form-validation-heading-icon-color: var(--bedloe-error);
	--gf-form-validation-heading-icon-bg-color: transparent;
	--gf-form-validation-heading-icon-border-color: var(--bedloe-error);
	--gf-form-validation-summary-color: var(--bedloe-error);
	--gf-form-validation-summary-font-family: var(--bedloe-font);
	--gf-form-validation-summary-font-size: 13px;
	--gf-form-validation-summary-font-weight: 400;
}

/* ============================================
   Inputs — underline only, no rounding
   ============================================ */

.bedloe-form-design_wrapper .gfield input[type="text"],
.bedloe-form-design_wrapper .gfield input[type="email"],
.bedloe-form-design_wrapper .gfield input[type="tel"],
.bedloe-form-design_wrapper .gfield input[type="number"],
.bedloe-form-design_wrapper .gfield input[type="url"],
.bedloe-form-design_wrapper .gfield textarea,
.bedloe-form-design_wrapper .gfield select {
	background-color: var(--bedloe-field-bg);
	color: var(--bedloe-ink);
	font-family: var(--bedloe-font);
	font-size: var(--bedloe-text-size);
	font-weight: 400;
	border: 0;
	border-bottom: 1px solid var(--bedloe-hairline);
	border-radius: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
	transition: border-color 0.2s ease;
}

.bedloe-form-design_wrapper .gfield input:focus,
.bedloe-form-design_wrapper .gfield textarea:focus,
.bedloe-form-design_wrapper .gfield select:focus {
	border-bottom-color: var(--bedloe-accent);
	box-shadow: none;
	outline: none;
}

.bedloe-form-design_wrapper .gfield input::placeholder,
.bedloe-form-design_wrapper .gfield textarea::placeholder {
	color: var(--bedloe-helper);
	opacity: 1;
}

/* Select: keep the caret, drop the native chrome */
.bedloe-form-design_wrapper .gfield select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--bedloe-label) 50%),
		linear-gradient(135deg, var(--bedloe-label) 50%, transparent 50%);
	background-position: calc(100% - 13px) calc(50% + 2px), calc(100% - 8px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 28px;
}

.bedloe-form-design_wrapper .gfield select option {
	background-color: var(--bedloe-field-bg);
	color: var(--bedloe-ink);
}

/* The placeholder option reads as helper text, not as a value */
.bedloe-form-design_wrapper .gfield select:has(option.gf_placeholder:checked) {
	color: var(--bedloe-helper);
}

/* ============================================
   Labels
   ============================================ */

.bedloe-form-design_wrapper .gfield .gfield_label,
.bedloe-form-design_wrapper .gfield legend.gfield_label {
	color: var(--bedloe-label);
	font-family: var(--bedloe-font);
	font-size: var(--bedloe-label-size);
	font-weight: 500;
	line-height: 1.4em;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: var(--bedloe-label-space);
	padding-bottom: 0;
	display: block;
	width: 100%;
}

/*
 * The homepage form shows no required markers. Hide the indicator visually
 * but keep it available to screen readers (aria-required still applies).
 */
.bedloe-form-design_wrapper .gfield_required {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================
   Radio buttons — custom circles
   ============================================ */

.bedloe-form-design_wrapper .gfield--type-radio .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}

.bedloe-form-design_wrapper .gfield--type-radio .gchoice {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
}

.bedloe-form-design_wrapper .gfield--type-radio .gchoice label {
	margin: 0;
	padding: 0;
	color: var(--bedloe-choice-label);
	font-family: var(--bedloe-font);
	font-size: var(--bedloe-text-size);
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
	letter-spacing: normal;
	text-transform: none;
	max-width: none;
}

.bedloe-form-design_wrapper .gfield--type-radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: 0;
	flex-shrink: 0;
	border: 2px solid var(--bedloe-choice-border);
	border-radius: 50%;
	background: transparent;
	position: relative;
	cursor: pointer;
	transition: border-color 0.2s ease;
	box-shadow: none;
}

.bedloe-form-design_wrapper .gfield--type-radio input[type="radio"]:hover {
	border-color: var(--bedloe-choice-border-hover);
}

.bedloe-form-design_wrapper .gfield--type-radio input[type="radio"]:checked {
	border-color: var(--bedloe-choice-on);
	background: transparent;
}

.bedloe-form-design_wrapper .gfield--type-radio input[type="radio"]:checked::after,
.bedloe-form-design_wrapper .gfield--type-radio input[type="radio"]:checked::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bedloe-choice-on);
	transform: translate(-50%, -50%);
	border: 0;
	box-shadow: none;
}

.bedloe-form-design_wrapper .gfield--type-radio input[type="radio"]:focus-visible {
	outline: 2px solid var(--bedloe-accent);
	outline-offset: 2px;
}

/* ============================================
   HTML note + section dividers
   ============================================ */

/* The "we'll use this number" helper sits tight under the contact fields */
.bedloe-form-design_wrapper .gfield--type-html {
	margin-top: calc(var(--bedloe-gap-y) * -1 + 15px);
	color: var(--bedloe-helper);
	font-family: var(--bedloe-font);
	font-size: 12px;
	font-weight: 300;
}

/*
 * Each question block is separated by a hairline.
 *
 * Radio fields render as <fieldset>, and browsers lay the <legend> out above
 * the content box — so padding-top would open a gap *below* the question, not
 * above it. The space above therefore goes on the legend instead.
 */
.bedloe-form-design_wrapper .gfield--type-radio {
	border-top: 0;
	padding-top: 0;
}

/*
 * The rule goes on the legend, not the fieldset: a block-level <legend> clips
 * the fieldset's own top border along its whole width, so a border there
 * would never be drawn.
 */
.bedloe-form-design_wrapper .gfield--type-radio > legend.gfield_label {
	border-top: 1px solid var(--bedloe-divider);
	padding-top: 28px;
	width: 100%;
	box-sizing: border-box;
}

/* ============================================
   Submit button — text + arrow, underlined

   Gravity Forms styles .button at (0,4,0) specificity, so the handful of
   properties its variables do not expose are set here at (0,5,0).
   ============================================ */

.bedloe-form-design_wrapper .gform_footer {
	padding: 0;
	margin: var(--bedloe-gap-y) 0 0;
	border-top: 1px solid var(--bedloe-divider);
	padding-top: 28px;
}

.bedloe-form-design_wrapper.gform_wrapper.gform-theme.gform-theme--framework .gform_button,
.bedloe-form-design_wrapper.gform_wrapper.gform-theme.gform-theme--framework .gform_footer button[type="submit"],
.bedloe-form-design_wrapper.gform_wrapper.gform-theme.gform-theme--framework .gform_footer input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: auto;
	/*
	 * Matches the Elementor button box: a 40px tall control with the label
	 * centred and the underline sitting on the bottom edge. Without the
	 * min-height the button collapses to the height of its own text.
	 */
	min-height: 40px;
	height: auto;
	box-sizing: border-box;
	margin: 0;
	padding: 0 0 7px;
	background: transparent;
	color: var(--bedloe-accent);
	font-family: var(--bedloe-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	border: 0;
	border-bottom: 1px solid var(--bedloe-accent);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.bedloe-form-design_wrapper .gform_button .bedloe-btn__text {
	letter-spacing: 2px;
}

/* → stands in for the arrow icon used in the Elementor form */
.bedloe-form-design_wrapper .gform_button .bedloe-btn__icon {
	display: inline-block;
	font-size: 14px;
	line-height: 1;
	letter-spacing: normal;
	transition: transform 0.2s ease;
}

.bedloe-form-design_wrapper .gform_button:hover .bedloe-btn__icon {
	transform: translateX(3px);
}

.bedloe-form-design_wrapper.gform_wrapper.gform-theme.gform-theme--framework .gform_button:hover,
.bedloe-form-design_wrapper.gform_wrapper.gform-theme.gform-theme--framework .gform_button:focus {
	background: transparent;
	color: var(--bedloe-accent);
	border-bottom-color: var(--bedloe-accent);
	opacity: 0.75;
}

.bedloe-form-design_wrapper.gform_wrapper.gform-theme.gform-theme--framework .gform_button:focus-visible {
	outline: 2px solid var(--bedloe-accent);
	outline-offset: 4px;
}

/* ============================================
   Essential Addons compatibility

   The Essential Addons "Gravity Forms" widget has a Button -> Width control
   whose Width Type defaults to "Custom" at 100px. Elementor writes it out as:

     html body .elementor-<page> .elementor-element.elementor-element-<id>
         .eael-gravity-form .gform_footer .gform_button { width: 100px !important; }

   which squeezes the submit button to 100px and wraps its label.

   An !important declaration can only be outranked by another !important at
   higher specificity. That rule is worth (0,6,2); the selectors below are
   (0,6,3) and (0,7,3), so they win without depending on the page or element
   id. The framework also sizes controls with the logical `inline-size`
   property, so both it and `width` are restated.

   The tidier fix is to set that widget's Button -> Width back to Default in
   Elementor, which stops the declaration being generated at all. This rule
   means the form looks right either way.
   ============================================ */

html body .bedloe-form-design_wrapper.gform_wrapper.gform-theme.gform-theme--framework :is(.gform_footer, .gform_page_footer, .gfield--type-submit) :is(button, input):is(.gform_button, .gform-button).button,
html body .bedloe-form-design_wrapper.gform_wrapper.gform-theme.gform-theme--framework :is(.gform_footer, .gform_page_footer, .gfield--type-submit) :is(button, input):is(.gform_button, .gform-button) {
	width: auto !important;
	inline-size: auto !important;
	min-height: 40px;
	white-space: nowrap;
}

/* ============================================
   Validation + confirmation
   ============================================ */

.bedloe-form-design_wrapper .gfield_description.validation_message,
.bedloe-form-design_wrapper .gfield_validation_message {
	background: transparent;
	border: 0;
	border-left: 2px solid var(--bedloe-error);
	padding: 0 0 0 10px;
	margin-top: 10px;
	color: var(--bedloe-error);
	font-family: var(--bedloe-font);
	font-size: 13px;
	font-weight: 400;
}

.bedloe-form-design_wrapper .gform_validation_errors {
	background: rgba(217, 139, 123, 0.08);
	border: 1px solid rgba(217, 139, 123, 0.35);
	border-radius: 0;
	box-shadow: none;
	padding: 16px 20px;
}

.bedloe-form-design_wrapper .gform_validation_errors > h2,
.bedloe-form-design_wrapper .gform_validation_errors .gform_submission_error {
	color: var(--bedloe-error);
	font-family: var(--bedloe-font);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.bedloe-form-design_wrapper .gform_validation_errors a {
	color: var(--bedloe-error);
}

.bedloe-form-design_wrapper .gform_confirmation_message {
	color: var(--bedloe-accent);
	font-family: var(--bedloe-font);
	font-size: var(--bedloe-text-size);
	font-weight: 400;
}

/* Error state keeps the underline treatment */
.bedloe-form-design_wrapper .gfield_error input,
.bedloe-form-design_wrapper .gfield_error select,
.bedloe-form-design_wrapper .gfield_error textarea {
	border-bottom-color: var(--bedloe-error);
	background-color: var(--bedloe-field-bg);
}

.bedloe-form-design_wrapper .gfield_error .gfield_label,
.bedloe-form-design_wrapper .gfield_error legend.gfield_label {
	color: var(--bedloe-label);
}

/* ============================================
   Optional: paint the dark surface when the
   form is not already inside a dark section
   ============================================ */

.bedloe-form-design_wrapper.bedloe-form-design--boxed_wrapper {
	background: #171714;
	padding: 48px 40px;
}

/* ============================================
   Responsive — matches the Elementor kit steps
   ============================================ */

@media (max-width: 1024px) {
	.bedloe-form-design_wrapper {
		--bedloe-text-size: 15px;
		--bedloe-gap-x: 28px;
		--bedloe-gap-y: 36px;
		--bedloe-label-space: 18px;
	}
}

@media (max-width: 767px) {
	.bedloe-form-design_wrapper {
		--bedloe-text-size: 14px;
		--bedloe-label-size: 11px;
		--bedloe-gap-y: 32px;
	}

	.bedloe-form-design_wrapper .gfield--type-radio .gfield_radio {
		gap: 14px 20px;
	}
}