/* H2M Express form fields (HANDOFF 6). 52px fields, no border, labels above, inset rings plus the focus outline. */

.h2m-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.h2m-field__label {
	font-size: 12px;
	line-height: 18px;
	font-weight: var(--weight-bold);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--otw-navy);
}

.is-dark .h2m-field__label {
	color: var(--text-on-dark);
}

.h2m-field__required {
	color: var(--h2m-rust);
}

.h2m-input,
.h2m-select,
.h2m-textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--radius-none);
	background: var(--surface-card);
	color: var(--text-body);
	font-family: var(--font-sans);
	font-size: var(--text-label-size);
	transition: var(--transition-default);
}

.h2m-textarea {
	min-height: 140px;
	padding-block: var(--space-3);
	resize: none;
}

.h2m-input:focus,
.h2m-select:focus,
.h2m-textarea:focus {
	box-shadow: var(--ring-focus);
}

.h2m-input:focus-visible,
.h2m-select:focus-visible,
.h2m-textarea:focus-visible {
	outline: 2px solid var(--otw-navy);
	outline-offset: 2px;
}

.is-dark :is(.h2m-input, .h2m-select, .h2m-textarea):focus-visible {
	outline-color: var(--otw-blue-light);
}

.h2m-input[aria-invalid="true"],
.h2m-select[aria-invalid="true"],
.h2m-textarea[aria-invalid="true"] {
	box-shadow: var(--ring-error);
}

.h2m-input:disabled,
.h2m-select:disabled,
.h2m-textarea:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Errors are text under the field (linked with aria-describedby), never colour alone. */
.h2m-field__error {
	margin: 0;
	font-size: var(--text-small-size);
	line-height: var(--text-small-line);
	font-weight: var(--weight-bold);
	color: var(--h2m-rust);
}

.is-dark .h2m-field__error {
	color: var(--h2m-sunset);
}

/* Lead forms (quote, contact, RFQ): layout, honeypot, banner, success panel. */

.h2m-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.h2m-form [hidden],
.h2m-form[hidden],
.h2m-form__success[hidden] {
	display: none !important;
}

.h2m-form .h2m-field {
	gap: 8px;
}

.h2m-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 18px;
}

.h2m-field--wide {
	grid-column: 1 / -1;
}

/* Honeypot: off-screen for people, still in the DOM for bots. */
.h2m-form__hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.h2m-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) 24px;
}

.h2m-form__submit {
	min-height: 48px;
	padding: 14px 32px;
	font-size: var(--text-small-size);
	line-height: 20px;
}

.h2m-form__note {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	color: var(--text-body);
}

.is-dark .h2m-form__note {
	color: var(--text-on-dark);
	opacity: 0.8;
}

.h2m-form__noscript {
	margin: 0;
	font-size: var(--text-small-size);
	line-height: 22px;
}

.is-dark .h2m-form__noscript a {
	color: var(--h2m-sunset);
}

/* Server-error banner: text, never colour alone, plus a retry button. */
.h2m-form__banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-left: 4px solid var(--h2m-rust);
	background: var(--surface-card);
	color: var(--text-body);
}

.is-dark .h2m-form__banner {
	border-left-color: var(--h2m-sunset);
	background: var(--surface-dark-glass);
	color: var(--text-on-dark);
	box-shadow: inset 0 0 0 1px var(--border-on-dark);
}

.h2m-form__banner-text {
	flex: 1 1 240px;
	margin: 0;
	font-size: var(--text-small-size);
	line-height: 22px;
	font-weight: var(--weight-bold);
}

.h2m-form__retry {
	padding: 10px 22px;
	font-size: 12px;
	line-height: 18px;
}

.h2m-form__success {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-6);
	background: var(--surface-card);
	color: var(--text-body);
}

.h2m-form__success > .h2m-icon {
	width: 28px;
	height: 28px;
	color: var(--h2m-rust);
}

.h2m-form__success-title {
	margin: 0;
	color: var(--otw-navy);
	font-size: var(--text-h5-size);
	line-height: var(--text-h5-line);
}

.h2m-form__success-text,
.h2m-form__reference {
	margin: 0;
	font-size: var(--text-label-size);
	line-height: var(--text-label-line);
}

.h2m-form__reference {
	font-weight: var(--weight-bold);
}

.h2m-form__success:focus-visible {
	outline: 2px solid var(--otw-navy);
	outline-offset: 2px;
}

.is-dark .h2m-form__success:focus-visible,
.is-dark .h2m-form__banner:focus-visible {
	outline-color: var(--otw-blue-light);
}

/* Checkboxes (RFQ project details): an 18px box and its label on one row; the error under the label. */
.h2m-check {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	align-items: center;
	gap: 4px 12px;
}

.h2m-check__input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--h2m-rust);
}

.h2m-check__label {
	color: var(--text-body);
	font-size: var(--text-label-size);
	line-height: 24px;
	cursor: pointer;
}

.h2m-check .h2m-field__error {
	grid-column: 2;
}