/**
 * ONEsta Navigation Shell: the trigger, the drawer and the list.
 * Effect variants live in slide.css, displace.css and clip.css.
 *
 * Two states (responsive contract v3). The base is the drawer state; the header
 * region container (onestarSiteHeader) switches the shell to the inline state
 * once its inline size reaches --onesta-cq-nav-inline. That is the only query in
 * the navigation system. The two state bundles have zero specificity so a site
 * custom layer can re-declare them at its own threshold with a plain `.onesta-nav`
 * selector, whichever stylesheet loads first.
 *
 * Everything else is keyed on the drawer being open (popover, fixed fallback or
 * document layer). An open drawer is portaled to <body>, so rules that only
 * make sense for the inline list are scoped under .onesta-nav and stop applying
 * by themselves.
 */

html.onesta-drawer-scroll-locked {
	overflow: hidden;
	overscroll-behavior: none;
}

html:has(.onesta-drawer) {
	scrollbar-gutter: stable;
}

/* State bundle: drawer. */
:where(.onesta-nav) {
	--onesta-nav-mode: drawer;
	--onesta-nav-control-display: inline-flex;
	--onesta-nav-drawer-display: none;
	--onesta-nav-sheet-display: block;

	min-inline-size: 44px;
}

/* Editor canvas stand-in (contract v3 R5). The Shell is added when the block is
   rendered, so the site editor shows core's inline list at every width. Inside a
   header region the block itself carries the drawer bundle, and the same header
   container query below switches it to inline, exactly like .onesta-nav on the
   front. The canvas consumers sit at the end of this file. */
:where(.editor-styles-wrapper :is(.onestarSiteHeader, .onestar-site-header, .onestarPatternHeader, .onestar-pattern-header) .wp-block-navigation) {
	--onesta-nav-mode: drawer;
	--onesta-nav-control-display: inline-flex;
	--onesta-nav-canvas-list-display: none;
	--onesta-nav-canvas-list-basis: 100%;
	--onesta-nav-canvas-list-direction: column;
	--onesta-nav-canvas-item-size: 100%;
}

/* State bundle: inline. The header row is wide enough for the list. */
@container onestarSiteHeader (inline-size >= 48rem) {
	:where(.onesta-nav:not(.onesta-nav--drawer-always)) {
		--onesta-nav-mode: inline;
		--onesta-nav-control-display: none;
		--onesta-nav-drawer-display: contents;
		--onesta-nav-sheet-display: contents;

		min-inline-size: 0;
	}

	/* Editor canvas stand-in: the inline values are core's editor defaults. */
	:where(.editor-styles-wrapper .wp-block-navigation) {
		--onesta-nav-mode: inline;
		--onesta-nav-control-display: none;
		--onesta-nav-canvas-list-display: flex;
		--onesta-nav-canvas-list-basis: auto;
		--onesta-nav-canvas-list-direction: row;
		--onesta-nav-canvas-item-size: auto;
	}
}

