/* MIRDXB PRO - mobile refinement layer.
   Layout, spacing and motion only. No colour, font-family or copy changes.

   The drawer is a purpose-built element (.mdx-drawer) cloned from the menu,
   rather than an override of Elementor's dropdown. Fighting the widget's own
   positioning proved unreliable; owning the element outright does not. */

/* ============================================================
   1. HEADER - logo and toggle must never collide
   ============================================================ */
@media (max-width: 1024px) {
	.elementor-widget-nav-menu .elementor-menu-toggle {
		margin-left: auto;
		width: 44px;
		height: 44px;
		border-radius: 10px;
		background: #EEF0F4;
		border: 1px solid rgba(15, 18, 34, .14);
		color: #080047;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		position: relative;
		z-index: 5;
	}
	.mdx-logo-link {
		display: block;
		max-width: min(50vw, 196px) !important;
		flex: 0 1 auto;
		min-width: 0;
	}
	.mdx-logo-link svg {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block;
	}
	.elementor-widget-nav-menu { flex: 0 0 auto !important; }
	.elementor-location-header .e-con-inner { gap: 12px; align-items: center; }

	/* Elementor's own dropdown is replaced by .mdx-drawer */
	.mdx-drawer-ready .elementor-nav-menu--dropdown { display: none !important; }
}
@media (max-width: 400px) {
	.mdx-logo-link { max-width: min(46vw, 168px) !important; }
}

/* ============================================================
   2. LEFT OFF-CANVAS DRAWER
   ============================================================ */
.mdx-drawer,
.mdx-drawer__scrim { display: none; }

@media (max-width: 1024px) {

	.mdx-drawer__scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(15, 18, 34, .5);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility 0s linear .3s;
		z-index: 999998;
		border: 0;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}

	.mdx-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: min(86vw, 340px);
		background: #fff;
		z-index: 999999;
		transform: translateX(-102%);
		transition: transform .34s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .34s;
		visibility: hidden;
		box-shadow: 0 0 48px rgba(0, 0, 0, .2);
		overflow: hidden;
	}

	html.mdx-nav-open .mdx-drawer {
		transform: translateX(0);
		visibility: visible;
		transition: transform .34s cubic-bezier(.4, 0, .2, 1), visibility 0s;
	}
	html.mdx-nav-open .mdx-drawer__scrim {
		opacity: 1;
		visibility: visible;
		transition: opacity .3s ease, visibility 0s;
	}

	html.mdx-nav-open,
	html.mdx-nav-open body { overflow: hidden !important; }

	/* Head */
	.mdx-drawer__head {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 16px 16px 8px;
		flex: 0 0 auto;
	}
	.mdx-drawer__close {
		width: 42px;
		height: 42px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(15, 18, 34, .12);
		border-radius: 10px;
		background: transparent;
		cursor: pointer;
		padding: 0;
		color: inherit;
	}
	.mdx-drawer__close svg { width: 17px; height: 17px; display: block; }

	/* Scrollable body */
	.mdx-drawer__body {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.mdx-drawer ul { list-style: none; margin: 0; padding: 0; }
	.mdx-drawer li { border-bottom: 1px solid rgba(15, 18, 34, .16); }
	.mdx-drawer li:last-child { border-bottom: 0; }

	.mdx-drawer .mdx-row {
		display: flex;
		align-items: stretch;
		width: 100%;
	}
	.mdx-drawer .mdx-row > a {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		min-height: 54px;
		padding: 13px 20px;
		line-height: 1.35;
		text-decoration: none;
		white-space: normal;
	}
	.mdx-drawer .mdx-sub-toggle {
		flex: 0 0 54px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 0;
		border-left: 1px solid rgba(15, 18, 34, .16);
		cursor: pointer;
		padding: 0;
		color: inherit;
	}
	.mdx-drawer .mdx-sub-toggle svg {
		width: 12px;
		height: 12px;
		transition: transform .25s ease;
	}
	.mdx-drawer li.is-open > .mdx-row > .mdx-sub-toggle svg { transform: rotate(180deg); }

	.mdx-drawer .sub-menu {
		display: none;
		background: rgba(15, 18, 34, .025);
		padding: 2px 0;
	}
	.mdx-drawer li.is-open > .sub-menu { display: block; }
	.mdx-drawer .sub-menu a {
		display: flex;
		align-items: center;
		min-height: 46px;
		padding: 10px 20px 10px 34px;
		font-size: .93em;
		text-decoration: none;
		line-height: 1.4;
		white-space: normal;
	}

	/* CTA foot */
	.mdx-drawer__foot {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 16px 20px calc(18px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(15, 18, 34, .08);
	}
	.mdx-drawer__foot a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-height: 50px;
		border-radius: 10px;
		text-align: center;
		width: 100%;
	}
}

