/* ─── Gravity Forms — Orbital Markup Styling ────────────────────────────── */
/*
 * Same visual target as the old DMA site's "Ask about {Service}" form CTA
 * (gotheme2015/stylesheets/layout.scss — .industry .form-wrap .info-wrap
 * .gform_wrapper, base + @media (min-width: 992px) override), reference:
 * https://www.davidmason.com/services/civil-engineering/ — labels hidden in
 * favor of placeholder text, transparent inputs with an italic charcoal
 * border, and a red Space Mono submit label with an arrow icon that nudges
 * right on hover.
 *
 * Re-targeted from the old .gform_legacy_markup_wrapper selectors to the
 * default/Orbital theme's markup (inc/gravity-forms.php no longer forces
 * legacy mode). Two structural differences from legacy worth noting:
 *   - Field label hiding ("Field Label Visibility: Hidden" on each field)
 *     is already handled accessibly by Gravity Forms' own foundation CSS
 *     (.hidden_label .gfield_label — visually hidden, still screen-reader
 *     visible) — no display:none override needed or wanted here.
 *   - The field list is a <div class="gform_fields"> of <div class="gfield">
 *     siblings now, not a legacy <ul><li>, so the two-column layout below
 *     targets .gform_fields directly instead of ul/li.
 */

.gform_wrapper.gform-theme--orbital {
	margin-top: 8px;
}

.gform_wrapper.gform-theme--orbital .gform_fields {
	margin: 0;
	padding: 0;
	list-style: none;
	row-gap: 0;
}

.gform_wrapper.gform-theme--orbital .gfield {
	margin: 0;
	padding-right: 0;
}

.gform_wrapper.gform-theme--orbital .ginput_container {
	margin: 0;
}

.gform_wrapper.gform-theme--orbital .ginput_container input,
.gform_wrapper.gform-theme--orbital .ginput_container textarea,
.gform_wrapper.gform-theme--orbital .ginput_container select {
	background-color: transparent !important;
	border: 2px solid #646569 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 18px;
	height: 48px;
	font-style: italic;
	font-family: inherit;
	margin-top: 16px;
	padding-left: 16px !important;
	width: 100%;
	box-sizing: border-box;
}

.gform_wrapper.gform-theme--orbital .ginput_container textarea {
	height: 160px;
	padding-top: 12px !important;
}

.gform_wrapper.gform-theme--orbital input::placeholder,
.gform_wrapper.gform-theme--orbital textarea::placeholder {
	font-style: italic;
	color: #646569;
	opacity: 1;
}

/* ── Select: same transparent/bordered shell as the other inputs, gray
   italic text matching their placeholder color, and a thin gray chevron
   replacing the browser's native arrow (old site used a plain
   down-angle-teal.png at the same position/size — recreated as an inline
   SVG here instead of shipping another image asset). ────────────────────── */
.gform_wrapper.gform-theme--orbital .ginput_container select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: #646569 !important;
	padding-right: 40px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 6 5-6' stroke='%23646569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

.gform_wrapper.gform-theme--orbital .ginput_container select:focus {
	outline: none;
}

.gform_wrapper.gform-theme--orbital .ginput_container select option {
	font-style: normal;
	color: #646569;
}

/* ── Submit button: red Space Mono label + arrow icon, no border ────────── */
.gform_wrapper.gform-theme--orbital .gform_footer {
	padding: 16px 0 0;
	margin: 0 auto;
	width: 125px;
	text-align: center;
}

