/* =========================================================================
   Mega Menu — frontend styles
   =========================================================================
   Non-fullscreen panels: opened via CSS :hover (no JS toggle needed).
   Fullscreen panels: opened via JS (.is-open on the li).
   All panel coordinates (top/left/width/height) are set by JS on load + resize.
   ========================================================================= */

/* Mega items must NOT create their own positioning context */
.wooforge-header-menu:not(.wooforge-drawer) li.wooforge-mm-item {
	position: static;
}

/* -------------------------------------------------------------------------
   Panel base
   position:fixed lives here (not in JS) so panels are always out of flow,
   even before JS sets their top/left/width — prevents the first-hover jump.
   ------------------------------------------------------------------------- */

.wooforge-mm-panel {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background: #fff;
	overflow: hidden;
	transform: translateY(-6px);
	/* fade-out: visibility hides after opacity finishes */
	transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}

/* -------------------------------------------------------------------------
   Non-fullscreen: CSS :hover opens the panel.
   CSS :hover propagates to the li even when the mouse is over
   a position:fixed child (DOM ancestry, not visual containment).
   ------------------------------------------------------------------------- */

.wooforge-header-menu:not(.wooforge-drawer) .wooforge-mm-item:not(.wooforge-mm--fullscreen):hover > .wooforge-mm-panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	/* fade-in: visibility shows immediately */
	transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}

/* Gap bridge: invisible ::after that fills the vertical gap between the nav
   item's bottom edge and the panel's top edge (= header row bottom).
   Keeps CSS :hover active as the mouse crosses that gap.
   Coordinates are set by JS via CSS custom properties on the li element.    */

.wooforge-header-menu:not(.wooforge-drawer) .wooforge-mm-item:not(.wooforge-mm--fullscreen)::after {
	content: '';
	display: none;
	position: fixed;
	top:    var(--mm-bridge-top,  0px);
	height: var(--mm-bridge-h,    0px);
	left:   var(--mm-bridge-left, 0px);
	width:  var(--mm-bridge-w,    100vw);
	z-index: 9998;
}

.wooforge-header-menu:not(.wooforge-drawer) .wooforge-mm-item:not(.wooforge-mm--fullscreen):hover::after {
	display: block;
}

/* -------------------------------------------------------------------------
   Fullscreen: JS adds .is-open to the li.
   top and height are set by JS (anchored below the header row).
   ------------------------------------------------------------------------- */

.wooforge-mm-panel--fullscreen {
	left: 0;
	width: 100vw; /* overridden by JS with clientWidth to exclude the scrollbar */
	overflow-y: auto;
	box-shadow: none;
}

.wooforge-mm-item.wooforge-mm--fullscreen.is-open > .wooforge-mm-panel--fullscreen {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}

/* -------------------------------------------------------------------------
   Full height: full viewport height below the header, auto width.
   top and height are set by JS. left is set by JS (Floating UI or stretch).
   ------------------------------------------------------------------------- */

.wooforge-mm-panel--fullheight {
	overflow-y: auto;
	box-shadow: none;
}

/* Stretch variant: panel starts at left=0 so the background extends left.
   padding-left (set by JS = nav item's left offset) pushes content to start
   under the nav item. fit-content makes the panel width = padding + content
   natural width, NOT the full viewport. box-sizing:border-box ensures
   fit-content accounts for padding in its size calculation. */
.wooforge-mm-panel--stretch {
	box-sizing: border-box;
	width: fit-content;
}

/* -------------------------------------------------------------------------
   Click mode: per-item .wooforge-mm-trigger--click (set by PHP item_classes,
   or added to all items by JS on touch devices).
   Suppress CSS :hover panel / bridge. Show via JS .is-open instead.
   ------------------------------------------------------------------------- */

.wooforge-header-menu:not(.wooforge-drawer) .wooforge-mm-item.wooforge-mm-trigger--click:not(.wooforge-mm--fullscreen):hover > .wooforge-mm-panel {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}

.wooforge-header-menu:not(.wooforge-drawer) .wooforge-mm-item.wooforge-mm-trigger--click:not(.wooforge-mm--fullscreen):hover::after {
	display: none;
}

.wooforge-header-menu:not(.wooforge-drawer) .wooforge-mm-item.wooforge-mm-trigger--click:not(.wooforge-mm--fullscreen).is-open > .wooforge-mm-panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}

/* -------------------------------------------------------------------------
   Content layout
   ------------------------------------------------------------------------- */

