/* =============================================================================
   Menubar / Header — Dexter Yard (FSE)
   Floating cream pill (per Figma), fixed over the page. ONE menu (wp_navigation
   385) drives everything; the 5 "Workspaces" items are its real submenu.

   Desktop ≥1200px:
     • Row 1 (.menubar--primary): cream pill — logo · tan divider · links
       (black; non-active 500, active 700 + lime underline) · "Why BMR"
       (dark-green tinted pill).
     • The Workspaces submenu renders as the dark-green tab directly beneath
       the pill, lime links. Shown on hover/focus of Workspaces; PINNED open
       on Workspaces + its child pages (js/header.js adds .is-pinned and keeps
       the collapse-on-scroll-down / reveal-on-scroll-up behavior there).

   Mobile <1200px (core Navigation overlay, restyled):
     • Closed: pill = logo · current page title (Block Bindings, empty on
       home) · hamburger. The green tab is gone — submenu lives in the panel.
     • Open: floating cream panel (Figma 34:29) over a dimmed page; submenu
       always expanded in gray; divider; Contact Menu (wp_navigation 460,
       teleported into the overlay by js/header.js); X replaces the burger.
       The pill's logo/title stay visible ABOVE the panel (z-index) so the
       panel + pill read as one surface.

   Palette: green #1A3D39, lime #C3D941 (theme.json). Cream #EFEDE6 + divider
   #E2DCC9 are header chrome. Link colors set via the nav blocks' textColor
   (has-text-color) so WP's `:not(.has-text-color){color:inherit}` can't win.
   ============================================================================= */

/* --- skip link (WP block themes also inject their own to <main>) --- */
a.menubar--skip {
	display: inline-block;
	padding: 6px;
	position: absolute;
	top: -50px;
	left: 0;
	color: #000;
	background: #fff;
	border-bottom-right-radius: 8px;
	text-decoration: underline;
	transition: top .3s ease-out;
	z-index: 100;
}
a.menubar--skip:focus { top: 0; }

/* --- header shell: fixed, transparent; the pill floats --- */
.menubar--section {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding-top: 1.5rem;
	background: transparent;
	pointer-events: none;
	/* mobile overlay open animation — single tuning knob (client, 2026-08-10) */
	--dy-menu-open-ms: 450ms;
}
.menubar--primary { pointer-events: auto; }

.admin-bar .menubar--section { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .menubar--section { top: 46px; }
}

/* The header OVERLAYS the page (fixed, no content offset) — each page controls
   its own top spacing (hero/spacer blocks). js/header.js still publishes
   --dy-header-h (pill height; the green tab is out of flow) if a page needs to
   offset against the header. Also zero the root blockGap margin (24px) that
   the .wp-site-blocks flow puts on <main> as the next sibling after the
   (out-of-flow) header part. */
.wp-site-blocks > main { margin-block-start: 0; }

/* --- row 1: cream pill, hugs content, centered --- */
.menubar--primary {
	position: relative;
	z-index: 2;
	width: fit-content;
	max-width: 96vw;
	margin-inline: auto;
	gap: 0;
	padding: 1rem 3rem;
	background: rgba(239, 237, 230, 0.95);
	border-radius: 10px;
	box-shadow: 0 2px 28px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
}

/* The group's flex gap must be 0 so ONLY our margins space the logo/divider/nav.
   WP's per-container gap rule uses the inherited --wp--style--block-gap (24px) and
   ties a bare `.menubar--primary` (0,1,0) on specificity — winning by load order
   on inner pages (home rendered 0, inner pages 24). Scope to (0,3,0) so we always
   win; header.html also sets blockGap:0 on the block for good measure. */
.menubar--section .menubar--primary.is-layout-flex { column-gap: 0; }

/* NB: WP core's flex-layout reset `.is-layout-flex > :is(*, div){margin:0}` is
   (0,1,1) — scope these to `.menubar--primary >` (0,2,0) so our margins win. */
.menubar--primary > .menubar--logo-wrap { display: inline-flex; align-items: center; flex: 0 0 auto; margin-right: 40px; }
/* Mobile-first: the DEXTER YARD wordmark is a two-line lockup, so it needs
   more width than the old single mark — 30px below md keeps the pill's
   centred page title from ellipsing sooner than it has to (client,
   2026-08-19). `aspect-ratio:auto` is belt-and-braces for SVG (trap 13). */
