/* ==========================================================================
   Forms.

   Forminator runs with form-style: none, so nothing here is fighting a
   plugin stylesheet — these are the only rules that style the form. Every
   value is a token, which is what keeps the form correct in both themes.
   ========================================================================== */

.section--contact { max-width: 44rem; }

.contact-form { margin-block-start: var(--s-6); }

.forminator-ui form,
.forminator-row {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

.forminator-field { display: flex; flex-direction: column; gap: var(--s-2); }

/* Labels — mono, uppercase, same language as the rail. */
.forminator-label {
	font-family: var(--font-data);
	font-size: var(--mono-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
}

.forminator-required { color: var(--signal); }

/* Inputs — underline only. No boxes; the page has no other boxes. */
.forminator-input,
.forminator-textarea,
select.forminator-select2,
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui textarea {
	width: 100%;
	padding: var(--s-2) 0;
	border: 0;
	border-bottom: 1px solid var(--rule);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--body);
	line-height: var(--lh-body);
	transition: border-color var(--motion-fast) var(--ease);
}

.forminator-textarea,
.forminator-ui textarea {
	min-height: 9rem;
	resize: vertical;
}

.forminator-input:hover,
.forminator-textarea:hover { border-bottom-color: var(--muted); }

/* Focus ring is never removed. */
.forminator-input:focus-visible,
.forminator-textarea:focus-visible,
.forminator-ui input:focus-visible,
.forminator-ui textarea:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 3px;
	border-bottom-color: var(--signal);
}

/* Placeholder is decoration, never the label. */
.forminator-input::placeholder,
.forminator-textarea::placeholder { color: var(--muted); opacity: 1; }

/* Button ------------------------------------------------------------------- */

.forminator-button,
.forminator-button-submit {
	align-self: flex-start;
	margin-block-start: var(--s-3);
	padding: var(--s-3) var(--s-6);
	border: 1px solid var(--signal);
	border-radius: 0;
	background: transparent;
	color: var(--signal);
	font-family: var(--font-data);
	font-size: var(--mono-data);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--motion-fast) var(--ease),
		color var(--motion-fast) var(--ease);
}

.forminator-button:hover,
.forminator-button-submit:hover {
	background: var(--signal);
	color: var(--paper);
}

.forminator-button:disabled { opacity: 0.5; cursor: default; }

/* Validation and response -------------------------------------------------- */

/* --alert is the one place it earns its keep. Never colour alone: the error
   sits directly under its field and is announced by Forminator's aria-live. */
.forminator-error-message {
	color: var(--alert);
	font-family: var(--font-data);
	font-size: var(--mono-data);
}

.forminator-input.forminator-has_error,
.forminator-textarea.forminator-has_error { border-bottom-color: var(--alert); }

.forminator-response-message {
	margin-block-start: var(--s-5);
	padding: var(--s-4);
	border-inline-start: 2px solid var(--signal);
	font-family: var(--font-data);
	font-size: var(--mono-data);
	color: var(--ink);
}

.forminator-response-message.forminator-error { border-inline-start-color: var(--alert); }

/* Note --------------------------------------------------------------------- */

.contact__note {
	margin-block-start: var(--s-7);
	padding-block-start: var(--s-4);
	border-top: 1px solid var(--rule);
	color: var(--muted);
	font-size: var(--body-sm);
}

/* Send button ---------------------------------------------------------------
   Paper plane drawn as a CSS mask rather than an <img> or icon font: it takes
   currentColor, so it follows the token system into dark mode and inverts
   correctly on hover with no second asset. */

.forminator-button-submit,
.forminator-button.forminator-button-submit {
	display: inline-flex !important;
	align-items: center;
	gap: 0.75ch;
}

.forminator-button-submit::before {
	content: "";
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--icon-send) center / contain no-repeat;
	mask: var(--icon-send) center / contain no-repeat;
	transform: translateY(-0.04em);
	transition: transform var(--motion-fast) var(--ease);
}

.forminator-button-submit:hover::before {
	transform: translate(0.15em, -0.15em);
}

@media (prefers-reduced-motion: reduce) {
	.forminator-button-submit:hover::before { transform: translateY(-0.04em); }
}