.wooforge-mm-content {
	width: 100%;
}

/* boxed: limit content to container width, centered */
.wooforge-mm-content--boxed {
	max-width: var(--wooforge-max-width, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding: 24px;
	box-sizing: border-box;
}

/* full: content fills the entire panel */
.wooforge-mm-content--full {
	padding: 0;
}

/* For the header design, the panel already covers the exact content area of
   the header (inner container minus its padding). The boxed layout therefore
   doesn't need an additional max-width constraint — the panel IS the box.   */
.wooforge-mm-panel--header .wooforge-mm-content--boxed {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
   Close button (fullscreen only)
   ------------------------------------------------------------------------- */

.wooforge-mm-close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 1;
	opacity: .6;
	transition: opacity .15s;
}

.wooforge-mm-close:hover {
	opacity: 1;
}

.wooforge-mm-close img,
.wooforge-mm-close svg {
	display: block;
	width: 16px;
	height: 16px;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Backdrop
   ------------------------------------------------------------------------- */

.wooforge-mm-backdrop {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 0; /* overridden by JS to sit below the header row */
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9998;
	background: rgba(0, 0, 0, .35);
	pointer-events: none; /* must not intercept mouse events — would break CSS :hover on the nav item */
	transition: opacity .3s ease, visibility 0s linear .3s;
}

/* Fullscreen backdrop: toggled by JS (.is-visible class).
   Needs pointer-events so clicking it closes the fullscreen panel. */
.wooforge-mm-backdrop.is-visible {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity .3s ease, visibility 0s linear 0s;
}

/* Non-fullscreen backdrop: toggled by CSS :has() when a hover-trigger backdrop item is hovered.
   Excluded for click-trigger items (.wooforge-mm-trigger--click) — those use JS .is-visible.
   pointer-events stays none so the backdrop never breaks the CSS :hover chain. */
@supports selector(:has(a)) {
	body:has(
		.wooforge-header-menu:not(.wooforge-drawer)
		.wooforge-mm-item.wooforge-mm-has-backdrop:not(.wooforge-mm--fullscreen):not(.wooforge-mm-trigger--click):hover
	) .wooforge-mm-backdrop {
		visibility: visible;
		opacity: 1;
		transition: opacity .3s ease, visibility 0s linear 0s;
	}
}

/* -------------------------------------------------------------------------
   Stacking context fix for sticky header rows
   -------------------------------------------------------------------------
   When a header row becomes sticky (.is-stuck), it gets position:fixed +
   z-index:200/201, which creates its own stacking context. The mega-menu
   panel's z-index:9999 then becomes local to that context (effective root
   z-index ≈ 201), letting the backdrop at z-index:9998 paint on top of it.
   Raising #masthead to z-index:9999 makes the whole masthead subtree paint
   as one unit above the backdrop — the same trick used for fullscreen search
   in css/main.css ("body.wooforge-fullscreen-search-open #masthead").
   ------------------------------------------------------------------------- */
/* JS adds .wooforge-mm-open to body as a no-:has() fallback (fullscreen items). */
body.wooforge-mm-open #masthead {
	z-index: 9999;
}

@supports selector(:has(a)) {
	body:has(
		.wooforge-header-menu:not(.wooforge-drawer) .wooforge-mm-item:hover,
		.wooforge-header-menu:not(.wooforge-drawer) .wooforge-mm-item.is-open
	) #masthead {
		z-index: 9999;
	}
}

/* Non-stuck row--bottom: CSS safety net that mirrors the JS fix above.
   Gives row--bottom a stacking context at z-index:0 so the panel (z-index:9999,
   step 7) always paints above it (step 6) when a mega-menu item is active. */
@supports selector(:has(a)) {
	body:has(
		.wooforge-header-menu:not(.wooforge-drawer) .wooforge-mm-item:hover,
		.wooforge-header-menu:not(.wooforge-drawer) .wooforge-mm-item.is-open
	) .wooforge-header-row--bottom:not(.is-stuck) {
		position: relative;
		z-index: 0;
	}
}
body.wooforge-mm-open .wooforge-header-row--bottom:not(.is-stuck) {
	position: relative;
	z-index: 0;
}

/* -------------------------------------------------------------------------
   Drawer (mobile) — never show mega panels inside the mobile drawer
   ------------------------------------------------------------------------- */

.wooforge-drawer .wooforge-mm-panel {
	display: none !important;
}