/**
 * Awesome Navigation - Nav Pill
 *
 * A floating navigation pill that expands to reveal menu content.
 * - At the top of the page: expands inline, pushing content down.
 * - When sticky + scrolled: expands inline, overlaying content
 *   (sticky positioning handles this automatically).
 *
 * NO separate floating panel. The pill always expands internally.
 */

/* ==========================================================================
   Pill Container (the sticky wrapper)
   ========================================================================== */

/* Sticky only when the user sets "Sticky" position in the block editor
   (which adds .is-position-sticky). Respects the WP admin bar offset. */
.wp-block-template-part:has(.awesome-nav-header.is-position-sticky) {
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset, 0px);
	z-index: 100;
}

.awesome-nav-header {
	padding: 1rem;
	background: transparent;
	pointer-events: none;
}

.awesome-nav-header > * {
	pointer-events: auto;
}

/* ==========================================================================
   The Pill Itself
   ========================================================================== */

.awesome-nav-pill {
	display: flex;
	flex-direction: column;
	max-width: 75ch;
	margin: 0 auto;

	/* No default background — set it on the pill Group block in the editor.
	   That color flows through to the topbar and content area. */
	border-radius: 1rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

	overflow: hidden;
	transform: translateZ(0);
	transition: box-shadow 0.3s ease;
}

/* Override theme flow layout margins inside the pill */
.awesome-nav-pill > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.awesome-nav-pill:hover {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Top Bar (always visible)
   ========================================================================== */

.awesome-nav-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem;
	flex-shrink: 0;
}

/* Site title in the topbar */
.awesome-nav-topbar .wp-block-site-title {
	margin: 0;
	flex: 1;
	min-width: 0;
}

.awesome-nav-topbar .wp-block-site-title a {
	font-size: 1rem;
	font-weight: 600;
	color: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

/* Site logo in the topbar */
.awesome-nav-topbar .wp-block-site-logo {
	flex-shrink: 0;
}

.awesome-nav-topbar .wp-block-site-logo img {
	border-radius: 0.5rem;
}

/* Menu toggle button styles are in the Menu Toggle block's own stylesheet */

/* ==========================================================================
   Expandable Content Area
   ========================================================================== */

.awesome-nav-content {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	overflow: hidden;

	/* Containing block for the submenu canvas takeover. Without this the
	   takeover's inset:0 resolves against whichever ancestor is closest —
	   core puts position:relative on the nav, its <ul>, and each item, so
	   it landed on the ~44px <li> and rendered as a sliver. This element is
	   the right anchor: it is the visible content box, it carries the
	   max-height cap, and its overflow:hidden clips the takeover to it. */
	position: relative;
	padding: 0 1rem;

	/*
	 * Closing transition. Kept separate from the opening one below because a
	 * single symmetric transition made the close visibly stutter:
	 *
	 * - padding was not transitioned at all, so the 1rem/1.5rem block padding
	 *   snapped to 0 on the first frame — a 40px jump while the menu was still
	 *   at full opacity, read as a lurch before the collapse.
	 * - the springy curve below overshoots past its end value. Opening, that is
	 *   the point. Closing, it drives the row below 0fr, where it clamps: the
	 *   collapse finished in ~190ms of a 500ms transition and then sat there.
	 * - the 0.1s opacity delay is there to let the box start opening before the
	 *   contents fade in. On the way out it just holds everything opaque
	 *   through the entire collapse.
	 */
	transition:
		grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.25s ease-out;
}

.awesome-nav-content > * {
	overflow: hidden;
	min-height: 0;
}

.awesome-nav-pill.is-open .awesome-nav-content {
	/*
	 * Opening: spring the box out, then fade the contents in behind it.
	 *
	 * The spring is on grid-template-rows ONLY. That track resolves against
	 * the content's own height, so overshooting past 1fr is clamped and the
	 * curve reads as easing rather than growth. Padding is a real box
	 * dimension with nothing to clamp it — springing it made the pill
	 * overshoot ~4px and rock back over a third of a second, which on a
	 * sticky header looks like the whole pill shoving upward. Ease it.
	 */
	transition:
		grid-template-rows 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
		padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.4s ease-out 0.1s;

	grid-template-rows: 1fr;
	opacity: 1;
	padding: 1rem 1rem 1.5rem;
	max-height: calc(100vh - 120px);
	max-height: calc(100dvh - 120px); /* dynamic viewport for mobile */
}

/* The 1fr row is capped at the container's max-height, so overflow lands
   on the grid child, not the container — the child must be the scroller.
   (nav-pill.js focuses this child on open so keyboard scroll keys work.) */
.awesome-nav-pill.is-open .awesome-nav-content > * {
	overflow-y: auto;

	/* The shrinking grid child overflows until the opening row reaches 1fr.
	   Clip only during that reveal; tall menus scroll normally afterwards. */
	animation: awesome-nav-reveal-scroll 0.5s;
	overscroll-behavior: contain; /* don't chain scroll to the page behind */
	scrollbar-gutter: stable; /* no width jump when a classic scrollbar appears */
}

@keyframes awesome-nav-reveal-scroll {

	from,
	to {
		overflow-y: hidden;
	}
}

/* ==========================================================================
   Search Panel — same expand animation as the content area,
   but shown only when is-search-open (not is-open).
   ========================================================================== */

/* Search panel — injected as a direct child of the pill by the main plugin's
   render_block filter, using attributes from the search-toggle block.
   Same expand pattern as .awesome-nav-content. */
.awesome-nav-search-panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	overflow: hidden;
	padding: 0 1rem;
	/* Inherit pill's colors so the panel matches the pill background */
	background: inherit;
	color: inherit;

	transition:
		grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.25s ease-out;
}

