/* ==========================================================================
   ADEC Mobile Menu — v1.5
   - Panel opens UNDER the site header (top offset measured at runtime
     and exposed as --adec-mm-top on .adec-mm-root).
   - Hamburger trigger morphs ☰ → ✕ when open; tap it again to close.
     The standalone X close-button row has been removed (legacy markup
     is force-hidden for safety).
   - Pill design with nested depth shading.
   - Search box uses distinct color from pills.
   - Pill text & pink underline truly centered (chevron-independent).
   - Contact form is a full-overlay sheet that slides up from the bottom,
     covering the menu entirely. Includes a "Close" link under Submit.
   - Hardened against theme overrides via scoped !important rules.
   - Activates only at <= 768px.
   ========================================================================== */

:root {
	--adec-mm-bg:        #0A2438;  /* outer panel — darkest */
	--adec-mm-search:    #06192A;  /* search input — distinct, deeper than panel */
	--adec-mm-pill:      #1B4A5E;  /* pill background (depth 0) */
	--adec-mm-d1:        #143B4D;  /* depth 1 inset */
	--adec-mm-d2:        #0F2F3F;  /* depth 2 inset (deepest) */
	--adec-mm-divider:   rgba(255, 255, 255, 0.06);
	--adec-mm-pink:      #E6356F;
	--adec-mm-pink-2:    #C92E62;
	--adec-mm-mint:      #C9E8E8;
	--adec-mm-text:      #FFFFFF;
	--adec-mm-muted:     rgba(255, 255, 255, 0.65);
	--adec-mm-font:      'Montserrat', 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--adec-mm-z:         99990;
	--adec-mm-pill-radius: 6px;
}

/* ---- Universal reset INSIDE our component (kills theme overrides) ------- */
.adec-mm-root,
.adec-mm-root *,
.adec-mm-panel,
.adec-mm-panel * {
	box-sizing: border-box;
}

.adec-mm-root button,
.adec-mm-panel button {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none !important;
	margin: 0 !important;
	padding: 0;
	cursor: pointer;
	border-radius: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1;
	text-shadow: none !important;
}