.menubar--logo { height: 30px; width: auto; display: block; aspect-ratio: auto; }
@media (min-width: 768px) {
	.menubar--logo { height: 40px; }
}
.menubar--primary > .menubar--divider {
	flex: 0 0 auto;
	align-self: center;
	width: 2px;
	height: 52px;
	background: #e2dcc9;
	margin-right: 28px;
}

/* Current-page title — mobile-only element (shown in the <1200px block) */
.menubar--section .menubar--page-title { display: none; }

/* Contact Menu (wp_navigation 460) — mobile-overlay-only; js/header.js moves it
   into the overlay's content area. Revealed only while the overlay is open.
   NB: core stamps the block's className onto the inner <ul> as well, so scope
   to the nav ELEMENT or the divider/margins render twice. */
.menubar--section nav.menubar--nav-contact.wp-block-navigation { display: none; }

.menubar--nav-primary { font-weight: 500; }
.menubar--nav-primary .wp-block-navigation__container {
	gap: 42px;
	align-items: center;
}
.menubar--nav-primary .wp-block-navigation-item__content {
	position: relative;
	color: #000;
	text-decoration: none;
	text-transform: capitalize;
	letter-spacing: .01em;
}

/* active (current page) = heavier; active + hover = lime underline (lower, wider).
   current-menu-ancestor: on a Workspaces child page the parent item reads as
   the active section. */
.menubar--nav-primary .current-menu-item > .wp-block-navigation-item__content,
.menubar--nav-primary .current-menu-ancestor > .wp-block-navigation-item__content,
.menubar--nav-primary .wp-block-navigation-item__content[aria-current] {
	font-weight: 700;
}
.menubar--nav-primary .wp-block-navigation-item:not(.nav-cta) > .wp-block-navigation-item__content:hover::after,
.menubar--nav-primary .current-menu-item:not(.nav-cta) > .wp-block-navigation-item__content::after,
.menubar--nav-primary .current-menu-ancestor:not(.nav-cta) > .wp-block-navigation-item__content::after,
.menubar--nav-primary .wp-block-navigation-item:not(.nav-cta) > .wp-block-navigation-item__content[aria-current]::after {
	content: "";
	position: absolute;
	left: -9px;
	right: -9px;
	bottom: -8px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--lime, #c3d941);
}

/* "Why BMR" CTA — dark-green tinted pill */
.menubar--nav-primary .nav-cta > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--green, #1a3d39);
	background: rgba(26, 61, 57, 0.1);
	border-radius: 10px;
	padding: .55em 1.3em;
	font-weight: 500;
}
.menubar--nav-primary .nav-cta > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--green, #1a3d39);
	color: #fff;
}
/* active CTA (current page or section) = same dark-green fill as hover — the
   lime underline is a text-link affordance and stays off the pill (the
   underline rules above exclude .nav-cta). Mobile overlay unaffected: its
   (0,5,0) plain-item rule outranks these. */
