/* Solid Menu — Mega Panel styles. Loaded only when at least one item has a template. */
.solidae-solid-menu__panel{
	position: absolute;
	z-index: 1000;
	top: 100%;
	left: 0;
	min-width: 320px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--solidae-sm-anim-duration) var(--solidae-sm-anim-easing),
		visibility var(--solidae-sm-anim-duration) var(--solidae-sm-anim-easing),
		transform var(--solidae-sm-anim-duration) var(--solidae-sm-anim-easing);
	transform: translateY(8px);
	margin-top: var(--solidae-sm-submenu-offset);
}
.solidae-solid-menu.submenu-up .solidae-solid-menu__panel{
	top: auto;
	bottom: 100%;
	margin-top: 0;
	margin-bottom: var(--solidae-sm-submenu-offset);
	transform: translateY(-8px);
}
.solidae-solid-menu.anim-fade .solidae-solid-menu__panel{ transform: none; }
.solidae-solid-menu.anim-scale .solidae-solid-menu__panel{ transform: scale(0.97); transform-origin: top center; }
.solidae-solid-menu.anim-none .solidae-solid-menu__panel{ transition: none; transform: none; }

.solidae-solid-menu .solidae-solid-menu__item.is-open > .solidae-solid-menu__panel,
.solidae-solid-menu.trigger-hover .solidae-solid-menu__item:hover > .solidae-solid-menu__panel,
.solidae-solid-menu.trigger-hover .solidae-solid-menu__item:focus-within > .solidae-solid-menu__panel{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

/* Panel widths.
   The panel is `position: absolute` and inherits its containing block from the closest
   positioned ancestor. By default the LI is `position: relative`, so width:100% = item width.
   For "container" and "viewport" modes we drop the LI's positioning context (via
   .item-panel-container / .item-panel-viewport on the LI) so the panel anchors to the
   menu root (.solidae-solid-menu) — which is `position: relative` — and can span the
   full bar / viewport width. */

/* Auto: shrink-to-fit the template. */
.solidae-solid-menu__panel.panel-w-auto{ width: max-content; min-width: 0; }

/* Item: aligned to the parent menu item, but never narrower than its content.
   width:max-content fits the template's natural width; min-width:100% guarantees
   the panel is at least as wide as the item so the alignment stays clean.
   This avoids character-by-character text squeeze when the item is narrow. */
.solidae-solid-menu__panel.panel-w-item{ width: max-content; min-width: 100%; }

/* Container: as wide as the menu root (the whole menu bar). */
.solidae-solid-menu__item.item-panel-container{ position: static; }
.solidae-solid-menu__item.item-panel-container > .solidae-solid-menu__panel.panel-w-container{
	width: 100%;
	left: 0;
	right: 0;
	min-width: 0;
}

/* Viewport: full browser width using fixed positioning.
   `top` is set inline by JS (bindPanelPositioning) based on the bar's bottom Y,
   because position:fixed makes `top: 100%` resolve against the viewport (= off-screen). */
.solidae-solid-menu__item.item-panel-viewport{ position: static; }
.solidae-solid-menu__panel.panel-w-viewport{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100vw;
	max-width: 100vw !important;
	border-radius: 0;
}

/* Custom: exact width set via inline style on the panel (per-item) or via CSS variable
   on the root (global). Uses position:fixed so the panel anchors to the VIEWPORT, not
   the menu widget — left/right/center then mean "left/right/center of the visible page",
   which is what users expect. `top` is set inline by JS (bindPanelPositioning) based on
   the bar's bottom Y, because position:fixed makes `top: 100%` resolve to bottom of viewport.
   --solidae-sm-panel-margin caps the width on small screens so the panel never touches the
   page edges (per-item value can override the global, applied inline on the panel). */
.solidae-solid-menu__item.item-panel-custom{ position: static; }
.solidae-solid-menu__panel.panel-w-custom{
	position: fixed;
	top: 0;
	width: var(--solidae-sm-panel-custom-w, 980px);
	max-width: calc(100vw - 2 * var(--solidae-sm-panel-margin, 16px));
	min-width: 0;
}

/* Left — panel left edge offset by the viewport margin. */
.solidae-solid-menu__item.item-panel-custom-align-left > .solidae-solid-menu__panel.panel-w-custom{
	left: var(--solidae-sm-panel-margin, 16px);
	right: auto;
	transform: translateY(8px);
}
.solidae-solid-menu__item.item-panel-custom-align-left.is-open > .solidae-solid-menu__panel.panel-w-custom,
.solidae-solid-menu.trigger-hover .solidae-solid-menu__item.item-panel-custom-align-left:hover > .solidae-solid-menu__panel.panel-w-custom{
	transform: translateY(0);
}

/* Center — panel centered within the viewport (margin is honoured via max-width). */
.solidae-solid-menu__item.item-panel-custom-align-center > .solidae-solid-menu__panel.panel-w-custom{
	left: 50%;
	right: auto;
	transform: translate(-50%, 8px);
}
.solidae-solid-menu__item.item-panel-custom-align-center.is-open > .solidae-solid-menu__panel.panel-w-custom,
.solidae-solid-menu.trigger-hover .solidae-solid-menu__item.item-panel-custom-align-center:hover > .solidae-solid-menu__panel.panel-w-custom{
	transform: translate(-50%, 0);
}

/* Right — panel right edge offset by the viewport margin. */
.solidae-solid-menu__item.item-panel-custom-align-right > .solidae-solid-menu__panel.panel-w-custom{
	left: auto;
	right: var(--solidae-sm-panel-margin, 16px);
	transform: translateY(8px);
}
.solidae-solid-menu__item.item-panel-custom-align-right.is-open > .solidae-solid-menu__panel.panel-w-custom,
.solidae-solid-menu.trigger-hover .solidae-solid-menu__item.item-panel-custom-align-right:hover > .solidae-solid-menu__panel.panel-w-custom{
	transform: translateY(0);
}

/* Pointer arrow. */
.solidae-solid-menu.panel-has-arrow .solidae-solid-menu__panel::before{
	content: "";
	position: absolute;
	top: -6px;
	left: 24px;
	width: 12px;
	height: 12px;
	background: inherit;
	transform: rotate(45deg);
	box-shadow: -2px -2px 4px rgba(0,0,0,0.04);
}
.solidae-solid-menu.submenu-up.panel-has-arrow .solidae-solid-menu__panel::before{
	top: auto;
	bottom: -6px;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.04);
}

/* Lazy state — empty until JS inflates. */
.solidae-solid-menu__panel--lazy:empty{
	min-height: 0;
	min-width: 0;
}