/**
 * 121 Platform
 * Contact Form Component
 */

.nd-contact-form {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

.nd-contact-form__form {
	display: grid;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	gap: var(--wp--preset--spacing--20);
}

.nd-contact-form__field {
	display: grid;
	min-width: 0;
	max-width: 100%;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.nd-contact-form__field label {
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--typography--weight-regular);
	line-height: 1.4;
}

.nd-contact-form__field > label span[aria-hidden="true"] {
	color: var(--wp--preset--color--error);
}

.nd-contact-form__field input[type="text"],
.nd-contact-form__field input[type="email"],
.nd-contact-form__field input[type="tel"],
.nd-contact-form__field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--foreground);
	font: inherit;
	line-height: 1.5;
}

.nd-contact-form__field textarea {
	min-height: 5.5rem;
	resize: vertical;
}

.nd-contact-form__field input:focus-visible,
.nd-contact-form__field textarea:focus-visible,
.nd-contact-form__field input[type="checkbox"]:focus-visible {
	outline: var(--wp--custom--focus--outline-width) solid
		var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--focus--outline-offset);
}

.nd-contact-form__field input[type="file"] {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	font: inherit;
}

.nd-contact-form__field-help {
	min-width: 0;
	max-width: 100%;
	margin: 0;
	overflow-wrap: anywhere;
}

.nd-contact-form__field [aria-invalid="true"] {
	border-color: var(--wp--preset--color--error);
}

.nd-contact-form__field--checkbox {
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: var(--wp--preset--spacing--30);
}

.nd-contact-form__field--checkbox input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1rem 0 0;
}

.nd-contact-form__field--checkbox label {
	font-size: var(--wp--preset--font-size--small);
}

.nd-contact-form__field--checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;

	width: 1.25rem;
	height: 1.25rem;
	margin: 0;

	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);

	display: grid;
	place-content: center;

	cursor: pointer;
}

.nd-contact-form__field--checkbox input[type="checkbox"]::before {
	content: "";
	width: 0.6rem;
	height: 0.35rem;

	border-left: 2px solid var(--wp--preset--color--base);
	border-bottom: 2px solid var(--wp--preset--color--base);

	transform: rotate(-45deg) scale(0);
	transform-origin: center;
}

.nd-contact-form__field--checkbox input[type="checkbox"]:checked {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.nd-contact-form__field--checkbox input[type="checkbox"]:checked::before {
	transform: rotate(-45deg) scale(1);
}

.nd-contact-form__field--checkbox input[type="checkbox"]:focus-visible {
	outline: var(--wp--custom--focus--outline-width) solid
		var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--outline-offset);
}

.nd-contact-form__field-error {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--typography--weight-semibold);
}

.nd-contact-form__error-summary {
	margin-bottom: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-left: 4px solid var(--wp--preset--color--error);
	background: color-mix(
		in srgb,
		var(--wp--preset--color--error) 6%,
		var(--wp--preset--color--base)
	);
}

.nd-contact-form__error-summary h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--custom--typography--panel-title);
}

.nd-contact-form__error-summary ul {
	margin: 0;
	padding-left: var(--wp--preset--spacing--50);
}

.nd-contact-form__error-summary a {
	color: inherit;
	text-decoration: underline;
}

.nd-contact-form__success {
	margin-bottom: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-left: 4px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-soft);
}

.nd-contact-form__success p {
	margin: 0;
}

.nd-contact-form__actions {
	margin-top: var(--wp--preset--spacing--20);
}

.nd-contact-form__actions button {
	border: 0;
	cursor: pointer;
}

/*
 * Spam honeypot.
 *
 * Kept in the document for automated submissions but removed
 * from both the visual layout and keyboard interaction.
 */
.nd-contact-form__honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}