.menubar--nav-primary .nav-cta.current-menu-item > .wp-block-navigation-item__content,
.menubar--nav-primary .nav-cta.current-menu-ancestor > .wp-block-navigation-item__content,
.menubar--nav-primary .nav-cta > .wp-block-navigation-item__content[aria-current] {
	background: var(--wp--preset--color--green, #1a3d39);
	color: #fff;
}

/* =============================================================================
   DESKTOP ≥1200px
   ============================================================================= */
@media (min-width: 1200px) {

	/* --- un-overlay the "always" nav: hide the burger, show the menu inline.
	   overlayMenu:"always" gives us a single 1200px breakpoint (core's own
	   un-overlay CSS is hardcoded at 600px and only fires for "mobile"). --- */
	.menubar--nav-primary .wp-block-navigation__responsive-container-open { display: none; }
	.menubar--nav-primary .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block;
		/* static, NOT relative — the Workspaces dropdown tab is absolutely
		   positioned and must anchor to .menubar--primary (the pill), not to
		   this container (which starts after the logo/divider) */
		position: static;
		inset: auto;
		width: 100%;
		z-index: auto;
		background-color: transparent;
		overflow: visible;
	}
	.menubar--nav-primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
	.menubar--nav-primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
	.menubar--nav-primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
		display: contents;
	}
	.menubar--nav-primary .wp-block-navigation__responsive-container-close { display: none; }

	/* --- the Workspaces submenu = the dark-green dropdown tab under the pill.
	   The li goes position:static so the submenu anchors to .menubar--primary
	   (the pill) and can center under it, full tab style. Collapsed by default;
	   opens on hover/focus-within; pinned open (js .is-pinned) on Workspaces +
	   child pages, where scroll toggles .is-collapsed. --- */
	/* Everything between the pill and the submenu must be UNpositioned so the
	   absolute tab anchors to .menubar--primary. Core puts position:relative
	   on .wp-block-navigation — which is stamped on BOTH the <nav> and the
	   inner <ul> — and on the li. */
	nav.menubar--nav-primary,
	ul.menubar--nav-primary,
	.menubar--nav-primary .wp-block-navigation-item.has-child { position: static; }

	/* Hover bridge: the pointer must travel from the Workspaces link down
	   across the pill's bottom padding to reach the tab — without this the li
	   loses :hover en route and the submenu collapses. An invisible pseudo on
	   the trigger link (position:relative) spans that dead zone; hovering a
	   pseudo counts as hovering its element, so li:hover holds. It can't live
	   on the submenu container itself — overflow:hidden there (needed for the
	   collapse animation) would clip it. */
	.menubar--nav-primary .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::before {
		content: "";
		position: absolute;
		top: 100%;
		left: -21px;
		right: -21px;
		height: 34px;
	}
	.menubar--section .menubar--nav-primary .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		/* 5 items ≈ 710px nowrap; gap/padding sized so the tab fits inside
		   the pill's width (≈860px) */
		gap: 24px;
		width: max-content;
		min-width: 0;
		/* anchored to the pill, so 100% = pill width — the tab must not
		   outgrow the cream pill's silhouette */
		max-width: 100%;
		height: auto;
		margin: 0;
		background: var(--wp--preset--color--green, #1a3d39);
		border: 0;
		border-radius: 0 0 10px 10px;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
		box-sizing: border-box;
		overflow: hidden;
		/* collapsed state */
		visibility: hidden;
		opacity: 0;
		max-height: 0;
		padding: 0 1.5rem;
		/* .15s exit delay = hover-intent forgiveness for diagonal pointer
		   travel toward the far end of the tab (the bridge covers the
		   straight-down path); opening (rule below) stays immediate */
		transition: max-height .35s ease .15s, opacity .3s ease .15s, padding .35s ease .15s,
			visibility 0s linear .5s;
	}
	.menubar--section .menubar--nav-primary .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
	.menubar--section .menubar--nav-primary .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container,
	.menubar--section .menubar--nav-primary .wp-block-navigation-item.has-child.is-pinned:not(.is-collapsed) > .wp-block-navigation__submenu-container {
		visibility: visible;
		opacity: 1;
		max-height: 4rem;
		padding: 1em 1.5rem;
		transition: max-height .35s ease, opacity .3s ease, padding .35s ease;
	}
	/* while collapsed by scroll, hover/focus still reveals (rule above wins by order) */

	/* submenu links: lime, white on hover; current child = white + bold */
	.menubar--section .menubar--nav-primary .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--lime, #c3d941);
		font-size: 15px;
		font-weight: 500;
		padding: 0;
		white-space: nowrap;
		text-decoration: none;
		text-transform: capitalize;
	}
	.menubar--section .menubar--nav-primary .wp-block-navigation__submenu-container > .wp-block-navigation-item { flex: 0 0 auto; }
	.menubar--section .menubar--nav-primary .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: #fff; }
	.menubar--section .menubar--nav-primary .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
	.menubar--section .menubar--nav-primary .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current] {
		color: #fff;
		font-weight: 700;
	}
	/* the lime underline is a top-level affordance — not inside the tab */
	.menubar--section .menubar--nav-primary .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
}

/* =============================================================================
   MOBILE <1200px — restyled core Navigation overlay (Figma 34:29)
   ============================================================================= */
