/**
 * Contact modal: full-screen dialog (in the trigger circle's color) with the Gravity Forms "Contact" form.
 * Placeholder styling until a design lands.
 */

.kbd-contact-modal {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--primary);
}

.kbd-contact-modal:focus {
	outline: none;
}

.kbd-contact-modal::backdrop {
	background: transparent;
}

/* Positioned and sized by contactModal.js to cover the screen from the trigger dot. */
.kbd-contact-modal__circle {
	position: fixed;
	inset: 0;
	border-radius: 50%;
	/* Solid trigger-dot color; the gradient layer fades in over it as it grows. */
	background: var(--kbd-contact-modal-bg, var(--wp--preset--color--accent-2));
	pointer-events: none;
	will-change: transform;
}

/* Home stats lime-to-green gradient, mapped to the screen by JS. */
.kbd-contact-modal__gradient {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--wp--preset--gradient--gradient-5);
}

.kbd-contact-modal__close {
	position: fixed;
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kbd-contact-modal__close:hover,
.kbd-contact-modal__close:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--kbd-contact-modal-bg, var(--wp--preset--color--accent-2));
}

.kbd-contact-modal__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* No page scroll lock: hiding the page scrollbar widens the viewport, and the
   vw-based type reflows the page under the trigger dot. Instead the dialog is
   always 1px scrollable, so overscroll-behavior: contain keeps wheel and touch
   scrolling from reaching the page. */
.kbd-contact-modal__inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 880px;
	min-height: calc(100% + 1px);
	margin: 0 auto;
	/* Clear the close button on narrow screens, where it sits above the content. */
	padding: calc(52px + 2 * var(--wp--preset--spacing--40)) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
}

/* Center vertically when there's room (title and form auto margins); when it
   doesn't fit they collapse to the padding instead of pushing content off the top. */
.kbd-contact-modal__form {
	margin-bottom: auto;
}

/* Spacing below is height-aware (dvh) so the form fits the viewport without scrolling. */
@media (min-width: 782px) {
	.kbd-contact-modal__inner {
		padding-block: clamp(24px, 7dvh, 96px);
	}
}

.kbd-contact-modal__title {
	margin: auto 0 0;
	font-family: var(--wp--preset--font-family--primary);
	font-size: min(var(--wp--preset--font-size--xx-large), 10dvh);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* Gravity Forms form description, run through wpautop. */
.kbd-contact-modal__intro {
	margin-top: clamp(12px, 2.5dvh, 28px);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	line-height: 1.35;
}

.kbd-contact-modal__intro p {
	margin: 0;
}

.kbd-contact-modal__intro p + p {
	margin-top: 0.75em;
}

.kbd-contact-modal__form {
	margin-top: clamp(20px, 4.5dvh, 56px);
}

/* Gravity Forms (Orbital theme) */

/* Beats the per-form variable block GF prints as #gform_wrapper_N[data-form-index]. */
#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme {
	--gf-color-primary: var(--wp--preset--color--contrast);
	--gf-color-primary-contrast: var(--wp--preset--color--base);
	--gf-color-in-ctrl: var(--wp--preset--color--contrast);
	--gf-color-in-ctrl-primary: var(--wp--preset--color--contrast);
	--gf-ctrl-bg-color: transparent;
	--gf-ctrl-bg-color-hover: transparent;
	--gf-ctrl-bg-color-focus: transparent;
	--gf-ctrl-bg-color-error: transparent;
	--gf-ctrl-border-color: var(--wp--preset--color--contrast);
	--gf-ctrl-border-color-hover: var(--wp--preset--color--contrast);
	--gf-ctrl-border-color-focus: var(--wp--preset--color--contrast);
	--gf-ctrl-border-color-error: var(--wp--preset--color--contrast);
	--gf-ctrl-shadow: none;
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--contrast);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--base);
	--gf-ctrl-btn-radius: 50px;
	--gf-ctrl-btn-shadow: none;
	--gf-ctrl-btn-font-weight: 300;
	--gf-color-danger: var(--wp--preset--color--contrast);
	--gf-ctrl-label-color-primary: var(--wp--preset--color--contrast);
	--gf-ctrl-label-color-secondary: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--primary);
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gform_fields {
	row-gap: clamp(16px, 3dvh, 36px);
	/* Bottom-align side-by-side fields (Name/Company) so their lines match when one shows an error above it. */
	align-items: end;
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gfield_label {
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gfield_required {
	color: inherit;
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme input[type="text"],
#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme input[type="email"],
#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme textarea {
	width: 100%;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme textarea {
	height: clamp(96px, 18dvh, 220px);
	min-block-size: 0;
	resize: vertical;
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme input:focus,
#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme textarea:focus {
	outline: none;
	border-bottom-width: 2px;
	margin-bottom: -1px;
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gform_footer {
	margin-top: clamp(20px, 4dvh, 48px);
	padding: 0;
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gform_button {
	padding: 14px 28px;
	border: 0;
	border-radius: 50px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gform_button:hover {
	opacity: 0.85;
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gform_button:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* Errors: keep them dark on green rather than GF's red. */
#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gform_validation_errors,
#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gfield_error .gfield_label,
#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .validation_message {
	color: var(--wp--preset--color--contrast);
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gform_validation_errors {
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gform_validation_errors > h2 {
	color: inherit;
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gfield_error input,
#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gfield_error textarea {
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

#kbd-contact-modal .kbd-contact-modal__form .gform_wrapper.gform-theme .gfield_error .validation_message {
	padding: 6px 0 0;
	border: 0;
	background: transparent;
	font-size: var(--wp--preset--font-size--xx-small);
}

/* Close button under the Gravity Forms confirmation; hidden until the form is replaced by it. */
.kbd-contact-modal__done {
	display: none;
	align-self: flex-start;
	margin-top: clamp(20px, 4dvh, 48px);
	padding: 14px 28px;
	border: 0;
	border-radius: 50px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

/* Once shown, the button takes over the form's auto bottom margin so the group stays centered. */
.kbd-contact-modal__form:has(.gform_confirmation_message) {
	margin-bottom: 0;
}

.kbd-contact-modal__form:has(.gform_confirmation_message) + .kbd-contact-modal__done {
	display: inline-block;
	margin-bottom: auto;
}

.kbd-contact-modal__done:hover {
	opacity: 0.85;
}

.kbd-contact-modal__done:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* Confirmation */
.kbd-contact-modal .gform_confirmation_message {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	line-height: 1.35;
}

.kbd-contact-modal .gform_confirmation_message h3 {
	margin: 0 0 0.5em;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
}

/* Hides the trigger's ::after while contactModal.js measures it. */
.kbd-contact-modal-measure::after {
	display: none !important;
}