/* ==========================================================================
   Arbe Mega Menu
   Classes are prefixed "amm-" to avoid collisions with existing theme
   styles (this theme loads Semantic UI etc., which apply their own resets
   to bare tag/class selectors — hence the "all: unset" + !important
   pattern used throughout below).

   FONTS: your theme already has Arboria installed as two separately-named
   families — "Arboria-Bold" and "Arboria-Book" — rather than one "Arboria"
   family with font-weight variants. That's very likely why fonts weren't
   matching the mockup in every previous round: this file was referencing
   a plain "Arboria" family name that doesn't exist on your site at all,
   so it was silently falling back to Poppins/sans-serif the whole time.
   Fixed below by referencing the real family names directly.
   ========================================================================== */

:root {
	--amm-blue: #0032FF;
	--amm-cyan: #00C1F7;
	--amm-magenta: #E6007E;
	--amm-green: #64F58D;
	--amm-ink: #1A1A1A;
	--amm-grad: linear-gradient(135deg, #0032FF 0%, #00C1F7 100%);
	/* Two families instead of one — map to whichever matches the weight
	   used at each spot below. */
	--amm-font-bold: "Arboria-Bold", "Poppins", sans-serif;
	--amm-font-regular: "Arboria-Book", "Poppins", sans-serif;
	--amm-header-height: 70px;
}

/* NOTE: deliberately NOT forcing `header.header { position: relative }`
   here anymore. That rule was overriding the theme's existing
   `position: sticky` on the header (position is a single CSS property —
   setting one value replaces the other), which is what broke your
   header's sticky-on-scroll behavior. It wasn't actually needed: per the
   CSS spec, `position: sticky` already qualifies as a "positioned"
   element and is a valid containing block for `position: absolute`
   descendants, exactly like `relative` would be. So the mega panel below
   still positions correctly against the header however the header is
   already positioned (sticky, relative, or otherwise) — we just no
   longer clobber it. */

.amm-items {
	display: flex;
	align-items: center;
	height: var(--amm-header-height);
	justify-content: center;
}

.amm-navitem {
	height: var(--amm-header-height);
	position: static;
}

.amm-navitem > button,
.amm-navitem > a {
	all: unset;
	box-sizing: border-box;
	height: 100%;
	color: #fff;
	font-family: var(--amm-font-regular) !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	letter-spacing: .02em;
	line-height: 1;
	padding: 0 26px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}

.amm-navitem > button .amm-chev {
	width: 8px !important;
	height: 8px !important;
	border-right: 1.5px solid #fff !important;
	border-bottom: 1.5px solid #fff !important;
	border-top: none !important;
	border-left: none !important;
	transform: rotate(45deg);
	transition: .2s;
	margin-top: -2px;
	opacity: .9;
	flex-shrink: 0;
	background: none;
	display: inline-block;
}

.amm-navitem:hover > button,
.amm-navitem:hover > a,
.amm-navitem.amm-open > button {
	opacity: .85;
}

.amm-navitem:hover > button .amm-chev,
.amm-navitem.amm-open > button .amm-chev {
	transform: rotate(-135deg);
	margin-top: 2px;
}

.amm-tag {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
	font-family: var(--amm-font-bold) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: .07em;
	text-transform: uppercase;
	/* Explicit longhand + !important: equal 4px top/bottom padding was
	   getting visually thrown off by inherited line-height/font metrics
	   from the parent link (all:unset alone doesn't fully protect a
	   shorthand `padding` from being reinterpreted). This guarantees
	   symmetric vertical padding regardless of what surrounds it. */
	padding-top: 4px !important;
	padding-bottom: 4px !important;
	padding-left: 9px !important;
	padding-right: 9px !important;
	margin-left: 7px;
	vertical-align: middle;
	border-radius: 999px;
}

/* Mega panel: FIXED width (not viewport-relative), so it doesn't shrink as
   the browser window narrows — only switches to full-width at the mobile
   breakpoint below. Positioned with plain CSS against header.header
   (position:relative above) — same approach as the working mockup, no JS
   required for placement. */
.amm-mega {
	position: absolute;
	left: 50%;
	top: 100%;
	width: 836px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 20, 80, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(6px);
	transition: .2s;
	overflow: hidden;
	border-radius: 0 0 16px 16px;
	z-index: 9999;
}

.amm-navitem:hover .amm-mega,
.amm-navitem.amm-open .amm-mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.amm-mega-inner {
	display: grid;
	grid-template-columns: 1fr 280px;
	min-height: 310px;
}

.amm-colswrap {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	padding: 40px 44px;
	width: 100%;
}

.amm-cols {
	display: flex;
	justify-content: space-evenly;
	width: 100%;
}

.amm-col { flex: 0 0 auto; }

.amm-col h4 {
	all: unset;
	display: block;
	box-sizing: border-box;
	font-family: var(--amm-font-bold) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--amm-blue);
	margin-bottom: 20px;
}

