/*
 * Section: Lead Form.
 *
 * Long-form page rhythm (4rem top + 4rem bottom = the source's mt-32 gap),
 * heading + intro, then a dark rounded panel holding the labelled form.
 * Every rule is scoped under .tra-lead-form.
 */

.tra-lead-form {
	--tra-pad-block: 4rem;
}

/* --------------------------------------------------------------- heading */

.tra-lead-form__heading {
	margin-bottom: 2rem;
}

/* ----------------------------------------------------------------- panel */

.tra-lead-form__panel {
	margin-top: 4rem;
	padding: 3rem;
	background-color: var(--tra-primary);
	border-radius: var(--tra-r-4xl);
	color: #fff;
}

.tra-lead-form__notice {
	margin-bottom: 1.5rem;
}

.tra-lead-form .tra-notice {
	margin: 0;
	padding: 1rem 1.5rem;
	background-color: rgb(255 255 255 / 0.05);
	border: 1px solid rgb(255 255 255 / 0.1);
	border-radius: var(--tra-r-md);
	color: #fff;
	font-size: var(--tra-fs-sm);
	line-height: 1.4286;
}

.tra-lead-form .tra-notice--ok {
	border-color: var(--tra-gold);
}

.tra-lead-form .tra-notice--error {
	border-color: var(--tra-accent);
}

/* Honeypot: present for bots, off-screen for humans. */
.tra-lead-form .tra-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ form */

.tra-lead-form__form {
	display: grid;
	gap: 2rem;
}

.tra-lead-form__row {
	display: grid;
	gap: 2rem;
}

@media (min-width: 768px) {
	.tra-lead-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The optional email field takes the full width of its own row. */
	.tra-lead-form__group--wide {
		grid-column: 1 / -1;
	}
}

.tra-lead-form__group {
	display: grid;
	gap: 0.5rem;
}

.tra-lead-form__label {
	color: rgb(255 255 255 / 0.4);
	font-size: var(--tra-fs-3xs);
	font-weight: 900;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-transform: uppercase;
}

/*
 * The parent theme's reset targets `input[type=text]` (0,1,1), which outranks a
 * bare class. Qualifying the class with the element keeps our field styling
 * without resorting to !important.
 */
.tra-lead-form input.tra-lead-form__field,
.tra-lead-form select.tra-lead-form__field,
.tra-lead-form textarea.tra-lead-form__field {
	width: 100%;
	padding: 1.25rem 2rem;
	background-color: rgb(255 255 255 / 0.05);
	border: 1px solid rgb(255 255 255 / 0.1);
	border-radius: var(--tra-r-md);
	outline: none;
	color: #fff;
	font-family: inherit;
	font-size: var(--tra-fs-base);
	line-height: 1.5;
	transition: border-color var(--tra-transition);
}

.tra-lead-form .tra-lead-form__field::placeholder {
	color: rgb(255 255 255 / 0.45);
	opacity: 1;
}

.tra-lead-form input.tra-lead-form__field:focus,
.tra-lead-form select.tra-lead-form__field:focus,
.tra-lead-form textarea.tra-lead-form__field:focus,
.tra-lead-form input.tra-lead-form__field:focus-visible,
.tra-lead-form select.tra-lead-form__field:focus-visible,
.tra-lead-form textarea.tra-lead-form__field:focus-visible {
	border-color: var(--tra-accent);
	outline: none;
}

.tra-lead-form select.tra-lead-form__field--select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
}

/* Native dropdown lists render on the OS surface, not the dark panel. */
.tra-lead-form .tra-lead-form__field--select option {
	background-color: var(--tra-surface);
	color: var(--tra-primary);
}

.tra-lead-form textarea.tra-lead-form__field--textarea {
	display: block;
	resize: vertical;
}

.tra-lead-form__submit {
	width: 100%;
	padding: 2rem;
	background-color: var(--tra-accent);
	border: 0;
	border-radius: var(--tra-r-lg);
	box-shadow: var(--tra-shadow-2xl);
	color: #fff;
	font-family: inherit;
	font-size: var(--tra-fs-lg);
	font-weight: 900;
	letter-spacing: 0.4em;
	line-height: 1.5556;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--tra-transition);
}

.tra-lead-form__submit:hover,
.tra-lead-form__submit:focus-visible {
	background-color: var(--tra-gold);
}

@media (prefers-reduced-motion: reduce) {
	.tra-lead-form input.tra-lead-form__field,
	.tra-lead-form select.tra-lead-form__field,
	.tra-lead-form textarea.tra-lead-form__field,
	.tra-lead-form__submit {
		transition: none;
	}
}