/* ==========================================================================
   CRCS Legal - form styling

   Gravity Forms renders here in its LEGACY markup (a <ul class="gform_fields">
   of <li class="gfield">, wrapper class gform_legacy_markup_wrapper), because
   the theme drops GF's orbital framework CSS.

   Source order alone does NOT beat GF's legacy stylesheet - its selectors are
   more specific, and specificity is decided before order. Two rules in
   particular have to be outranked deliberately:

     .gform_legacy_markup_wrapper ul.gform_fields                 (0,2,1)
        -> display:block, which makes any grid on .gform_fields inert

     html:not([dir="rtl"]) .gform_legacy_markup_wrapper
       ul.gform_fields:not(.top_label) .ginput_container:not(...) (high)
        -> margin-left:29%; width:70%, a left-label layout that indents every
           control into an empty gutter. `hidden_label` is not `top_label`,
           so it applies here.

     .gform_legacy_markup_wrapper input:not([type=radio])...      (0,7,1)
        -> font-family:inherit, which puts the body face on every text input
           while the textarea (a weaker rule) correctly gets the heading face.

   Every selector below is therefore scoped through .gform_legacy_markup_wrapper
   and matched to GF's own shape. Measured after the change: the fields lay out
   two-up, every control fills its column, and all five controls compute Poppins.
   ========================================================================== */

.gform_wrapper form { margin: 0; }

/* Layout: two columns, beating .gform_legacy_markup_wrapper ul.gform_fields. */
.gform_legacy_markup_wrapper ul.gform_fields,
.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Live leaves 15px between field rows, not 20 - measured 62px from the top
	   of one 47px row to the top of the next. */
	gap: 15px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gform_legacy_markup_wrapper ul.gform_fields > li.gfield,
.gform_wrapper .gfield {
	grid-column: span 2;
	min-width: 0;
	margin: 0;
	padding: 0;
	max-width: none;
}
.gform_legacy_markup_wrapper ul.gform_fields > li.gfield--half,
.gform_wrapper .gfield--half { grid-column: span 1; }

/* Kill the legacy left-label indent. */
html:not([dir='rtl']) .gform_legacy_markup_wrapper ul.gform_fields:not(.top_label) .ginput_container,
html[dir='rtl'] .gform_legacy_markup_wrapper ul.gform_fields:not(.top_label) .ginput_container,
.gform_legacy_markup_wrapper .ginput_container,
.gform_wrapper .ginput_container {
	margin: 0;
	width: 100%;
	max-width: none;
}

/* Labels are visually hidden - the placeholder carries the name, as live did -
   but they stay in the accessibility tree. */
.gform_legacy_markup_wrapper .gfield_label,
.gform_wrapper .gfield_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	margin: -1px;
}
.gform_wrapper .gfield-visible-label .gfield_label {
	position: static !important;
	width: auto;
	height: auto;
	clip-path: none;
	margin: 0 0 6px;
	display: block;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 500;
	color: var(--navy);
}

/* The honeypot is a real, focusable field that must not be seen or tabbed to. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot,
.gform_legacy_markup_wrapper .gform_validation_container {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Controls. The font-family selector is written to outrank GF's
   `input:not([type=radio]):not(...)` chain, which is specificity (0,7,1). */
.gform_legacy_markup_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']),
.gform_legacy_markup_wrapper textarea,
.gform_legacy_markup_wrapper select,
.gform_wrapper input[type='text'],
.gform_wrapper input[type='email'],
.gform_wrapper input[type='tel'],
.gform_wrapper input[type='url'],
.gform_wrapper input[type='number'],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	min-height: 47px;
	padding: 6px 16px;
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 500;
	line-height: 22.4px;
	color: var(--navy);
	background: var(--grey);
	border: 1px solid var(--grey);
	border-radius: var(--radius);
	appearance: none;
	box-sizing: border-box;
}
/* 193px on live. min-height alone let the rows attribute and the grid push it
   to 320px, which made the contact page 121px taller than live's. */
.gform_legacy_markup_wrapper textarea,
.gform_wrapper textarea { height: 193px; min-height: 193px; resize: vertical; padding-block: 12px; }
.gform_wrapper ::placeholder { color: var(--navy); opacity: 1; }
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus { border-color: var(--green); }

/* On the GREY CTA band the fields invert to white. On the white one (the
   homepage contact block) they stay grey - measured on live, where the
   homepage fields are #F5F5F5 and the service-page CTA fields are #FFFFFF. */
/* Written through the same legacy selector shape as the base rule above. A
   plainer `.cta .gform_wrapper input` loses to GF's
   `input:not([type=radio]):not(...)` chain, and the field then rendered #F5F5F5
   on the #F5F5F5 band - a completely invisible input. */