.amm-col a {
	all: unset;
	box-sizing: border-box;
	display: block;
	color: var(--amm-ink);
	font-family: var(--amm-font-regular) !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	margin-bottom: 16px;
	transition: transform .15s, color .15s;
	line-height: 1.35;
	white-space: nowrap;
	cursor: pointer;
}
.amm-col a:last-child { margin-bottom: 0; }
/* transform, not padding-left: padding changes the element's own box
   width, which — since these are auto-sized flex columns — could nudge
   the column's computed width on hover and visibly shift sibling items.
   translateX is purely visual (no layout impact), so only the hovered
   link itself moves. */
.amm-col a:hover { color: var(--amm-magenta); transform: translateX(5px); }

.amm-col a.amm-seeall {
	color: var(--amm-magenta);
	font-family: var(--amm-font-bold) !important;
	font-weight: 700 !important;
	margin-top: 6px;
}
.amm-col a.amm-seeall:hover { color: var(--amm-magenta); transform: translateX(5px); }

/* Feature panel (right-hand card) */
.amm-feature {
	background: var(--amm-grad);
	color: #fff;
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.amm-feature--image {
	background-size: cover;
	background-position: center;
}
.amm-feature--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 20, 80, .15), rgba(0, 20, 80, .55));
	z-index: 1;
}
.amm-feature--image > * { position: relative; z-index: 2; }

.amm-rad {
	position: absolute;
	right: -80px;
	bottom: -80px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .16);
}
.amm-rad::before {
	content: "";
	position: absolute;
	inset: 44px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .12);
}

.amm-htag {
	all: unset;
	box-sizing: border-box;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	background: var(--amm-green);
	color: #0a5a2a;
	font-family: var(--amm-font-bold) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 999px;
	position: relative;
	z-index: 2;
}

.amm-ft {
	font-family: var(--amm-font-bold) !important;
	font-weight: 700 !important;
	font-size: 24px !important;
	line-height: 1.1;
	margin-top: 14px;
	position: relative;
	z-index: 2;
	max-width: 230px;
}

.amm-fs {
	font-family: var(--amm-font-bold) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1.4;
	margin-top: 10px;
	color: rgba(255, 255, 255, .92);
	max-width: 225px;
	position: relative;
	z-index: 2;
}

