/* Desktop Navigation
--------------------------------------------- */

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .current-menu-item > a,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .has-child button:hover {
	text-decoration: underline;
}

/*
 * Drop nav.
 *
 * Core gives the panel a white background and a black text colour of its own,
 * both hard coded, so a dark style variation ends up with a dropdown that
 * belongs to a different site than the header it hangs from. Naming the two
 * palette colours hands it back to the style variation, and gives every header
 * here the same panel whether the menu sits on a bar, in a capsule or on a
 * blurred island.
 *
 * The width is clamped at both ends: wide enough to read a menu label on one
 * line, never wider than the window it has to fit inside.
 */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	/*
	 * The panel draws its own light background, so it is a surface in the sense
	 * of the colour context in style.css and has to say so. Without this the
	 * menu items would keep reading the header they hang from, and under a dark
	 * or transparent header that means white labels on a white panel.
	 */
	--executive-text: var(--wp--preset--color--ink);
	--executive-text-muted: var(--wp--preset--color--ink-muted);
	--executive-link: var(--wp--preset--color--ink);
	--executive-button-background: var(--wp--preset--color--ink);
	--executive-button-text: var(--wp--preset--color--canvas);
	background-color: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--ink);
	border: none !important;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--snug);
	border-radius: var(--executive-radius-control);
	min-width: 225px !important;
	max-width: min(320px, calc(100vw - var(--wp--preset--spacing--medium) * 2));
	inset-inline-start: 0;
	inset-inline-end: auto;
	margin-inline-start: calc(var(--wp--preset--spacing--medium) * -1);
	padding: 0;
	z-index: 20 !important;
	box-shadow: var(--wp--preset--shadow--small-light);
}

/* Drop nav submenu */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	margin-inline-start: 0;
	top: 0 !important;
	inset-inline-start: 100%;
	inset-inline-end: auto;
}

/*
 * Every header pattern in this theme puts the navigation at the end of its row,
 * so the last items of the menu are the ones nearest the edge of the window. A
 * panel hanging from the start of such an item runs straight off that edge once
 * the window narrows — a tablet held sideways is already enough. Those items
 * hang from their far side instead and open back towards the middle of the page.
 *
 * A menu built from pages keeps its items in a list of its own inside the
 * navigation, so both lists are named; otherwise the count would find nothing.
 */
.wp-block-navigation__responsive-container:not(.is-menu-open) :is(.wp-block-navigation__container, .wp-block-page-list) > .has-child:nth-last-child(-n+2) > .wp-block-navigation__submenu-container {
	inset-inline-start: auto;
	inset-inline-end: 0;
	margin-inline-start: 0;
}

/* A second level inside such a panel carries on in the same direction. */
.wp-block-navigation__responsive-container:not(.is-menu-open) :is(.wp-block-navigation__container, .wp-block-page-list) > .has-child:nth-last-child(-n+2) > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	inset-inline-start: auto;
	inset-inline-end: 100%;
}

/*
 * In the Floating, Blur and Pill headers the menu sits inside a capsule that has
 * padding of its own, so a panel starting at the bottom edge of its item opens
 * inside the capsule rather than below it. A small offset clears that padding,
 * and reads as a panel of its own in the flat headers too.
 *
 * A gap under a menu that opens on hover is a hole for the pointer to fall
 * through, so this is limited to submenus that open on click — which is what
 * every header pattern here uses.
 */
.wp-block-navigation__responsive-container:not(.is-menu-open) :is(.wp-block-navigation__container, .wp-block-page-list) > .open-on-click > .wp-block-navigation__submenu-container {
	margin-top: 10px;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) li:first-child {
	padding-top: var(--wp--preset--spacing--small);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

/* Add padding to bottom of drop menu */
.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) li:last-child {
	padding-bottom: var(--wp--preset--spacing--small);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/* Add margin to sub menu icon */
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	margin-right: var(--wp--preset--spacing--small);
}

/* Drop nav link padding */
.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) a,
.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) .wp-block-navigation-submenu__toggle {
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium) !important;
}

/* Mobile Navigation
--------------------------------------------- */

/*
 * Extending the mobile menu past tablet.
 *
 * WordPress core collapses the navigation into a hamburger toggle only below
 * 600px (wp-includes/blocks/navigation/style.css): above that width core shows
 * the toggle button (display: none, min-width: 600px) and shows the full item
 * row instead (display: block, min-width: 600px).
 *
 * The header's flex layout does not let that row wrap or shrink — the
 * navigation is set to selfStretch: fit (see patterns/header-floating.php),
 * which compiles to flex-shrink: 0 — so "the full item row" only fits once the
 * site title, every menu label and the header's own button all have room on
 * one line at once. An iPad mini (768px) already clips it; an iPad Air
 * (820px) clears it by only a few pixels. 992px is the WordPress admin's own
 * long-standing "desktop" line, comfortably past either tablet.
 *
 * Both core rules are restated here for the 600–992px band, with the values
 * that already apply below 600px: toggle shown, full row hidden. Same
 * selectors, same specificity — this file loads after core's, so on a tie the
 * later declaration wins and the mobile behaviour now runs through 992px.
 *
 * 992px itself has to be included, not stopped short of: max-width: 991.98px
 * would miss a viewport reporting exactly 992px and fall back to core's
 * desktop row right at the boundary.
 */