.awesome-nav-search-panel > * {
	overflow: hidden;
	min-height: 0;
}

/* No max-height here (unlike .awesome-nav-content) — the panel only holds a
   one-row search form, so no scroller is needed. If this ever gains a height
   cap or variable-height content, mirror the `> *` scroll rule above. */
.awesome-nav-pill.is-search-open .awesome-nav-search-panel {
	grid-template-rows: 1fr;
	opacity: 1;
	padding: 1rem 1rem 1.5rem;
	transition:
		grid-template-rows 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
		padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.4s ease-out 0.1s;
}

/* Inner content fade-in.
   Deliberately opacity-only: any transform here (even translateY(0)) makes
   this element a containing block, and since it is also the scroller the
   takeover would size to the full scroll height and scroll with the list.
   The pill already animates open via grid-template-rows, so the 8px slide
   this used to add was a flourish on top of an existing reveal. */
/*
 * The pill focuses this scroller when it opens, so a keyboard user's next Tab
 * starts inside the menu rather than back at the top of the page. It carries
 * tabindex="-1" and is therefore never reachable by tabbing — the only focus it
 * ever receives is that programmatic one, and Chrome still matches
 * :focus-visible for it, painting a 2px ring around the entire menu the moment
 * it opens. The ring communicates nothing (nobody navigated to this box) and
 * reads as a stray border around the whole panel, so drop it. The focus MOVE,
 * which is the part doing the accessibility work, is untouched.
 */
.awesome-nav-content-inner:focus,
.awesome-nav-content:focus {
	outline: none;
}

.awesome-nav-content-inner {
	opacity: 0;
	/* Closing: no delay, and quicker than the box, so the contents are gone
	   before the collapse finishes rather than being clipped mid-fade. */
	transition: opacity 0.15s ease-out;
}

.awesome-nav-pill.is-open .awesome-nav-content-inner {
	transition: opacity 0.3s ease-out 0.1s;
	opacity: 1;
}

/* ==========================================================================
   Inherit pill background by default, but allow user overrides.

   `inherit` copies the PARENT's computed value, so this only works as an
   unbroken parent-to-child chain — every element between the pill and whatever
   needs to paint has to be on this list. (It does not "cascade through any
   wrapper depth"; a custom property would, and this is not one.)

   The chain has to start at .awesome-nav-content, which is otherwise
   transparent: without that first link every rule below inherits transparency
   from it and the whole mechanism is a no-op. That went unnoticed because
   nothing in the pill painted a surface — until the submenu takeover needed
   to cover the menu behind it, and showed through instead.

   The :not([style*="background"]) / :not(.has-background) guards skip blocks
   where the user explicitly chose a background in the Site Editor.
   ========================================================================== */