.amm-fcta {
	all: unset;
	box-sizing: border-box;
	align-self: flex-start;
	margin-top: 22px;
	background: #fff;
	color: var(--amm-blue);
	font-family: var(--amm-font-bold) !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 12px 24px;
	border-radius: 999px;
	position: relative;
	z-index: 2;
	cursor: pointer;
	transition: .18s;
	display: inline-block;
}
.amm-fcta:hover { background: var(--amm-magenta); color: #fff; }

/* ==========================================================================
   Mobile: full-screen menu, triggered by your theme's OWN existing
   hamburger icon (.header_wrap__mobile) — not a newly-created one.

   Several rounds of creating a brand-new hamburger button via JS never
   worked reliably (positioning, alignment, and clicks not registering
   consistently), so this goes back to using the icon that's already
   correctly positioned and already exists in the page from your original
   header.php. mega-menu.js binds to it directly (in the capture phase,
   with stopImmediatePropagation) to take over its click and open the
   full-screen menu — see the comment in mega-menu.js for why capture
   phase specifically, and the one real risk that approach carries if your
   theme's own script is ALSO bound to that icon.
   ========================================================================== */

/* Language switcher AND your theme's hamburger icon: both forced visible
   and pinned to a consistent top-right row on mobile, using the SAME
   breakpoint (1024px) as everything else in this file. The hamburger's
   own visibility was previously left entirely up to your theme's CSS,
   which very likely uses a different breakpoint (992px is a common
   default) — causing it to vanish specifically in the 993–1024px gap
   between the two thresholds. Forcing it here with !important removes
   that mismatch. Language switcher was disappearing for a related
   reason: the theme's own layout squeezing/hiding it once .amm-items took
   over the row at mobile widths. */
@media (max-width: 1024px) {
	.header_wrap__lang {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: fixed;
		height: 32px;
		top: calc((var(--amm-header-height) - 32px) / 2);
		right: 76px;
		z-index: 2147483000;
	}

	.header_wrap__mobile {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: fixed;
		height: 32px;
		top: calc((var(--amm-header-height) - 32px) / 2);
		right: 24px;
		z-index: 2147483000;
	}
	/* Constrains the icon itself so it can't overflow the 32px box above
	   and throw the centering off — the icon's own intrinsic size was
	   likely different from the language switcher's text line-height,
	   which is why they didn't line up even with matching "top" values. */
	.header_wrap__mobile img,
	.header_wrap__mobile svg {
		max-height: 22px;
		width: auto;
		display: block;
	}

	/* THE actual root cause of the menu never appearing, found via live
	   DevTools inspection: your theme sets .header_wrap__nav (the direct
	   parent of .amm-items) to display:none at this width, expecting its
	   own separate mobile menu system to take over instead. display:none
	   on ANY ancestor makes its entire subtree unrenderable — no style on
	   .amm-items itself, no matter how correct, can escape that. Using
	   display:contents here removes the wrapper's own box without giving
	   it a visual footprint, which lets its children (our .amm-items)
	   render normally again. */
	.header_wrap__nav {
		display: contents !important;
	}
}

@media (max-width: 1024px) {

	/* Baseline only: hidden until mega-menu.js adds the open state via
	   inline styles. Without this, .amm-items would render using its
	   desktop flex-row rule (declared earlier, unconditionally) squeezed
	   into the mobile-width header before the icon is ever tapped. */
	.amm-items {
		display: none;
	}

	.amm-navitem {
		height: auto;
		width: 100%;
	}

	.amm-navitem > button,
	.amm-navitem > a {
		height: auto;
		padding: 18px 4px;
		width: 100%;
		justify-content: space-between;
		border-bottom: 1px solid rgba(255, 255, 255, .18);
		font-size: 18px !important;
	}

	.amm-mega {
		position: static !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		width: 100%;
		box-shadow: none;
		border-radius: 10px;
		opacity: 1;
		visibility: hidden;
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
		margin: 12px 0 4px;
	}
	.amm-navitem.amm-open .amm-mega {
		visibility: visible;
		max-height: 3000px;
	}

	.amm-mega-inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.amm-colswrap {
		flex-direction: column;
		padding: 24px 20px;
		width: 100%;
		gap: 28px;
	}

	.amm-cols {
		flex-direction: column;
		justify-content: flex-start;
		gap: 28px;
		width: 100%;
	}

	.amm-col {
		width: 100%;
	}

	.amm-col a {
		white-space: normal !important;
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
		width: 100% !important;
	}

	.amm-feature {
		padding: 24px 20px;
		width: 100%;
		border-radius: 0 0 10px 10px;
	}

	.amm-ft,
	.amm-fs {
		max-width: none;
	}
}

/* ==========================================================================
   Desktop: transparent header turns solid blue while any nav item is
   being interacted with. Toggled via JS (mouseenter/leave on .amm-items),
   not :hover directly on the header, so it also works correctly while a
   mega panel is open via keyboard focus, not just mouse hover.
   ========================================================================== */
header.header.amm-header-active {
	background: var(--amm-blue) !important;
}