/* ETF Site: mobile menu, below 56em (keep in step with DESKTOP in assets/site-menu.js). Only with JS: the
   boot script adds .etf-site-js to <html> before first paint. The menu container becomes a full-height panel,
   fixed from the bar's bottom edge to the bottom of the screen, in the same material as the bar but denser. It
   grows out of its button and returns into it (transform origin and top edge set by site-menu.js).
   site-menu.js writes one progress value per frame, --etf-site-menu-p (0..1), on the header bar; opacity,
   scale and the button glyph derive from it here, so the preference rules below still win. The panel covers
   the page, so there is no scrim; the page behind is inert and does not scroll while it is open.
   Without JS the nav wraps under the bar as a plain row. Desktop layout: header.css. */
.etf-site-menu-btn {
	display: none;
}

@media (width < 56em) {
	.etf-site-header__bar {
		flex-wrap: wrap;
	}

	/* No JS: a plain, scrollable row under the title */
	html:not(.etf-site-js) .etf-site-menu {
		order: 3;
		flex-basis: 100%;
		justify-content: flex-start;
		overflow-x: auto;
	}

	/* ---- Menu button: two bars that turn into a cross with the panel's progress ---- */
	.etf-site-js .etf-site-menu-btn {
		position: relative;
		display: inline-flex;
		flex: none;
		width: var(--etf-site-hit);
		height: var(--etf-site-hit);
		margin-right: -0.625rem;
		padding: 0;
		border: 0;
		border-radius: 9999px;
		background: none;
		color: var(--etf-site-text);
		cursor: pointer;
		transition: background-color var(--etf-site-dur) var(--etf-site-ease), transform var(--etf-site-dur) var(--etf-site-ease);
	}

	.etf-site-menu-btn:active {
		background-color: var(--etf-site-tint-press);
		transform: scale(0.97);
		transition-duration: var(--etf-site-dur-press);
		transition-timing-function: var(--etf-site-ease-press);
	}

	.etf-site-menu-btn__bar {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1.125rem;
		height: 1.5px;
		margin: -0.75px 0 0 -0.5625rem;
		border-radius: 1px;
		background: currentColor;
		transform: translateY(calc(-3.5px * (1 - var(--etf-site-menu-p, 0)))) rotate(calc(45deg * var(--etf-site-menu-p, 0)));
	}

	.etf-site-menu-btn__bar + .etf-site-menu-btn__bar {
		transform: translateY(calc(3.5px * (1 - var(--etf-site-menu-p, 0)))) rotate(calc(-45deg * var(--etf-site-menu-p, 0)));
	}

	/* ---- Panel: from the bar to the bottom of the screen, the bar's material but denser ---- */
	.etf-site-js .etf-site-menu {
		position: fixed;
		inset: var(--etf-site-menu-top, calc(var(--wp-admin--admin-bar--height, 0px) + var(--etf-site-bar))) 0 0;
		z-index: 1;
		display: block;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 1.5rem var(--wp--style--root--padding-right, 1.5rem) 3rem var(--wp--style--root--padding-left, 1.5rem);
		background: var(--etf-site-chrome-menu);
		-webkit-backdrop-filter: var(--etf-site-chrome-blur);
		backdrop-filter: var(--etf-site-chrome-blur);
		opacity: var(--etf-site-menu-p, 0);
		transform: scale(calc(0.96 + 0.04 * var(--etf-site-menu-p, 0)));
		transform-origin: calc(100% - 1.5rem) -1.5rem;
		visibility: hidden;
	}

	.etf-site-js .etf-site-menu:focus {
		outline: none; /* focused only as the trap's anchor after a tap; links show their own ring */
	}

	.etf-site-js .etf-site-menu[data-open] {
		visibility: visible;
	}

	.etf-site-js .etf-site-nav ul {
		flex-direction: column;
		max-width: var(--wp--style--global--wide-size, 68.75rem);
		margin: 0 auto;
	}

	/* Large links, rows of at least 3.25rem; the current page in full-strength text */
	.etf-site-js .etf-site-nav a {
		display: flex;
		min-height: 3.25rem;
		padding: 0;
		color: var(--etf-site-nav);
		font-size: 1.75rem;
		font-weight: 600;
		letter-spacing: -0.015em;
		line-height: 1.15;
		white-space: normal;
	}

	.etf-site-js .etf-site-nav a[aria-current="page"] {
		color: var(--etf-site-text);
	}

	/* The page behind the open panel does not scroll (set on <html> by site-menu.js) */
	html[data-etf-site-menu-open] {
		overflow: hidden;
	}
}

@media (width < 56em) and (prefers-reduced-motion: reduce) {
	/* Cross-fade only: no scaling */
	.etf-site-js .etf-site-menu {
		transform: none;
	}

	.etf-site-js .etf-site-menu-btn {
		transition: none;
	}

	.etf-site-menu-btn:active {
		transform: none;
	}
}

@media (width < 56em) and (prefers-reduced-transparency: reduce), (width < 56em) and (prefers-contrast: more) {
	.etf-site-js .etf-site-menu {
		background: var(--etf-site-chrome-solid);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (width < 56em) and (prefers-contrast: more) {
	.etf-site-js .etf-site-menu {
		border-top: 1px solid var(--etf-site-chrome-line);
	}
}

@media (width < 56em) and (forced-colors: active) {
	.etf-site-menu-btn__bar {
		background: ButtonText;
	}

	.etf-site-js .etf-site-menu {
		border-top: 1px solid CanvasText;
	}
}