@media (min-width: 600px) and (max-width: 992px) {

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/*
 * On a phone or tablet the navigation collapses into a menu toggle. When it
 * shares its row with buttons, the toggle should come after them so the
 * button stays in easy reach — while on a wide screen the menu still reads
 * before the button.
 *
 * The first selector covers a navigation standing directly beside the buttons.
 * The second covers a navigation wrapped in its own container, such as the
 * capsule in the Pill header, where the wrapper is the thing that has to move.
 *
 * Both require a buttons sibling, so a header without one is left alone.
 *
 * The breakpoint matches the override above, so the reordering only kicks in
 * once the menu has actually collapsed. Above it the menu is still spelled
 * out in full and has to keep its reading order.
 */
@media (max-width: 992px) {

	.wp-block-navigation:has(~ .wp-block-buttons),
	.wp-block-group:has(> .wp-block-navigation:only-child):has(~ .wp-block-buttons) {
		order: 99;
	}
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
	padding: var(--wp--preset--spacing--medium);
}

/*
 * Opening animation for the mobile overlay.
 *
 * Every selector here is scoped to .is-menu-open, so desktop dropdowns and the
 * menu template parts are untouched. WordPress hides the overlay with display,
 * which cannot be transitioned, so the entrance runs as a keyframe animation
 * instead. Closing stays instant for the same reason.
 */
@media (prefers-reduced-motion: no-preference) {

	.wp-block-navigation__responsive-container.is-menu-open {
		animation: executive-overlay-in .22s ease-out;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		animation: executive-overlay-rise .34s cubic-bezier(.22, .61, .36, 1) 40ms backwards;
	}

	/* The first few links follow the panel in, one after the other. */
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container > li {
		animation: executive-overlay-rise .34s cubic-bezier(.22, .61, .36, 1) backwards;
	}

	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container > li:nth-child(1) { animation-delay: 90ms; }
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container > li:nth-child(2) { animation-delay: 125ms; }
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container > li:nth-child(3) { animation-delay: 160ms; }
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container > li:nth-child(4) { animation-delay: 195ms; }
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container > li:nth-child(5) { animation-delay: 230ms; }
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container > li:nth-child(n+6) { animation-delay: 265ms; }
}

@keyframes executive-overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes executive-overlay-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--medium);
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container {
	width: 100%;
	gap: 5px !important;
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-page-list {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	border-radius: 0;
	margin: 0;
	padding: 5px 0 0 20px;
	align-items: flex-start;
	flex-direction: column;
	gap: 5px;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	display: block;
	position: absolute;
	right: 0;
	top: 5px;
	height: auto;
	width: 60px;
	padding: 15px 0;
	margin: 0;
	z-index: 10;
}

body.rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	left: 0;
	right: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon svg {
	height: 16px;
	margin: 0;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	display: none;
}

.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation-submenu,
.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex;
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container li:not(.wp-social-link) {
	width: 100%;
	padding: 0 0;
	position: relative;
}

/* Mobile menu links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	width: 100%;
	font-size: var(--wp--preset--font-size--base);
	padding: 15px 60px 15px 15px;
	border-radius: var(--executive-radius-control);
}

body.rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	padding: 15px 15px 15px 60px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	transition: .3s ease;
	text-decoration: none;
	background: color-mix(in srgb, currentColor, transparent 97%);
	-webkit-tap-highlight-color: transparent;
}

.wp-block-navigation__container .wp-block-navigation-item:has(.wp-block-navigation__submenu-container:hover) > .wp-block-navigation-item__content {
	background: transparent;
}

/* Mobile menu open button */
/*
 * The toggle follows whatever text colour the header carries, so it stays
 * readable on a light header, a dark one, and on a transparent header sitting
 * over an image. The chip behind it is mixed from that same colour, which keeps
 * it visible without ever fighting the background.
 */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	padding: 4px;
	border-radius: var(--executive-radius-control);
	color: currentColor;
	background: color-mix(in srgb, currentColor 9%, transparent);
	transition: background-color .2s ease;
}

.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-open:hover {
	background: color-mix(in srgb, currentColor 16%, transparent);
}

.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
	margin-top: 0;
}