/*
	Gravity Forms - layout only.

	The form now carries the approved design's own classes, applied by filters
	in functions.php:

		<form class="flex-31">          red-topped cream panel
		<label class="label-text-2">    uppercase 10px letterspaced label
		<input class="btn-outline">     white field, 1px #D9D5CE border
		<select class="btn-outline-3">
		<textarea class="btn-outline-4">
		<button class="btn-primary-6 hv-1">
		confirmation .rule-top-12 / .s-47 / .body-text-17 / .btn-outline-5 hv-13

	All of that styling comes straight from assets/css/style.css, unmodified.
	This file therefore only has to do three things:

	  1. Reproduce the two-column row layout. The design wrapped each pair of
	     fields in its own <div class="grid-5">. Gravity Forms renders one flat
	     list of fields and cannot nest rows, so the same two-column result is
	     produced with a grid on .gform_fields. The values are copied from
	     .grid-5: two equal columns, 20px gap.
	  2. Hide the honeypot, which the disabled Orbital stylesheet used to hide.
	  3. Style validation messages, which the static design never had.
*/

/* ---------- 1. Two-column rows (mirrors .grid-5) ---------- */

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gform_wrapper .gfield {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
}

.gform_wrapper .gfield--width-half {
	grid-column: span 1;
}

@media (max-width: 700px) {

	.gform_wrapper .gform_fields {
		grid-template-columns: 1fr;
	}

	.gform_wrapper .gfield--width-half {
		grid-column: 1 / -1;
	}
}

/* The label is a block above its field, as in the design. */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	display: block;
}

/* The design has no required markers on this form. */
.gform_wrapper .gfield_required {
	display: none;
}

/* Footer sits left, like the design's submit row. */
.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
}

.gform_wrapper .gform_ajax_spinner {
	margin-left: 14px;
}

/* ---------- 2. Honeypot ---------- */

.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---------- 3. Validation (no equivalent in the static design) ---------- */

.gform_wrapper .gform_validation_errors {
	grid-column: 1 / -1;
	margin: 0;
	padding: 18px 20px;
	background: #FFFFFF;
	border: 1px solid #CC1B22;
	border-radius: 0;
}

.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .gform_validation_errors .gform_submission_error {
	margin: 0;
	font: 500 15px/1.4 'Instrument Sans', sans-serif;
	color: #CC1B22;
}

.gform_wrapper .gfield_error .btn-outline,
.gform_wrapper .gfield_error .btn-outline-3,
.gform_wrapper .gfield_error .btn-outline-4 {
	border-color: #CC1B22;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	margin: 8px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font: 400 13px/1.5 'Instrument Sans', sans-serif;
	color: #CC1B22;
}

.gform_wrapper .validation_message--hidden-on-empty:empty {
	display: none;
}

/* Focus state, since the design's fields set outline:none. */
.gform_wrapper .btn-outline:focus,
.gform_wrapper .btn-outline-3:focus,
.gform_wrapper .btn-outline-4:focus {
	border-color: #CC1B22;
}

.gform_wrapper .gfield_description {
	margin: 8px 0 0;
	padding: 0;
	font: 400 13px/1.5 'Instrument Sans', sans-serif;
	color: #6A6B6E;
}

/* =========================================================================
   Orbital override guard
   =========================================================================

   functions.php dequeues the Gravity Forms "Orbital" stylesheet, which is what
   paints the blue button, rounded inputs and sentence-case labels. If it ever
   loads anyway - a plugin update re-registering the handle, a caching layer
   serving an old page, a block-editor form with its own style settings - its
   selectors are long enough to beat a single class like .btn-outline.

   These rules re-assert the approved design's values at a specificity Orbital
   cannot beat. Every value below is copied verbatim from assets/css/style.css,
   which is never modified:

       .label-text-2   500 10px/1 Instrument Sans, .14em, uppercase, #6A6B6E
       .btn-outline    #FFF, 1px solid #D9D5CE, 14px 16px, 400 15px/1.4, #191713
       .btn-primary-6  #CC1B22, no border, #FFF, 16px 30px, 500 14px/1, .04em
   ========================================================================= */

.gform_wrapper .gfield_label.label-text-2,
.gform_wrapper legend.gfield_label.label-text-2 {
	font: 500 10px/1 'Instrument Sans', sans-serif !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: #6A6B6E !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
}

.gform_wrapper .gfield_label.label-text-2 .gform-field-label__text {
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	color: inherit !important;
}

.gform_wrapper .ginput_container input.btn-outline,
.gform_wrapper .ginput_container select.btn-outline-3,
.gform_wrapper .ginput_container textarea.btn-outline-4 {
	width: 100% !important;
	box-sizing: border-box !important;
	background: #FFFFFF !important;
	background-image: none !important;
	border: 1px solid #D9D5CE !important;
	border-radius: 0 !important;
	padding: 14px 16px !important;
	font: 400 15px/1.4 'Instrument Sans', sans-serif !important;
	color: #191713 !important;
	outline: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
}

.gform_wrapper .ginput_container select.btn-outline-3 {
	appearance: none !important;
	cursor: pointer !important;
}

.gform_wrapper .ginput_container textarea.btn-outline-4 {
	resize: vertical !important;
	font-family: 'Instrument Sans', sans-serif !important;
}

.gform_wrapper .ginput_container input.btn-outline:focus,
.gform_wrapper .ginput_container select.btn-outline-3:focus,
.gform_wrapper .ginput_container textarea.btn-outline-4:focus {
	border-color: #CC1B22 !important;
}

.gform_wrapper .gform_footer button.btn-primary-6,
.gform_wrapper .gform-footer button.btn-primary-6 {
	background: #CC1B22 !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	color: #FFFFFF !important;
	padding: 16px 30px !important;
	font: 500 14px/1 'Instrument Sans', sans-serif !important;
	letter-spacing: .04em !important;
	text-transform: none !important;
	box-shadow: none !important;
	width: auto !important;
	min-height: 0 !important;
	cursor: pointer !important;
}

.gform_wrapper .gform_footer button.btn-primary-6:hover,
.gform_wrapper .gform-footer button.btn-primary-6:hover {
	background: #A61319 !important;
}