/* ==========================================================================
   Mirador Law — Mobile Menu (redesign)
   --------------------------------------------------------------------------
   A clean, full-height slide-down drawer with clear hierarchy, generous tap
   targets, smooth submenu accordions, and a tidy footer (language + call).
   Loads after header-v4.css so it owns the mobile (<=992px) menu look.
   ========================================================================== */
@media (max-width: 992px) {

	/* ---- Drawer shell -------------------------------------------------- */
	.mdl-header .mdl-header__nav {
		display: block !important;
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		left: auto !important;
		width: min(86vw, 380px) !important;
		max-width: 380px !important;
		height: 100vh !important;
		height: 100dvh !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #4e6173 !important;
		border-top: 0 !important;
		border-left: 1px solid rgba(202,164,93,.18) !important;
		box-shadow: -16px 0 48px rgba(0,0,0,.4) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch;
		transform: translateX(100%) !important;
		transition: transform .34s cubic-bezier(.4,0,.2,1) !important;
		z-index: 10000 !important;
		will-change: transform;
	}
	.mdl-header .mdl-header__nav.is-open {
		transform: translateX(0) !important;
		max-height: none !important;
	}
	.mdl-header .mdl-header__nav .mdl-header__container {
		padding: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	/* Dim backdrop behind the drawer */
	.mdl-nav-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(13,22,36,.55);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility .3s ease;
		z-index: 9998;
	}
	.mdl-nav-backdrop.is-visible { opacity: 1; visibility: visible; }

	/* ---- Drawer header (logo + close) --------------------------------- */
	.mdl-nav-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 18px 20px;
		border-bottom: 1px solid rgba(255,255,255,.08);
		background: #4e6173;
	}
	.mdl-nav-drawer-head .mdl-nav-drawer-brand {
		display: inline-flex;
		align-items: center;
		font-family: "Montserrat", sans-serif;
		font-size: 17px;
		font-weight: 700;
		letter-spacing: 2px;
		color: #fff;
		text-decoration: none;
	}
	.mdl-nav-drawer-head .mdl-nav-drawer-logo {
		display: block;
		height: 40px;
		width: auto;
		max-width: 200px;
		object-fit: contain;
	}
	.mdl-nav-drawer-close {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		height: 40px !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		background-color: transparent !important;
		border: 1px solid rgba(255,255,255,.2) !important;
		border-radius: 8px !important;
		box-shadow: none !important;
		color: #fff !important;
		cursor: pointer !important;
		flex: 0 0 auto !important;
		transition: background .2s ease, border-color .2s ease;
	}
	.mdl-nav-drawer-close:hover,
	.mdl-nav-drawer-close:focus {
		background: rgba(255,255,255,.08) !important;
		border-color: rgba(202,164,93,.5) !important;
		box-shadow: none !important;
	}
	.mdl-nav-drawer-close svg { width: 18px !important; height: 18px !important; display: block !important; }
	.mdl-nav-drawer-close svg line { stroke: #fff !important; }

	/* ---- Menu list ----------------------------------------------------- */
	.mdl-header .mdl-nav-menu {
		flex-direction: column !important;
		gap: 0 !important;
		padding: 8px 0 !important;
		margin: 0 !important;
		display: block !important;
		list-style: none !important;
	}
	.mdl-header .mdl-nav-menu > li {
		display: block !important;
		position: relative !important;
		border-bottom: 1px solid rgba(255,255,255,.06) !important;
	}

	/* Top-level links */
	.mdl-header .mdl-nav-menu > li > a {
		display: flex !important;
		align-items: center !important;
		min-height: 0 !important;
		padding: 17px 56px 17px 24px !important;
		line-height: 1 !important;
		color: #fff !important;
		font-family: "Montserrat", sans-serif !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		letter-spacing: 1px !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
		border-bottom: 0 !important;
		transition: background .2s ease, color .2s ease, padding-left .2s ease;
	}
	.mdl-header .mdl-nav-menu > li > a:hover,
	.mdl-header .mdl-nav-menu > li > a:focus { background: rgba(255,255,255,.05) !important; padding-left: 28px !important; }
	.mdl-header .mdl-nav-menu > li.current-menu-item > a,
	.mdl-header .mdl-nav-menu > li.current_page_item > a {
		color: #CAA45D !important;
		box-shadow: inset 3px 0 0 #CAA45D;
	}

	/* ---- Submenus (accordion) ----------------------------------------- */
	.mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu,
	.mdl-header .mdl-header__nav .mdl-nav-menu ul.children {
		position: static !important;
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #4e6173 !important;
		border: 0 !important;
		box-shadow: none !important;
		list-style: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		max-height: 0 !important;
		overflow: hidden !important;
		transition: max-height .34s cubic-bezier(.4,0,.2,1) !important;
		pointer-events: auto !important;
		will-change: max-height;
	}
	.mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu > li,
	.mdl-header .mdl-header__nav .mdl-nav-menu ul.children > li {
		min-height: 0 !important;
	}
	.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;
	}
	.mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li,
	.mdl-header .mdl-header__nav .mdl-nav-menu ul.children li {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		position: static !important;
		transform: none !important;
		min-height: 0 !important;
		border-top: 1px solid rgba(255,255,255,.04) !important;
	}

	/* Second-level links */
	.mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li a,
	.mdl-header .mdl-header__nav .mdl-nav-menu ul.children li a {
		display: flex !important;
		align-items: center !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 17px 48px 17px 40px !important;
		color: rgba(255,255,255,.82) !important;
		font-family: "Montserrat", sans-serif !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		letter-spacing: .3px !important;
		text-transform: none !important;
		text-decoration: none !important;
		line-height: 1.3 !important;
		white-space: normal !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
		background: transparent !important;
		border: 0 !important;
		position: relative !important;
		transition: background .2s ease, color .2s ease;
	}
	.mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li a:hover,
	.mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li a:focus {
		background: rgba(255,255,255,.05) !important;
		color: #CAA45D !important;
	}

	/* Third-level (sub-sub) links: deeper indent + subtle tint */
	.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 {
		min-height: 0 !important;
		padding: 17px 44px 17px 56px !important;
		font-size: 13.5px !important;
		background: #4e6173 !important;
	}

	/* ---- Caret toggles (chevrons) ------------------------------------- */
	.mdl-header .mdl-nav-menu li.menu-item-has-children > a,
	.mdl-header .mdl-nav-menu li.page_item_has_children > a,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li:has(> ul) > a { position: relative !important; }
	/* Chevron drawing is handled by the HARDCODED :has() rules below. */

	/* ===================================================================
	   CHEVRONS & MARKERS — single clean source of truth.
	   1) Remove every stray pseudo-marker on ALL menu links.
	   2) Re-add ONE chevron only on items that contain a nested <ul>.
	   3) Flip it when the item is open.
	   =================================================================== */

	/* 1) Wipe all markers on every menu link + li + child icons. */
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li::before,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li::after,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li > a::before,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li > a::after {
		content: none !important;
		display: none !important;
		border: 0 !important;
		background: none !important;
	}
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li > a > i,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li > a > svg,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li > a > .fa {
		display: none !important;
	}

	/* 2) Add a chevron ONLY to items that actually contain a child <ul>.
	      Drawn with a small inline SVG background (can't malform like borders).
	      Anchored to the <a> itself (which is a fixed-height flex row), so it
	      always sits centered on the label row — never drifts when the submenu
	      below it expands. */
	/* The chevron is anchored to the <li> (a stable block box), NOT the <a>.
	   The <a> is display:flex, which turns its ::after into a flex CHILD that
	   sits on the top baseline of a wrapped/tall row instead of staying
	   centered — that was making the Locations caret ride high. The <li> has a
	   single label row of known height, so 50% of it is the true visual center
	   of the label and the caret never drifts when the submenu expands below. */
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li:has(> ul) {
		position: relative !important;
	}
	html body .mdl-header .mdl-header__nav .mdl-nav-menu > li:has(> ul) > a::after,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li:has(> ul) > a::after {
		content: none !important;
		display: none !important;
		background: none !important;
	}
	html body .mdl-header .mdl-header__nav .mdl-nav-menu > li:has(> ul)::after {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		right: 20px !important;
		top: 28px !important;            /* center of the 17px-padded, ~15px label row */
		bottom: auto !important;
		left: auto !important;
		margin: 0 !important;
		transform: translateY(-50%) !important;
		width: 14px !important;
		height: 14px !important;
		min-width: 14px !important;
		min-height: 14px !important;
		max-width: 14px !important;
		max-height: 14px !important;
		flex: none !important;
		padding: 0 !important;
		border: 0 !important;
		font-size: 0 !important;
		line-height: 0 !important;
		box-sizing: border-box !important;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center center / 14px 14px no-repeat !important;
		background-color: transparent !important;
		transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
		pointer-events: none !important;
		z-index: 2 !important;
	}
	/* Google Translate wraps link text in <font>/<span>; never let those
	   injected inline wrappers grow a chevron or push the row height around. */
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li:has(> ul) > a font::after,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li:has(> ul) > a span::after,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li:has(> ul) > a font::before,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li:has(> ul) > a span::before {
		content: none !important;
		display: none !important;
		background: none !important;
	}
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li:has(> ul) > a font,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li:has(> ul) > a span {
		display: inline !important;
		line-height: inherit !important;
		vertical-align: baseline !important;
	}
	/* Sub-level parent chevrons in gold */
	html body .mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li:has(> ul) {
		position: relative !important;
	}
	html body .mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li:has(> ul)::after {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		right: 20px !important;
		top: 28px !important;            /* center of the 17px-padded sub-row */
		bottom: auto !important;
		left: auto !important;
		margin: 0 !important;
		transform: translateY(-50%) !important;
		width: 14px !important;
		height: 14px !important;
		flex: none !important;
		padding: 0 !important;
		border: 0 !important;
		font-size: 0 !important;
		line-height: 0 !important;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CAA45D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center center / 14px 14px no-repeat !important;
		background-color: transparent !important;
		pointer-events: none !important;
		transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
		z-index: 2 !important;
	}
	/* 3) When OPEN, flip the chevron 180° (points up) with a smooth spin.
	      Keep translateY(-50%) so it stays vertically centered while it turns.
	      Anchored on the <li>, so the rotate rule targets the <li> too. */
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li.is-open::after,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu li.is-open > a::after {
		transform: translateY(-50%) rotate(180deg) !important;
	}
	/* Sub-level parents (Locations, Our Team, etc.) need a selector that matches
	   the base sub-menu chevron's specificity, or the base rule wins and the
	   arrow never rotates. These mirror :has(> ul) + .is-open so they take over. */
	html body .mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li.is-open:has(> ul)::after,
	html body .mdl-header .mdl-header__nav .mdl-nav-menu .sub-menu li.is-open:has(> ul) > a::after {
		transform: translateY(-50%) rotate(180deg) !important;
	}

	/* ---- Drawer footer (language + call) ------------------------------ */
	.mdl-nav-drawer-foot {
		padding: 20px 24px calc(28px + env(safe-area-inset-bottom));
		margin-top: 8px;
		border-top: 1px solid rgba(255,255,255,.08);
		background: #4e6173;
	}
	.mdl-nav-drawer-foot .mdl-nav-foot-label {
		display: block;
		font-family: "Montserrat", sans-serif;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		color: rgba(255,255,255,.5);
		margin: 0 0 10px;
	}
	.mdl-nav-drawer-foot .mdl-nav-foot-call {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		padding: 14px 18px;
		background: #CAA45D;
		color: #fff;
		font-family: "Montserrat", sans-serif;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: .5px;
		text-decoration: none;
		border-radius: 8px;
		transition: background .2s ease;
	}
	.mdl-nav-drawer-foot .mdl-nav-foot-call:hover { background: #B5903F; }
	.mdl-nav-drawer-foot .mdl-nav-foot-call svg { width: 18px; height: 18px; }

	/* Lock body scroll when the drawer is open */
	body.mdl-nav-open { overflow: hidden !important; }
}

/* Desktop: never show drawer-only chrome */
@media (min-width: 993px) {
	.mdl-nav-backdrop,
	.mdl-nav-drawer-head,
	.mdl-nav-drawer-foot { display: none !important; }
}