/*
 * The header navigation: page links with section dropdowns from 600px up,
 * and below that core's full-screen menu, which lists every section.
 */

/* Auto start margin keeps the nav beside the icons, not mid-row. Core also
   puts the block's class on the inner list, hence the child combinator. */
.pm-header__bar > .pm-nav {
	margin-left: auto;
}

.pm-nav .wp-block-navigation__container {
	gap: 0.5rem 1.75rem;
}

.pm-nav a {
	padding-block: 0.4rem;
}

.pm-nav .wp-block-navigation__container > li > a::before {
	content: "/ ";
	color: var(--pm-violet);
}

/* Four classes outweigh core's white submenu for a nav without a colour. */
.pm-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	min-width: 11rem;
	padding-block: 0.4rem;
	border: 1px solid var(--pm-line);
	border-radius: 4px;
	background: var(--pm-deep);
	color: var(--pm-text);
	box-shadow: 0 0.75rem 2rem rgb(10 7 24 / 0.6);
}

/* The last item sits at the bar's right edge; opening its menu leftwards
   keeps it, even while hidden, from widening the page. */
.pm-nav .wp-block-navigation__container > .has-child:last-child > .wp-block-navigation__submenu-container {
	right: 0;
	left: auto;
}

.pm-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a {
	padding: 0.6rem 1rem;
}

.pm-nav .wp-block-navigation__submenu-container a:hover {
	background: var(--pm-dusk);
	color: var(--pm-aurora);
}

/* A top item is two controls: the label links to the page and the boxed
   arrow opens its sections. Separate hover states show which is which. */
.pm-nav .wp-block-navigation__container > li > a:hover .wp-block-navigation-item__label {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.pm-nav .wp-block-navigation-item .wp-block-navigation-submenu__toggle {
	box-sizing: content-box;
	margin-left: 0.4rem;
	padding: 0.45rem;
	border: 1px solid var(--pm-line);
	border-radius: 3px;
}

.pm-nav .wp-block-navigation-submenu__toggle:hover,
.pm-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	border-color: var(--pm-violet);
	background: var(--pm-dusk);
	color: var(--pm-aurora);
}

/* The dropdown's first entry repeats the top item's page link for anyone
   who reads the label as a menu title. */
.pm-nav .pm-nav__page {
	margin-bottom: 0.4rem;
	border-bottom: 1px solid var(--pm-line);
}

.pm-nav .pm-nav__page .wp-block-navigation-item__label::after {
	content: " →" / "";
	color: var(--pm-violet);
}

/* In the phone menu the top items are already large links. Five classes
   outrank core's display rule for overlay items. */
.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .pm-nav__page {
	display: none;
}

/* The negative margin keeps the 24px icon aligned while the padding grows
   the button to a 44px target. */
.pm-nav .wp-block-navigation__responsive-container-open,
.pm-nav .wp-block-navigation__responsive-container-close {
	margin: -10px;
	padding: 10px;
}

.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--50);
}

.pm-nav .is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
}

.pm-nav .is-menu-open .wp-block-navigation__container > li > a {
	font-size: 1.25rem;
}

/* Five classes match core's borderless overlay submenu rule. */
.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	margin-top: 0.4rem;
	padding: 0 0 0 1rem;
	border-left: 1px solid var(--pm-line);
}

/* Core forces the overlay items' colour with !important; the label inside
   is free to take the dimmer section colour. */
.pm-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	color: var(--pm-haze);
}

.pm-nav .is-menu-open .wp-block-navigation__submenu-container a {
	padding-block: 0.6rem;
}

/* With the nav folded into its menu button, the title and button share the
   first row and the icons take the second. Core folds the nav below 600px. */
@media (max-width: 599.98px) {
	.pm-header__bar > .pm-nav {
		order: 1;
		flex-basis: auto;
		margin-left: auto;
	}

	.pm-header .pm-social {
		order: 2;
		flex-basis: 100%;
		margin-left: -0.5rem;
	}
}