/**
 * Wappbiz Mega Menu — full-width, multi-column dropdown for menu items whose
 * submenu has category headings with their own nested links (see
 * class-wappbiz-mega-menu-walker.php for the exact structure this expects).
 *
 * The panel is positioned relative to .ast-builder-grid-row — the header's
 * own 1280px-max, centred content row — rather than a hardcoded width, so it
 * always matches the real header width even if that's changed later in the
 * Astra Customizer.
 */

/* The header row becomes the positioning context for the full-width panel. */
.ast-builder-grid-row {
	position: relative;
}

.ast-primary-header-bar {
	position: relative;
	background-color: #ffffff;
}

/*
 * `position: absolute` resolves against the NEAREST positioned ancestor.
 * Astra positions several elements between the mega panel and the header
 * row we actually want to anchor against:
 *   - .main-header-menu .menu-item { position: relative }  (specificity 2,0)
 *   - .main-header-menu itself also carries its own relative positioning
 * Both have to be neutralised — for exactly the <li> that holds a mega
 * panel, and the <ul> around it — or the panel ends up sized to whichever
 * of those it lands on instead of the full header row.
 */
.main-header-menu .menu-item.menu-item-has-children:has(> .wappbiz-mega-menu):not(:has(> .wappbiz-mega-menu--compact)) {
	position: static;
}

.main-header-menu:has(.wappbiz-mega-menu):not(:has(.wappbiz-mega-menu--compact)) {
	position: static;
}

/*
 * Compact panels are the opposite: they must stay anchored to their OWN
 * trigger <li> (not the full header row), since they're meant to sit
 * directly under whichever nav item opened them (e.g. "Industries" sitting
 * mid-header), not flush against the header's left edge. The <li> needs an
 * explicit position here because Astra's own menu-item rule that would
 * otherwise provide it is the exact one neutralised above for full mega
 * panels — :has() support means both cases can coexist in the same menu.
 */
.main-header-menu .menu-item.menu-item-has-children:has(> .wappbiz-mega-menu--compact) {
	position: relative;
}

.wappbiz-mega-menu {
	position: absolute;
	/*
	 * Flush against the header row's own bottom edge, no gap — a gap is
	 * what let the header's underlying shadow/border show as a visible
	 * seam between the header and the panel.
	 */
	top: 100%;
	/*
	 * width/left below are a fallback only — wappbiz-mega-menu.js measures
	 * .ast-primary-header-bar's REAL rendered box on every open (and on
	 * resize while open) and sets these as inline styles, in px, matching
	 * the header bar exactly. That's what keeps the panel's width correct
	 * across breakpoints, the Customizer's content-width setting, and
	 * Astra's sticky-scroll header shrink — a fixed CSS number can't track
	 * any of those. `left` (in px, header-bar centre-x) + this
	 * `translateX(-50%)` together keep it centred on the header regardless
	 * of that width.
	 *
	 * No `max-width` clamp here deliberately — `100vw` includes the
	 * scrollbar's own width in some browsers, which made this clamp kick in
	 * ~15-17px narrower than the real header width and silently override
	 * the JS-measured value, throwing off the centring math. JS is already
	 * the source of truth for the real width on every open.
	 */
	left: 50%;
	width: 1320px;
	/*
	 * Negative z-index drops the panel behind the header bar's own
	 * background/content (the header bar has `position: relative` above,
	 * so this resolves against it) — that's what lets the header visually
	 * sit on top of the panel at the seam. Confirmed working directly in
	 * DevTools.
	 */
	z-index: -1;

	background-color: #ffffff;
	border: 1px solid rgba(235, 235, 235, 1);
	border-radius: 0 0 16px 16px;
	margin-top: -10px;

	font-family: 'Plus Jakarta Sans', sans-serif;

	/*
	 * Hidden by default; JS toggles .is-open on hover/focus. Both states
	 * must keep the translateX(-50%) centring alongside the slide
	 * translateY, or whichever rule applies last wipes out the horizontal
	 * centring entirely (only one `transform` value can win, they don't merge).
	 *
	 * The slide itself: closed sits pulled up -16px (tucked behind the
	 * header bar, which is what the negative z-index + overflow already
	 * hides), open drops to translateY(0) — a real slide-down/slide-up, not
	 * just a fade. `visibility` is delayed on the way out so pointer-events
	 * and hit-testing only drop once the slide-up has actually finished,
	 * not the instant the class is removed.
	 */
	visibility: hidden !important;
	opacity: 0 !important;
	transform: translateX(-50%) translateY(-16px) !important;
	pointer-events: none !important;
	transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s !important;
}

