/**
 * FlawTech - Gravity Forms styled to match the previous Ninja Forms appearance.
 *
 * Values were taken from computed styles on the live Ninja Forms at
 * flawtech.com (contact, request-a-quote, custom-intake-form) so the
 * rebuilt forms read the same to visitors.
 *
 * Reference values:
 *   label        Roboto 16px/24px, 400, #7a7a7a
 *   text input   174 x 32, 1px solid rgba(0,0,0,.1), radius 0, 16px, #404040
 *   select       ~178 wide, 1px solid #767676, radius 0
 *   textarea     100% wide, min 54 tall, radius 4px
 *   submit       #e96656, #fff, radius 4px, 13px 35px, 14px, uppercase
 *   html heading h2 26px, 400, #7a7a7a
 *   repeater row "Specimen N" 24px/700 #222 over a 2px #d84b1a rule
 */

/* ---------- Orbital theme variables ---------- */
/*
 * Gravity Forms' framework rules carry higher specificity than anything sane
 * written here, but they resolve through these custom properties - so set the
 * properties rather than fight the cascade.
 */
.gform_wrapper.gform-theme--orbital {
	--gf-ctrl-radius: 0;
	--gf-ctrl-font-size: 16px;
	--gf-ctrl-label-font-size: 16px;
	--gf-ctrl-label-color-primary: #7a7a7a;
	--gf-ctrl-label-font-weight: 400;
	--gf-ctrl-border-color-rest: rgba( 0, 0, 0, .1 );
	--gf-ctrl-bg-color-rest: #fff;
	--gf-ctrl-color-rest: #404040;

	/* Ninja Forms' message/notes boxes were short. */
	--gf-ctrl-textarea-height: 54px;

	/* Ninja Forms drew no box around the repeater rows. */
	--gf-field-repeater-nested-border-size: 0;
	--gf-field-repeater-nested-border-radius: 0;

	/* Submit button, matching the old Ninja Forms button. */
	--gf-ctrl-btn-bg-color-primary: #e96656;
	--gf-ctrl-btn-bg-color-hover-primary: #d8543f;
	--gf-ctrl-btn-border-color-primary: #e96656;
	--gf-ctrl-btn-radius: 4px;
	--gf-ctrl-btn-font-size: 14px;
	--gf-ctrl-btn-padding-y: 13px;
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-font-weight: 400;

	/*
	 * Height and horizontal padding resolve through the size variant, not the
	 * bare --gf-ctrl-btn-* properties, so the "md" variant is what has to move.
	 */
	--gf-ctrl-btn-size: 47px;
	--gf-ctrl-btn-size-md: 47px;
	--gf-ctrl-btn-padding-x: 35px;
	--gf-ctrl-btn-padding-x-md: 35px;
}

/* ---------- Labels ---------- */
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #7a7a7a;
	margin-bottom: 0;
}

/* Ninja Forms rendered the required marker as a plain asterisk, not a coloured one. */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required .gfield_required_text {
	color: #7a7a7a;
	font-weight: 400;
	font-size: 16px;
}

/* ---------- Text-style inputs (narrow, as Ninja Forms rendered them) ---------- */
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container input[type="date"] {
	width: 174px;
	max-width: 100%;
	height: 32px;
	padding: 3px;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #404040;
	background-color: #fff;
	border: 1px solid rgba( 0, 0, 0, .1 );
	border-radius: 0;
	box-shadow: none;
}

.gform_wrapper .ginput_container select {
	width: 178px;
	max-width: 100%;
	padding: 1px 2px;
	font-family: sans-serif;
	font-size: 16px;
	color: #404040;
	background-color: #fff;
	border: 1px solid #767676;
	border-radius: 0;
	height: auto;
}

/* Message / notes fields ran the full width of the form, and were short. */
.gform_wrapper .ginput_container textarea {
	width: 100%;
	height: 54px;
	min-height: 54px;
	padding: 2px 3px;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #404040;
	background-color: #fff;
	border: 1px solid rgba( 0, 0, 0, .1 );
	border-radius: 4px;
	box-shadow: none;
}

/*
 * Ninja Forms stacked label and input tight against each other with no gap
 * between rows; Orbital adds a generous grid gap, so close it up.
 */
.gform_wrapper .gfield {
	margin-bottom: 0;
}

.gform_wrapper .gform_fields {
	row-gap: 0;
	grid-row-gap: 0;
}

.gform_wrapper .ginput_container {
	margin-top: 0;
}

/* ---------- Submit button ---------- */
/*
 * The theme paints every .button with its accent colour using !important
 * (inline, from the customiser), so background and colour have to answer in
 * kind. Everything else here wins on specificity alone.
 */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button.gform_button,
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_page_footer button.gform_button {
	width: auto;
	height: 47px;
	min-height: 47px;
	padding: 13px 35px;
	font-family: sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	text-transform: uppercase;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	margin: 10px 0 0;
	background-color: #e96656 !important;
	color: #fff !important;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button.gform_button:hover,
.gform_wrapper .gform_page_footer button.gform_button:hover {
	background-color: #d8543f !important;
}

/* ---------- HTML fields rendered as section headings ---------- */
.gform_wrapper .gfield--type-html h1,
.gform_wrapper .gfield--type-html h2,
.gform_wrapper .gfield--type-html h3 {
	font-size: 26px;
	font-weight: 400;
	color: #7a7a7a;
}

/* ---------- Centred forms: Contact (1) and Quote Request (2) ---------- */
#gform_wrapper_1 .gform_fields,
#gform_wrapper_1 .gfield,
#gform_wrapper_1 .gform_footer,
#gform_wrapper_2 .gform_fields,
#gform_wrapper_2 .gfield,
#gform_wrapper_2 .gform_footer {
	text-align: center;
}

