/**
 * Frontend styles for mega menu panels.
 *
 * Desktop (≥1024px): full-width flyout dropdown.
 * Tablet (768–1023px): off-canvas panel sliding from right.
 * Mobile (<768px): inline accordion (mobile nav drawer friendly).
 *
 * @package Beplus\VisualMegaNav
 */

/* ---------- CSS Custom Properties (theme-overridable) ---------- */
:root {
	--beplus-vmn-mega-bg: #fff;
	--beplus-vmn-mega-shadow: 0 20px 20px 4px rgba(0, 0, 0, 0.12);
	--beplus-vmn-mega-radius: 0;
	--beplus-vmn-mega-padding: 24px;
	--beplus-vmn-mega-z: 99999;
	--beplus-vmn-mega-transition: 0.25s ease;
	--beplus-vmn-mega-mobile-padding: 16px;
	--beplus-vmn-toggle-size: 2.25rem;
	--beplus-vmn-toggle-radius: 9999px;
	--beplus-vmn-toggle-border: color-mix(in srgb, currentcolor 14%, transparent);
	--beplus-vmn-toggle-hover-bg: color-mix(in srgb, currentcolor 8%, transparent);
	--beplus-vmn-toggle-active-bg: color-mix(in srgb, currentcolor 12%, transparent);
}

/* ---------- Menu item container ---------- */
.has-mega-menu {
	position: static !important;
}

.has-mega-menu > .sub-menu {
	display: none !important;
}

/* ---------- Mega panel (shared) ---------- */
.beplus-vmn-mega-panel {
	background: var(--beplus-vmn-mega-bg);
	border-radius: var(--beplus-vmn-mega-radius);
	transition:
		opacity var(--beplus-vmn-mega-transition),
		visibility var(--beplus-vmn-mega-transition),
		transform var(--beplus-vmn-mega-transition),
		max-height var(--beplus-vmn-mega-transition);
}

.beplus-vmn-mega-panel__inner {
	margin: 0 auto;
}

/* Block content: prevent horizontal overflow in narrow viewports */
.beplus-vmn-mega-panel__inner img,
.beplus-vmn-mega-panel__inner video,
.beplus-vmn-mega-panel__inner iframe {
	max-width: 100%;
	height: auto;
}

/* ---------- Desktop flyout (≥1024px) ---------- */
@media (min-width: 1024px) {

	.beplus-vmn-mega-panel {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: var(--beplus-vmn-mega-z);
		box-shadow: var(--beplus-vmn-mega-shadow);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.has-mega-menu:hover > .beplus-vmn-mega-panel,
	.beplus-vmn-mega-panel.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* Invisible bridge for pointer travel from link to panel */
	.has-mega-menu:hover::after,
	.has-mega-menu:focus-within::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 100%;
		transform: translateY(-100%);

		/* z-index: -1; */
	}

	.has-mega-menu > a {
		position: relative;
		z-index: 1;
	}

	.beplus-vmn-mega-panel[data-animation="slide"] {
		transform: translateY(-8px);
	}

	.has-mega-menu:hover > .beplus-vmn-mega-panel[data-animation="slide"],
	.beplus-vmn-mega-panel[data-animation="slide"].is-open {
		transform: translateY(0);
	}

	.beplus-vmn-toggle {
		display: none;
	}
}

/* ---------- Tablet & mobile base (<1024px) ---------- */
@media (max-width: 1023px) {

	.has-mega-menu {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 0;

		/* width: 100%; */
	}

	.has-mega-menu::before {
		display: none;
	}

	.has-mega-menu > a {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-width: 0;
	}

	.has-mega-menu > a::after {
		display: none !important;
	}

	.has-mega-menu:hover::after,
	.has-mega-menu:focus-within::after {
		display: none;
	}

	.beplus-vmn-mega-panel {
		position: static;
		flex: 1 0 100%;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: none;
		box-shadow: none;
	}

	.has-mega-menu.beplus-vmn--open > .beplus-vmn-mega-panel,
	.beplus-vmn-mega-panel.is-open {
		max-height: none;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.beplus-vmn-mega-panel__inner {
		padding: var(--beplus-vmn-mega-mobile-padding) 0;
	}

	/* Stack multi-column block layouts */
	.beplus-vmn-mega-panel__inner .wp-block-columns {
		flex-direction: column !important;
		gap: var(--beplus-vmn-mega-mobile-padding) !important;
	}

	.beplus-vmn-mega-panel__inner .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	.beplus-vmn-mega-panel__inner .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Accordion toggle (themes without their own control) */
	.beplus-vmn-toggle {
		-webkit-appearance: none;
		appearance: none;
		flex: 0 0 auto;
		align-self: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--beplus-vmn-toggle-size);
		height: var(--beplus-vmn-toggle-size);
		margin: 0;
		margin-inline-start: auto;
		margin-inline-end: 0;
		padding: 0;
		border: none;
		border-radius: var(--beplus-vmn-toggle-radius);
		background: transparent;
		color: inherit;
		font: inherit;
		line-height: 1;
		cursor: pointer;
		flex-shrink: 0;
		transition:
			background-color 0.15s ease,
			border-color 0.15s ease,
			transform 0.15s ease;
	}

	.beplus-vmn-toggle:hover,
	.beplus-vmn-toggle:focus-visible {
		background-color: var(--beplus-vmn-toggle-hover-bg);
		border-color: color-mix(in srgb, currentcolor 22%, transparent);
	}

	.beplus-vmn-toggle:focus-visible {
		outline: 2px solid currentcolor;
		outline-offset: 2px;
	}

	.beplus-vmn-toggle[aria-expanded="true"] {
		background-color: var(--beplus-vmn-toggle-active-bg);
		border-color: color-mix(in srgb, currentcolor 24%, transparent);
	}

	.beplus-vmn-toggle__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 0.75rem;
		height: 0.75rem;
		line-height: 0;
		transition: transform 0.2s ease;
	}

	.beplus-vmn-toggle__icon svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.beplus-vmn-toggle[aria-expanded="true"] .beplus-vmn-toggle__icon {
		transform: rotate(180deg);
	}
}