/*
 * Sticky header fix: the real sticky mechanism on this site is a pasted
 * script in Elementor Site Settings → Custom Code (not Astra core, and not
 * the `.ast-header-sticked` / `.ast-primary-sticky-header-active` classes
 * assumed here previously — confirmed those never appear on this install).
 * It adds `.scrolled` to `.ast-primary-header-bar .site-primary-header-wrap`
 * on scroll, switching THAT element to `position: fixed` with its own
 * `transform` (a floating pill). The mega panel is a DOM descendant of that
 * wrapper, so once it's fixed, the panel's `top: 100%` above (which assumes
 * the header's normal in-flow height) no longer lines up with the pill's
 * real height — confirmed via DevTools Protocol measurement, ~30px
 * overlap. wappbiz-mega-menu.js now sets `top`/`margin-top` inline (only in
 * the sticky case) to the pill's real measured bottom edge, fixing the
 * overlap without changing anything else about the panel's existing look.
 */
.wappbiz-mega-menu--sticky {
	margin-top: 0 !important;
	/*
	 * Near-solid white surface while sticky.
	 *
	 * A real glass/blur effect is IMPOSSIBLE on this element and must not
	 * be re-attempted: the sticky pill `.site-primary-header-wrap.scrolled`
	 * is the panel's own DOM ancestor and it already carries
	 * `backdrop-filter: blur(14px)` (plus a `transform`). Per spec, an
	 * element with a backdrop-filter establishes a backdrop root, so a
	 * DESCENDANT's own backdrop-filter has no page content left to sample
	 * — it is a guaranteed no-op regardless of radius or opacity
	 * (confirmed by walking the ancestor chain via DevTools Protocol).
	 * That is why earlier translucent values looked like "no background":
	 * nothing was ever being blurred, so sharp page content simply showed
	 * through and collided with the panel's own link text.
	 *
	 * So: an explicit solid white instead, which keeps the panel visually
	 * consistent with the header's light surface and, critically, keeps
	 * the links readable with no bleed-through. Fully opaque rather than
	 * near-opaque: at 0.97 dark page content behind the panel (e.g. the
	 * site's dark footer) was still faintly legible through the panel's
	 * empty areas.
	 */
	background: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
	/*
	 * Same drop shadow the sticky pill itself uses (verbatim from
	 * `.site-primary-header-wrap.scrolled` in the site's Custom Code CSS),
	 * so the panel reads as part of the same floating surface rather than
	 * a flat card. Sticky state only; the non-sticky panel keeps whatever
	 * the base rule gives it.
	 *
	 * `clip-path` trims the shadow off the panel's TOP edge. That edge
	 * butts directly against the header, so an upward shadow spill (the
	 * 30px blur reaches above the box even with the +8px downward offset)
	 * painted a visible dark band across the seam. The inset is generous
	 * enough on the sides/bottom (60px) to let the full blur render there,
	 * and exactly 0 at the top so nothing is drawn above the panel.
	 */
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
	clip-path: inset(0 -60px -60px -60px) !important;
	/*
	 * The base rule's `z-index: -1` paints the panel BELOW page content,
	 * which let page content render on top of and collide with the panel's
	 * own text once the panel was no longer hidden behind the header bar's
	 * opaque background. A positive z-index keeps the required
	 * header (9999) > panel > page-content order. Sticky state only — the
	 * non-sticky panel keeps `z-index: -1` exactly as before.
	 */
	z-index: 100 !important;
}

