/* Site menu (restoration spec 4.1). Markup: inc/menu.php. Behaviour: menu.js.
   Every colour is a palette token, so dark.css re-inks it with the rest of the
   site. Layout (width, indent) is in masthead.css, with the wordmark's. */

.site-menu {
	font-family: var(--wp--preset--font-family--label);
}

.site-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}

.menu-top {
	position: relative;
}

/* Top-bar items: links and the panel toggles look alike. */
.menu-top > a,
.menu-toggle,
.menu-open {
	font: inherit;
	color: var(--wp--preset--color--structure);
	text-decoration: none;
}

.menu-toggle,
.menu-open {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.menu-toggle::after {
	content: "\25BE" / "";
	display: inline-block;
	margin-inline-start: .3em;
	transition: transform .15s;
}

.menu-toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.menu-top > a:hover,
.menu-toggle:hover,
.menu-panel a:hover {
	text-decoration: underline;
	text-underline-offset: .2em;
}

.site-menu a:focus-visible,
.site-menu button:focus-visible {
	outline: 2px solid var(--wp--preset--color--structure);
	outline-offset: 3px;
	border-radius: 2px;
}

/* The panel: one column per group, dropped under its toggle. display:grid
   would beat the hidden attribute's display:none, so hidden is restated. */
.menu-panel {
	position: absolute;
	z-index: 10;
	top: calc(100% + .5rem);
	left: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: auto;
	gap: 1.6rem;
	width: max-content;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 4px;
	box-shadow: 0 .5rem 1.5rem rgba(7, 11, 15, .18);
}

.menu-panel[hidden] {
	display: none;
}

.menu-group-heading {
	margin: 0 0 .5rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--emphasis-ink);
}

.menu-group-heading a {
	color: inherit;
}

.menu-group li {
	line-height: 1.4;
	padding-block: .2rem;
}

.menu-panel a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--structure);
	text-decoration: none;
	white-space: nowrap;
}

/* Desktop only: the phone button stays out of the way. */
.menu-open {
	display: none;
}

/* html.js is set by an inline script at the top of <head> (inc/menu.php), so
   the scripted layout applies from first paint, not only once the deferred
   menu.js has run. Without it the toggles do nothing, so hovering or tabbing
   into an item opens its panel instead. With it, the toggle alone decides: hover would
   reopen a panel Escape had just closed. */
@media (hover: hover) {
	html:not(.js) .site-menu .has-panel:hover > .menu-panel {
		display: grid;
	}
}

html:not(.js) .site-menu .has-panel:focus-within > .menu-panel {
	display: grid;
}

/* Phone: the bar folds behind a Menu button; the open menu is one vertical
   list, panels inline and indented, group headings as subheads. Same
   breakpoint as the masthead. */
@media (max-width: 47.99rem) {
	.menu-open {
		display: inline-block;
		padding: .3rem .8rem;
		border: 1px solid var(--wp--preset--color--rule);
		border-radius: 4px;
	}

	.menu-open::after {
		content: "\25BE" / "";
		margin-inline-start: .3em;
	}

	.menu-open[aria-expanded="true"]::after {
		content: "\25B4" / "";
	}

	html.js .site-menu:not(.is-open) .menu-bar {
		display: none;
	}

	.menu-bar {
		flex-direction: column;
		gap: 0;
		margin-top: var(--wp--preset--spacing--20);
	}

	.menu-top > a,
	.menu-toggle {
		display: inline-block;
		padding-block: .35rem;
	}

	.menu-panel {
		position: static;
		display: block;
		width: auto;
		padding: 0 0 .35rem 1rem;
		background: none;
		border: 0;
		border-left: 2px solid var(--wp--preset--color--rule);
		border-radius: 0;
		box-shadow: none;
	}

	html:not(.js) .site-menu .menu-panel[hidden] {
		display: block;
	}

	.menu-group + .menu-group {
		margin-top: .5rem;
	}

	.menu-group-heading {
		margin: .35rem 0 .1rem;
	}

	.menu-panel a {
		display: inline-block;
		padding-block: .25rem;
		white-space: normal;
	}
}