.wp-block-isr-blocks-library-mega-menu {
	list-style: none;
}

/* The whole Navigation bar — not the individual trigger — is the
   positioning context for the dropdown. Centering on the full nav bar
   (rather than on a single nav item's narrow <li>) is what keeps the
   panel from sliding off-screen when its trigger sits near the left or
   right edge of the menu. */
.wp-block-navigation {
	position: relative;
}

/* Reset button styles so the trigger matches other nav links. */
.wp-block-isr-blocks-library-mega-menu button {
	background-color: initial;
	border: none;
	color: currentColor;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	padding: 0;
	text-transform: inherit;
}

.wp-block-isr-blocks-library-mega-menu__menu-container {
	box-sizing: border-box;
	height: auto;

	/* Anchored to the right edge of the Navigation bar (not centered) —
	   since the nav sits at the far right of the header, its right edge
	   is reliably inside the viewport, so growing the panel leftward
	   from there can never overflow past the right. Width comes from
	   the per-block --mega-menu-panel-width custom property (set inline
	   by render.php based on the block's Panel Width setting) when the
	   block isn't using "Full width" — otherwise falls back to a fluid
	   clamp that shrinks smoothly on tablet-sized screens. */
	right: 0;
	left: auto;
	width: var(
		--mega-menu-panel-width,
		clamp(320px, 92vw, var(--wp--style--global--wide-size, 1100px))
	);
	min-width: 240px;
	max-width: calc(100vw - 2rem);

	opacity: 0;
	overflow: hidden;
	position: absolute;
	top: calc(100% + 10px);
	transition: opacity 0.1s linear;
	visibility: hidden;
	z-index: 2;
}

.wp-block-isr-blocks-library-mega-menu__menu-container .menu-container__close-button {
	align-items: center;
	-webkit-backdrop-filter: blur( 16px ) saturate( 180% );
	backdrop-filter: blur( 16px ) saturate( 180% );
	background-color: #ffffffba;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	opacity: 0;
	padding: 4px;
	position: absolute;
	right: 12px;
	text-align: center;
	top: 12px;
	transition: opacity 0.2s ease;
	z-index: 100;
}

.wp-block-isr-blocks-library-mega-menu__menu-container .menu-container__close-button:focus {
	opacity: 1;
}

.wp-block-isr-blocks-library-mega-menu__menu-container:hover .menu-container__close-button {
	opacity: 1;
}

.wp-block-isr-blocks-library-mega-menu button[aria-expanded="true"] ~ .wp-block-isr-blocks-library-mega-menu__menu-container {
	opacity: 1;
	overflow: visible;
	visibility: visible;
}

/* Content inside the panel (e.g. a Columns block from the Menu template
   part) shouldn't be forced narrower than it can comfortably read —
   let it scroll horizontally in the rare case columns still don't fit
   the clamped panel width, rather than silently clipping content. */
.wp-block-isr-blocks-library-mega-menu__menu-container > * {
	max-width: 100%;
	overflow-x: auto;
}

/* Intermediate breakpoint: tablets and small laptops. Panel is already
   fluid above, but at this size a wide multi-column layout usually reads
   better stacked, and this is well above where the Navigation block
   switches to its mobile overlay, so it needs its own handling. */
@media ( max-width: 960px ) {
	.wp-block-isr-blocks-library-mega-menu__menu-container {
		/* Still respects an explicit Panel Width setting (400/600/800/auto) —
		   only the fluid "Full width" default gets narrower here. */
		width: var( --mega-menu-panel-width, clamp(320px, 96vw, 720px) );
	}
}

/* Below the Navigation block's mobile overlay breakpoint, let the panel
   flow inline inside the overlay instead of floating as a dropdown. */
@media ( max-width: 600px ) {
	.wp-block-isr-blocks-library-mega-menu .wp-block-isr-blocks-library-mega-menu__menu-container {
		position: static;
		right: auto;
		left: auto;
		width: 100%;
		max-width: 100%;
	}
}