/**
 * Gutenberg Menu Plus — styles for core/navigation.
 *
 * Custom properties are set inline on .gutenberg-menu-plus.
 * Undeclared variables make the declaration invalid, so theme defaults remain.
 */

.gutenberg-menu-plus .wp-block-navigation-item > .wp-block-navigation-item__content {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* -------------------------------------------------------------------------
 * First level
 * ----------------------------------------------------------------------- */

.gutenberg-menu-plus .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) {
	background-color: var(--gmp-item-bg);
	border-color: var(--gmp-item-border-color);
	border-width: var(--gmp-item-border-width);
	border-radius: var(--gmp-item-radius);
	padding-top: var(--gmp-item-pad-y);
	padding-bottom: var(--gmp-item-pad-y);
	padding-left: var(--gmp-item-pad-x);
	padding-right: var(--gmp-item-pad-x);
}

.gutenberg-menu-plus.gmp-has-item-border .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) {
	border-style: solid;
}

.gutenberg-menu-plus .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) > .wp-block-navigation-item__content,
.gutenberg-menu-plus .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) > .wp-block-navigation__submenu-icon {
	color: var(--gmp-item-color);
}

.gutenberg-menu-plus .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):hover,
.gutenberg-menu-plus .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):focus-within {
	background-color: var(--gmp-item-hover-bg);
}

.gutenberg-menu-plus .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):hover > .wp-block-navigation-item__content,
.gutenberg-menu-plus .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):focus-within > .wp-block-navigation-item__content,
.gutenberg-menu-plus .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):hover > .wp-block-navigation__submenu-icon,
.gutenberg-menu-plus .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):focus-within > .wp-block-navigation__submenu-icon,
.gutenberg-menu-plus .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) > .wp-block-navigation-item__content:hover,
.gutenberg-menu-plus .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) > .wp-block-navigation-item__content:focus {
	color: var(--gmp-item-hover-color);
	background-color: transparent;
}

/* -------------------------------------------------------------------------
 * Dropdown panel — offset from the top-level bar (hover bridge included)
 * ----------------------------------------------------------------------- */

.gutenberg-menu-plus:not(.is-vertical) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container,
.gutenberg-menu-plus:not(.is-vertical) .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container,
.gutenberg-menu-plus:not(.is-vertical) .wp-block-navigation__container > .wp-block > .has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + var(--gmp-dropdown-offset, 0px));
	margin-top: var(--gmp-dropdown-margin-top, 0);
	margin-right: var(--gmp-dropdown-margin-right);
	margin-bottom: var(--gmp-dropdown-margin-bottom);
	margin-left: var(--gmp-dropdown-margin-left);
	background-color: var(--gmp-dropdown-bg);
	color: var(--gmp-dropdown-color);
	border-color: var(--gmp-dropdown-border-color);
	border-width: var(--gmp-dropdown-border-width);
	border-radius: var(--gmp-dropdown-radius);
	padding-top: var(--gmp-dropdown-padding-top);
	padding-right: var(--gmp-dropdown-padding-right);
	padding-bottom: var(--gmp-dropdown-padding-bottom);
	padding-left: var(--gmp-dropdown-padding-left);
	min-width: var(--gmp-dropdown-min-width);
}

.gutenberg-menu-plus.gmp-has-dropdown-border:not(.is-vertical) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container,
.gutenberg-menu-plus.gmp-has-dropdown-border:not(.is-vertical) .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container,
.gutenberg-menu-plus.gmp-has-dropdown-border:not(.is-vertical) .wp-block-navigation__container > .wp-block > .has-child > .wp-block-navigation__submenu-container {
	border-style: solid;
}

.gutenberg-menu-plus.gmp-dropdown-shadow:not(.is-vertical) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container,
.gutenberg-menu-plus.gmp-dropdown-shadow:not(.is-vertical) .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container,
.gutenberg-menu-plus.gmp-dropdown-shadow:not(.is-vertical) .wp-block-navigation__container > .wp-block > .has-child > .wp-block-navigation__submenu-container {
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* Keep hover alive while the pointer crosses the gap under the bar. */
.gutenberg-menu-plus:not(.is-vertical) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before,
.gutenberg-menu-plus:not(.is-vertical) .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container::before,
.gutenberg-menu-plus:not(.is-vertical) .wp-block-navigation__container > .wp-block > .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--gmp-dropdown-offset, 0px);
	background: transparent;
	pointer-events: auto;
}

