/* ============================================================
   Mirador Law - v4 Sticky Header
   Loads site-wide (not scoped under .mdl-home-v4). Designed to win
   specificity over Bootstrap and the existing theme-style.css.
   ============================================================ */

.mdl-header,
.mdl-header *,
.mdl-header *::before,
.mdl-header *::after {
	box-sizing: border-box;
}

.mdl-header {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 9999 !important;
	background: #4E6072;
	color: #fff;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: box-shadow .25s ease, background-color .25s ease;
	width: 100%;
}
/* Some themes wrap body or main in containers with overflow: hidden,
   which breaks position: sticky on descendants. Force overflow:visible
   on the body and direct ancestors that commonly cause this.
   Note: we only clip horizontal overflow - setting overflow-y on body
   would create a nested inner scrollbar.
   `overflow: clip` is the modern equivalent that prevents horizontal
   bleed without creating a scroll context that would break sticky. */
html, body { overflow-x: clip !important; }
body > .site,
body > #page,
body > .site-wrapper,
body > main,
body > #wrapper,
body > #main,
body > #main-container,
#container-wrap,
.site-content,
.layout-wrapper,
.main-container {
	overflow: visible !important;
	-webkit-overflow-scrolling: auto !important;
	transform: none !important;
	filter: none !important;
}
/* Slight elevation when scrolled (JS adds .is-scrolled) */
.mdl-header.is-scrolled {
	box-shadow: 0 6px 24px rgba(0,0,0,.25);
}

.mdl-header__container {
	max-width: 1366px;
	margin: 0 auto;
	padding: 0 32px;
	width: 100%;
}

/* ===== Row 1: Bar with brand + actions ===== */
.mdl-header__bar {
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.mdl-header__bar .mdl-header__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.mdl-header__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: #fff;
}
.mdl-header__diamond { flex-shrink: 0; }
.mdl-header__logo-img { max-height: 56px; width: auto; }
.mdl-header__brand-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1;
}
.mdl-header__brand-name {
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 3px;
	color: #fff;
}
.mdl-header__brand-tagline {
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 2px;
	color: #fff;
	text-transform: uppercase;
}