/* ---------- Mobile accordion (<768px) ----------
   Neutralize desktop inline width styles (width:100vw / left / transform
   from the "full"/"custom" panel width setting) that would otherwise win
   over the responsive rules and push content off-screen. */
@media (max-width: 767px) {

	.beplus-vmn-mega-panel {
		width: 100% !important;
		max-width: none !important;
		left: auto !important;
		transform: none !important;
	}
}

/* ---------- Tablet off-canvas (768px–1023px) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {

	.beplus-vmn-mega-panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto !important;
		width: 360px !important;
		max-width: 85vw !important;
		z-index: var(--beplus-vmn-mega-z);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;

		flex: none;
		max-height: none;
		opacity: 1;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(100%) !important;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
		border-radius: 0;
		transition:
			transform var(--beplus-vmn-mega-transition),
			visibility var(--beplus-vmn-mega-transition);
	}

	.beplus-vmn-mega-panel.is-open,
	.has-mega-menu.beplus-vmn--open > .beplus-vmn-mega-panel {
		transform: translateX(0) !important;
		visibility: visible;
		pointer-events: auto;
		overflow-y: auto;
	}

	.beplus-vmn-mega-panel__inner {
		padding: var(--beplus-vmn-mega-padding);
	}

	/* Backdrop overlay */
	.beplus-vmn-overlay {
		position: fixed;
		inset: 0;
		z-index: calc(var(--beplus-vmn-mega-z) - 1);
		background: rgba(0, 0, 0, 0.35);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity var(--beplus-vmn-mega-transition),
			visibility var(--beplus-vmn-mega-transition);
	}

	.beplus-vmn-overlay.is-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

/* ---------- Nextora theme compatibility ---------- */
.nextora-header-block,
.nextora-header-block .nextora-header-nav-cluster,
.nextora-header-block .nextora-header-block__nav-source,
.nextora-header-block nav,
.nextora-navigation-from-location {
	overflow: visible;
}

.nextora-header-block .nextora-header-menu > li.has-mega-menu {
	position: static !important;
}

.nextora-header-block .nextora-header-menu > li.has-mega-menu:hover {
	z-index: 1;
}

/* Mobile drawer: accordion layout for mega items */
@media (max-width: 1023px) {

	.nextora-primary-nav-portal--open .nextora-primary-nav-portal__panel .nextora-header-menu > li.has-mega-menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 var(--wp--preset--spacing--05, 0.5rem);
		width: 100%;
		border-bottom: 1px solid var(--nextora-nav-mobile-drawer-border, color-mix(in srgb, currentColor 15%, transparent));
	}

	.nextora-primary-nav-portal--open .nextora-primary-nav-portal__panel .nextora-header-menu > li.has-mega-menu > a {
		flex: 1 1 auto;
		min-width: 0;
		border-bottom: none;
	}

	/* stylelint-disable max-line-length */
	.nextora-primary-nav-portal--open .nextora-primary-nav-portal__panel .nextora-header-menu > li.has-mega-menu > .beplus-vmn-mega-panel {
		flex: 1 0 100%;
		width: 100%;

		/* margin: 0 0 var(--wp--preset--spacing--10, 1rem); */

		/* padding-inline-start: var(--wp--preset--spacing--05, 0.5rem); */
		box-sizing: border-box;
	}

	.nextora-primary-nav-portal--open .nextora-primary-nav-portal__panel .nextora-header-menu > li.has-mega-menu > .nextora-submenu-toggle,
	.nextora-primary-nav-portal--open .nextora-primary-nav-portal__panel .nextora-header-menu > li.has-mega-menu > .beplus-vmn-toggle {
		flex: 0 0 auto;
		align-self: center;
		margin-inline-start: auto;
	}

	/* Match Nextora drawer toggle tokens when available */
	.nextora-primary-nav-portal--open .nextora-primary-nav-portal__panel .nextora-header-menu > li.has-mega-menu > .beplus-vmn-toggle {
		--beplus-vmn-toggle-radius: var(--wp--preset--spacing--05, 0.375rem);
		--beplus-vmn-toggle-border: var(--nextora-nav-mobile-drawer-border, color-mix(in srgb, currentColor 14%, transparent));
		--beplus-vmn-toggle-hover-bg: var(--nextora-nav-panel-hover-bg, color-mix(in srgb, currentColor 8%, transparent));
		--beplus-vmn-toggle-active-bg: var(--nextora-nav-panel-hover-bg, color-mix(in srgb, currentColor 12%, transparent));
		width: 2.5rem;
		height: 2.5rem;
	}

	.nextora-primary-nav-portal--open .nextora-primary-nav-portal__panel .nextora-header-menu > li.has-mega-menu > .beplus-vmn-toggle:focus-visible {
		outline-color: var(--wp--preset--color--primary, currentColor);
	}
	/* stylelint-enable max-line-length */
}