/*
 * MiraeLaw Home — Hero section
 * Colors/fonts come from Elementor Global Colors/Fonts (linked on the widgets
 * themselves) or design-system.css variables. This file only supplies what
 * Elementor's controls can't express: fluid clamp() typography/spacing, the
 * decorative watermark, the outline-style phone links, and the stats' CSS
 * Grid (Elementor's native Grid mode doesn't support auto-fit/minmax).
 */

.ml-hero-root {
	position: relative;
	overflow: hidden;
	/* z-index (even 0) is required to make position:relative establish its
	   own stacking context — otherwise the watermark's negative z-index
	   escapes all the way to the page root instead of staying local. */
	z-index: 0;
}

/* ---------------------------------------------------------------
 * Decorative watermark — oversized trilingual "future" motif
 * ------------------------------------------------------------- */
.ml-hero-watermark {
	margin: 0;
	font-size: var( --ml-text-watermark );
	pointer-events: none;
	user-select: none;
}

/* ---------------------------------------------------------------
 * Hero content column
 * ------------------------------------------------------------- */
.ml-hero-inner {
	padding-top: var( --ml-spacing-section-lg );
	padding-bottom: var( --ml-spacing-section-sm );
}

.ml-hero-eyebrow {
	margin: 0 0 var( --ml-spacing-md );
}

.ml-hero-eyebrow p {
	margin: 0;
}

.ml-hero-h1 {
	max-width: 15em;
	margin-bottom: 26px;
}

.ml-hero-h1 .elementor-heading-title {
	font-size: var( --ml-text-h1 );
}

.ml-hero-subhead {
	max-width: 36em;
	margin: 0 0 var( --ml-spacing-xl );
}

.ml-hero-subhead p {
	margin: 0;
	font-size: var( --ml-text-hero-lead );
}

/* ---------------------------------------------------------------
 * CTA row
 * ------------------------------------------------------------- */
.ml-hero-cta-primary,
.ml-hero-tel-btn a {
	transition: background-color var( --ml-transition-base ), color var( --ml-transition-base ), border-color var( --ml-transition-base );
}

.ml-hero-tel-btn p {
	margin: 0;
}

.ml-hero-tel-btn a {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 15px 24px;
	border: 1px solid var( --ml-border-darker );
	color: var( --ml-background );
	text-decoration: none;
	font-weight: var( --ml-font-weight-medium );
	font-size: var( --ml-text-md );
	font-family: var( --ml-font-mono );
}

.ml-hero-tel-btn a:hover,
.ml-hero-tel-btn a:focus-visible {
	border-color: var( --ml-accent );
	color: var( --ml-accent-light );
}

.ml-hero-tel-region {
	font-size: var( --ml-text-xs );
	color: var( --ml-neutral-300 );
}

/* ---------------------------------------------------------------
 * Trust stats bar
 * ------------------------------------------------------------- */
/* Elementor wraps "boxed" content-width containers in an .e-con-inner div,
   so the grid override targets that, not the container itself. */
.ml-hero-stats-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ) !important;
}

.ml-hero-stat-label {
	text-transform: none; /* source labels are already uppercase content */
}

/* ---------------------------------------------------------------
 * Accessibility — visible focus states
 * ------------------------------------------------------------- */
.ml-hero-root a:focus-visible,
.ml-hero-root button:focus-visible {
	outline: 3px solid var( --ml-accent );
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.ml-hero-cta-primary,
	.ml-hero-tel-btn a {
		transition: none;
	}
}