#gform_wrapper_1 .ginput_container,
#gform_wrapper_2 .ginput_container {
	text-align: center;
}

/*
 * Orbital lays fields out on a grid, so the narrow inputs are grid items and
 * text-align alone will not move them - they need auto margins.
 */
#gform_wrapper_1 .ginput_container input,
#gform_wrapper_1 .ginput_container select,
#gform_wrapper_2 .ginput_container input,
#gform_wrapper_2 .ginput_container select {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#gform_wrapper_1 .gform_footer,
#gform_wrapper_2 .gform_footer {
	display: block;
}

#gform_wrapper_1 .gform_footer button.gform_button,
#gform_wrapper_1 .gform_footer input[type="submit"],
#gform_wrapper_2 .gform_footer button.gform_button,
#gform_wrapper_2 .gform_footer input[type="submit"] {
	margin-left: auto;
	margin-right: auto;
}

/*
 * The client's original Ninja Forms CSS forced checkbox and radio lists back to
 * left alignment inside the centred form, so keep that.
 */
#gform_wrapper_1 .gfield_checkbox,
#gform_wrapper_1 .gfield_radio,
#gform_wrapper_2 .gfield_checkbox,
#gform_wrapper_2 .gfield_radio {
	text-align: left;
	display: inline-block;
}

/* ---------- Custom Intake (3): left aligned, as before ---------- */
#gform_wrapper_3 .gform_fields,
#gform_wrapper_3 .gfield,
#gform_wrapper_3 .gform_footer {
	text-align: left;
}

/* ---------- Repeater rows ---------- */
/*
 * Ninja Forms printed a numbered <legend> ("Specimen 1", "Specimen 2", ...)
 * above each repeater row. Gravity Forms has no equivalent, so the heading is
 * recreated with a counter. The hidden .gfield_repeater_template is excluded so
 * it does not consume a number.
 */
.gform_wrapper .gfield_repeater_items {
	counter-reset: ft-specimen;
}

.gform_wrapper .gfield_repeater_items > .gfield_repeater_item::before {
	counter-increment: ft-specimen;
	content: "Specimen " counter( ft-specimen );
	display: block;
	width: 100%;
	/* The row is a multi-column grid, so the heading has to span every column. */
	grid-column: 1 / -1;
	white-space: nowrap;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #222;
	text-align: left;
	border-bottom: 2px solid #d84b1a;
	padding-bottom: 8px;
	margin-bottom: 20px;
}

.gform_wrapper .gfield_repeater_item {
	margin-bottom: 28px;
}

/*
 * The per-row "Specimen N" heading replaces the field's own label, which would
 * otherwise print a stray "Specimen" above the first row.
 */
.gform_wrapper .gfield--type-repeater > .gfield_label,
.gform_wrapper fieldset.gfield--type-repeater > legend.gfield_label,
.gform_wrapper .gfield_repeater_container > legend.gfield_label {
	display: none;
}

/* Ninja Forms drew no box around the repeater or its rows. */
.gform_wrapper .gfield_repeater_items,
.gform_wrapper .gfield_repeater_container,
.gform_wrapper .gfield_repeater_item,
.gform_wrapper .gfield_repeater_wrapper,
.gform_wrapper .gform-repeater-fields-list {
	border: 0;
	background: none;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

/* Repeater add / remove controls in the site's accent colour. */
.gform_wrapper .gfield_repeater_buttons button.add_repeater_item,
.gform_wrapper .gfield_repeater_buttons button.remove_repeater_item {
	font-family: sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	color: #fff;
	background-color: #e96656;
	border: 0;
	border-radius: 4px;
	padding: 8px 18px;
	cursor: pointer;
}

.gform_wrapper .gfield_repeater_buttons button.add_repeater_item:hover,
.gform_wrapper .gfield_repeater_buttons button.remove_repeater_item:hover {
	background-color: #d8543f;
}

/* Checkbox and radio choices sat on their own lines, left aligned. */
.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
	text-align: left;
	margin-bottom: 2px;
}

.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
	font-size: 16px;
	font-weight: 400;
	color: #404040;
}

/* ---------- Small screens ---------- */
@media ( max-width: 600px ) {
	.gform_wrapper .ginput_container input[type="text"],
	.gform_wrapper .ginput_container input[type="email"],
	.gform_wrapper .ginput_container input[type="tel"],
	.gform_wrapper .ginput_container input[type="url"],
	.gform_wrapper .ginput_container input[type="number"],
	.gform_wrapper .ginput_container input[type="date"],
	.gform_wrapper .ginput_container select {
		width: 100%;
	}
}