/*
 * MiraeLaw Offices page — Hero section + office index jump-nav
 *
 * Styles for the Elementor Hero on the Offices page (eyebrow + H1 + intro
 * paragraph over a navy watermark, same recipe as the Home/Team/Areas of
 * Expertise Heroes — the design file itself calls this and Areas of
 * Expertise the same "Variation B editorial pattern," and their fluid
 * values are numerically identical). Deliberately its own class set rather
 * than reusing .ml-pa-hero-* / .ml-team-hero-*: every existing hero file
 * already independently repeats this pattern rather than cross-referencing
 * another page's classes (see practice-areas-hero.css's own comment).
 * Colors reuse existing design-system tokens throughout.
 */

.ml-offices-hero-root {
	position: relative;
	overflow: hidden;
	/* z-index (even 0) makes position:relative establish its own stacking
	   context, so the watermark's negative z-index stays local — same
	   technique as home-hero.css's .ml-hero-root. */
	z-index: 0;
	background: var( --ml-primary );
}

.ml-offices-hero-watermark {
	margin: 0;
	font-size: clamp( 160px, 22vw, 280px );
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

.ml-offices-hero-inner {
	max-width: var( --ml-container-width );
	margin: 0 auto;
	padding: clamp( 56px, 8vw, 96px ) 24px;
	position: relative;
}

.ml-offices-hero-eyebrow {
	margin: 0 0 22px;
	font-family: var( --ml-font-mono );
	font-size: var( --ml-text-sm );
	letter-spacing: var( --ml-tracking-wide-plus );
	color: var( --ml-tertiary-light );
}

.ml-offices-hero-h1 {
	margin: 0 0 22px;
}

/* Elementor nests the widget's actual visible text in a child
   .elementor-heading-title element (here a real <h1>). color/font-size are
   inherited properties, so a rule on the wrapper div alone never overrides
   the Global Kit's own direct h1 typography (dark navy #142638 @ 40px) —
   a descendant's own direct rule always wins over an inherited ancestor
   value, regardless of the wrapper selector's specificity. This left "Our
   Offices" rendering in the same dark navy as the hero background itself
   (fully invisible). Target the inner element directly, with !important
   for the same reason .ml-offices-hero-lead below needs it — the Kit's
   selector may tie on specificity, and this rule must always win. */
.ml-offices-hero-h1 .elementor-heading-title {
	font-family: var( --ml-font-heading ) !important;
	font-size: clamp( 38px, 5.4vw, 64px ) !important;
	font-weight: 600 !important;
	line-height: 1.06 !important;
	letter-spacing: var( --ml-tracking-tight ) !important;
	color: var( --ml-background ) !important;
}

.ml-offices-hero-lead {
	margin: 0 0 32px;
	/* !important: Elementor's own `.e-con > .elementor-widget { max-width:
	   100% }` rule outranks a single class selector on specificity alone —
	   same fix already applied in team-hero.css / practice-areas-hero.css. */
	max-width: 42em !important;
	font-size: clamp( 17px, 2vw, 20px );
	line-height: var( --ml-leading-relaxed );
	color: var( --ml-neutral-200 );
}

/* ---------------------------------------------------------------
 * Office index jump-nav — bordered row of anchor links to each office
 * row below. Rendered by [miraelaw_offices_index_nav] (raw HTML, no
 * Elementor widget involved), so every rule here is load-bearing.
 * ------------------------------------------------------------- */
.ml-offices-index-nav {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var( --ml-border-darker );
}

.ml-offices-index-link {
	display: block;
	padding: 11px 20px;
	font-family: var( --ml-font-mono );
	font-size: 13.5px;
	color: var( --ml-background );
	text-decoration: none;
	border-right: 1px solid var( --ml-border-darker );
	transition: background-color var( --ml-transition-base ), color var( --ml-transition-base );
}

.ml-offices-index-link:last-child {
	border-right: none;
}

.ml-offices-index-link:hover,
.ml-offices-index-link:focus-visible {
	background: var( --ml-primary-tint );
	color: var( --ml-accent-light );
}

.ml-offices-index-link:focus-visible {
	outline: 3px solid var( --ml-accent );
	outline-offset: -3px;
}

@media ( prefers-reduced-motion: reduce ) {
	.ml-offices-index-link {
		transition: none;
	}
}