/* ---------------------------------------------------------------------------
   Navigation states the source stylesheet never defined.

   The source hid .menu below 920px and showed a .burger, but no rule ever made
   the menu visible again, and the dropdowns opened on :hover only. These rules
   give assets/js/nav.js something to toggle. Colours and spacing come from the
   existing tokens, so nothing here introduces a new visual decision.

   Loaded after the page stylesheet and before palette.css, in the same slot the
   source used for the inline page styles.
   --------------------------------------------------------------------------- */

/* Tap to open a dropdown, alongside the source's hover rule. */
.dropdown.open > .dropdown-menu,
.dropdown-submenu.open > .dropdown-menu {
	display: block;
}

@media (max-width: 920px) {
	/* The burger reveals the menu as a panel below the header bar. */
	.menu.open {
		display: flex;
		flex-direction: column;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 60;
		background: var(--paper, #fff);
		border-bottom: 1px solid var(--line, #e4e9eb);
		box-shadow: 0 20px 30px -24px rgba(52, 70, 79, 0.35);
		padding: 8px 0;
		max-height: calc(100vh - 76px);
		overflow-y: auto;
	}

	.menu.open > a,
	.menu.open .dropdown > a {
		display: block;
		padding: 12px 28px;
	}

	/* Submenus stack inline rather than floating off the side of the screen. */
	.menu.open .dropdown-menu {
		position: static;
		display: none;
		min-width: 0;
		margin: 0;
		padding: 0 0 6px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}

	.menu.open .dropdown.open > .dropdown-menu,
	.menu.open .dropdown-submenu.open > .dropdown-menu {
		display: block;
	}

	.menu.open .dropdown-menu li a {
		padding: 10px 28px 10px 44px;
	}

	/* Hover must not open panels on a touch screen; the script owns the state. */
	.menu.open .dropdown:hover > .dropdown-menu,
	.menu.open .dropdown-submenu:hover > .dropdown-menu {
		display: none;
	}

	.menu.open .dropdown.open:hover > .dropdown-menu,
	.menu.open .dropdown-submenu.open:hover > .dropdown-menu {
		display: block;
	}

	/* The panel is positioned against the header bar. */
	header.nav .wrap {
		position: relative;
	}
}