/*
 * MiraeLaw Footer — visual polish on top of the Elementor Footer template.
 * Colors, type, spacing come from design-system.css / Elementor Global
 * Colors + Fonts wherever a match exists (see the template's widget
 * settings). This file only supplies what Elementor's controls cannot
 * express natively: the auto-fit/minmax() fluid grid, fluid clamp()
 * padding, the Practice Areas shortcode's own markup (no Elementor widget
 * involvement), per-inline-span styling inside Text Editor content, and
 * link hover/focus-visible states (Text Editor widgets have no per-link
 * hover controls).
 */

/* ---------------------------------------------------------------
 * Upper zone — 4-column fluid grid
 * Elementor wraps "boxed" content-width containers in an .e-con-inner
 * div, so the grid override targets that, not the container itself
 * (same technique as home-hero.css's .ml-hero-stats-grid).
 * ------------------------------------------------------------- */
/* .ml-footer-main > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) ) !important;
	/* clamp(48px,6vw,72px) exactly matches --ml-spacing-section-sm 
	padding-top: var( --ml-spacing-section-sm ) !important;
	padding-bottom: var( --ml-spacing-lg ) !important;
} */

.ml-footer-main > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;

	padding-top: var(--ml-spacing-section-sm) !important;
	padding-bottom: var(--ml-spacing-lg) !important;
}

/* Desktop */
@media (min-width: 1025px) {
	.ml-footer-main > .e-con-inner {
		grid-template-columns: 1.25fr 0.75fr 2fr 1fr !important;
	}
}


/* ---------------------------------------------------------------
 * Practice Areas — plain 2-column link list rendered by the
 * [miraelaw_footer_practice_areas] shortcode (raw HTML, no Elementor
 * widget involved, so it needs its own styling here).
 * ------------------------------------------------------------- */
.ml-footer-areas-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	row-gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var( --ml-font-body );
	font-size: 14px;
}

.ml-footer-areas-list a {
	color: var( --ml-neutral-200 );
	text-decoration: none;
}

/* ---------------------------------------------------------------
 * Contact column — link colors, region tags, and the maps link's
 * underline treatment. A Text Editor widget's own "Text Color" control
 * doesn't cascade into its embedded <a> tags (the parent theme's
 * reset.css sets a bare `a { color }` rule that always outranks
 * inheritance), so every link color needed here is explicit rather
 * than relying on the widget's own color setting.
 * ------------------------------------------------------------- */
.ml-footer-col--contact a {
	color: var( --ml-neutral-200 );
	text-decoration: none;
}

.ml-footer-phones .ml-footer-region {
	font-size: 12px;
	color: var( --ml-tertiary-lighter );
}

.ml-footer-maps-link a {
	color: var( --ml-background );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
 * Link hover / focus-visible — Text Editor widgets have no native
 * per-link hover state, so every footer link needs it here.
 * ------------------------------------------------------------- */
.ml-site-footer a {
	transition: color var( --ml-transition-fast );
}

.ml-footer-col--brand a:hover,
.ml-footer-col--brand a:focus-visible,
.ml-footer-col--contact a:hover,
.ml-footer-col--contact a:focus-visible,
.ml-footer-areas-list a:hover,
.ml-footer-areas-list a:focus-visible {
	color: var( --ml-surface );
}

/* ---------------------------------------------------------------
 * Accessibility — visible focus states across the footer
 * ------------------------------------------------------------- */
.ml-site-footer a:focus-visible {
	outline: 3px solid var( --ml-accent );
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Bottom bar — copyright (left) + legal nav (right), rendered by
 * the [miraelaw_footer_legal] shortcode (raw HTML, no Elementor
 * widget involved, so it needs its own layout here). Stacks on
 * mobile; the Elementor container itself is untouched.
 * ------------------------------------------------------------- */
.ml-footer-bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}

@media ( min-width: 768px ) {
	.ml-footer-bottom-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.ml-footer-copyright {
	margin: 0;
	font-family: var( --ml-font-body );
	font-size: 13px;
	color: var( --ml-neutral-500 );
}

.ml-footer-legal-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}

.ml-footer-legal-nav a {
	font-family: var( --ml-font-body );
	font-size: 13px;
	color: var( --ml-neutral-500 );
	text-decoration: none;
}

.ml-footer-legal-nav a:hover,
.ml-footer-legal-nav a:focus-visible {
	color: var( --ml-surface );
}