/*
 * The chain can only hand down what the pill has. A pill with no background
 * chosen is explicitly supported ("No default background — set it on the pill
 * Group block in the editor", above), and inherits transparent — which put the
 * root menu straight through an open takeover. Give the pill a surface only
 * when the author has not picked one, so the chain always has something opaque
 * to carry and an author's own choice still wins.
 */
.awesome-nav-pill:not(.has-background):not([style*="background"]) {
	background-color: var( --wp--preset--color--base, #fff );
}

.awesome-nav-content,
.awesome-nav-content-inner,
.awesome-nav-content .wp-block-template-part:not([style*="background"]),
.awesome-nav-content .wp-block-group:not([style*="background"]):not(.has-background),
.awesome-nav-content .wp-block-columns:not([style*="background"]):not(.has-background),
.awesome-nav-content .wp-block-column:not([style*="background"]):not(.has-background),
.awesome-nav-content .wp-block-navigation:not([style*="background"]):not(.has-background),
.awesome-nav-content .wp-block-navigation__container:not([style*="background"]):not(.has-background),
.awesome-nav-content .wp-block-navigation-item:not([style*="background"]):not(.has-background) {
	background: inherit !important;
}

/* ==========================================================================
   Navigation Block Inside the Pill
   ========================================================================== */

.awesome-nav-pill .wp-block-navigation {
	width: 100%;
}

/* Kill default indentation/padding on the nav container */
.awesome-nav-pill .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0 !important;
	margin: 0 !important;
}

.awesome-nav-pill .wp-block-navigation-item {
	padding: 0 !important;
	margin: 0 !important;
	width: 100%;
}

.awesome-nav-pill .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0;
	border-radius: 0.5rem;
	transition: background 0.2s ease, border-color 0.2s ease;
	color: inherit;
	font-weight: 500;
}

.awesome-nav-pill .wp-block-navigation-item__content:hover {
	background: rgba(128, 128, 128, 0.1);
}

/* ==========================================================================
   "Outlined" Navigation Item Style
   Like MrMurphy's category cards — colored left border, rounded corners,
   tinted background. Register as a block style on core/navigation.
   ========================================================================== */

/*
 * Each nav item can have a background color set in the editor.
 * PHP converts it to --awesome-nav-item-color on the <li>.
 * The border uses that color, and the fill is a tinted version.
 * If no color is set, falls back to currentColor (text color).
 */
.wp-block-navigation.is-style-outlined .wp-block-navigation-item {
	--awesome-nav-item-color: currentColor;
}

/* When a nav item has a background color set, clip it to match the
   outlined card shape. On the frontend, the PHP filter converts this
   to a CSS variable for the tinted border+fill. In the editor, this
   ensures the solid color at least stays within the rounded corners. */
.wp-block-navigation.is-style-outlined .wp-block-navigation-item.has-background {
	border-radius: 0.5rem;
	padding: 0 !important;
}

/* Override the vertical nav's flex-start alignment so items stretch
   to fill the container — needed for both frontend and editor. */
.wp-block-navigation.is-style-outlined.is-vertical,
.wp-block-navigation.is-style-outlined .wp-block-navigation__container {
	--navigation-layout-align: stretch;
	align-items: stretch;
}

.wp-block-navigation.is-style-outlined .wp-block-navigation-item {
	width: 100%;
}

.wp-block-navigation.is-style-outlined .wp-block-navigation-item__content,
.wp-block-navigation.is-style-outlined .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	border: 2px solid var(--awesome-nav-item-color);
	background: color-mix(in srgb, var(--awesome-nav-item-color) 15%, transparent) !important;
	width: 95%;
	display: block;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.wp-block-navigation.is-style-outlined .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, var(--awesome-nav-item-color) 25%, transparent) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wp-block-navigation.is-style-outlined .wp-block-navigation-item__content:active {
	transform: translateY(0);
}

