/*
 * Gravity Forms — theme-level overrides for The Baltimore Station.
 *
 * Loaded by functions.php only when Gravity Forms is active. Assumes a modern
 * Gravity Forms (2.7+). Scoped to `.gform_wrapper` so it never bleeds into the
 * rest of the site. We set GF's CSS-API custom properties where available AND
 * provide concrete selector overrides so the brand styling holds across versions.
 */

.gform_wrapper {
	/* GF CSS API (modern theme framework).
	 *
	 * !important is REQUIRED on the colour variables. GF prints a per-form inline
	 * <style> that sets these same custom properties on an ID selector
	 * (#gform_wrapper_1[data-form-index="0"].gform-theme), which out-specifies our
	 * class rule — so without !important our brand red loses to GF's default blue
	 * (#204ce5) and every element GF paints from --gf-color-primary stays blue:
	 * most visibly the completed multi-step checkmark. Custom properties honour
	 * !important, and !important beats specificity, so this wins. */
	--gf-color-primary: var(--wp--preset--color--brand-red) !important;
	--gf-color-primary-rgb: 227, 29, 26 !important;
	--gf-color-primary-contrast: #ffffff !important;
	--gf-color-primary-darker: var(--wp--preset--color--brand-maroon) !important;
	--gf-ctrl-radius: 10px;
	--gf-ctrl-border-color: #d4d4d4;
	--gf-ctrl-border-color-focus: var(--wp--preset--color--brand-red);

	color: var(--wp--preset--color--ink);
}

/* Labels + required marker */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.35rem;
}
.gform_wrapper .gfield_required {
	color: var(--wp--preset--color--brand-red);
}

/* Text inputs, textareas, selects.
 * background-COLOR, not the `background` shorthand: the shorthand also resets
 * background-image to none, which wiped the drawn caret off every <select> and
 * left it appearance:none with no arrow — which macOS Chrome then renders as a
 * grey barber-pole hatch. The dedicated select rule below restores the caret. */
.gform_wrapper .gfield input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.gform_wrapper .gfield textarea,
.gform_wrapper .gfield select {
	width: 100%;
	border: 1px solid var(--gf-ctrl-border-color);
	border-radius: var(--gf-ctrl-radius);
	padding: 0.75rem 0.9rem;
	font-size: 1rem;
	line-height: 1.4;
	background-color: #fff;
	color: var(--wp--preset--color--ink);
	box-shadow: none;
}

/* Selects need an explicit appearance + caret. This rule matches GF's own
   .gform_wrapper .gfield select specificity and loads after it, so it wins the
   arrow room and the drawn chevron the shared rule can't provide. */
.gform_wrapper .gfield select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23220404' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 1.05rem;
}
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield textarea:focus,
.gform_wrapper .gfield select:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand-red);
	box-shadow: 0 0 0 3px rgba(227, 29, 26, 0.15);
}

/* Descriptions + validation */
.gform_wrapper .gfield_description {
	color: var(--wp--preset--color--gray-500);
	font-size: 0.85rem;
}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	color: var(--wp--preset--color--brand-red);
	font-size: 0.85rem;
	background: none;
	border: 0;
	padding: 0.25rem 0 0;
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: var(--wp--preset--color--brand-red);
}
.gform_wrapper .gform_validation_errors {
	border-radius: 12px;
	box-shadow: none;
}

/* Radios + checkboxes */
.gform_wrapper input[type="radio"],
.gform_wrapper input[type="checkbox"] {
	accent-color: var(--wp--preset--color--brand-red);
	width: 1.1rem;
	height: 1.1rem;
}

/* Submit / next / previous buttons — brand red pill */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper button.gform_button,
.gform_wrapper input.gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
	/* !important: beat GF's own theme stylesheet, which loads after ours and
	   would otherwise paint the button its default blue. */
	background: var(--wp--preset--color--brand-red) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 0.85rem 2rem;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper input.gform_button:hover,
.gform_wrapper .gform_next_button:hover {
	background: var(--wp--preset--color--brand-maroon) !important;
}
.gform_wrapper .gform_previous_button,
.gform_wrapper .gform_previous_button:hover {
	background: var(--wp--preset--color--gray-100) !important;
	color: var(--wp--preset--color--ink) !important;
}
.gform_wrapper .gform_previous_button {
	background: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--ink);
}

/* Field rhythm */
.gform_wrapper .gform_fields {
	gap: 1.1rem;
}

/* Confirmation message */
.gform_confirmation_wrapper .gform_confirmation_message {
	background: var(--wp--preset--color--brand-pink);
	color: var(--wp--preset--color--brand-maroon);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
}

/* Hide the "* indicates required fields" legend on every form, site-wide. */
.gform_required_legend {
	display: none !important;
}

/* ==========================================================================
   Newsletter band (bs/newsletter-cta) — inline, centered, on brand-red.
   ========================================================================== */