.gform_wrapper.gform-theme--orbital .gform_footer .gform_button {
	transition: all 0.5s ease;
	color: #e4002b !important;
	/* !important is required on all three: Gravity Forms' own framework CSS
	   (gravity-forms-theme-framework.min.css) has a same-element rule —
	   `.gform-theme--framework.gform-theme.gform_wrapper
	   input[type=submit].button.gform_button` — with higher specificity
	   (6 classes/attrs) than this selector (4 classes), so its
	   var(--gf-ctrl-font-family)-driven defaults silently won over these
	   three properties, rendering a small serif fallback font instead of
	   bold Space Mono. Every other property here already had !important
	   (hence color/background/padding looked right while the font didn't). */
	font-family: 'space-mono', 'Space Mono', monospace !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	min-height: 1px !important;
	border: none !important;
	background-color: transparent !important;
	display: inline-block !important;
	box-sizing: content-box !important;
	text-align: left !important;
	text-indent: 0 !important;
	width: auto !important;
	padding: 0 34px 0 0 !important;
	margin: 0 auto;
	background-image: url('../img/right-arrow-red.svg');
	background-repeat: no-repeat;
	background-size: 22px 22px;
	/* Fixed offset from the box's right edge (not a %, which places the
	   icon closer to the text the narrower the auto-sized button is,
	   overlapping "Submit" instead of trailing it). */
	background-position: right 8px center !important;
	cursor: pointer;
	/* Kill the native button chrome browsers add on input[type=submit],
	   which otherwise shows a shadow on hover/focus/active. Keyboard focus
	   still gets the browser's default outline — only box-shadow is reset. */
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
}

.gform_wrapper.gform-theme--orbital .gform_footer .gform_button:hover,
.gform_wrapper.gform-theme--orbital .gform_footer .gform_button:focus,
.gform_wrapper.gform-theme--orbital .gform_footer .gform_button:active {
	/* Nudge right on hover, same as the old site, but never past 0 — a
	   negative offset here pushes the icon beyond the button's box, and
	   since background images clip to it, the arrow gets cut off. */
	background-position: right 0 center !important;
	box-shadow: none !important;
}

/* ── Desktop (≥992px): two fields per row, message full-width ───────────── */
@media (min-width: 992px) {
	.gform_wrapper.gform-theme--orbital .gform_fields {
		display: flex;
		flex-wrap: wrap;
		gap: 0 15px;
	}

	.gform_wrapper.gform-theme--orbital .gfield {
		width: 100%;
	}

	.gform_wrapper.gform-theme--orbital .gfield--width-half {
		width: calc(50% - 7.5px);
	}

	.gform_wrapper.gform-theme--orbital .gfield .ginput_container input,
	.gform_wrapper.gform-theme--orbital .gfield .ginput_container select,
	.gform_wrapper.gform-theme--orbital .gfield .ginput_container_textarea textarea {
		margin-top: 24px;
	}

	.gform_wrapper.gform-theme--orbital .gfield .ginput_container_textarea {
		padding: 0 !important;
	}

	.gform_wrapper.gform-theme--orbital .gform_footer {
		text-align: left;
		margin: 0;
		width: auto;
	}
}

/* ── Footer newsletter form: match .dma-button.red-back exactly ─────────────
   The site-wide submit-button rules above (red text + arrow icon, no border)
   are overridden here for the footer's Gravity Forms widget only, so its
   button matches the same white-bordered/red-hover pill button used
   elsewhere on the dark teal CTA sections (.dma-pa-cta/.dma-na-cta
   .dma-button). #colophon's ID specificity beats those !important rules
   without needing !important on every line here. */
#colophon .gform_wrapper.gform-theme--orbital .gform_footer {
	width: auto;
	margin: 0;
	text-align: left;
}

#colophon .gform_wrapper.gform-theme--orbital .gform_footer .gform_button {
	display: inline-block !important;
	box-sizing: content-box !important;
	border: 2px solid #fff !important;
	border-bottom: 7px solid #fff !important;
	border-radius: 3px !important;
	padding: 4px 24px !important;
	font-family: var(--dma-font-primary) !important;
	font-weight: 700 !important;
	font-size: 28px !important;
	line-height: 34px !important;
	min-height: 1px !important;
	text-align: center !important;
	text-indent: 0 !important;
	width: auto !important;
	color: #fff !important;
	background-color: transparent !important;
	background-image: linear-gradient(to bottom, transparent 50%, #fff 50%) !important;
	background-size: 100% 200% !important;
	background-position: 0 0 !important;
	transition: all 0.5s ease-in-out !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
}

#colophon .gform_wrapper.gform-theme--orbital .gform_footer .gform_button:hover,
#colophon .gform_wrapper.gform-theme--orbital .gform_footer .gform_button:focus,
#colophon .gform_wrapper.gform-theme--orbital .gform_footer .gform_button:active {
	background-position: 0 100% !important;
	color: var(--dma-red) !important;
	box-shadow: none !important;
}