/*
 * Submenu items: one field holding `label | chevron`.
 *
 * Core renders the chevron as a SIBLING of the label, not inside it:
 *
 *   <li class="has-child">
 *     <button class="wp-block-navigation-item__content">Projects</button>
 *     <span class="wp-block-navigation__submenu-icon">
 *     <ul class="wp-block-navigation__submenu-container">
 *
 * The outlined style paints its card on that button, so the chevron sat
 * outside the surface it belongs to — and picked up the pill's own opaque
 * background from the inherit chain above, painting a light blob across the
 * card's border. Moving the card onto the <li> puts both children inside it.
 *
 * Scoped to .has-child so plain items keep painting the card on the button;
 * they have no second child and nothing to divide. Gated on core's click mode
 * for the same reason the takeover is: `display: flex` here would make the
 * submenu <ul> a flex item beside the label in `always` mode, where core
 * renders that tree in flow. Hover and always keep the button-card styling,
 * which is what they had before.
 */
.wp-block-navigation.is-style-outlined .wp-block-navigation-item.has-child.open-on-click {
	--awesome-nav-chevron-width: 2.75rem;

	display: flex;
	align-items: stretch;
	width: 95%;

	/* The button this card moved off of was border-box, the <li> is not — without
	   this the submenu rows sit 4px (the two borders) wider than their siblings. */
	box-sizing: border-box;
	border: 2px solid var(--awesome-nav-item-color);
	border-radius: 0.5rem;

	/*
	 * The card's fill is an INSET SHADOW, not a background, and that is
	 * deliberate on three counts:
	 *
	 * 1. This <li> is the takeover panel's parent, and the panel paints
	 *    `background: inherit` — it copies its parent's computed value. A
	 *    translucent background here would make the panel translucent too, and
	 *    the open item's own toggle is deliberately left visible underneath it
	 *    (see the cover rules below), so its label would ghost through. Nesting
	 *    compounds it: ~15% at level one, ~28% at level two.
	 * 2. render.php writes `background: transparent !important` inline on this
	 *    same <li> whenever an author picks an item colour. Inline !important
	 *    beats a stylesheet !important, so a background here silently vanishes
	 *    for exactly the users who customised their menu.
	 * 3. It needs no !important of its own.
	 *
	 * The background is left to the pill's inherit chain, which keeps it opaque.
	 */
	box-shadow: inset 0 0 0 100vmax
		color-mix( in srgb, var( --awesome-nav-item-color ) 15%, transparent );
	transition:
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

/* The label is now just the label — the <li> holds the card. */
.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click
	> .wp-block-navigation-item__content {
	flex: 1 1 auto;
	width: auto;
	border: none;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;

	/*
	 * The button reaches UNDER the chevron so the whole card is clickable.
	 *
	 * Core ships the chevron as a non-interactive <span> SIBLING of the button
	 * and overlaps it onto the button with a negative margin, so its
	 * `pointer-events: none` drops clicks through to the button beneath. Giving
	 * the chevron its own padded slice broke that: hit-testing landed on the
	 * <li>, which has no handler, and clicking the chevron did nothing at all
	 * while the card still lit up on hover. Reproduced from a user recording.
	 *
	 * Negative margin restores the overlap; the matching padding keeps the
	 * label from running under the glyph, so it still stops at the divider.
	 */
	margin-inline-end: calc( -1 * var( --awesome-nav-chevron-width ) );
	padding-inline-end: var( --awesome-nav-chevron-width );

	/* Flex items floor at min-content, so a long unbroken label would push the
	   divider and chevron out past the card instead of shrinking. min-width
	   lets the box shrink; overflow-wrap makes the text follow it instead of
	   running under the divider. */
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Hover/active move to the card's new owner so the whole field responds. */
/*
 * NO `transform` here, however tempting the 1px lift is.
 *
 * A transform of anything but `none` makes an element a containing block for
 * its absolutely-positioned descendants — and the takeover panel is a
 * DESCENDANT of this <li>, where it was only a SIBLING of the button this card
 * moved off of. A hover lift therefore hands the containing block back to a
 * ~49px-tall <li>, and the panel's `inset: 0` resolves against that instead of
 * the content area: the exact sliver the position:static chain above exists to
 * prevent. It reproduces on the first mouse-driven open, because the pointer is
 * already resting on the row when the click lands.
 *
 * `translate: 0 -1px` is not an escape — the individual transform properties
 * establish a containing block by the same rule.
 */
.wp-block-navigation.is-style-outlined .wp-block-navigation-item.has-child.open-on-click:hover {
	box-shadow:
		inset 0 0 0 100vmax
			color-mix( in srgb, var( --awesome-nav-item-color ) 25%, transparent ),
		0 4px 12px rgba( 0, 0, 0, 0.15 );
}

.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click:hover
	> .wp-block-navigation-item__content {
	background: transparent !important;
	transform: none;
	box-shadow: none;
}

/*
 * Focus ring moves with the card. The button still takes focus (core's
 * keyboard handling lives on it), but it is now a square, inset slice of a
 * rounded card, so its own ring drew a box across the border. Paint the
 * browser's native ring on the <li> instead: `outline: auto` follows the
 * radius and matches what plain items get, and the offset mirrors the theme
 * convention on the button (Twenty Twenty-Five sets 4px there).
 *
 * Both halves sit under one @supports: the suppression must never apply
 * where the replacement cannot, or a browser without :has() gets no ring
 * at all. The editor canvas undoes this further down, where the card goes
 * back onto the button and the <li> is a full-width block the ring would
 * overshoot.
 */
@supports selector( :has( a ) ) {
	.wp-block-navigation.is-style-outlined
		.wp-block-navigation-item.has-child.open-on-click
		> .wp-block-navigation-item__content:focus-visible {
		outline: none;
	}

	.wp-block-navigation.is-style-outlined
		.wp-block-navigation-item.has-child.open-on-click:has(
			> .wp-block-navigation-item__content:focus-visible
		) {
		outline: auto;
		outline-offset: 4px;

		/* `auto` on an author rule paints in currentColor, not the UA focus
		   colour the plain items get. Name it; the system colour is the
		   Firefox fallback. */
		outline-color: Highlight;
		outline-color: -webkit-focus-ring-color;
	}
}

/* The divider that makes it read as `label | chevron`. */
.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click
	> .wp-block-navigation__submenu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Fixed width, because the button above overlaps it by exactly this much.
	   2.75rem also keeps the glyph on a 44px touch target. */
	flex: 0 0 var( --awesome-nav-chevron-width );
	width: var( --awesome-nav-chevron-width );
	height: auto;

	/* Core sets align-self:center on the icon, which collapses it to the glyph
	   and leaves the divider a stub floating in the middle of the field. */
	align-self: stretch;
	margin: 0;
	padding: 0;
	background: transparent !important;
	border-inline-start: 2px solid
		color-mix(in srgb, var(--awesome-nav-item-color) 30%, transparent);
	pointer-events: none;
}

/*
 * The glyph itself. Core's svg is `width: inherit`, so the 2.75rem cell
 * above made it 44px tall. Size it to the text and point it
 * the way the panel travels: it slides in from the end edge, so `>`.
 * RTL flips the slide, so the glyph flips with it.
 */
.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click
	> .wp-block-navigation__submenu-icon svg {
	width: 1em;
	height: 1em;
	margin: 0;
	transform: rotate( -90deg );
}

[dir="rtl"]
	.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click
	> .wp-block-navigation__submenu-icon svg {
	transform: rotate( 90deg );
}

/* Inside a takeover panel the plain items run the full width, so the card
   does too; 95% is the top-level width, where the pill's edge needs air. */
.wp-block-navigation.is-style-outlined
	.wp-block-navigation__submenu-container
	> .wp-block-navigation-item.has-child.open-on-click {
	width: 100%;
}

/* ==========================================================================
   Submenu Canvas Takeover
   ========================================================================== */

/*
 * The canvas takeover only applies in core's "click" submenu mode. Ungated,
 * hover and always modes got the takeover's positioning without anything to
 * open it: core made the submenu visible, this stylesheet translated it
 * outside the content area, and overflow:hidden erased it. Gate on core's own
 * class so those modes keep core's dropdown behaviour untouched.
 *
 * The gate is a CONTRACT SHARED WITH nav-pill.js, which keys its
 * aria-expanded observer on the same `open-on-click` class. Both sides must
 * agree, because neither of the obvious alternatives works:
 *
 * - aria-expanded alone is not a click-mode signal. Core renders a submenu
 *   indicator button carrying aria-expanded in hover and always modes too,
 *   whenever showSubmenuIcon is on — which is its default. Keying the script
 *   on that put a "Back to X" button inside an ordinary dropdown.
 * - `wp-block-navigation-submenu` alone does not cover every submenu.
 *   core/page-list emits `open-on-click` without it, so keying the script on
 *   that class left Page List panels styled as a takeover nothing opened.
 *
 * Mode classes come from block_core_navigation_submenu() and page-list's
 * renderer: open-on-click / open-on-hover-click / open-always. Hover without
 * indicators gets no mode class at all, so open-on-click is the only positive
 * signal for click mode.
 */

/*
 * Core anchors submenus to their own item: position:relative sits on
 * .wp-block-navigation (which the <ul> also carries), on each nav item, and on
 * .wp-block-navigation-submenu. The takeover needs inset:0 to resolve against
 * .awesome-nav-content instead, so the whole chain goes static — otherwise it
 * lands on the ~44px <li> and renders as a sliver.
 *
 * Specificity, not print order, decides this: core's rules are (0,1,0) and
 * (0,2,0), and on a block theme this sheet is not guaranteed to print after
 * core's inline block-library styles. :has() takes the specificity of its
 * argument, so these land at (0,3,0)/(0,4,0) and win outright.
 */
.awesome-nav-pill .wp-block-navigation:has(.open-on-click),
.awesome-nav-pill .wp-block-navigation:has(.open-on-click) .wp-block-navigation-item,
.awesome-nav-pill .wp-block-navigation:has(.open-on-click) .wp-block-navigation-submenu {
	position: static;
}

/*
 * Same for any Group an author wraps the navigation in. Core gives a
 * constrained Group `position: relative` (at :where() specificity), and the
 * Site Editor's default Group is constrained, so the panel anchored to the
 * wrapper and sat inset by its padding instead of covering the content area.
 * Scoped to groups that actually hold a click-mode nav, and a Group the
 * author made sticky keeps its positioning — the panel anchors there instead.
 */
.awesome-nav-pill
	.awesome-nav-content-inner
	.wp-block-group:has(.open-on-click):not(.is-position-sticky) {
	position: static;
}

.awesome-nav-pill .open-on-click > .wp-block-navigation__submenu-container {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	/* No width here: left+right already size the box. Setting width as well
	   over-constrains it, and core's padding then pushed it 16px past the
	   content area, where overflow:hidden clipped the right edge. */
	min-width: unset !important;
	box-sizing: border-box;
	z-index: 10;

	/* The takeover is capped at the content area's height, so a submenu with
	   more items than fit has to scroll on its own. !important because core's
	   open-state rule (the [aria-expanded="true"] sibling selector) lands at
	   (0,5,0) and sets overflow-y:visible — nothing this file can select beats
	   that on specificity alone. */
	overflow-y: auto !important;
	overscroll-behavior: contain;

	/*
	 * visibility, not transform alone, is what hides a closed takeover. It now
	 * covers the entire content area, and an opacity:0 element still swallows
	 * clicks — so relying on translateX would leave an invisible sheet over the
	 * whole menu. That is not hypothetical: the reduced-motion block below sets
	 * transform:none, which would strip the only thing holding it off-canvas.
	 * The 0.4s delay lets the slide-out finish before it is hidden.
	 */
	visibility: hidden;
	opacity: 0;
	transform: translateX(100%);

	/* This list governs the way OUT (transitions start from the after-change
	   style, which when closing is this rule). The visibility delay must stay
	   in step with the transform duration or the panel blanks mid-slide. */
	transition:
		transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
		opacity 0.3s ease,
		visibility 0s linear 0.4s;

	display: flex !important;
	flex-direction: column;
	padding: 0.5rem;
	gap: 0.25rem;

	background: inherit !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* Drilling in reads start-to-end, so in RTL the panel enters from the left
   and the back arrow points the other way. */
[dir="rtl"] .awesome-nav-pill .open-on-click > .wp-block-navigation__submenu-container {
	transform: translateX(-100%);
}

[dir="rtl"] .awesome-nav-back::before {
	content: "\2192";
}

/*
 * What an open takeover covers must not stay reachable behind it.
 *
 * `visibility` rather than `inert`, because it is the one property that is both
 * inherited AND cancellable on a descendant. `inert` propagates to every
 * flat-tree descendant with no way to exempt one, so inerting the list would
 * take the open panel — which lives inside it — down with it. A
 * visibility:hidden element is out of the tab order and the accessibility tree
 * natively, and the panel's own `visibility: visible` below cancels it.
 *
 * Doing this in CSS rather than by toggling attributes in JS means there is no
 * restore path to leak, no ordering hazard against core's own close handling,
 * and no question of whose attribute it was. It is also correct on state
 * changes the script never observes.
 */

/* Level 1: the whole menu behind the panel, which is both the open item's
   siblings and any other column in the layout. */
.awesome-nav-content:has(.is-submenu-open) .awesome-nav-content-inner {
	visibility: hidden;
}

/* The open panel has its own `visibility: visible` above, but that is not enough
   once an ancestor is hidden — measured on WP 7.1, the panel computed to hidden
   anyway, which also made it unfocusable and broke the focus move below. Re-show
   it explicitly from inside the covered subtree. */
.awesome-nav-content:has( .is-submenu-open ) .awesome-nav-content-inner .is-submenu-open {
	visibility: visible;
}

/* Keep the opening control visible until focus enters the panel. Hiding it
   earlier produces a null focusout target and closes core's submenu. */
.awesome-nav-pill .open-on-click:has( > .is-submenu-open ) > .wp-block-navigation-item__content:focus {
	visibility: visible;
}

/* Deeper levels: a panel holding an open child is itself covered, so its own
   items and Back button go too. The child panel stays reachable because its
   `visibility: visible` overrides what it inherits from its hidden parent. */
.awesome-nav-pill .wp-block-navigation__submenu-container:has( .is-submenu-open ) > * {
	visibility: hidden;
}

.awesome-nav-pill .open-on-click > .wp-block-navigation__submenu-container.is-submenu-open {
	visibility: visible;
	opacity: 1;
	transform: translateX(0);

	/*
	 * visibility is deliberately ABSENT from this list, and that omission is
	 * the whole fix. Transitions start from the after-change style, so opening
	 * is governed here — and naming visibility at all, even at `0s`, starts a
	 * transition that then picks up the closed state's delay. Measured: the
	 * panel stayed hidden for the entire ~400ms slide, so the animation played
	 * invisibly and the panel appeared to pop into place at the end. That is
	 * the "long delay before the submenu shows up", and it was never a slow
	 * animation. Omitting the property makes the change instant (6ms).
	 * Closing still hides late, because the closed rule is the after-change
	 * style in that direction and it keeps its delay.
	 */
	transition:
		transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
		opacity 0.3s ease;
}

/*
 * Editor canvas only. This stylesheet is enqueued into the iframed editor as
 * well as the front end, but nav-pill.js is not — nothing there ever applies
 * .is-submenu-open, so the takeover's transform would strand a submenu the
 * author is trying to edit outside the visible canvas. Worse after the
 * containing-block fix than before it: the offset is now the full content
 * width rather than a ~44px item. Core already forces a selected submenu
 * visible in the canvas; stay out of its way and let it position normally.
 */
.editor-styles-wrapper .awesome-nav-pill .open-on-click > .wp-block-navigation__submenu-container {
	position: static !important;
	transform: none;
	visibility: visible;
	opacity: 1;
	overflow-y: visible !important;

	/* In flow and inside a flex row (see below): take a whole line, so the
	   open submenu sits under the label and chevron rather than beside them. */
	flex: 0 0 100%;
}

/*
 * Same reason, for the `label | chevron` card: the rule above puts the submenu
 * back in flow here, and the card makes its <li> a flex container — so in the
 * canvas the open submenu would line up as a third column beside the label and
 * the chevron. Hand authoring back to core's own layout; the card is a
 * front-end presentation choice, not something the author edits.
 *
 * Core's own <li> is a flex row, so keep it one: `display: block` put the
 * chevron on its own line under the label. Wrapping lets the submenu <ul>
 * above drop to a full-width line of its own.
 */
.editor-styles-wrapper
	.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click,
.editor-styles-wrapper
	.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click:hover {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	border: none;
	border-radius: 0;

	/* Every state in one rule. Reverting only the resting state left the hover
	   shadow painting on an <li> that has no visible edge in the canvas, while
	   the visible card inside it lost its own hover feedback. */
	box-shadow: none;
	transform: none;
	transition: none;
}

.editor-styles-wrapper
	.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click
	> .wp-block-navigation-item__content,
.editor-styles-wrapper
	.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click:hover
	> .wp-block-navigation-item__content {
	width: 95%;
	border: 2px solid var(--awesome-nav-item-color);
	border-radius: 0.5rem;
	background: color-mix(
		in srgb,
		var(--awesome-nav-item-color) 15%,
		transparent
	) !important;

	/* Undo the front-end overlap — there is no chevron to reach under here. */
	margin-inline-end: 0;
	padding-inline-end: 1rem;
}

.editor-styles-wrapper
	.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click
	> .wp-block-navigation__submenu-icon {
	align-self: center;
	border-inline-start: none;
	padding: 0;
	display: inline-flex;
	flex: 0 0 auto;
	width: auto;
}

/* The submenu opens beneath the row in the canvas, so the glyph points down. */
.editor-styles-wrapper
	.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click
	> .wp-block-navigation__submenu-icon svg {
	transform: none;
}

/* The card is back on the button here, so the ring goes back with it. */
.editor-styles-wrapper
	.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click
	> .wp-block-navigation-item__content:focus-visible {
	outline: revert;
}

.editor-styles-wrapper
	.wp-block-navigation.is-style-outlined
	.wp-block-navigation-item.has-child.open-on-click:has(
		> .wp-block-navigation-item__content:focus-visible
	) {
	outline: none;
}

.awesome-nav-pill .wp-block-navigation__submenu-icon {
	transition: transform 0.2s ease;
}

/* ==========================================================================
   Back Button
   ========================================================================== */

.awesome-nav-back {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0.75em;
	margin-bottom: 0.25em;

	font-size: 0.875em;
	font-weight: 500;
	color: currentColor;
	/* FIX #10: Increased from 0.5 to 0.7 for WCAG contrast compliance. */
	opacity: 0.7;

	background: none;
	border: none;
	border-radius: 0.5em;
	cursor: pointer;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.awesome-nav-back:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.04);
}

/* Themes commonly reset default focus outlines — give the injected
   back button an explicit visible focus indicator (WCAG 2.4.7). */
.awesome-nav-back:focus-visible {
	opacity: 1;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.awesome-nav-back::before {
	content: "\2190";
	font-size: 1.2em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
	.awesome-nav-header {
		padding: 0.5rem;
	}

	.awesome-nav-topbar {
		gap: 0.5rem;
	}

	/* Stack columns on mobile and hide the column divider border */
	.awesome-nav-content .wp-block-columns {
		flex-direction: column !important;
	}

	.awesome-nav-content .wp-block-column {
		border: none !important;
		padding-right: 0 !important;
	}
}

@media (min-width: 782px) {
	.awesome-nav-pill {
		max-width: 90ch;
	}
}

/* Ensure nav items don't overflow their container */
.wp-block-navigation.is-style-outlined .wp-block-navigation-item__content {
	box-sizing: border-box;
}

/* ==========================================================================
   Reduced Motion (a11y)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.awesome-nav-pill.is-open .awesome-nav-content > * {
		animation: none;
	}

	.awesome-nav-content,
	.awesome-nav-content-inner,
	.awesome-nav-search-panel,
	.awesome-nav-pill .open-on-click > .wp-block-navigation__submenu-container,
	.awesome-nav-back,
	.awesome-nav-pill .wp-block-navigation__submenu-icon,
	.awesome-nav-pill .wp-block-navigation-item__content,
	.wp-block-navigation.is-style-outlined .wp-block-navigation-item__content,
	.wp-block-navigation.is-style-outlined
		.wp-block-navigation-item.has-child.open-on-click {
		transition: none !important;
	}

	/* Safe only because visibility, not transform, is what hides a closed
	   takeover — see the takeover rule above. */
	.awesome-nav-pill .open-on-click > .wp-block-navigation__submenu-container {
		transform: none !important;
	}
}