/* Form field/button/consent component. See AUDIT.md.
   Every hand-built page reinvented its own form styling — different label
   position, input border/fill, submit button color and shape. Unified onto
   the design already used by .ener-join-form (the form linked from the hero's
   primary CTA on index.html): a filled field with the label sitting inside the
   box, and a solid brand-blue submit button. Markup shape (`<label><span>
   Label</span><input></label>`) was already identical across every form, so
   only classes needed to change, not structure. */

.form-field {
	position: relative;
	display: block;
	min-height: 4.125rem;
	/* 66px */
	margin: 0;
	border-radius: 0.625rem;
	/* 10px */
	background: #f5f5f5;
	overflow: hidden;
}

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

.form-field > span:first-child {
	position: absolute;
	top: 0.75rem;
	left: 0.875rem;
	z-index: 1;
	color: #737982;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.2;
	pointer-events: none;
}

.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	border: 0;
	border-radius: 0.625rem;
	background: transparent;
	color: #000;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	padding: 1.9375rem 0.875rem 0.5625rem;
	outline: none;
}

.form-field input,
.form-field select {
	height: 4.125rem;
}

.form-field textarea {
	min-height: 6.5rem;
	/* 104px */
	resize: vertical;
}

.form-field select {
	position: relative;
	z-index: 2;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #7a7f86 50%), linear-gradient(135deg, #7a7f86 50%, transparent 50%);
	background-position: calc(100% - 19px) 36px, calc(100% - 14px) 36px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.125rem;
	pointer-events: auto;
	touch-action: manipulation;
	cursor: pointer;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
	color: #9a9fa6;
	opacity: 1;
}

.form-submit {
	display: inline-block;
	min-height: 4.125rem;
	border: 0;
	border-radius: 0.625rem;
	background: var(--brand-blue);
	color: var(--white-color);
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	padding: 1.25rem 1.75rem;
	text-align: center;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}

.form-submit:hover,
.form-submit:focus {
	background: var(--brand-blue-light);
	transform: translateY(-2px);
}

.form-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	color: #6e7480;
	font-size: 0.6875rem;
	font-weight: 400;
	line-height: 1.35;
}

.form-consent input {
	flex: 0 0 auto;
	width: 0.875rem;
	height: 0.875rem;
	margin: 0.0625rem 0 0;
	border: 1px solid #969696;
	accent-color: var(--brand-blue);
}

/* Contact Form 7 integration - CF7 wraps every field in an extra
   <span class="wpcf7-form-control-wrap">, which this component's markup
   (built for a flat <label><span>Label</span><input></label>) never
   accounted for. display:contents removes that wrapper from the box
   model entirely so .form-field's absolute-positioned label + fixed-height
   input keep working exactly as before. CF7's own inline error text
   (.wpcf7-not-valid-tip) is suppressed in favor of a red outline on the
   field itself - showing the tip as flowing text breaks the fixed-height
   box (this is what caused the "crooked"/misaligned placeholders). */
.form-field .wpcf7-form-control-wrap,
.form-consent .wpcf7-form-control-wrap {
	display: contents;
}

.form-field .wpcf7-not-valid-tip,
.form-consent .wpcf7-not-valid-tip {
	display: none;
}

.form-field input.wpcf7-not-valid,
.form-field select.wpcf7-not-valid,
.form-field textarea.wpcf7-not-valid {
	box-shadow: inset 0 0 0 1px #e04b4b;
}

.wpcf7-response-output {
	margin: 0.9375rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 0.625rem;
	font-size: 0.8125rem;
}

.wpcf7-form.sent .wpcf7-response-output {
	background: #e9f7ee;
	border-color: transparent;
	color: #1e7a42;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
	background: #fbeaea;
	border-color: transparent;
	color: #b32020;
}

.wpcf7-form.invalid .wpcf7-response-output {
	background: #fff6e0;
	border-color: transparent;
	color: #8a6100;
}