/* ===== Right-side actions ===== */
.mdl-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
.mdl-header__phone {
	color: #fff !important;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: .5px;
	text-decoration: none !important;
	white-space: nowrap;
}
.mdl-header__phone:hover { color: #CAA45D !important; }
.mdl-header__divider {
	width: 1px;
	height: 24px;
	background: rgba(255,255,255,.3);
}

/* Language switcher */
.mdl-lang {
	display: inline-flex;
	gap: 6px;
}
.mdl-lang__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 28px;
	padding: 0 10px;
	border: 1px solid rgba(190,204,215,.4);
	border-radius: 4px;
	color: #BECCD7 !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mdl-lang__btn:hover {
	background: rgba(190,204,215,.15);
	border-color: rgba(190,204,215,.6);
}
.mdl-lang__btn--active {
	background: #BECCD7;
	color: #243952 !important;
	border-color: #BECCD7;
}
/* Search button */
.mdl-header__search-toggle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #243952 !important;
	color: #fff;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color .15s ease;
}
.mdl-header__search-toggle:hover { background: #1A2A3D !important; }
/* Turns gold while the search panel is open (aria-expanded toggled by JS). */
.mdl-header__search-toggle[aria-expanded="true"] { background: #CAA45D !important; }
.mdl-header__search-toggle[aria-expanded="true"]:hover { background: #B5903F !important; }
/* Make sure the magnifier icon inside the toggle is always visible (white),
   on both the navy closed state and the gold open state. Inline legacy/button
   rules can blank SVG fill/stroke, so force it here on the actual shapes. */
.mdl-header__search-toggle svg,
.mdl-header button.mdl-header__search-toggle svg {
	display: block !important;
	width: 22px !important;
	height: 22px !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.mdl-header__search-toggle svg circle,
.mdl-header__search-toggle svg line {
	stroke: #ffffff !important;
	fill: none !important;
}

/* Mobile menu toggle */
.mdl-header__menu-toggle {
	display: none;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 6px;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
}
.mdl-header__menu-toggle span {
	display: block;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .25s ease, opacity .15s ease;
}
.mdl-header__menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}
.mdl-header__menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mdl-header__menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}

/* ===== Search dropdown =====
   Dark, premium feel: deeper prussian background, larger input, white text,
   white placeholder, subtle gold underline that brightens on focus. */
.mdl-header__search {
	background: #4e6173;                 /* solid band */
	padding: 0 24px;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
	animation: mdl-search-fade .25s ease;
}
@keyframes mdl-search-fade {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.mdl-header__search[hidden] { display: none; }
/* Centered 537px field with the magnifier inline on the right (Figma). */
.mdl-header__search form {
	position: relative;
	width: 537px;
	max-width: 100%;
	margin: 0 auto;
	padding: 76px 0 90px;                /* mirrors the Figma ~224px-tall band */
	display: flex;
	align-items: center;
	gap: 8px;
}
/* Underline spans the whole field — under the input AND the magnifier icon.
   Implemented as a pseudo-element so it runs the full 537px width regardless
   of the input/icon split. */
.mdl-header__search form::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 90px;                        /* aligns with the bottom of the 49px field row */
	height: 1px;
	background: rgba(255, 255, 255, .5);
	transition: background .2s ease;
}
.mdl-header__search form:focus-within::after {
	background: rgba(255, 255, 255, .9);
}
.mdl-header__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 49px;
	padding: 0 4px;
	background: transparent !important;
	border: 0;
	border-bottom: 0;                    /* line now drawn by form::after (full width) */
	border-radius: 0;
	color: #fff !important;             /* typed text — beats legacy styles */
	-webkit-text-fill-color: #fff !important; /* Safari/Chrome enforcement */
	caret-color: #fff;                  /* white blinking cursor too */
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	outline: none;
	transition: border-color .2s ease;
}
/* Browser autofill paints inputs yellow/blue with dark text — override that
   by repainting the inner shadow with the transparent backdrop, and forcing
   the text fill back to white. -webkit-text-fill-color beats `color`. */
.mdl-header__search input[type="search"]:-webkit-autofill,
.mdl-header__search input[type="search"]:-webkit-autofill:hover,
.mdl-header__search input[type="search"]:-webkit-autofill:focus,
.mdl-header__search input[type="search"]:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
	-webkit-text-fill-color: #fff !important;
	caret-color: #fff !important;
	transition: background-color 5000s ease-in-out 0s;
}
/* White placeholder — has to be declared per vendor for full coverage */
.mdl-header__search input[type="search"]::placeholder        { color: rgba(255,255,255,.85); opacity: 1; }
.mdl-header__search input[type="search"]::-webkit-input-placeholder { color: rgba(255,255,255,.85); }
.mdl-header__search input[type="search"]::-moz-placeholder   { color: rgba(255,255,255,.85); opacity: 1; }
.mdl-header__search input[type="search"]:-ms-input-placeholder { color: rgba(255,255,255,.85); }
.mdl-header__search input[type="search"]:focus {
	background: transparent;
	border-bottom-color: var(--mdl-gold);
	box-shadow: none;
}
/* Hide browser's native X clear button — keeps the line clean */
.mdl-header__search input[type="search"]::-webkit-search-cancel-button { display: none; }
.mdl-header__search input[type="search"]::-webkit-search-decoration { display: none; }