/* ============================================================
   3. HERO
   ============================================================ */
@media (max-width: 767px) {

	.mdx-hero,
	.mdx-hero > .e-con-inner {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.mdx-hero {
		padding-top: 38px !important;
		padding-bottom: 42px !important;
	}
	.mdx-hero > .e-con-inner {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.mdx-hero h1,
	.mdx-hero h1.elementor-heading-title {
		font-size: clamp(27px, 7.4vw, 33px) !important;
		line-height: 1.17 !important;
		letter-spacing: -.015em;
		overflow-wrap: break-word;
		text-wrap: balance;
		margin-bottom: 14px;
	}

	.mdx-hero-copy p,
	.mdx-hero p {
		font-size: 15.5px !important;
		line-height: 1.62 !important;
		margin-bottom: 22px;
	}

	/* Eyebrow reads as a small chip, never a headline */
	.mdx-hero .mdx-eyebrow .elementor-heading-title {
		display: inline-block;
		font-size: 11px !important;
		line-height: 1.45 !important;
		letter-spacing: .09em;
		padding: 7px 13px;
		border-radius: 999px;
		width: auto;
		max-width: 100%;
	}
	.mdx-hero .mdx-eyebrow { margin-bottom: 16px; }

	.mdx-hero .elementor-widget-button,
	.mdx-hero-copy .elementor-widget-button { width: 100%; }

	.mdx-hero .elementor-button {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 54px;
		border-radius: 10px;
		letter-spacing: .04em;
	}
	.mdx-hero .elementor-widget-button + .elementor-widget-button { margin-top: 10px; }
	.mdx-hero .elementor-widget-button + .elementor-widget-button .elementor-button {
		box-shadow: inset 0 0 0 1px rgba(15, 18, 34, .16);
	}
}

/* ============================================================
   4. GENERAL MOBILE GUTTERS + TAP TARGETS
   Not !important, so explicit Elementor settings still win.
   ============================================================ */
@media (max-width: 767px) {
	body .e-con-boxed > .e-con-inner {
		padding-left: 20px;
		padding-right: 20px;
	}
	.elementor-button,
	.mdx-btn {
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.mdx-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	img, video, iframe { max-width: 100%; }
}

/* ============================================================
   5. DRAWER CHROME RESET
   The scrim and close control are <button>s, so the theme's
   button styling claimed them. Reset inside the drawer only.
   Menu rows reuse the site's own --mdx-indigo token so the
   drawer matches the desktop nav rather than inventing a look.
   ============================================================ */
@media (max-width: 1024px) {

	button.mdx-drawer__scrim {
		background: rgba(15, 18, 34, .5) !important;
		border: 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		min-height: 0 !important;
		font-size: 0 !important;
	}

	.mdx-drawer button.mdx-drawer__close,
	.mdx-drawer button.mdx-sub-toggle {
		background: transparent !important;
		box-shadow: none !important;
		color: var(--mdx-indigo, #16183a) !important;
		min-height: 0 !important;
		font-size: 0 !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
	}
	.mdx-drawer button.mdx-drawer__close {
		border: 1px solid rgba(15, 18, 34, .12) !important;
		border-radius: 10px !important;
		padding: 0 !important;
		width: 42px !important;
		height: 42px !important;
	}
	.mdx-drawer button.mdx-sub-toggle {
		border: 0 !important;
		border-left: 1px solid rgba(15, 18, 34, .16) !important;
		border-radius: 0 !important;
	}

	/* Rows match the desktop nav treatment */
	.mdx-drawer .mdx-row > a {
		color: var(--mdx-indigo, #16183a) !important;
		text-transform: uppercase;
		letter-spacing: .08em;
		font-size: 12px;
		font-weight: 700;
	}
	.mdx-drawer .sub-menu a {
		color: var(--mdx-indigo, #16183a) !important;
		opacity: .82;
		letter-spacing: .01em;
		font-size: 13.5px;
		font-weight: 500;
		text-transform: none;
	}
	.mdx-drawer .mdx-row > a:active { background: rgba(15, 18, 34, .04); }
}

/* scrim hardening - must never inherit theme button styling */
@media (max-width: 1024px) {
	.mdx-drawer__scrim, div.mdx-drawer__scrim, button.mdx-drawer__scrim {
		background: rgba(15, 18, 34, .5) !important;
		border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
		padding: 0 !important; margin: 0 !important; min-height: 0 !important;
		font-size: 0 !important; color: transparent !important;
	}
	.mdx-drawer__foot a.mdx-cta-ghost {
		background: transparent !important;
		color: var(--mdx-indigo, #080047) !important;
		box-shadow: inset 0 0 0 1px rgba(15, 18, 34, .18) !important;
	}
}