.wappbiz-mega-menu.is-open {
	visibility: visible !important;
	opacity: 1 !important;
	transform: translateX(-50%) translateY(0) !important;
	pointer-events: auto !important;
	transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear !important;
}

/*
 * Compact variant — same card look (background/border/radius/shadow/fonts/
 * hover states all inherited from the base .wappbiz-mega-menu rules above),
 * but sized to its own content instead of stretched to the header's width.
 * Used for flat, single-column panels (Industries, Resources — see
 * COMPACT_TITLES in class-wappbiz-mega-menu-walker.php) that don't need the
 * full multi-column layout.
 *
 * Left-aligned under its own trigger rather than centred on the header:
 * wappbiz-mega-menu.js does NOT call syncWidthToHeaderBar() for this
 * variant, so `width`/`left` here are never overwritten by inline styles —
 * only the base rule's translateX(-50%) centring needs cancelling.
 */
.wappbiz-mega-menu--compact {
	left: 0;
	width: max-content;
	min-width: 200px;
	max-width: 320px;
	transform: translateY(-16px) !important;
}

.wappbiz-mega-menu--compact.is-open {
	transform: translateY(0) !important;
}

.wappbiz-mega-menu__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 56px 32px 40px;
}

.wappbiz-mega-menu--compact .wappbiz-mega-menu__inner {
	max-width: none;
	margin: 0;
	padding: 48px 24px 20px;
}

/*
 * While sticky, the panel sits flush against the header with no gap (see
 * the sticky positioning/shadow rules above), so the base rule's top
 * padding (56px full / 48px compact) reads as excess empty space right
 * under the seam. Brought down to match each variant's own SIDE padding
 * (32px full / 24px compact) instead of the original top value — not
 * zeroed, per client feedback that 0 removed too much space. Only
 * `padding-top` changes; left/right/bottom are unchanged. Uses the same
 * existing `.wappbiz-mega-menu--sticky` class already applied by
 * wappbiz-mega-menu.js, no new state.
 */
.wappbiz-mega-menu--sticky .wappbiz-mega-menu__inner {
	padding-top: 32px !important;
}

.wappbiz-mega-menu--sticky.wappbiz-mega-menu--compact .wappbiz-mega-menu__inner {
	padding-top: 24px !important;
}

.wappbiz-mega-menu--compact .wappbiz-mega-menu__col-links {
	gap: 2px;
}

.wappbiz-mega-menu__columns {
	display: grid;
	grid-template-columns: repeat(5, minmax(200px, 1fr));
	gap: 32px 40px;
}

.wappbiz-mega-menu__col {
	display: flex;
	flex-direction: column;
}

.wappbiz-mega-menu__col-heading {
	display: block;
	margin-bottom: 6px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5rem !important;
	color: #25b06a;
	letter-spacing: -0.01em;
}

.wappbiz-mega-menu__col-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wappbiz-mega-menu__col-link-item {
	margin: 0;
}

/*
 * Specificity note: Astra's own theme CSS sets colour on header-menu anchors
 * at (0,0,2,0)+ in places (e.g. `.main-header-menu .menu-item a`-style
 * rules). Matching that here with the `.wappbiz-mega-menu` ancestor prefix
 * — rather than the bare `.wappbiz-mega-menu__col-link` class alone — keeps
 * this rule from silently losing that fight again.
 */
.wappbiz-mega-menu .wappbiz-mega-menu__col-link {
	display: block;
	padding: 4px 0;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #1c2b3a !important;
	text-decoration: none;
	transition: color 0.15s ease, transform 0.15s ease;
}

.wappbiz-mega-menu .wappbiz-mega-menu__col-link:hover {
	color: #25b06a !important;
	transform: translateX(2px);
}