.mdl-header__search button[type="submit"],
.mdl-header__search form button[type="submit"] {
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	max-width: 44px !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;                       /* kills legacy 12px 60px */
	margin: 0 !important;
	color: var(--mdl-light-blue, #BECCD7) !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: color .2s ease, transform .15s ease;
	flex: 0 0 auto !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
}
.mdl-header__search button[type="submit"]:hover,
.mdl-header__search button[type="submit"]:focus,
.mdl-header__search form button[type="submit"]:hover,
.mdl-header__search form button[type="submit"]:focus {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	color: var(--mdl-gold, #CAA45D) !important;
	transform: scale(1.08);
}
.mdl-header__search button[type="submit"] svg { width: 22px !important; height: 22px !important; display: block !important; }
.mdl-header__search button[type="submit"] svg circle,
.mdl-header__search button[type="submit"] svg line {
	stroke: var(--mdl-light-blue, #BECCD7) !important;
	fill: none !important;
}
.mdl-header__search button[type="submit"]:hover svg circle,
.mdl-header__search button[type="submit"]:hover svg line {
	stroke: var(--mdl-gold, #CAA45D) !important;
}

/* ===== Row 2: Primary nav ===== */
.mdl-header__nav { border-top: 1px solid rgba(255,255,255,.08); }
.mdl-header__nav .mdl-header__container { padding-top: 0; padding-bottom: 0; }
.mdl-nav-menu {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mdl-nav-menu li {
	position: relative;
}
.mdl-nav-menu > li > a {
	display: inline-block;
	padding: 16px 18px;
	color: #E8F6F8 !important;
	font-size: 14px;
	font-weight: 600 !important;        /* semibold — consistent, can't be overridden */
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: color .15s ease, border-bottom-color .15s ease;
	border-bottom: 2px solid transparent;
}

/* Spotlight hover: when the menu is being hovered, dim siblings to #BECCD7,
   but the actually-hovered item brightens back to #E8F6F8 with a #E8F6F8 underline. */
.mdl-nav-menu:hover > li > a {
	color: #BECCD7 !important;
}
.mdl-nav-menu:hover > li > a:hover,
.mdl-nav-menu > li > a:hover {
	color: #E8F6F8 !important;
	border-bottom-color: #E8F6F8;
}

/* Active page state - same spotlight color */
.mdl-nav-menu > li.current-menu-item > a,
.mdl-nav-menu > li.current-menu-ancestor > a,
.mdl-nav-menu > li.current_page_item > a {
	color: #E8F6F8 !important;
	border-bottom-color: #E8F6F8;
	font-weight: 600 !important;        /* active item stays semibold, not bold */
}
/* When the menu IS being hovered, the active item shouldn't outshine
   the actually-hovered one - dim it like other siblings. */
.mdl-nav-menu:hover > li.current-menu-item:not(:hover) > a,
.mdl-nav-menu:hover > li.current-menu-ancestor:not(:hover) > a,
.mdl-nav-menu:hover > li.current_page_item:not(:hover) > a {
	color: #BECCD7 !important;
	border-bottom-color: transparent;
}

/* Submenu (dropdown on hover) — top-level menu items show their immediate
   submenu below them. Nested submenus (3rd level and deeper) cascade
   horizontally to the RIGHT of the parent item, so when you hover over
   "Locations" inside "About", the Locations submenu opens beside it. */
.mdl-nav-menu .sub-menu,
.mdl-nav-menu ul.children {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 220px;
	background: #243952;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
	box-shadow: 0 12px 24px rgba(0,0,0,.25);
	z-index: 10;
}
/* Each submenu <li> must be a positioning context so its nested submenu
   anchors to it (not to the outer absolute submenu). !important to defeat
   any inherited static positioning from theme defaults. */
.mdl-nav-menu .sub-menu li,
.mdl-nav-menu ul.children li {
	display: block !important;
	position: relative !important;
}

/* First-level (top → 1st sub): open below the top-level item */
.mdl-nav-menu > li.menu-item-has-children:hover > .sub-menu,
.mdl-nav-menu > li.menu-item-has-children:focus-within > .sub-menu,
.mdl-nav-menu > li:hover > .sub-menu,
.mdl-nav-menu > li:focus-within > .sub-menu,
.mdl-nav-menu > li:hover > ul.children,
.mdl-nav-menu > li:focus-within > ul.children {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateX(-50%) translateY(0) !important;
	transition-delay: 0s !important;
}

/* Nested (2nd-level and deeper): position to the RIGHT of parent <li> */
.mdl-nav-menu .sub-menu .sub-menu,
.mdl-nav-menu .sub-menu ul.children,
.mdl-nav-menu ul.children .sub-menu,
.mdl-nav-menu ul.children ul.children {
	top: 0 !important;
	left: 100% !important;
	transform: translateX(8px) translateY(0) !important;
}
/* Open nested submenu on hover of its parent <li> (any depth) */
.mdl-nav-menu .sub-menu li.menu-item-has-children:hover > .sub-menu,
.mdl-nav-menu .sub-menu li.menu-item-has-children:focus-within > .sub-menu,
.mdl-nav-menu .sub-menu li:hover > .sub-menu,
.mdl-nav-menu .sub-menu li:focus-within > .sub-menu,
.mdl-nav-menu .sub-menu li:hover > ul.children,
.mdl-nav-menu .sub-menu li:focus-within > ul.children,
.mdl-nav-menu ul.children li:hover > .sub-menu,
.mdl-nav-menu ul.children li:focus-within > .sub-menu,
.mdl-nav-menu ul.children li:hover > ul.children,
.mdl-nav-menu ul.children li:focus-within > ul.children {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateX(0) translateY(0) !important;
	transition-delay: 0s !important;
}

/* Visual cue: items with children get a small chevron (DESKTOP ONLY) */
.mdl-nav-menu .sub-menu .menu-item-has-children > a::after {
	content: " ›";
	float: right;
	margin-left: 8px;
	color: var(--mdl-gold, #CAA45D);
	font-size: 16px;
	line-height: 1;
}
@media (max-width: 992px) {
	/* On mobile the chevrons are drawn by mobile-menu.css; kill this one so it
	   doesn't render as a stray diamond/arrow next to submenu items. */
	.mdl-nav-menu .sub-menu .menu-item-has-children > a::after { content: none !important; display: none !important; }
}
.mdl-nav-menu .sub-menu a {
	display: block;
	padding: 10px 20px;
	color: #fff !important;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
}
.mdl-nav-menu .sub-menu a:hover { color: #CAA45D !important; background: transparent !important; }
/* Active/current submenu item — ALWAYS white text, no background, no hover effect.
   `!important` on every property at multiple selector levels so nothing in
   the parent theme or legacy CSS can override (covers li bg, a bg, hover bg). */
.mdl-nav-menu .sub-menu li.current-menu-item,
.mdl-nav-menu .sub-menu li.current_page_item,
.mdl-nav-menu .sub-menu li.current-menu-ancestor,
.mdl-nav-menu .sub-menu li.current-menu-item:hover,
.mdl-nav-menu .sub-menu li.current_page_item:hover,
.mdl-nav-menu .sub-menu li.current-menu-ancestor:hover {
	background: transparent !important;
	background-color: transparent !important;
}
.mdl-nav-menu .sub-menu li.current-menu-item > a,
.mdl-nav-menu .sub-menu li.current_page_item > a,
.mdl-nav-menu .sub-menu li.current-menu-ancestor > a,
.mdl-nav-menu .sub-menu li.current-menu-item > a:hover,
.mdl-nav-menu .sub-menu li.current_page_item > a:hover,
.mdl-nav-menu .sub-menu li.current-menu-ancestor > a:hover,
.mdl-nav-menu .sub-menu li.current-menu-item:hover > a,
.mdl-nav-menu .sub-menu li.current_page_item:hover > a,
.mdl-nav-menu .sub-menu li.current-menu-ancestor:hover > a {
	color: #fff !important;
	background: transparent !important;
	background-color: transparent !important;
}

/* ============================================================
   Mobile (≤ 992px)
   Forceful rules to win against legacy theme CSS.
   ============================================================ */
@media (max-width: 992px) {
	.mdl-header__brand-tagline { display: none !important; }
	.mdl-header__brand-name { font-size: 18px; letter-spacing: 2px; }
	.mdl-header__diamond { width: 48px !important; height: 48px !important; }
	.mdl-header__logo-img { max-height: 48px !important; width: auto !important; }
	.mdl-header__phone { font-size: 16px; }

	/* MOBILE STICKY: switch from sticky to fixed to bypass any parent
	   overflow:hidden / transform / filter issues that break position:sticky.
	   Body gets padding-top equal to header height so content isn't covered. */
	.mdl-header,
	header.mdl-header {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		z-index: 9999 !important;
	}
	body { padding-top: 128px !important; }
	body.admin-bar { padding-top: 174px !important; } /* +46px for mobile WP admin bar */

	/* HIDE search circle on mobile - per request */
	.mdl-header__search-toggle,
	.mdl-header .mdl-header__search-toggle,
	.mdl-header button.mdl-header__search-toggle { display: none !important; }
	/* Also hide the search dropdown pane in case it was open */
	.mdl-header__search { display: none !important; }
	/* Hide the divider that sits between lang switcher and (now-hidden) search */
	.mdl-header__divider--2 { display: none !important; }

	/* Push hamburger flush to right edge - kill container right padding */
	.mdl-header__bar .mdl-header__container {
		padding-right: 4px !important;
		padding-left: 16px !important;
	}
	.mdl-header__actions {
		gap: 8px !important;
		margin-right: 0 !important;
		padding-right: 0 !important;
	}
	.mdl-header .mdl-header__menu-toggle {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	/* SHOW hamburger - force visible with high specificity + !important */
	.mdl-header .mdl-header__menu-toggle,
	.mdl-header button.mdl-header__menu-toggle {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-direction: column !important;
		gap: 5px !important;
		width: 44px !important;
		height: 44px !important;
		padding: 8px !important;
		background: transparent !important;
		border: 0 !important;
		cursor: pointer !important;
		z-index: 10 !important;
	}
	.mdl-header .mdl-header__menu-toggle span {
		display: block !important;
		width: 24px !important;
		height: 2px !important;
		background: #fff !important;
		border-radius: 2px !important;
		transition: transform .25s ease, opacity .2s ease;
	}

	/* HIDE nav by default on mobile — drawer styling now lives in
	   mobile-menu.css (slide-in drawer). These minimal rules just ensure the
	   element exists in flow; the redesign file controls the rest. */
	.mdl-header .mdl-header__nav {
		display: block !important;
	}

	.mdl-header .mdl-nav-menu {
		flex-direction: column !important;
		gap: 0 !important;
		padding: 12px 0 !important;
		display: block !important;
	}
	.mdl-header .mdl-nav-menu > li {
		display: block !important;
		position: relative !important;
	}
	.mdl-header .mdl-nav-menu > li > a {
		padding: 11px 20px !important;
		font-size: 14px !important;
		font-weight: 600 !important;       /* semibold on mobile nav too */
		display: block !important;
		border-bottom: 1px solid rgba(255,255,255,.06);
	}

	/* Submenus: HIDDEN by default on mobile, expand on parent tap.
	 * The collapse rule below uses a descendant selector (no `>`) so it
	 * matches submenus at any depth - including sub-submenus inside an
	 * already-opened parent like About > Locations > [Pleasanton, Newark...].
	 *
	 * Specificity boost via body + .mdl-header__nav prefix because the
	 * parent theme has rules like `.site-header .main-navigation ul ul`
	 * at (0,4,2) that win over our previous (0,3,0). With `body` (0,0,1)
	 * and the added `.mdl-header__nav` (0,1,0) wrapper, we now sit at
	 * (0,5,1) which beats it. */
	body .mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu,
	body .mdl-header .mdl-header__nav .mdl-nav-menu ul.children,
	.mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu,
	.mdl-header .mdl-header__nav .mdl-nav-menu ul.children {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		float: none !important;
		clear: both !important;
		box-shadow: none !important;
		border: 0 !important;
		display: block !important;
		text-align: left !important;
		background: #4e6173 !important;
		max-height: 0 !important;
		overflow: hidden !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		transition: max-height .34s cubic-bezier(.4,0,.2,1) !important;
		will-change: max-height;
		list-style: none !important;
	}
	/* Submenu LIs - reset all positioning that might offset them. */
	body .mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li,
	body .mdl-header .mdl-header__nav .mdl-nav-menu ul.children li,
	.mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li,
	.mdl-header .mdl-header__nav .mdl-nav-menu ul.children li {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		display: block !important;
		text-align: left !important;
		list-style: none !important;
		min-height: 0 !important;
		background: transparent !important;
	}
	/* Submenu links - block, left-aligned, wrap long labels. */
	body .mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li a,
	body .mdl-header .mdl-header__nav .mdl-nav-menu ul.children li a,
	.mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li a,
	.mdl-header .mdl-header__nav .mdl-nav-menu ul.children li a {
		position: static !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 17px 20px 17px 40px !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		text-align: left !important;
		white-space: normal !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
		font-size: 13px !important;
		line-height: 1.3 !important;
		color: rgba(255,255,255,.85) !important;
		background: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid rgba(255,255,255,.04) !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
	}
	/* Show rule: works at ANY depth (descendant combinator, not child).
	 * So tapping a parent at level 1 OR level 2 opens its children. */
	body .mdl-header .mdl-header__nav .mdl-nav-menu li.is-open > .sub-menu,
	body .mdl-header .mdl-header__nav .mdl-nav-menu li.is-open > ul.children,
	.mdl-header .mdl-header__nav .mdl-nav-menu li.is-open > .sub-menu,
	.mdl-header .mdl-header__nav .mdl-nav-menu li.is-open > ul.children {
		max-height: 1500px !important;
	}
	/* Deeper nesting (sub-sub) gets more indent and a touch darker bg. */
	.mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu .sub-menu li a,
	.mdl-header .mdl-header__nav .mdl-nav-menu ul.children ul.children li a {
		padding: 17px 20px 17px 56px !important;
		font-size: 12.5px !important;
		background: #4e6173 !important;
	}

	/* Safety: drawer itself clips horizontally so nothing leaks out. */
	.mdl-header .mdl-header__nav {
		overflow-x: hidden !important;
		max-width: 100vw !important;
	}

	/* Caret chevrons for mobile parent items are defined in mobile-menu.css. */
}

@media (max-width: 768px) {
	.mdl-header__container { padding: 0 16px; }
	.mdl-header__bar .mdl-header__container {
		padding-top: 14px;
		padding-bottom: 14px;
		gap: 12px;
		padding-right: 2px !important;
		padding-left: 14px !important;
	}
	.mdl-header__brand-text { display: none; } /* logo only on small phones */
	.mdl-header__divider { display: none; }
	.mdl-header__phone { display: none; }     /* tap the diamond/menu to call instead */
	.mdl-header__actions { gap: 6px !important; }
	.mdl-lang__btn { min-width: 32px; font-size: 11px; }
	/* Compact diamond - phone screen real estate is precious. */
	.mdl-header__diamond { width: 40px !important; height: 40px !important; }
	.mdl-header__logo-img { max-height: 40px !important; width: auto !important; }
	/* Compensate body padding-top for compact header on phones. Kept in sync
	   with the consolidated rule in review-fixes.css (header + gap). */
	body { padding-top: 128px !important; }
	body.admin-bar { padding-top: 174px !important; }
}

/* ============================================================
   Google Translate widget - hide Google's UI chrome.
   Google injects a yellow banner at top of <body> and shifts the
   page down 40px. These rules suppress that so only OUR buttons
   are visible and the page stays in place.
   ============================================================ */
.skiptranslate,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget,
.goog-te-spinner-pos,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover { display: none !important; visibility: hidden !important; }

body { top: 0 !important; position: static !important; }
body > .skiptranslate { display: none !important; }

/* ============================================================
   Legacy header-compensation reset.
   The original theme had a position:fixed header 145px tall and
   used padding-top: 145px / margin-top: 145px on inner pages to
   push content down. The v4 header is position:sticky and takes
   its own space in flow, so this legacy compensation creates a
   ~145px empty gap below the header on inner pages. Override.
   ============================================================ */
.no-banner #container-wrap,
body.no-banner #container-wrap { padding-top: 0 !important; }
.page-banner { margin-top: 0 !important; }
body.single-team,
body.single,
body.archive,
body.search { padding-top: 0 !important; }
@media (max-width: 991px) {
	body.single-team,
	body.single,
	body.archive,
	body.search { padding-top: 0 !important; }
}

.goog-text-highlight {
	background: none !important;
	box-shadow: none !important;
}

/* The init element itself - keep it in the DOM but invisible & out-of-flow */
#google_translate_element {
	position: absolute !important;
	top: -9999px !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ============================================================
   Strong overrides - defeat Bootstrap / theme-style.css button rules
   that were stretching the EN/ES buttons and hiding the search circle.
   ============================================================ */
.mdl-header .mdl-lang {
	display: inline-flex !important;
	gap: 6px !important;
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
.mdl-header .mdl-lang .mdl-lang__btn,
.mdl-header .mdl-lang button.mdl-lang__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 36px !important;
	max-width: 56px !important;
	height: 28px !important;
	padding: 0 10px !important;
	margin: 0 !important;
	background: transparent !important;
	border: 1px solid rgba(255,255,255,.5) !important;
	border-radius: 4px !important;
	color: #fff !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 1px !important;
	line-height: 1 !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
.mdl-header .mdl-lang .mdl-lang__btn:hover,
.mdl-header .mdl-lang button.mdl-lang__btn:hover {
	background: rgba(255,255,255,.15) !important;
	border-color: rgba(255,255,255,.7) !important;
	color: #fff !important;
}
.mdl-header .mdl-lang .mdl-lang__btn--active,
.mdl-header .mdl-lang button.mdl-lang__btn--active {
	background: rgba(255,255,255,.85) !important;
	color: #243952 !important;
	border-color: rgba(255,255,255,.85) !important;
}
/* Safety net: any descendant of a lang button (e.g. Google Translate
 * <font> wrappers, or the wrapper <span> we added) inherits the parent
 * button color so the EN / ES label never goes invisible regardless of
 * whether Google Translate is active or not. */
.mdl-header .mdl-lang .mdl-lang__btn *,
.mdl-header .mdl-lang button.mdl-lang__btn * {
	color: inherit !important;
	background: transparent !important;
	font: inherit !important;
}
.mdl-header .mdl-lang .mdl-lang__btn:focus,
.mdl-header .mdl-lang button.mdl-lang__btn:focus {
	outline: 2px solid #CAA45D !important;
	outline-offset: 2px !important;
}

/* Search circle button - force compact circular shape.
   Wrapped in min-width: 993px so it does NOT override the mobile
   display:none rule at the mobile breakpoint above. */
@media (min-width: 993px) {
	.mdl-header .mdl-header__search-toggle,
	.mdl-header button.mdl-header__search-toggle {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 auto !important;
		width: 36px !important;
		min-width: 36px !important;
		max-width: 36px !important;
		height: 36px !important;
		padding: 0 !important;
		margin: 0 !important;
		background: #243952 !important;
		color: #fff !important;
		border: 0 !important;
		border-radius: 50% !important;
		cursor: pointer !important;
		box-shadow: none !important;
		transition: background-color .15s ease !important;
	}
	.mdl-header .mdl-header__search-toggle:hover,
	.mdl-header button.mdl-header__search-toggle:hover {
		background: #1A2A3D !important;
	}
	.mdl-header .mdl-header__search-toggle[aria-expanded="true"] {
		background: #CAA45D !important;
	}
	.mdl-header .mdl-header__search-toggle svg {
		width: 18px !important;
		height: 18px !important;
		stroke: #fff !important;
	}
}

/* Belt-and-suspenders: force hidden on mobile no matter what */
@media (max-width: 992px) {
	.mdl-header .mdl-header__search-toggle,
	.mdl-header button.mdl-header__search-toggle,
	#mdl-search-btn { display: none !important; }
}

/* Mobile menu button: keep transparent, defeat theme bg */
.mdl-header .mdl-header__menu-toggle,
.mdl-header button.mdl-header__menu-toggle {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 6px !important;
	min-width: 36px !important;
}
/* ============================================================
 * Shared responsive hero banner (real <img> instead of CSS bg).
 * Lets the browser pick the sharpest srcset source on mobile,
 * so banners no longer look blurred / pixelated on phones.
 * Applied on About, Practice Area, Press and News heroes.
 * ============================================================ */
.mdl-hero-banner { position: relative; overflow: hidden; }
.mdl-hero-banner__img {
	position: absolute !important;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	margin: 0 !important;
	display: block;
}
/* Optional tint layer (About hero) — sits above the image, below the text. */
.mdl-hero-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	pointer-events: none;
}
/* Keep the heading/eyebrow above the image + overlay. */
.mdl-hero-banner > *:not(.mdl-hero-banner__img):not(.mdl-hero-banner__overlay):not(.mdl-hero-banner__picture) { position: relative; z-index: 2; }
@media (max-width: 768px) {
	/* Keep faces / focal point in frame on tall-narrow mobile crops. */
	.mdl-hero-banner__img { object-position: center top; }
}