/*
 * Gravity Forms - Lindy Truter
 *
 * Editorial and quiet: hairline underlines instead of boxes, small letterspaced
 * uppercase labels, a square bordered button matching the site's .btn.
 *
 * Two traps this file works around:
 *  - the theme sets `html { font-size: 62.5% }`, so 1rem is 10px. Everything
 *    here is px, deliberately.
 *  - the 198KB theme bundle has `.gform_wrapper .gform_fields .gfield
 *    input[type=text]` (0,4,1) and GF's framework has its own control rules, so
 *    selectors are scoped deep enough to win on specificity, not source order.
 */

.gform_wrapper.gform-theme--orbital {
	--lt-ink: #272727;
	--lt-hairline: #d8d8d8;
	--lt-hairline-hover: #9a9a9a;
	--lt-muted: #8a8a8a;

	--gf-color-primary: #272727;
	--gf-color-primary-rgb: 39, 39, 39;
	--gf-color-primary-contrast: #ffffff;
	--gf-color-primary-darker: #000000;
	--gf-ctrl-bg-color: transparent;
	--gf-ctrl-bg-color-hover: transparent;
	--gf-ctrl-bg-color-focus: transparent;
	--gf-ctrl-border-color: #d8d8d8;
	--gf-ctrl-border-color-hover: #9a9a9a;
	--gf-ctrl-border-color-focus: #272727;
	--gf-ctrl-radius: 0;
	--gf-ctrl-btn-radius: 0;
	--gf-ctrl-accent-color: #272727;

	/* vertical rhythm between fields */
	--gf-field-gap-y: 44px;
	--gf-form-gap-y: 44px;

	max-width: 640px;
	margin: 0 auto;
	font-family: 'Lato', sans-serif;
}

.gform_wrapper.gform-theme--orbital .gform_fields {
	row-gap: 44px;
}

/* Title / description ---------------------------------------------------- */

.gform_wrapper.gform-theme--orbital .gform_title {
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lt-ink);
	margin: 0 0 10px;
}

.gform_wrapper.gform-theme--orbital .gform_description {
	display: block;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	color: #686868;
	margin: 0 0 40px;
	max-width: 52ch;
}

/* Labels ----------------------------------------------------------------- */

.gform_wrapper.gform-theme--orbital .gfield_label,
.gform_wrapper.gform-theme--orbital legend.gfield_label {
	display: block;
	font-weight: 400;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lt-ink);
	margin: 0 0 12px;
}

.gform_wrapper.gform-theme--orbital .gfield_required {
	color: var(--lt-muted);
	font-size: 10px;
	letter-spacing: 0.1em;
	margin-left: 8px;
}

/* Sub-labels under complex fields: "First Name" / "Surname".
   Target the sub-label class only. A `.ginput_container label` catch-all also
   hits the checkbox/radio labels and shifts them out of line with the box. */
.gform_wrapper.gform-theme--orbital .gform_fields .gfield .gform-field-label--type-sub {
	display: block;
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: none;
	color: #b3b3b3;
	margin: 8px 0 0;
}

.gform_wrapper.gform-theme--orbital .gfield_description {
	font-weight: 300;
	font-size: 13px;
	color: var(--lt-muted);
	padding-top: 8px;
}

/* Text controls: hairline underline, no box ------------------------------ */

.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='text'],
.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='email'],
.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='tel'],
.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='url'],
.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='number'],
.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='password'],
.gform_wrapper.gform-theme--orbital .gform_fields .gfield textarea,
.gform_wrapper.gform-theme--orbital .gform_fields .gfield select {
	width: 100%;
	height: auto;
	border: 0;
	border-bottom: 1px solid var(--lt-hairline);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	padding: 12px 0;
	font-family: inherit;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: var(--lt-ink);
	transition: border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	/* the theme bundle sets these on the same elements */
	text-transform: none;
	margin-bottom: 0;
}

.gform_wrapper.gform-theme--orbital .gform_fields .gfield textarea {
	min-height: 160px;
	resize: vertical;
}

.gform_wrapper.gform-theme--orbital .gform_fields .gfield input:hover,
.gform_wrapper.gform-theme--orbital .gform_fields .gfield textarea:hover,
.gform_wrapper.gform-theme--orbital .gform_fields .gfield select:hover {
	border-bottom-color: var(--lt-hairline-hover);
}

.gform_wrapper.gform-theme--orbital .gform_fields .gfield input:focus,
.gform_wrapper.gform-theme--orbital .gform_fields .gfield textarea:focus,
.gform_wrapper.gform-theme--orbital .gform_fields .gfield select:focus {
	border-bottom-color: var(--lt-ink);
	outline: none;
	box-shadow: none;
}

.gform_wrapper.gform-theme--orbital ::placeholder {
	color: #b5b5b5;
	font-weight: 300;
}

