/* =============================================================================
   Contact Form — Validation States
   Usawa Theme

   These styles are applied by contact-form.js when fields are validated.
   They depend on two JS-added classes:
     .field--invalid  — set when a field fails validation.
     .field--valid    — set when a field passes validation.

   The [data-field] attribute is placed on each field wrapper <div>
   in contact-page-main.php so the JS can scope styles to that block.
   ============================================================================= */

/* ---- Field wrapper ---- */
[data-field] {
	position: relative; /* Anchor for any absolutely-positioned elements. */
}

/* ---- Inline error message ---- */
/* Rendered as an empty <span class="field-error"> in the PHP template.
   The JS writes the error text into it and the CSS shows the colour. */
.field-error {
	display: block;
	min-height: 1.125rem; /* Reserve space so the layout does not jump. */
	margin-top: 0.375rem;
	font-size: 0.6875rem;
	line-height: 1.4;
	color: #c0392b;
}

/* ---- Invalid state — red border ---- */
[data-field].field--invalid input,
[data-field].field--invalid textarea {
	border-color: #c0392b !important;
}

/* ---- Valid state — teal border ---- */
[data-field].field--valid input,
[data-field].field--valid textarea {
	border-color: var(--accent-teal) !important;
}

/* ---- Smooth border colour transition on all form fields ---- */
[data-contact-form] input,
[data-contact-form] textarea {
	transition: border-color 0.2s ease;
}

/* ---- Disabled submit button (while request is in flight) ---- */
[data-contact-form] button[type="submit"]:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}