/*
 * Gravity Forms · Let's Build NZ signup.
 *
 * Targets Form 1 inside .signup__card while keeping Gravity Forms behaviour,
 * validation, AJAX and hidden state fields untouched.
 */

/* Generic field treatment for any Gravity Form used on the campaign. */
.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 input[type="password"],
.gform_wrapper input[type="search"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
	font-family: var(--font-body, "Klyno", ui-sans-serif, system-ui, sans-serif);
}

/* Campaign signup card -------------------------------------------------- */
.signup__card .gform_wrapper,
.signup__card .gform_wrapper.gravity-theme,
.signup__card .gform-theme {
	margin: 0 !important;
	font-family: var(--font-body, "Klyno", ui-sans-serif, system-ui, sans-serif);
	color: var(--color-paper, #faf5e2);
}

.signup__card .gform_wrapper form,
.signup__card form[id^="gform_"] {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* In the supplied Form 1 markup both the email and submit control live in
   .gform_fields. Recreate the original one-line email + orange pill layout. */
.signup__card .gform_wrapper .gform_body,
.signup__card .gform_wrapper .gform-body {
	margin: 0 !important;
	padding: 0 !important;
}

.signup__card .gform_wrapper .gform_fields,
.signup__card .gform_wrapper .gform-fields {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	gap: var(--space-md, 1rem) !important;
	align-items: end !important;
	width: 100% !important;
}

.signup__card .gform_wrapper .gfield {
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
}

.signup__card .gform_wrapper .gfield--type-email,
.signup__card .gform_wrapper .gfield--input-type-email {
	position: relative;
	width: 100%;
}

/* The source design uses placeholder text rather than a visible label. The
   PHP form hook inserts "Email address" when the Gravity Forms field has no
   placeholder configured. */
.signup__card .gform_wrapper .gfield--type-email > .gfield_label,
.signup__card .gform_wrapper .gfield--type-email > .gform-field-label,
.signup__card .gform_wrapper .gfield--input-type-email > .gfield_label,
.signup__card .gform_wrapper .gfield--input-type-email > .gform-field-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.signup__card .gform_wrapper .ginput_container,
.signup__card .gform_wrapper .ginput_container_email {
	margin: 0 !important;
	padding: 0 !important;
}

.signup__card .gform_wrapper input[type="email"],
.signup__card .gform_wrapper input[type="text"] {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	height: var(--control-h, 3rem) !important;
	min-height: var(--control-h, 3rem) !important;
	margin: 0 !important;
	padding: 0 0.1rem !important;
	border: 0 !important;
	border-bottom: var(--rule-w, 1px) solid var(--rule-on-dark, rgba(250,245,226,.26)) !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--color-paper, #faf5e2) !important;
	font-family: var(--font-body, "Klyno", ui-sans-serif, system-ui, sans-serif) !important;
	font-size: var(--text-base, 1.125rem) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
}

.signup__card .gform_wrapper input[type="email"]::placeholder,
.signup__card .gform_wrapper input[type="text"]::placeholder {
	color: var(--color-ivory-dim, #e2dece) !important;
	opacity: 1 !important;
}

.signup__card .gform_wrapper input[type="email"]:focus,
.signup__card .gform_wrapper input[type="text"]:focus {
	border-bottom-color: var(--color-accent, #ed7833) !important;
	border-bottom-width: 2px !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.signup__card .gform_wrapper .gfield--type-submit,
.signup__card .gform_wrapper #field_submit {
	align-self: end !important;
	width: auto !important;
}

.signup__card .gform_wrapper input[type="submit"],
.signup__card .gform_wrapper .gform_button,
.signup__card .gform_wrapper .gform-button,
.signup__card .gform_wrapper button[type="submit"] {
	box-sizing: border-box !important;
	display: inline-grid !important;
	place-items: center !important;
	width: auto !important;
	min-width: 7.5rem !important;
	height: var(--control-h, 3rem) !important;
	min-height: var(--control-h, 3rem) !important;
	margin: 0 !important;
	padding: 0 1.5rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--color-accent, #ed7833) !important;
	box-shadow: none !important;
	color: var(--color-navy, #052230) !important;
	font-family: var(--font-display, "Klyno", ui-sans-serif, system-ui, sans-serif) !important;
	font-size: var(--text-base, 1.125rem) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-transform: none !important;
	cursor: pointer !important;
	transition: transform var(--dur-micro, 90ms) ease, background-color var(--dur-short, 160ms) ease !important;
}

.signup__card .gform_wrapper input[type="submit"]:hover,
.signup__card .gform_wrapper .gform_button:hover,
.signup__card .gform_wrapper .gform-button:hover,
.signup__card .gform_wrapper button[type="submit"]:hover {
	transform: translateY(-1px);
	filter: brightness(1.04);
}

.signup__card .gform_wrapper input[type="submit"]:focus-visible,
.signup__card .gform_wrapper .gform_button:focus-visible,
.signup__card .gform_wrapper .gform-button:focus-visible,
.signup__card .gform_wrapper button[type="submit"]:focus-visible {
	outline: 2px solid var(--color-paper, #faf5e2) !important;
	outline-offset: 3px !important;
}

/* Gravity Forms' footer only contains hidden runtime fields when the submit
   control is configured inline, so remove its visual spacing without removing
   it from the DOM. */
.signup__card .gform_wrapper .gform_footer,
.signup__card .gform_wrapper .gform-footer {
	min-height: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: visible !important;
}

/* Validation / confirmation states. */
.signup__card .gform_wrapper .gform_validation_errors,
.signup__card .gform_wrapper .validation_error,
.signup__card .gform_wrapper .gfield_validation_message,
.signup__card .gform_wrapper .validation_message {
	grid-column: 1 / -1;
	margin: var(--space-sm, .75rem) 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--color-accent, #ed7833) !important;
	font-size: var(--text-sm, .875rem) !important;
}

.signup__card .gform_wrapper .gfield_error input[type="email"],
.signup__card .gform_wrapper input[aria-invalid="true"] {
	border-bottom-color: var(--color-accent, #ed7833) !important;
}

.signup__card .gform_confirmation_wrapper,
.signup__card .gform_confirmation_message {
	color: var(--color-paper, #faf5e2);
	font-family: var(--font-display, "Klyno", ui-sans-serif, system-ui, sans-serif);
	font-size: var(--text-md, 1.25rem);
	font-weight: 600;
}

.signup__card .gform_ajax_spinner {
	margin-inline-start: var(--space-sm, .75rem);
}

@media (max-width: 40rem) {
	.signup__card .gform_wrapper .gform_fields,
	.signup__card .gform_wrapper .gform-fields {
		grid-template-columns: 1fr !important;
	}

	.signup__card .gform_wrapper .gfield--type-submit,
	.signup__card .gform_wrapper #field_submit,
	.signup__card .gform_wrapper input[type="submit"],
	.signup__card .gform_wrapper .gform_button,
	.signup__card .gform_wrapper .gform-button,
	.signup__card .gform_wrapper button[type="submit"] {
		width: 100% !important;
	}
}