/*
 * MiraeLaw Contact Form — shared styling for the reusable Elementor Form
 * template ("Contact Form (Reusable)", elementor_library post).
 *
 * The form exists as ONE Elementor Saved Template (embedded via the native
 * "Template" widget on the Homepage and Contact page); this file is the
 * single place its visual design lives, so every placement of the template
 * looks identical and future changes only need to happen here — the same
 * "one shared stylesheet, many embeddings" approach already used for
 * faq.css. Everything is scoped under the widget's own `.ml-contact-form`
 * class (set on the Form widget itself) so it can never leak onto any
 * other Elementor form that might exist elsewhere on the site.
 *
 * Field widths (33/33/34 on desktop, 50/50/100 on tablet, 100 on mobile)
 * and row/column gaps (18px) are configured on the Form widget's own
 * settings (per-field `width`/`width_tablet`/`width_mobile` responsive
 * controls, plus `column_gap`/`row_gap`) — NOT in this file. An earlier
 * version of this stylesheet replaced Elementor's native column system
 * with a CSS grid (`auto-fit, minmax(180px,1fr)` + `!important`), which
 * computed column COUNT from the widget's own rendered width — correct
 * inside a full-width template preview, but producing a different
 * (narrower, and differently-counted) layout once embedded in the
 * Homepage's ~650px form column, since auto-fit has no concept of "the
 * template's intended structure," only "how many 180px slots fit right
 * now." Elementor's own responsive width controls are deterministic
 * instead — the fields are always exactly 3-up / 2-up / 1-up regardless of
 * the host container's width, which is what actually makes the reusable
 * template look identical everywhere it's embedded (mild pixel narrowing
 * from a narrower host column is still expected and correct, just no
 * longer an unpredictable column-count change on top of it).
 *
 * The submit button's hover/focus color treatment is intentionally left to
 * Elementor's Global Kit CSS (`.elementor-kit-9 .elementor-button:hover`):
 * it already resolves to rgb(168,74,38) / white, an exact match for
 * --ml-accent-dark, so overriding it would just reproduce what's already
 * correct.
 *
 * The field label color rule below is scoped as
 * `.ml-contact-form.elementor-widget-form .elementor-field-group > label`
 * (both classes land on the same widget wrapper element) because Elementor
 * ships its own `.elementor-widget-form .elementor-field-group > label`
 * rule at (0,2,1) — the `>` combinator doesn't add specificity, but the
 * extra `label` element selector does, outranking a plain two-class
 * override. Same root cause as every other Elementor/Kit CSS leak fixed
 * in this project; see faq.css and home-need-help.css for the same
 * pattern applied elsewhere.
 */

.ml-contact-form .elementor-form {
	background: var( --ml-background );
	/* No shared token matches this exact fluid range (hand-specified in
	   the source design). */
	padding: clamp( 24px, 3.5vw, 40px );
}

.ml-contact-form.elementor-widget-form .elementor-field-group > label,
.ml-contact-form .elementor-field-label {
	display: block;
	font-family: var( --ml-font-body );
	font-size: var( --ml-input-label-size );
	font-weight: var( --ml-input-label-weight );
	color: var( --ml-primary );
	margin-bottom: 6px;
}

/* Elementor's own generated `.elementor-widget-form .elementor-field-group
   .elementor-field { color: ...; font-family/size/weight: ... }` rule sits
   at (0,3,0) — one class higher than a plain `.ml-contact-form
   .elementor-field` override, so this is scoped with the widget class too. */
.ml-contact-form.elementor-widget-form .elementor-field-group .elementor-field,
.ml-contact-form .elementor-field {
	width: 100%;
	box-sizing: border-box;
	padding: var( --ml-input-padding-y ) var( --ml-input-padding-x );
	border: var( --ml-input-border-width ) solid var( --ml-input-border-color );
	font-family: var( --ml-font-body );
	font-size: var( --ml-input-font-size );
	background: var( --ml-input-bg );
	color: var( --ml-input-color );
	transition: border-color var( --ml-transition-base );
}