/* Trigger and close control. */
:is(.onesta-drawer-open, .onesta-drawer-close) {
	display: var(--onesta-nav-control-display, inline-flex);
	box-sizing: border-box;
	min-inline-size: 44px;
	min-block-size: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
:is(.onesta-drawer-open,.onesta-drawer-close):focus-visible {
		outline: 2px solid currentcolor;
		outline-offset: 3px;
	}
:is(.onesta-drawer-open,.onesta-drawer-close) svg {
		pointer-events: none;
		fill: currentcolor;
	}

/* Inline list: WordPress core's hover fly-out gets ONEsta's chevron and surface.
   The accordion icon is not needed because the drawer never collapses submenus. */
:is(.onesta-nav .has-child) > .wp-block-navigation__submenu-icon {
		display: none;
	}
:is(.onesta-nav .has-child) > .wp-block-navigation-item__content::after {
		content: "";
		display: inline-block;
		inline-size: 0.4em;
		block-size: 0.4em;
		margin-inline-start: 0.35em;
		border-inline-end: 1.5px solid currentcolor;
		border-block-end: 1.5px solid currentcolor;
		transform: rotate(45deg) translateY(-0.15em);
		transition: transform var(--onesta-duration, 0.2s) ease;
		vertical-align: middle;
	}
:is(.onesta-nav .has-child):is(:hover,:focus-within) > .wp-block-navigation-item__content::after {
		transform: rotate(-135deg) translateY(-0.1em);
	}
:is(.onesta-nav .has-child) > .wp-block-navigation__submenu-container {
		min-inline-size: 0;
		padding: 0;
		border: 0;
		border-radius: var(--onesta-radius, 0.5rem);
		background: var(--onesta-header-bg, var(--wp--preset--color--background, #fff));
		box-shadow: none;
		color: var(--onesta-header-color, inherit);
		transform: translateY(0.5rem);
		transition:
			opacity var(--onesta-duration, 0.2s) ease,
			transform var(--onesta-duration, 0.2s) ease,
			visibility 0s var(--onesta-duration, 0.2s);
	}
:is(.onesta-nav .has-child):is(:hover,:focus-within) > .wp-block-navigation__submenu-container {
		min-inline-size: 13.75rem;
		padding: 0.5rem 0;
		box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 12%);
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

/* Drawer: closed in the drawer state, `contents` in the inline state; the effect
   files give the open drawer its geometry. `gap: inherit` relays the navigation
   block gap through the transparent wrappers to core's `gap: inherit` list. */
.onesta-drawer {
	display: var(--onesta-nav-drawer-display, none);
	gap: inherit;
}
.onesta-drawer:is([popover],[data-onesta-drawer-layer="document"]) {
		box-sizing: border-box;
		max-inline-size: none;
		max-block-size: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
	}
.onesta-drawer::backdrop {
		background: transparent;
	}
.onesta-drawer.onesta-drawer-fallback-open {
		display: block;
		position: fixed;
		inset-block: var(--onestar-admin-bar-offset, 0px) 0;
		inset-inline: 0;
		z-index: 100000;
	}
.onesta-drawer .onesta-drawer__sheet {
		display: var(--onesta-nav-sheet-display, block);
		gap: inherit;
		box-sizing: border-box;
		position: relative;
		min-inline-size: 0;
		min-block-size: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: calc(44px + 1rem) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
		background: var(--onesta-drawer-bg, var(--wp--preset--color--base, #fff));
		color: var(--onesta-drawer-text, var(--wp--preset--color--contrast, #111));
		-webkit-overflow-scrolling: touch;
	}
:is(.onesta-drawer .onesta-drawer__sheet):focus-visible {
			outline: 2px solid currentcolor;
			outline-offset: 3px;
		}
.onesta-drawer .onesta-drawer-close {
		position: absolute;
		inset-block-start: max(1rem, env(safe-area-inset-top));
		inset-inline-end: max(1rem, env(safe-area-inset-right));
		z-index: 2;
	}
.onesta-drawer .onesta-drawer-extra {
		display: none;
	}
.onesta-drawer .wp-block-navigation-item:nth-child(1) { --onesta-drawer-stagger: 0; }
.onesta-drawer .wp-block-navigation-item:nth-child(2) { --onesta-drawer-stagger: 1; }
.onesta-drawer .wp-block-navigation-item:nth-child(3) { --onesta-drawer-stagger: 2; }
.onesta-drawer .wp-block-navigation-item:nth-child(4) { --onesta-drawer-stagger: 3; }
.onesta-drawer .wp-block-navigation-item:nth-child(5) { --onesta-drawer-stagger: 4; }
.onesta-drawer .wp-block-navigation-item:nth-child(6) { --onesta-drawer-stagger: 5; }
.onesta-drawer .wp-block-navigation-item:nth-child(7) { --onesta-drawer-stagger: 6; }
.onesta-drawer .wp-block-navigation-item:nth-child(8) { --onesta-drawer-stagger: 7; }
.onesta-drawer .wp-block-navigation-item:nth-child(9) { --onesta-drawer-stagger: 8; }
.onesta-drawer .wp-block-navigation-item:nth-child(10) { --onesta-drawer-stagger: 9; }

/* Open drawer: a vertical list with every submenu expanded. Core's list rules are
   scoped under .wp-block-navigation and do not reach the portaled drawer, so the
   list is declared in full here. The mobile-menu part replaces the list. */
.onesta-drawer:is(:popover-open,.onesta-drawer-fallback-open,.onesta-drawer-document-open) .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		inline-size: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}
.onesta-drawer:is(:popover-open,.onesta-drawer-fallback-open,.onesta-drawer-document-open) .wp-block-navigation-item {
		box-sizing: border-box;
		display: block;
		inline-size: 100%;
		min-inline-size: 0;
	}
.onesta-drawer:is(:popover-open,.onesta-drawer-fallback-open,.onesta-drawer-document-open) .wp-block-navigation-item__content {
		box-sizing: border-box;
		display: flex;
		inline-size: 100%;
		min-block-size: 44px;
		align-items: center;
		padding: 0.75rem 0;
		color: inherit;
		text-decoration: none;
		overflow-wrap: anywhere;
	}
:is(.onesta-drawer:is(:popover-open,.onesta-drawer-fallback-open,.onesta-drawer-document-open) .wp-block-navigation-item__content)::after {
			content: none;
		}
.onesta-drawer:is(:popover-open,.onesta-drawer-fallback-open,.onesta-drawer-document-open) .has-child > .wp-block-navigation__submenu-icon {
		display: none;
	}
.onesta-drawer:is(:popover-open,.onesta-drawer-fallback-open,.onesta-drawer-document-open) .has-child > .wp-block-navigation__submenu-container {
		position: static;
		display: flex;
		flex-direction: column;
		min-inline-size: 0;
		margin: 0;
		padding: 0 0 0 1rem;
		border: 0;
		box-shadow: none;
		background: transparent;
		color: inherit;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
.onesta-drawer:is(:popover-open,.onesta-drawer-fallback-open,.onesta-drawer-document-open) .onesta-drawer-extra {
		display: block;
		inline-size: 100%;
	}
.onesta-drawer:is(:popover-open,.onesta-drawer-fallback-open,.onesta-drawer-document-open) .onesta-drawer__sheet:has(.onesta-drawer-extra) > .wp-block-navigation__container {
		display: none;
	}

/* Editor canvas stand-in consumers (contract v3 R5). Drawer state: the trigger is a
   ::before on the block and the list stays hidden until the block or one of its links
   is selected, then it stacks the way the open drawer does. Inline state: the bundle
   restores core's editor defaults, so the list is the front's inline list. Not
   represented: drawer_pc, the mobile-menu part, the mega panel and the effects. */
.editor-styles-wrapper :is(.onestarSiteHeader, .onestar-site-header, .onestarPatternHeader, .onestar-pattern-header) .wp-block-navigation {
	flex-wrap: wrap;
}
:is(.editor-styles-wrapper :is(.onestarSiteHeader,.onestar-site-header,.onestarPatternHeader,.onestar-pattern-header) .wp-block-navigation)::before {
		content: "";
		display: var(--onesta-nav-control-display, inline-flex);
		flex: none;
		box-sizing: border-box;
		inline-size: 44px;
		block-size: 44px;
		background-color: currentcolor;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16v1.5H4zm0 4.25h16v1.5H4zm0 4.25h16v1.5H4z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
	}
:is(.editor-styles-wrapper :is(.onestarSiteHeader,.onestar-site-header,.onestarPatternHeader,.onestar-pattern-header) .wp-block-navigation) > .wp-block-navigation__container {
		display: var(--onesta-nav-canvas-list-display, flex);
		flex-basis: var(--onesta-nav-canvas-list-basis, auto);
	}
:is(.editor-styles-wrapper :is(.onestarSiteHeader,.onestar-site-header,.onestarPatternHeader,.onestar-pattern-header) .wp-block-navigation):not(.is-vertical) > .wp-block-navigation__container {
		flex-direction: var(--onesta-nav-canvas-list-direction, row);
	}
:is(.editor-styles-wrapper :is(.onestarSiteHeader,.onestar-site-header,.onestarPatternHeader,.onestar-pattern-header) .wp-block-navigation):is(.is-selected,.has-child-selected) > .wp-block-navigation__container {
		display: flex;
	}
:is(.editor-styles-wrapper :is(.onestarSiteHeader,.onestar-site-header,.onestarPatternHeader,.onestar-pattern-header) .wp-block-navigation) .wp-block-navigation-item {
		inline-size: var(--onesta-nav-canvas-item-size, auto);
	}

@media (prefers-reduced-motion: reduce) {
	:is(.onesta-drawer, .onesta-drawer::before, .onesta-drawer::after, .onesta-drawer *, .onesta-drawer *::before, .onesta-drawer *::after, .wp-site-blocks, .wp-site-blocks::before, .wp-site-blocks::after) {
		scroll-behavior: auto;
		animation: none;
		transition: none;
	}
}