/*
 * MiraeLaw Header — visual polish on top of the Elementor Header template.
 * Colors, type, spacing come from design-system.css / Elementor Global
 * Colors + Fonts. This file only supplies what Elementor's widget controls
 * cannot express natively (exact hover/active treatments, dividers,
 * the CTA menu item, mobile refinements, focus states).
 */

/* ---------------------------------------------------------------
 * Header shell
 * ------------------------------------------------------------- */
.ml-site-header {
	border-style: solid;
	border-width: 0 0 1px 0;
	border-color: var( --ml-border );
	/* Positioning context for the Areas of Expertise mega menu (see
	   mega-menu.js/.css): the mega menu panel is anchored here, not to the
	   nav widget itself, specifically so it aligns to the site's actual
	   boxed content width (this container's own boxed_width, set in
	   Elementor) rather than to the narrower box the nav links alone
	   occupy next to the logo and language switcher. */
	position: relative;
}

.ml-header-logo img {
	width: auto;
	mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------
 * Primary nav — active / hover states matched to the source design
 * ------------------------------------------------------------- */
.ml-header-nav .elementor-item.elementor-item-active {
	font-weight: var( --ml-font-weight-bold );
	box-shadow: inset 0 -2px 0 var( --ml-accent );
}

.ml-header-nav .menu-item:not(.ml-header-cta):not(.menu-item-has-children):not(.current-menu-item) > a.elementor-item:hover,
.ml-header-nav .menu-item:not(.ml-header-cta):not(.menu-item-has-children):not(.current-menu-item) > a.elementor-item:focus-visible {
	box-shadow: inset 0 -2px 0 var( --ml-border-muted );
}

/* Contact — styled as the header CTA, not a plain nav link */
.ml-header-nav li.ml-header-cta {
	margin-left: var( --ml-spacing-2xs );
}

/* !important: overrides Elementor's own generated .elementor-item color rule,
   which is scoped to 5 chained classes (higher specificity than is practical
   to out-select here without duplicating Elementor's own selector chain). */
.ml-header-nav li.ml-header-cta > a.elementor-item {
	background: var( --ml-primary ) !important;
	color: var( --ml-background ) !important;
	font-weight: var( --ml-font-weight-bold );
	padding: 10px 22px;
}

.ml-header-nav li.ml-header-cta > a.elementor-item:hover,
.ml-header-nav li.ml-header-cta > a.elementor-item:focus-visible {
	background: var( --ml-secondary ) !important;
	color: var( --ml-surface ) !important;
}

/* ---------------------------------------------------------------
 * Language switcher — bordered pill row matching the source design
 * ------------------------------------------------------------- */
.ml-header-lang .cpel-switcher__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var( --ml-border );
}

.ml-header-lang .cpel-switcher__lang + .cpel-switcher__lang {
	border-left: 1px solid var( --ml-border );
}

.ml-header-lang .cpel-switcher__lang a {
	display: block;
	text-decoration: none;
}

.ml-header-lang .cpel-switcher__lang--active a {
	background: var( --ml-primary );
}

.ml-header-lang .cpel-switcher__lang:not(.cpel-switcher__lang--active) a:hover,
.ml-header-lang .cpel-switcher__lang:not(.cpel-switcher__lang--active) a:focus-visible {
	background: var( --ml-surface-hover );
	color: var( --ml-primary );
}

/* ---------------------------------------------------------------
 * Mobile toggle + panel
 * ------------------------------------------------------------- */
.ml-header-nav .elementor-menu-toggle {
	border: none;
	background: transparent;
	/* Elementor centers the toggle with margin:0 auto, which assumes its
	   widget is a standalone full-width bar. Ours sits beside the logo, so
	   left-align it instead of leaving it floating mid-row. */
	margin: 0;
}

.ml-header-nav .elementor-nav-menu--dropdown {
	background: var( --ml-surface );
}

/* Elementor opens the mobile panel with position:absolute by default;
   keep it clipped to the viewport width so it can't cause horizontal scroll. */
@media (max-width: 1024px) {
	.ml-header-nav .elementor-nav-menu__container {
		max-width: 100vw;
	}

	/* The language switcher gets its own row underneath logo + toggle
	   rather than wrapping unpredictably. */
	.ml-header-lang {
		flex: 1 0 100%;
		order: 3;
	}
}

/* ---------------------------------------------------------------
 * Accessibility — visible focus states across the header
 * ------------------------------------------------------------- */
.ml-site-header a:focus-visible,
.ml-site-header button:focus-visible,
.ml-site-header summary:focus-visible,
.ml-site-header [role="button"]:focus-visible {
	outline: 3px solid var( --ml-accent );
	outline-offset: 2px;
}

/* Body scroll lock while the mobile menu is open (see header.js) */
body.ml-menu-open {
	overflow: hidden;
}