@media (max-width: 1199px) {

	/* --- closed pill: full-width-ish bar; logo · centered title · burger --- */
	.menubar--section { padding-top: 19px; }
	.menubar--primary {
		width: auto;
		max-width: none;
		margin-inline: 18px;
		padding: 11px 28px;
	}
	.menubar--primary > .menubar--logo-wrap { margin-right: 0; }
	.menubar--primary > .menubar--divider { display: none; }

	/* current page title (Block Bindings; empty on home) */
	.menubar--section .menubar--page-title {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		padding: 0 12px;
		text-align: center;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: .04em;
		text-transform: capitalize;
		color: #000;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* keep the pill's own content ABOVE the open overlay panel (which is a
	   descendant of the pill, z-index 100000) so pill + panel read as one */
	.menubar--primary > .menubar--logo-wrap,
	.menubar--section .menubar--page-title {
		position: relative;
		z-index: 100001;
	}

	/* --- burger (core open button; core's icon is 2 lines — Figma wants 3,
	   drawn with layered gradients) --- */
	.menubar--nav-primary .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		padding: 0;
		border: 0;
		background: transparent;
		color: #000;
		position: relative;
		z-index: 100001;
	}
	.menubar--nav-primary .wp-block-navigation__responsive-container-open svg { display: none; }
	.menubar--nav-primary .wp-block-navigation__responsive-container-open::before {
		content: "";
		display: block;
		width: 36px;
		height: 22px;
		background-image:
			linear-gradient(#000, #000),
			linear-gradient(#000, #000),
			linear-gradient(#000, #000);
		background-size: 100% 2px;
		background-position: 0 0, 0 50%, 0 100%;
		background-repeat: no-repeat;
	}
	/* while open, the X inside the panel is the toggle — hide the burger */
	.menubar--nav-primary:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open {
		opacity: 0;
		pointer-events: none;
	}

	/* --- focus indication on the menu toggle (burger + its X): KEYBOARD ONLY
	   (client, 2026-08-10). The pointer ring did NOT come from tapping the
	   burger — core restores focus to it when the panel closes, so the ring
	   appeared one step later, after a TAP on the X, with :focus-visible false.
	   It is `reset.min.css`'s `button:focus{outline:-webkit-focus-ring-color
	   auto 5px}` — :focus, NOT :focus-visible (trap 12). So both pseudo-classes
	   have to be reset (0,3,0 beats the reset's 0,1,1) before the indicator goes
	   back on :focus-visible alone; resetting only :focus-visible would look
	   correct under Tab and still ring on tap. Black rather than the site's
	   lime: lime on cream is ~1.6:1 and would fail WCAG 2.4.11's 3:1 floor for
	   a non-text indicator. --- */
	.menubar--nav-primary .wp-block-navigation__responsive-container-open:focus,
	.menubar--nav-primary .wp-block-navigation__responsive-container-open:focus-visible,
	.menubar--nav-primary .wp-block-navigation__responsive-container-close:focus,
	.menubar--nav-primary .wp-block-navigation__responsive-container-close:focus-visible {
		outline: none;
	}
	.menubar--nav-primary .wp-block-navigation__responsive-container-open:focus-visible,
	.menubar--nav-primary .wp-block-navigation__responsive-container-close:focus-visible {
		outline: 2px solid #000;
		outline-offset: 6px;
		border-radius: 2px;
	}

	/* --- open overlay: full-viewport dim + floating cream panel ---
	   The page must stay VISIBLE behind the panel (client, 2026-08-10 — "remove
	   the white background"). Core paints an opaque white overlay with
	   `.wp-block-navigation:not(.has-background)
	    .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)`
	   — (0,5,0), and block styles print AFTER lwh-menubar (see trap 9) — so the
	   old (0,3,0) selector lost outright and this one has to reach (0,6,1).
	   Set `background: transparent` here if the client wants no scrim at all. */
	.menubar--section .menubar--primary nav.menubar--nav-primary.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		z-index: 100000;
		display: block;
		background: rgba(0, 0, 0, 0.2);
		padding: 19px 18px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		/* scrim fades in over the same beat as the panel's drop */
		animation: lwh-menu-scrim var(--dy-menu-open-ms, 450ms) ease-out;
	}
	/* the panel itself (aligns exactly with the pill: same 19/18px insets).
	   Opening EXTENDS DOWNWARDS (client, 2026-08-10): a clip-path wipe, not a
	   height/transform animation — the copy is revealed in place instead of
	   sliding or squashing, and it costs no layout. It has to be @keyframes
	   rather than a transition because core adds .is-menu-open in the same frame
	   the container leaves display:none, so there is no from-state to
	   transition from. The insets are NEGATIVE (-40px) on the three static
	   edges so the 28px-blur box-shadow is never clipped — at rest the element
	   has no clip-path at all, and inset(-40px) matches that exactly, so
	   nothing pops when the animation ends (no fill-mode). */
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		display: block;
		width: 100%;
		background: rgba(239, 237, 230, 0.97);
		border-radius: 10px;
		box-shadow: 0 2px 28px rgba(0, 0, 0, 0.2);
		/* top padding clears the pill row floating above the panel */
		padding: 82px 28px 32px;
		box-sizing: border-box;
		animation: lwh-menu-drop var(--dy-menu-open-ms, 450ms) cubic-bezier(.22, .61, .36, 1);
	}
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { position: static; }

	/* X close button — sits where the burger sits (pill row center: 19px top +
	   11px pad + 40px row → center 50px, minus half the 34px icon; right:
	   18px inset + 28px pill padding) */
	.menubar--nav-primary .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 33px;
		right: 46px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #000;
		z-index: 2;
	}
	.menubar--nav-primary .wp-block-navigation__responsive-container-close svg {
		width: 34px;
		height: 34px;
	}

	/* --- menu list: vertical, Figma type (Instrument Sans, not the mock's
	   Roboto — client decision). NB: core's .is-menu-open rules for the content
	   padding and list gap tie ours on specificity and print later (separate
	   block assets), so these two carry the full container class to outrank
	   them. --- */
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: block;
		width: 100%;
		padding: 0;
	}
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		display: block;
		margin: 0;
		position: static;
	}
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		padding: 8px 0;
		font-size: 24px;
		font-weight: 500;
		line-height: 1.25;
		letter-spacing: .04em;
		color: #000;
		text-transform: capitalize;
		text-decoration: none;
	}
	/* current page (or section parent) = bold; no lime underline inside the panel */
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content,
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current] { font-weight: 700; }
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none !important; }

	/* Why BMR: plain item in the panel (no green pill) */
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .nav-cta > .wp-block-navigation-item__content {
		background: transparent;
		border-radius: 0;
		padding: 8px 0;
		color: #000;
		font-weight: 500;
	}

	/* --- Workspaces submenu: always expanded, indented, gray --- */
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		position: static;
		display: block;
		visibility: visible;
		opacity: 1;
		width: auto;
		min-width: 0;
		height: auto;
		max-height: none;
		margin: 0;
		padding: 0 0 0 19px;
		background: transparent;
		border: 0;
		box-shadow: none;
		overflow: visible;
		transform: none;
		transition: none;
	}
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 22px;
		line-height: 1.25;
		padding: 8px 0;
		color: #757370;
	}
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current] {
		color: #000;
		font-weight: 700;
	}

	/* --- divider + Contact Menu (teleported here by js/header.js; nav-element
	   scoped — the inner <ul> carries the same class) --- */
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open nav.menubar--nav-contact {
		display: block;
		width: 100%;
		margin-top: 22px;
		padding-top: 14px;
		border-top: 1px solid rgba(35, 31, 32, 0.2);
	}
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open ul.menubar--nav-contact {
		margin: 0;
		padding: 0;
		border: 0;
	}
}

/* =============================================================================
   Mobile overlay open animation (duration: --dy-menu-open-ms, set on
   .menubar--section). CLOSING is deliberately instant — core drops
   .is-menu-open and the container returns to display:none in the same frame,
   so an exit animation would need us to intercept core's own (Interactivity
   API) toggle. Only the opening was asked for.
   ============================================================================= */
@keyframes lwh-menu-scrim {
	from { background-color: rgba(0, 0, 0, 0); }
}
@keyframes lwh-menu-drop {
	from { clip-path: inset(-40px -40px 100% -40px round 10px); }
	to   { clip-path: inset(-40px -40px -40px -40px round 10px); }
}

@media (prefers-reduced-motion: reduce) {
	.menubar--section .menubar--primary nav.menubar--nav-primary.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
	.menubar--nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		animation: none;
	}
}