.ml-contact-form textarea.elementor-field {
	resize: vertical;
}

.ml-contact-form .elementor-field:focus {
	outline: 3px solid var( --ml-focus-ring-secondary-color ); /* --ml-secondary at 25% — matches source's own focus ring exactly */
	outline-offset: 0;
	border-color: var( --ml-input-border-color-focus );
}

.ml-contact-form .elementor-button[type='submit'] {
	padding: var( --ml-btn-padding-y ) var( --ml-btn-padding-x-lg );
	font-family: var( --ml-font-body );
	font-size: var( --ml-btn-font-size );
	font-weight: var( --ml-btn-font-weight );
}

.ml-contact-form .elementor-button[type='submit']:focus-visible {
	outline: 3px solid var( --ml-focus-ring );
	outline-offset: 2px;
}

/* The submit column's width (33% desktop) is an Elementor widget setting,
   not CSS here (see file header) — its own responsive width overrides
   (elementor-md-25 / elementor-sm-60) don't kick in until below 1024px, so
   between roughly 960–1024px the 33% column (~123px) is narrower than the
   button at its full --ml-btn-padding-x-lg (34px/side), overflowing the
   column by ~15-20px. Narrowing side padding only in that gap is enough
   for "Send message" to fit without touching the button anywhere the
   column is already wide enough (desktop >1024) or already narrower via
   the widget's own md/sm width overrides (which have more room per field). */
@media ( max-width: 1024px ) {
	.ml-contact-form .elementor-button[type='submit'] {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* This same template is also embedded in a narrower two-column panel (see
   the Contact page: office info + form side by side), squeezing the form's
   own 33% submit column down to ~90px at 375px viewport — narrower than
   "Send message" can ever fit even at this file's reduced padding above,
   since Elementor's Global Kit forces every raw <button> to
   white-space:nowrap (same root cause as the FAQ trigger fix in faq.css).
   Restating normal here lets the label wrap to two lines instead of
   overflowing, only where the column is this tight. */
@media ( max-width: 480px ) {
	.ml-contact-form .elementor-button[type='submit'] {
		white-space: normal;
		/* .e-form__buttons (Elementor's own wrapper) is display:flex, and
		   flex items default to min-width:auto — without this, the button
		   still won't shrink to its 90px column even with wrapping allowed
		   above, so it kept rendering at its one-line content width (102px)
		   regardless. Same flex-item floor already seen and fixed this way
		   elsewhere on this project (e.g. the FAQ trigger, team CTA heading). */
		min-width: 0;
	}

	/* Same min-width:auto flex-item floor one level deeper: Elementor's own
	   markup nests the label in .elementor-button-content-wrapper (flex) >
	   .elementor-button-text (a flex item), which kept rendering at its
	   70px one-line width inside a 40px wrapper even after the fixes
	   above. */
	.ml-contact-form .elementor-button[type='submit'] .elementor-button-text {
		min-width: 0;
		/* Even shrunk to fit (above), "message" alone is still wider than
		   this column's ~40px text width once wrapped onto its own line —
		   there's only one space in "Send message" to wrap at. break-word
		   lets that single word break as a last resort. */
		overflow-wrap: break-word;
	}
}

/* ---------------------------------------------------------------
 * Validation — no equivalent in the static source design (it can't show
 * dynamic states); colors reuse existing error/success tokens so nothing
 * new is invented.
 * ------------------------------------------------------------- */
.ml-contact-form .elementor-field-group.elementor-field-group-invalid .elementor-field {
	border-color: var( --ml-error );
}

.ml-contact-form .elementor-message {
	font-family: var( --ml-font-body );
	font-size: var( --ml-text-sm );
	margin-top: 4px;
}

.ml-contact-form .elementor-message-danger {
	color: var( --ml-error );
}

.ml-contact-form .elementor-message-success {
	color: var( --ml-success );
}

@media ( prefers-reduced-motion: reduce ) {
	.ml-contact-form .elementor-field {
		transition: none;
	}
}