/*
 * 3rd nesting level within one column (e.g. "Industry Integrations" ->
 * "Ecommerce" / "Real Estate" sub-groups, each with their own links) — see
 * class-wappbiz-mega-menu-walker.php's sub_heading_ids handling. Reuses the
 * same __col-heading look at a smaller size so it reads as a sub-label,
 * with its own nested link list indented slightly and separated from the
 * next group by a top border, matching the reference screenshot.
 */
.wappbiz-mega-menu__col-link-item--group {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid rgba(28, 43, 58, 0.08);
}

.wappbiz-mega-menu__col-link-item--group:first-child {
	padding-top: 0;
	border-top: none;
}

.wappbiz-mega-menu__col-subheading {
	display: block;
	margin-bottom: 4px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: #25b06a;
	letter-spacing: -0.01em;
}

.wappbiz-mega-menu__col-links--sub {
	gap: 2px;
}

/* Preserve the existing "new-feature" badge look, if that class is present
 * on a menu item — matches whatever site-wide styling already targets it,
 * this just keeps it visible inside the new column layout too. */
.wappbiz-mega-menu__col-link-item.new-feature .wappbiz-mega-menu__col-link::after {
	content: 'New';
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #d9f5e6;
	color: #12844f;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	vertical-align: middle;
}

/* The little dropdown-toggle caret Astra renders — rotate it while open, so
 * it visually agrees with the mega panel's own state. The JS toggles
 * .wappbiz-mega-menu-open on the parent <li>; :has() below is a same-effect
 * fallback for anything that sets the state without going through the JS
 * (e.g. Astra's own keyboard handling), since browser support for :has() is
 * now broad enough to layer on top rather than depend on alone. */
.menu-item-has-children.wappbiz-mega-menu-open > a .dropdown-menu-toggle,
.menu-item-has-children.wappbiz-mega-menu-open > .dropdown-menu-toggle,
.menu-item-has-children:has(> .wappbiz-mega-menu.is-open) > a .dropdown-menu-toggle,
.menu-item-has-children:has(> .wappbiz-mega-menu.is-open) > .dropdown-menu-toggle {
	transform: rotate(180deg);
}

/*
 * Sticky header bottom corners: while any mega panel is open, square off
 * ONLY the sticky pill's bottom-left/bottom-right radius, so the panel
 * (which connects flush to the header's bottom edge — see the sticky
 * positioning rules above) reads as one continuous shape instead of a
 * rounded header sitting above a separately-rounded panel. Top corners are
 * untouched. Uses the mega menu's own EXISTING `.is-open` class (already
 * applied by wappbiz-mega-menu.js on every open/close) via `:has()` — no
 * new class, no JS. `.site-primary-header-wrap.scrolled` gets its
 * `border-radius: 20px` from a separate Elementor Custom Code stylesheet
 * (not this theme), so `!important` here guarantees this wins regardless
 * of stylesheet load order, without touching that other file.
 */
.ast-primary-header-bar .site-primary-header-wrap.scrolled:has(.wappbiz-mega-menu.is-open) {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/*
 * The panel's own base rule gives it a full 1px border on all four sides
 * (`border: 1px solid rgba(235, 235, 235, 1)`), which reads as a visible
 * seam line right where it meets the header's now-squared bottom edge
 * (previous rule). Removing just the top border while open — using the
 * same existing `.is-open` class, no new state — lets the panel and the
 * header's bottom edge merge into one continuous shape instead of showing
 * a line between them. Left/right/bottom borders are untouched.
 */
.wappbiz-mega-menu.is-open {
	border-top: none !important;
}

/* ------------------------------------------------------------------------
 * Below Astra's own mobile/tablet menu breakpoint the mega panel doesn't
 * apply — Astra's off-canvas mobile menu already renders these same items
 * as a plain nested accordion, which is the right pattern for small screens.
 * --------------------------------------------------------------------- */
@media (max-width: 921px) {
	.wappbiz-mega-menu {
		display: none !important;
	}
}