.adec-mm-root button:hover,
.adec-mm-root button:focus,
.adec-mm-root button:active,
.adec-mm-panel button:hover,
.adec-mm-panel button:focus,
.adec-mm-panel button:active {
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.adec-mm-root input,
.adec-mm-root textarea,
.adec-mm-panel input,
.adec-mm-panel textarea {
	-webkit-appearance: none !important;
	appearance: none !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	background: var(--adec-mm-pill) !important;
	color: var(--adec-mm-text) !important;
	font: inherit;
	border-radius: 4px !important;
}

.adec-mm-panel ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.adec-mm-panel a { text-decoration: none !important; }

.adec-mm-root { display: none; }
body.adec-mm-open { overflow: hidden; }

/* ============================== MOBILE ONLY ============================== */
@media (max-width: 768px) {

	.adec-mm-root {
		display: block;
		font-family: var(--adec-mm-font);
	}

	/* ---- Hamburger trigger ---------------------------------------------- */
	.adec-mm-root .adec-mm-trigger {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		color: var(--adec-mm-bg) !important;
		-webkit-tap-highlight-color: transparent;
	}
	.adec-mm-burger {
		position: relative;
		display: inline-block;
		width: 28px;
		height: 22px;
	}
	.adec-mm-burger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2.5px;
		background: currentColor;
		border-radius: 2px;
		transition: transform .28s ease, opacity .2s ease, top .28s ease;
		transform-origin: center;
	}
	.adec-mm-burger span:nth-child(1) { top: 2px; }
	.adec-mm-burger span:nth-child(2) { top: 10px; }
	.adec-mm-burger span:nth-child(3) { top: 18px; }

	/* ---- Open state: ☰ morphs to ✕ -------------------------------------- */
	.adec-mm-root.is-open .adec-mm-burger span:nth-child(1) {
		top: 10px;
		transform: rotate(45deg);
	}
	.adec-mm-root.is-open .adec-mm-burger span:nth-child(2) {
		opacity: 0;
	}
	.adec-mm-root.is-open .adec-mm-burger span:nth-child(3) {
		top: 10px;
		transform: rotate(-45deg);
	}
	@media (prefers-reduced-motion: reduce) {
		.adec-mm-burger span { transition: none; }
	}

	/* ---- Panel ---------------------------------------------------------- */
	/* The panel opens *below* the existing site header. The header's height
	   is auto-measured by the JS on open and exposed as --adec-mm-top on
	   the .adec-mm-root element (fallback: 0). */
	.adec-mm-panel {
		position: fixed !important;
		top: var(--adec-mm-top, 0px) !important;
		right: 0;
		bottom: 0;
		width: 100% !important;
		height: auto !important;
		background: var(--adec-mm-bg) !important;
		color: var(--adec-mm-text) !important;
		z-index: var(--adec-mm-z);
		transform: translateX(100%);
		transition: transform .35s ease;
		overflow: hidden;
	}
	.adec-mm-panel[hidden] { display: block; }
	.adec-mm-panel.is-open { transform: translateX(0); }

	.adec-mm-panel__inner {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		display: flex !important;
		flex-direction: column !important;
		/* Top padding is a bit larger now that the close-button row is gone,
		   so search has breathing room below the header. */
		padding: 22px 18px 16px !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Legacy close-button row (markup removed in v1.5, kept hidden for safety) */
	.adec-mm-panel__top,
	.adec-mm-panel .adec-mm-close {
		display: none !important;
	}

	/* ---- Search (distinct color, not pill) ----------------------------- */
	.adec-mm-search {
		position: relative !important;
		margin: 4px 0 18px !important;
	}
	.adec-mm-panel .adec-mm-search__input {
		display: block !important;
		width: 100% !important;
		height: 42px !important;
		padding: 0 44px 0 14px !important;
		background: var(--adec-mm-search) !important;
		border-radius: 4px !important;
		color: var(--adec-mm-text) !important;
		font-size: 15px !important;
		border: 1px solid rgba(255,255,255,0.06) !important;
	}
	.adec-mm-panel .adec-mm-search__input::placeholder {
		color: var(--adec-mm-muted) !important;
	}
	.adec-mm-panel .adec-mm-search__input:focus {
		outline: 2px solid var(--adec-mm-pink) !important;
		outline-offset: 1px !important;
	}
	.adec-mm-panel .adec-mm-search__submit {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		height: 42px !important;
		width: 44px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		color: var(--adec-mm-muted) !important;
	}

	/* ---- Nav lists — pill style ----------------------------------------- */
	.adec-mm-nav {
		flex: 0 0 auto;   /* natural height; CTA flows after it */
		min-height: 0;
	}

	.adec-mm-panel .adec-mm-list {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Each top-level pill */
	.adec-mm-panel .adec-mm-list > .adec-mm-item--depth-0 {
		position: relative !important;
		background: var(--adec-mm-pill) !important;
		border-radius: var(--adec-mm-pill-radius) !important;
		overflow: hidden !important;
		border: 0 !important;
	}

	/* Top-level link — symmetric padding so the text is truly centered
	   regardless of the chevron sitting in the right gutter. */
	.adec-mm-panel .adec-mm-list > .adec-mm-item--depth-0 > .adec-mm-link {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-direction: column !important;
		padding: 14px 44px !important;   /* equal left/right gutters = chevron width */
		min-height: 48px !important;
		color: var(--adec-mm-text) !important;
		text-decoration: none !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		letter-spacing: .01em !important;
		text-align: center !important;
		background: transparent !important;
		line-height: 1.25 !important;
	}

	/* Active expanded top-level: pink underline beneath label, centered */
	.adec-mm-panel .adec-mm-list > .adec-mm-item--depth-0.is-open > .adec-mm-link::after {
		content: "" !important;
		display: block !important;
		width: 70px !important;
		height: 2px !important;
		background: var(--adec-mm-pink) !important;
		margin-top: 6px !important;
	}

	/* ---- Toggle (chevron) — sits in column 3 of the grid -------------- */
	.adec-mm-panel .adec-mm-toggle {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		height: 48px !important;
		width: 44px !important;
		color: var(--adec-mm-text) !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.adec-mm-toggle-icon {
		display: block !important;
		width: 9px !important;
		height: 9px !important;
		border-right: 2px solid currentColor !important;
		border-bottom: 2px solid currentColor !important;
		border-top: 0 !important;
		border-left: 0 !important;
		transform: rotate(45deg);
		transition: transform .25s ease;
		margin-top: -3px;
	}
	.adec-mm-item--has-children.is-open > .adec-mm-toggle .adec-mm-toggle-icon {
		transform: rotate(-135deg);
		margin-top: 3px;
	}

	/* ---- Submenus — collapsed by default ------------------------------- */
	.adec-mm-panel .adec-mm-submenu {
		max-height: 0 !important;
		overflow: hidden !important;
		transition: max-height .3s ease;
		visibility: hidden !important;
		display: block !important;
	}
	.adec-mm-panel .adec-mm-item.is-open > .adec-mm-submenu {
		max-height: 2000px !important;
		visibility: visible !important;
	}

	/* Depth 1 list */
	.adec-mm-panel .adec-mm-submenu--depth-0 {
		background: var(--adec-mm-d1) !important;
	}
	.adec-mm-panel .adec-mm-submenu--depth-0 > .adec-mm-item--depth-1 {
		position: relative !important;
		border-bottom: 1px solid var(--adec-mm-divider) !important;
	}
	.adec-mm-panel .adec-mm-submenu--depth-0 > .adec-mm-item--depth-1:last-child {
		border-bottom: 0 !important;
	}
	.adec-mm-panel .adec-mm-submenu--depth-0 > .adec-mm-item--depth-1 > .adec-mm-link {
		display: block !important;
		padding: 13px 44px 13px 22px !important;
		color: var(--adec-mm-text) !important;
		font-size: 14.5px !important;
		font-weight: 600 !important;
		text-align: left !important;
		background: transparent !important;
	}

	/* Depth 2 list */
	.adec-mm-panel .adec-mm-submenu--depth-1 {
		background: var(--adec-mm-d2) !important;
	}
	.adec-mm-panel .adec-mm-submenu--depth-1 > .adec-mm-item--depth-2 {
		position: relative !important;
		border-bottom: 1px solid var(--adec-mm-divider) !important;
	}
	.adec-mm-panel .adec-mm-submenu--depth-1 > .adec-mm-item--depth-2:last-child {
		border-bottom: 0 !important;
	}
	.adec-mm-panel .adec-mm-submenu--depth-1 > .adec-mm-item--depth-2 > .adec-mm-link {
		display: block !important;
		padding: 11px 16px 11px 36px !important;
		color: rgba(255,255,255,0.92) !important;
		font-size: 13.5px !important;
		font-weight: 500 !important;
		text-align: left !important;
		background: transparent !important;
	}

	.adec-mm-panel .adec-mm-submenu .adec-mm-toggle { height: 44px !important; }

	/* ---- Bottom CTA region (flows with menu, not pinned) -------------- */
	.adec-mm-bottom {
		flex: 0 0 auto;
		/* CTA flows in normal order after the nav so it moves with the menu
		   when submenus expand — no overlap. */
		margin-top: 18px !important;
		padding-top: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}

	.adec-mm-panel .adec-mm-cta {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 200px !important;
		min-height: 44px !important;
		padding: 12px 28px !important;
		background: var(--adec-mm-pink) !important;
		color: #fff !important;
		border-radius: 6px !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		letter-spacing: .02em !important;
		position: relative !important;
		transition: background .2s ease;
		line-height: 1.2 !important;
	}
	.adec-mm-panel .adec-mm-cta:hover { background: var(--adec-mm-pink-2) !important; }

	.adec-mm-thanks {
		display: block !important;
		margin: 10px 0 0 !important;
		text-align: center !important;
		color: #fff !important;
		font-size: 13px !important;
	}
	.adec-mm-thanks[hidden] { display: none !important; }

	/* ---- Footer -------------------------------------------------------- */
	.adec-mm-footer {
		flex: 0 0 auto;
		margin-top: 14px !important;
		padding-top: 8px !important;
		text-align: center !important;
		font-size: 11.5px !important;
		color: var(--adec-mm-muted) !important;
	}

	.adec-mm-empty {
		color: var(--adec-mm-muted) !important;
		text-align: center !important;
		font-size: 14px !important;
		padding: 24px 8px !important;
	}

	/* ---- Form overlay (full-screen sheet, slides up) ------------------ */
	.adec-mm-form-overlay {
		position: absolute !important;
		top: 0; right: 0; bottom: 0; left: 0;
		background: var(--adec-mm-bg) !important;
		z-index: 5;
		transform: translateY(100%);
		transition: transform .35s ease;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		display: block !important;
		visibility: hidden;
	}
	.adec-mm-form-overlay.is-open {
		transform: translateY(0);
		visibility: visible;
	}

	.adec-mm-form-overlay__inner {
		min-height: 100%;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		padding: 32px 22px 28px !important;
	}

	/* ---- Optional logo above the heading -------------------------------- */
	.adec-mm-form-overlay__logo-wrap {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		margin: 0 auto 22px !important;   /* breathing room between logo and heading */
		width: 100% !important;
	}
	.adec-mm-form-overlay__logo {
		display: block !important;
		max-width: 140px;                 /* default; widget/shortcode can override */
		width: auto !important;
		height: auto !important;
		max-height: 88px !important;      /* hard cap so a tall logo can't dominate */
		object-fit: contain !important;
	}

	.adec-mm-form-overlay__heading {
		text-align: center !important;
		font-size: 22px !important;
		font-weight: 700 !important;
		color: var(--adec-mm-pink) !important;
		margin-bottom: 18px !important;
		position: relative !important;
		padding-bottom: 8px !important;
	}
	.adec-mm-form-overlay__heading::after {
		content: "" !important;
		position: absolute !important;
		left: 50% !important;
		bottom: 0 !important;
		transform: translateX(-50%);
		width: 70px !important;
		height: 2px !important;
		background: var(--adec-mm-pink) !important;
	}

	.adec-mm-form {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		width: 100% !important;
		max-width: 380px !important;
		margin: 0 auto !important;
	}

	.adec-mm-panel .adec-mm-field input,
	.adec-mm-panel .adec-mm-field textarea {
		display: block !important;
		width: 100% !important;
		padding: 12px 14px !important;
		background: var(--adec-mm-pill) !important;
		border-radius: 4px !important;
		color: var(--adec-mm-text) !important;
		font-size: 15px !important;
	}
	.adec-mm-panel .adec-mm-field textarea {
		min-height: 110px !important;
		resize: vertical !important;
	}
	.adec-mm-panel .adec-mm-field input::placeholder,
	.adec-mm-panel .adec-mm-field textarea::placeholder {
		color: var(--adec-mm-muted) !important;
		opacity: 1 !important;
	}
	.adec-mm-panel .adec-mm-field input:focus,
	.adec-mm-panel .adec-mm-field textarea:focus {
		outline: 2px solid var(--adec-mm-pink) !important;
		outline-offset: 1px !important;
	}

	.adec-mm-panel .adec-mm-submit {
		display: block !important;
		width: 100% !important;
		margin-top: 4px !important;
		padding: 14px 20px !important;
		background: var(--adec-mm-mint) !important;
		color: var(--adec-mm-bg) !important;
		border-radius: 4px !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		letter-spacing: .02em !important;
		line-height: 1.2 !important;
	}
	.adec-mm-panel .adec-mm-submit:hover {
		background: var(--adec-mm-mint) !important;
		filter: brightness(0.95);
	}
	.adec-mm-panel .adec-mm-submit:disabled { opacity: .6; cursor: not-allowed; }

	/* "Close" hyperlink under Submit */
	.adec-mm-panel .adec-mm-form-close {
		display: block !important;
		width: auto !important;
		margin: 14px auto 0 !important;
		padding: 6px 12px !important;
		background: transparent !important;
		color: var(--adec-mm-muted) !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		text-decoration: underline !important;
		letter-spacing: .02em !important;
	}
	.adec-mm-panel .adec-mm-form-close:hover {
		color: #fff !important;
	}

	.adec-mm-root .screen-reader-text {
		position: absolute !important;
		width: 1px !important; height: 1px !important;
		padding: 0 !important; margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0,0,0,0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.adec-mm-panel,
	.adec-mm-submenu,
	.adec-mm-toggle-icon,
	.adec-mm-form-overlay { transition: none !important; }
}