/*
 * Lead form (the leads module's hdc_lead_form() markup, wrapped by
 * parts/forms/lead.php) and the quote and contact page layout
 * (page-templates/quote.php, contact.php). The module owns the markup and the
 * states; this file only styles the hdc-lead-form__* classes it documents.
 * The form adapts to its own width (container queries), not the viewport, so
 * it fits the product page column, the landing hero and the quote page alike.
 *
 * The success and failure regions use hidden="until-found" for the no-JS
 * path. While hidden they must keep a zero box: no padding, border or margin
 * on them unless :not([hidden]) (leads README).
 */
@layer components {
	.hdc-lead-form {
		container-type: inline-size;
		scroll-margin-top: var(--space-5);
	}

	.hdc-lead-form__fields {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}

	.hdc-lead-form__field {
		display: grid;
		gap: var(--space-1);
		align-content: start;
		min-width: 0;
	}

	.hdc-lead-form__note {
		color: var(--mute);
		font-size: var(--text-sm);
	}

	.hdc-lead-form__label {
		color: var(--ink);
		font-weight: 600;
	}

	.hdc-lead-form__required {
		margin-inline-start: 0.125rem;
		color: var(--ink);
	}

	.hdc-lead-form__input[aria-invalid="true"] {
		border: 2px solid var(--error);
	}

	.hdc-lead-form__error {
		color: var(--error);
		font-size: var(--text-sm);
		font-weight: 600;
	}

	.hdc-lead-form__status {
		color: var(--ink);
		font-weight: 600;
	}

	/* Empty, the status region takes no grid row but stays in the accessibility tree, so its first message is announced. */
	.hdc-lead-form__status:empty {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.hdc-lead-form__turnstile:empty {
		display: none;
	}

	.hdc-lead-form__submit {
		width: 100%;
		min-height: 3.25rem;
		padding: var(--space-2) var(--space-6);
		border: 2px solid var(--accent);
		border-radius: var(--radius);
		background: var(--accent);
		color: var(--white);
		font-size: var(--text-md);
		font-weight: 650;
		transition: background-color 0.15s, border-color 0.15s;
	}

	.hdc-lead-form__submit:hover {
		border-color: var(--accent-strong);
		background: var(--accent-strong);
	}

	.hdc-lead-form__submit:disabled {
		cursor: progress;
		opacity: 0.7;
	}

	.hdc-lead-form__sent:not([hidden]),
	.hdc-lead-form__failed:not([hidden]) {
		display: grid;
		gap: var(--space-2);
		padding: var(--space-5);
		border: 1px solid var(--line);
		border-inline-start: 3px solid var(--success);
		color: var(--ink);
	}

	.hdc-lead-form__failed:not([hidden]) {
		margin-top: var(--space-4);
		border-inline-start-color: var(--error);
	}

	.hdc-lead-form__sent-title {
		font-size: var(--text-md);
		font-weight: 700;
	}

	/* Two columns once the form is wide enough; long fields span both. */
	@container (min-width: 30rem) {
		.hdc-lead-form__fields {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.hdc-lead-form__note,
		.hdc-lead-form__field--message,
		.hdc-lead-form__field--model_key,
		.hdc-lead-form__field--how_heard,
		.hdc-lead-form__status,
		.hdc-lead-form__turnstile,
		.hdc-lead-form__submit {
			grid-column: 1 / -1;
		}

		.hdc-lead-form__submit {
			justify-self: start;
			width: auto;
		}
	}

	/* Quote and contact pages. */
	.hdc-forms-page {
		display: grid;
		gap: var(--space-6);
	}

	.hdc-forms-page__intro {
		display: grid;
		gap: var(--space-4);
		align-content: start;
		justify-items: start;
	}

	.hdc-forms-page__text {
		max-width: 60ch;
	}

	.hdc-forms-page__text > * + * {
		margin-top: 0.75em;
	}

	.hdc-forms-page__product {
		width: min(100%, 16rem);
	}

	.hdc-forms-page__phone {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		color: var(--ink);
		font-size: var(--text-lg);
		font-weight: 750;
	}

	.hdc-forms-page__phone a {
		--link: var(--ink);
		--link-hover: var(--accent-strong);
		--link-line: none;
		--link-hover-line: underline;
		display: inline-flex;
		align-items: center;
		min-height: var(--target);
	}

	.hdc-forms-page__form {
		padding: var(--space-5) var(--space-4);
		border: 1px solid var(--line);
		border-radius: var(--radius-media);
	}

	@media (min-width: 40rem) {
		.hdc-forms-page__form {
			padding: var(--space-6);
		}
	}

	@media (min-width: 64rem) {
		.hdc-forms-page {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			gap: var(--space-8);
			align-items: start;
		}
	}
}