.bs-newsletter .gform_wrapper {
	max-width: 560px;
	margin-inline: auto;
	color: #fff;
}
.bs-newsletter .gform_wrapper form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 0.6rem;
}
.bs-newsletter .gform_wrapper .gform_body,
.bs-newsletter .gform_wrapper .gform-body {
	flex: 1 1 260px;
	margin: 0;
}
.bs-newsletter .gform_wrapper .gform_fields {
	gap: 0.5rem;
}
.bs-newsletter .gform_wrapper .gform_footer {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}
/* visually hide field labels in this compact band (keep for screen readers) */
.bs-newsletter .gform_wrapper .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.bs-newsletter .gform_wrapper .gfield input:not([type="submit"]) {
	border-radius: 999px !important;
	border: 0 !important;
	padding: 0.9rem 1.25rem !important;
	background: #fff !important;
}
.bs-newsletter .gform_wrapper .gform_footer input[type="submit"],
.bs-newsletter .gform_wrapper .gform_button,
.bs-newsletter .gform_wrapper input.gform_button {
	background: var(--wp--preset--color--brand-maroon) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 0.9rem 1.85rem !important;
	font-weight: 700;
	white-space: nowrap;
}
.bs-newsletter .gform_wrapper .gform_footer input[type="submit"]:hover,
.bs-newsletter .gform_wrapper .gform_button:hover,
.bs-newsletter .gform_wrapper input.gform_button:hover {
	background: #1a0303 !important;
}
.bs-newsletter .gform_wrapper .gfield_validation_message,
.bs-newsletter .gform_wrapper .validation_message {
	color: #fff;
}
.bs-newsletter .gform_confirmation_message {
	color: #fff;
	text-align: center;
}

/* Multi-page steps + progress bar -------------------------------------------
 * GF ships these as small left-hugging numbered pills and a blue progress bar.
 * Stretch the steps into a full-width bar across the top of the form and paint
 * everything brand red (percentbar_* classes are GF's own colour presets and
 * have to be overridden by name). */
.gform_wrapper .gf_page_steps {
	display: flex;
	width: 100%;
	gap: 0.75rem;
	margin: 0 0 1.75rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--wp--preset--color--gray-100, #e5e5e5);
}
.gform_wrapper .gf_step {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	opacity: 1;
	color: var(--wp--preset--color--gray-500, #737373);
}
.gform_wrapper .gf_step .gf_step_number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/* position:relative is load-bearing. GF draws the completed-step checkmark as
	   a .gf_step_number::after with `inset:0`, i.e. absolutely positioned to fill
	   its containing block. Without a positioned parent that block is some outer
	   ancestor, so the blue check floated off to the left of the number instead
	   of overlaying it — the "two mismatched circles" bug. Anchor it here and the
	   check sits exactly on the number as GF intends. */
	position: relative;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--wp--preset--color--gray-100, #e5e5e5);
	color: var(--wp--preset--color--gray-700, #404040);
	font-weight: 800;
	font-size: 0.875rem;
	line-height: 1;
}
.gform_wrapper .gf_step.gf_step_active {
	color: var(--wp--preset--color--ink, #0a0a0a);
}
.gform_wrapper .gf_step.gf_step_active .gf_step_number,
.gform_wrapper .gf_step.gf_step_completed .gf_step_number {
	background: var(--wp--preset--color--brand-red, #e31d1a);
	color: #fff;
}
.gform_wrapper .gf_step_label {
	line-height: 1.2;
}
@media (max-width: 600px) {
	.gform_wrapper .gf_step_label {
		display: none;
	}
	.gform_wrapper .gf_page_steps {
		gap: 0.5rem;
	}
}

.gform_wrapper .gf_progressbar_wrapper {
	margin-bottom: 1.75rem;
}
.gform_wrapper .gf_progressbar {
	background: var(--wp--preset--color--gray-100, #e5e5e5);
	border-radius: 999px;
	overflow: hidden;
}
.gform_wrapper .gf_progressbar_percentage,
.gform_wrapper .gf_progressbar_percentage.percentbar_blue,
.gform_wrapper .gf_progressbar_percentage.percentbar_gray,
.gform_wrapper .gf_progressbar_percentage.percentbar_green,
.gform_wrapper .gf_progressbar_percentage.percentbar_orange,
.gform_wrapper .gf_progressbar_percentage.percentbar_red,
.gform_wrapper .gf_progressbar_percentage.percentbar_spring,
.gform_wrapper .gf_progressbar_percentage.percentbar_blueridge {
	background: var(--wp--preset--color--brand-red, #e31d1a) !important;
	color: #fff !important;
	border-radius: 999px;
}

/* Native control accents — radios, checkboxes, range, and in-form links all
 * default to the browser/GF blue otherwise. */
.gform_wrapper input[type="radio"],
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="range"],
.gform_wrapper progress {
	accent-color: var(--wp--preset--color--brand-red, #e31d1a);
}
.gform_wrapper a:not(.gform_button) {
	color: var(--wp--preset--color--brand-red, #e31d1a);
}
.gform_wrapper .gfield_description a,
.gform_wrapper .gfield_consent_description a {
	text-decoration: underline;
}

/* Step indicator.
 * Colour comes from Gravity Forms' own CSS API variables — hand-overriding the
 * completed-state markup broke the tick, because GF composes it from a
 * pseudo-element plus a border and the pieces have to stay consistent. Set the
 * variables and let GF draw it. Layout (centring) is ours. */
.gform_wrapper .gf_step {
	justify-content: center;
	text-align: center;
}