.cta:not(.cta--white) .gform_legacy_markup_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']),
.cta:not(.cta--white) .gform_legacy_markup_wrapper textarea,
.cta:not(.cta--white) .gform_legacy_markup_wrapper select,
.cta:not(.cta--white) .gform_wrapper input,
.cta:not(.cta--white) .gform_wrapper textarea,
.cta:not(.cta--white) .gform_wrapper select { background: var(--white); border-color: var(--white); }

.gform_legacy_markup_wrapper .gform_footer,
.gform_wrapper .gform_footer {
	grid-column: span 2;
	margin: 20px 0 0;
	padding: 0;
	width: 100%;
}
.gform_legacy_markup_wrapper .gform_footer input[type='submit'],
.gform_wrapper .gform_button {
	display: block;
	width: 100%;
	font-family: var(--font-head);
	font-size: 16px;
	line-height: 16px;
	font-weight: 500;
	color: var(--white);
	background: var(--green);
	padding: 15px 30px;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.gform_legacy_markup_wrapper .gform_footer input[type='submit']:hover,
.gform_wrapper .gform_button:hover { background: var(--green-dark); }

.gform_wrapper .gfield_required { color: var(--green); }
.gform_legacy_markup_wrapper .gfield_description.validation_message,
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	font-family: var(--font-body);
	font-size: 14px;
	color: #b32020;
	background: none;
	border: 0;
	padding: 6px 0 0;
	margin: 0;
}
.gform_legacy_markup_wrapper .validation_error,
.gform_wrapper .gform_validation_errors {
	font-family: var(--font-body);
	font-size: 14px;
	color: #b32020;
	background: #fdf2f2;
	border: 1px solid #f3c9c9;
	border-radius: var(--radius);
	padding: 12px 16px;
	margin: 0 0 20px;
	text-align: left;
}
.gform_legacy_markup_wrapper .gfield_error,
.gform_wrapper .gfield_error { background: none; border: 0; padding: 0; }
.gform_legacy_markup_wrapper .gfield_error input,
.gform_legacy_markup_wrapper .gfield_error textarea { border-color: #b32020; }

.gform_confirmation_message {
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 500;
	color: var(--navy);
	background: #eef6ee;
	border: 1px solid #cbe5c9;
	border-radius: var(--radius);
	padding: 18px 22px;
	text-align: center;
}
.gform_wrapper .gform_required_legend { display: none; }

@media (max-width: 767px) {
	.gform_legacy_markup_wrapper ul.gform_fields,
	.gform_wrapper .gform_fields { grid-template-columns: minmax(0, 1fr); }
	.gform_legacy_markup_wrapper ul.gform_fields > li.gfield,
	.gform_legacy_markup_wrapper ul.gform_fields > li.gfield--half,
	.gform_wrapper .gfield,
	.gform_wrapper .gfield--half { grid-column: span 1; }
	.gform_legacy_markup_wrapper .gform_footer,
	.gform_wrapper .gform_footer { grid-column: span 1; }
}

/* The CTA bands run the button the full width of their narrow form (measured
   510/510 on live), but the wide contact-us form does not: live renders a
   238px button left-aligned in an 852px form. Written through the legacy
   wrapper so it outranks the block rule above. */
.grid-2--contact .gform_legacy_markup_wrapper .gform_footer input[type='submit'],
.grid-2--contact .gform_wrapper .gform_button { width: 238px; }

/* --------------------------------------------------------------------------
   Row height, matched to live

   Live's field rows are exactly as tall as the 47px control. The build's were
   67px, from three separate causes, each needing a selector that outranks
   Gravity Forms' own:

     .ginput_container   margin-top: 8px   (GF re-applies it past the reset above)
     the control         inline-block      (a line box adds ~12px of descender)
     textarea            height: 320px     (GF's .medium rule, specificity 0,2,1)

   Together they made the contact page 121px taller than live's.
   -------------------------------------------------------------------------- */
.gform_legacy_markup_wrapper ul.gform_fields > li.gfield > .ginput_container,
.gform_wrapper ul.gform_fields > li.gfield > .ginput_container { margin: 0; }

.gform_legacy_markup_wrapper ul.gform_fields input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']),
.gform_legacy_markup_wrapper ul.gform_fields textarea,
.gform_legacy_markup_wrapper ul.gform_fields select { display: block; margin: 0; }

.gform_legacy_markup_wrapper ul.gform_fields textarea,
.gform_wrapper ul.gform_fields textarea { height: 193px; }