/*
 * MiraeLaw Home — Need Help? section
 *
 * Layout only (dark section, two-column split, left-column typography).
 * The form's own look lives in the shared contact-form.css, reused
 * unchanged wherever the reusable Elementor Form template is embedded —
 * this file never touches `.ml-contact-form`.
 *
 * `.ml-need-help-left` is a nested Elementor CONTAINER, not a widget.
 * Elementor's own frontend.min.css ships `.e-con.e-flex { flex: var(
 * --flex-grow) var(--flex-shrink) var(--flex-basis); }` at (0,2,0), which
 * outranks a single-class override at (0,1,0) — the same class of bug as
 * the Elementor Kit CSS leak fixed in faq.css, just from Elementor core
 * this time, and only affecting nested containers (widget children, like
 * `.ml-need-help-form-slot` below, aren't targeted by this rule, which is
 * why that one-class override works unmodified). Scoped with its own
 * `.e-con.e-flex` classes (already present on the element) to reliably
 * outrank it.
 */

.ml-need-help-inner {
	max-width: var( --ml-container-width );
	margin: 0 auto;
	/* Exact match to the source's own clamp(56px, 8vw, 96px) — the shared
	   --ml-spacing-section-md token, unlike the local one-off clamp used by
	   Offices/Testimonials/FAQ (which cap at 88px, not 96px). */
	padding: var( --ml-spacing-section-md ) 24px;
}

.ml-need-help-left.e-con.e-flex {
	flex: 1 1 320px;
	min-width: 0;
}

.ml-need-help-form-slot {
	flex: 2 1 420px;
	min-width: 0;
}

.ml-need-help-heading .elementor-heading-title {
	margin: 0 0 16px;
	font-family: var( --ml-font-heading );
	font-size: var( --ml-text-h2 );
	font-weight: 600;
	line-height: var( --ml-leading-h2 );
	color: var( --ml-background );
}

.ml-need-help-intro .elementor-heading-title {
	margin: 0 0 32px;
	font-family: var( --ml-font-body );
	font-size: var( --ml-text-lg );
	line-height: var( --ml-leading-comfortable );
	color: var( --ml-neutral-200 );
	max-width: 28em;
}

.ml-need-help-contacts {
	display: flex;
	flex-direction: column;
	gap: var( --ml-spacing-xs );
	border-top: 1px solid var( --ml-border-dark );
	padding-top: var( --ml-spacing-md );
}

.ml-need-help-phone {
	display: flex;
	align-items: baseline;
	gap: 14px;
	color: var( --ml-surface );
	text-decoration: none;
	font-family: var( --ml-font-mono );
	/* No shared token matches this exact fluid range (hand-specified in
	   the source design). */
	font-size: clamp( 22px, 3vw, 28px );
	font-weight: var( --ml-font-weight-medium );
	transition: color var( --ml-transition-base );
}

.ml-need-help-phone:hover,
.ml-need-help-phone:focus-visible {
	color: var( --ml-accent-light );
}

.ml-need-help-phone-label {
	/* 12px doesn't match a shared text-size token (--ml-text-2xs is
	   11.5px, a different value used elsewhere); source measured exactly. */
	font-size: 12px;
	letter-spacing: var( --ml-tracking-wider );
	color: var( --ml-accent );
}

.ml-need-help-email {
	color: var( --ml-neutral-200 );
	text-decoration: none;
	font-family: var( --ml-font-body );
	font-size: var( --ml-text-base );
	margin-top: 6px;
	transition: color var( --ml-transition-base );
}

.ml-need-help-email:hover,
.ml-need-help-email:focus-visible {
	color: var( --ml-surface );
}

/* ---------------------------------------------------------------
 * Accessibility — visible focus states (both are raw <a> tags)
 * ------------------------------------------------------------- */
.ml-need-help-phone:focus-visible,
.ml-need-help-email:focus-visible {
	outline: 3px solid var( --ml-focus-ring );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.ml-need-help-phone,
	.ml-need-help-email {
		transition: none;
	}
}