/* ==========================================================================
   Secondary navigation overlay
   ========================================================================== */

/*
 * The second selector supports the Portuguese Site Editor override, which
 * predates the stable root class but uses the same custom overlay machinery.
 */
:is(
nav.oqp-secondary-navigation,
.oqp-header-grid__navigation
> nav.is-responsive:has(> .wp-block-navigation__responsive-container.disable-default-overlay)
) {
	position: relative;
	flex: 0 0 auto;
}


/* --------------------------------------------------------------------------
   WordPress responsive container
   -------------------------------------------------------------------------- */

/*
 * Keep WordPress' interaction and focus handling while replacing only the
 * fullscreen geometry with a popover anchored to the menu trigger.
 */
:is(
nav.oqp-secondary-navigation,
.oqp-header-grid__navigation
> nav.is-responsive:has(> .wp-block-navigation__responsive-container.disable-default-overlay)
) > .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open {
	position: absolute;
	display: block;

	inset-block-start: calc(100% + var(--wp--preset--spacing--30));
	inset-inline-end: 0;
	inset-block-end: auto;
	inset-inline-start: auto;

	inline-size: max-content;
	block-size: auto;
	min-inline-size: 0;
	min-block-size: 0;
	max-inline-size: calc(100vw - (2 * var(--wp--preset--spacing--40)));
	max-block-size: none;

	/* Core sets overflow:auto here, which clips this custom popover. */
	overflow: visible;

	background: transparent;
	color: inherit;

	z-index: 120;
}

/* Size WordPress' modal wrappers around the custom overlay surface. */
:is(
nav.oqp-secondary-navigation,
.oqp-header-grid__navigation
> nav.is-responsive:has(> .wp-block-navigation__responsive-container.disable-default-overlay)
)
.wp-block-navigation__responsive-close,
:is(
nav.oqp-secondary-navigation,
.oqp-header-grid__navigation
> nav.is-responsive:has(> .wp-block-navigation__responsive-container.disable-default-overlay)
)
.wp-block-navigation__responsive-dialog,
:is(
nav.oqp-secondary-navigation,
.oqp-header-grid__navigation
> nav.is-responsive:has(> .wp-block-navigation__responsive-container.disable-default-overlay)
)
.wp-block-navigation__responsive-container-content,
:is(
nav.oqp-secondary-navigation,
.oqp-header-grid__navigation
> nav.is-responsive:has(> .wp-block-navigation__responsive-container.disable-default-overlay)
)
.wp-block-navigation__overlay-container {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: auto;
	min-inline-size: 0;
	min-block-size: 0;
	max-inline-size: 100%;
	max-block-size: none;
	overflow: visible;
}

:is(
nav.oqp-secondary-navigation,
.oqp-header-grid__navigation
> nav.is-responsive:has(> .wp-block-navigation__responsive-container.disable-default-overlay)
)
.wp-block-navigation__responsive-container-content {
	display: block;
	padding: 0;
}


/* --------------------------------------------------------------------------
   Overlay menu
   -------------------------------------------------------------------------- */

.oqp-secondary-navigation__overlay
.oqp-secondary-navigation__menu
.wp-block-navigation-item__content {
	white-space: normal;
	overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   WordPress-generated responsive list
   -------------------------------------------------------------------------- */

/* The custom overlay already contains the visible copy of these links. */
:is(
nav.oqp-secondary-navigation,
.oqp-header-grid__navigation
> nav.is-responsive:has(> .wp-block-navigation__responsive-container.disable-default-overlay)
)
.wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	display: none;
}


/* --------------------------------------------------------------------------
   Overlay surface and controls
   -------------------------------------------------------------------------- */

:is(
nav.oqp-secondary-navigation,
.oqp-header-grid__navigation
> nav.is-responsive:has(> .wp-block-navigation__responsive-container.disable-default-overlay)
)
.wp-block-navigation__overlay-container {
	position: relative;
}

.oqp-secondary-navigation__overlay {
	box-sizing: border-box;
	inline-size: max-content;
	min-inline-size: 16rem;
	max-inline-size: min(24rem, calc(100vw - (2 * var(--wp--preset--spacing--40))));
	block-size: auto;

	/*
	 * The Site Editor overlay stores min-height:100vh as an inline block style.
	 * This scoped important rule is required to restore compact popover sizing
	 * without changing the database-owned template part.
	 */
	min-block-size: 0 !important;
	max-block-size: calc(100dvh - (2 * var(--wp--preset--spacing--70)));
	overflow: auto;
	overscroll-behavior: contain;
	box-shadow: var(--wp--preset--shadow--soft);
}

.oqp-secondary-navigation__overlay .wp-block-navigation-overlay-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--wp--custom--accessibility--minimum-target-size);
	min-block-size: var(--wp--custom--accessibility--minimum-target-size);
	margin: 0;
	padding: 0;
}

.oqp-secondary-navigation__overlay .wp-block-navigation-overlay-close svg {
	display: block;
	inline-size: 1.5rem;
	block-size: 1.5rem;
}


/* ==========================================================================
   Tablet and mobile
   ========================================================================== */

@media (max-width: 782px) {

	:is(
	nav.oqp-secondary-navigation,
	.oqp-header-grid__navigation
	> nav.is-responsive:has(> .wp-block-navigation__responsive-container.disable-default-overlay)
) > .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open {
		inline-size: min(24rem, calc(100vw - (2 * var(--wp--preset--spacing--40))));
		max-inline-size: calc(100vw - (2 * var(--wp--preset--spacing--40)));
	}

	.oqp-secondary-navigation__overlay {
		inline-size: 100%;
		min-inline-size: 0;
		max-inline-size: none;
	}

}

@media (max-width: 600px) {

	:is(
	nav.oqp-secondary-navigation,
	.oqp-header-grid__navigation
	> nav.is-responsive:has(> .wp-block-navigation__responsive-container.disable-default-overlay)
) > .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open {
		inline-size: min(26rem, calc(100vw - (2 * var(--wp--preset--spacing--40))));
	}

}