.gform_wrapper.gform-theme--orbital .gform_fields .gfield select {
	background-image: linear-gradient(45deg, transparent 50%, #272727 50%), linear-gradient(135deg, #272727 50%, transparent 50%);
	background-position: calc(100% - 13px) calc(50% + 1px), calc(100% - 8px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 28px;
}

/* space between the two halves of complex fields */
.gform_wrapper.gform-theme--orbital .ginput_complex {
	column-gap: 32px;
	row-gap: 24px;
}

/* Checkboxes and radios -------------------------------------------------- */
/* GF sets appearance:none, so the control must be drawn here or it renders as
   an empty non-square outline with no check. */

.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='checkbox'],
.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='radio'] {
	flex: none;
	width: 17px;
	height: 17px;
	min-width: 17px;
	min-height: 17px;
	margin: 0 12px 0 0;
	padding: 0;
	border: 1px solid var(--lt-hairline);
	border-radius: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='radio'] {
	border-radius: 50%;
}

.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='checkbox']:hover,
.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='radio']:hover {
	border-color: var(--lt-hairline-hover);
}

.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='checkbox']:checked {
	border-color: var(--lt-ink);
	background-color: var(--lt-ink);
	background-size: 11px 11px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='square' d='M2 6.3l2.6 2.6L10 3.2'/%3E%3C/svg%3E");
}

.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='radio']:checked {
	border-color: var(--lt-ink);
	background-color: transparent;
	background-size: 9px 9px;
	background-image: radial-gradient(circle, #272727 0 50%, transparent 50%);
}

.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='checkbox']:focus-visible,
.gform_wrapper.gform-theme--orbital .gform_fields .gfield input[type='radio']:focus-visible {
	outline: 2px solid var(--lt-ink);
	outline-offset: 2px;
}

.gform_wrapper.gform-theme--orbital .gchoice {
	display: flex;
	align-items: center;
	margin-bottom: 14px;
}

.gform_wrapper.gform-theme--orbital .gform_fields .gfield .gchoice label,
.gform_wrapper.gform-theme--orbital .gform_fields .gfield .gfield_checkbox label,
.gform_wrapper.gform-theme--orbital .gform_fields .gfield .gfield_radio label {
	display: block;
	margin: 0;
	padding: 0;
	font-weight: 300;
	font-size: 15px;
	line-height: 17px;
	color: #4a4a4a;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

/* Submit ----------------------------------------------------------------- */

.gform_wrapper.gform-theme--orbital .gform_footer {
	display: flex;
	justify-content: flex-start;
	margin-top: 48px;
	padding: 0;
}

.gform_wrapper.gform-theme.gform-theme--framework.gform-theme--orbital .gform_footer input[type='submit'],
.gform_wrapper.gform-theme.gform-theme--framework.gform-theme--orbital .gform_footer .gform_button {
	display: inline-block;
	width: auto;
	height: auto;
	border: 1px solid var(--lt-ink);
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	color: var(--lt-ink);
	font-family: inherit;
	font-weight: 300;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 17px 38px;
	margin: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	box-shadow: none;
	text-shadow: none;
}

.gform_wrapper.gform-theme.gform-theme--framework.gform-theme--orbital .gform_footer input[type='submit']:hover,
.gform_wrapper.gform-theme.gform-theme--framework.gform-theme--orbital .gform_footer .gform_button:hover,
.gform_wrapper.gform-theme.gform-theme--framework.gform-theme--orbital .gform_footer input[type='submit']:focus,
.gform_wrapper.gform-theme.gform-theme--framework.gform-theme--orbital .gform_footer .gform_button:focus {
	background-color: var(--lt-ink);
	color: #ffffff;
}

.gform_wrapper.gform-theme--orbital .gform_footer input[type='submit']:focus-visible {
	outline: 2px solid var(--lt-ink);
	outline-offset: 3px;
}

/* Validation ------------------------------------------------------------- */

.gform_wrapper.gform-theme--orbital .gform_validation_errors {
	border: 0;
	border-left: 2px solid #b00020;
	border-radius: 0;
	background: #fbf4f5;
	box-shadow: none;
	padding: 16px 20px;
	margin-bottom: 32px;
}

.gform_wrapper.gform-theme--orbital .gform_validation_errors > h2 {
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: #b00020;
	margin: 0;
}

.gform_wrapper.gform-theme--orbital .gfield_error input,
.gform_wrapper.gform-theme--orbital .gfield_error textarea,
.gform_wrapper.gform-theme--orbital .gfield_error select {
	border-bottom-color: #b00020;
	background-color: transparent;
}

.gform_wrapper.gform-theme--orbital .gfield_validation_message,
.gform_wrapper.gform-theme--orbital .validation_message {
	border: 0;
	background: transparent;
	padding: 6px 0 0;
	font-weight: 300;
	font-size: 13px;
	color: #b00020;
}

/* Confirmation ----------------------------------------------------------- */

.gform_confirmation_message {
	font-weight: 300;
	font-size: 17px;
	line-height: 1.7;
	color: #272727;
	padding: 48px 0;
}