.gutenberg-menu-plus .wp-block-navigation__submenu-container {
	background-color: var(--gmp-dropdown-bg);
	color: var(--gmp-dropdown-color);
}

.gutenberg-menu-plus .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content {
	background-color: var(--gmp-drop-item-bg);
	color: var(--gmp-dropdown-color);
	border-radius: calc(var(--gmp-dropdown-radius, 0px) * 0.5);
}

.gutenberg-menu-plus .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.gutenberg-menu-plus .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.gutenberg-menu-plus .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.gutenberg-menu-plus .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content:focus {
	background-color: var(--gmp-drop-hover-bg);
	color: var(--gmp-drop-hover-color);
}

/* Nested flyouts keep the core side offset; only first-level uses top gap. */
.gutenberg-menu-plus .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	top: var(--gmp-nested-top, -1px);
}

/* Overlay / mobile: do not force the desktop dropdown offset. */
.gutenberg-menu-plus .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	top: auto;
	margin-top: 0;
	box-shadow: none;
}

.gutenberg-menu-plus .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before {
	content: none;
}

/* -------------------------------------------------------------------------
 * Current / active item
 * ----------------------------------------------------------------------- */

.gutenberg-menu-plus .wp-block-navigation-item.current-menu-item,
.gutenberg-menu-plus .wp-block-navigation-item:has(> .wp-block-navigation-item__content[aria-current="page"]),
.gutenberg-menu-plus.gmp-style-ancestors .wp-block-navigation-item.current-menu-ancestor {
	background-color: var(--gmp-active-bg);
	border-color: var(--gmp-active-border);
	font-weight: var(--gmp-active-weight);
}

.gutenberg-menu-plus .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.gutenberg-menu-plus .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"],
.gutenberg-menu-plus.gmp-style-ancestors .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
	background-color: var(--gmp-active-bg);
	color: var(--gmp-active-color);
	font-weight: var(--gmp-active-weight);
}

.gutenberg-menu-plus .wp-block-navigation-item.current-menu-item:hover,
.gutenberg-menu-plus .wp-block-navigation-item.current-menu-item:focus-within,
.gutenberg-menu-plus .wp-block-navigation-item:has(> .wp-block-navigation-item__content[aria-current="page"]):hover,
.gutenberg-menu-plus.gmp-style-ancestors .wp-block-navigation-item.current-menu-ancestor:hover {
	background-color: var(--gmp-active-hover-bg, var(--gmp-active-bg));
}

.gutenberg-menu-plus .wp-block-navigation-item.current-menu-item:hover > .wp-block-navigation-item__content,
.gutenberg-menu-plus .wp-block-navigation-item.current-menu-item:focus-within > .wp-block-navigation-item__content,
.gutenberg-menu-plus .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]:hover,
.gutenberg-menu-plus .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]:focus,
.gutenberg-menu-plus.gmp-style-ancestors .wp-block-navigation-item.current-menu-ancestor:hover > .wp-block-navigation-item__content {
	background-color: var(--gmp-active-hover-bg, var(--gmp-active-bg));
	color: var(--gmp-active-hover-color, var(--gmp-active-color));
}

.gutenberg-menu-plus .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.gutenberg-menu-plus .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] {
	background-color: var(--gmp-active-bg);
	color: var(--gmp-active-color);
	font-weight: var(--gmp-active-weight);
}

.gutenberg-menu-plus .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item:hover > .wp-block-navigation-item__content,
.gutenberg-menu-plus .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]:hover {
	background-color: var(--gmp-active-hover-bg, var(--gmp-drop-hover-bg, var(--gmp-active-bg)));
	color: var(--gmp-active-hover-color, var(--gmp-drop-hover-color, var(--gmp-active-color)));
}