/*
 * Loaded only on pages containing a core/navigation block, via
 * wp_enqueue_block_style() — see recall_enqueue_block_styles() in functions.php.
 */

/* ==========================================================================
   Desktop: submenu direction
   ========================================================================== */

/*
 * Third-level submenus open to the RIGHT when there is room.
 *
 * Core opens nested submenus rightward by default (left: 100%), but flips them
 * leftward whenever the navigation is right-justified:
 *
 *   .wp-block-navigation.items-justified-right ... __submenu-container
 *   .wp-block-navigation__submenu-container { left: auto; right: 100%; }
 *
 * That is an assumption, not a measurement — it never checks whether space
 * actually exists. With a constrained content width the menu usually ends a
 * few hundred pixels short of the viewport edge, so rightward is both possible
 * and more natural to follow.
 *
 * assets/js/navigation-submenu-direction.js measures on hover and adds
 * .recall-submenu-right only when the submenu genuinely fits. Without
 * JavaScript nothing is added and core's leftward behaviour stands, so this
 * degrades safely.
 *
 * The selector deliberately mirrors core's own specificity and adds one class,
 * so it wins without !important. It must stay inside the same 782px media
 * query — below that, submenus are stacked in the overlay and neither rule
 * applies.
 */
@media (min-width: 782px) {
	.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container.recall-submenu-right,
	.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container.recall-submenu-right {
		left: 100%;
		right: auto;
	}
}

/* ==========================================================================
   Mobile overlay menu
   ==========================================================================

   Core deliberately flattens the overlay: every submenu is forced open
   (visibility visible, position static) and the chevrons are hidden. With
   three service submenus that produces one long list in which subservices are
   indistinguishable from services.

   These rules collapse submenus until tapped, restore the chevrons, and give
   each nesting level its own weight and colour.

   Presentation only. The toggle buttons and their aria-expanded state are
   core's, so no script is involved and the accessibility semantics are
   unchanged.

   Everything is scoped to .is-menu-open, which cannot occur above 782px while
   overlayMenu is "mobile" — so none of this reaches the desktop menu. The
   class is doubled to out-specify core, whose overlay selectors wrap their
   qualifier in :where() and so contribute no specificity. Core uses the same
   doubling trick in its own stylesheet.
   ========================================================================== */

/* --- Brand -------------------------------------------------------------- */

/*
 * Injected by recall_overlay_brand(). The same container is the ordinary
 * navigation on desktop, where this markup would duplicate the header logo, so
 * it stays hidden until the overlay opens.
 */
.recall-overlay-brand {
	display: none;
}

/*
 * The brand and close button are placed to land exactly where the header logo
 * and hamburger already are, so nothing jumps when the menu opens.
 *
 * The header pads 1rem vertically and the root pads 1.5rem inline, and the
 * hamburger centres against the logo. Reproducing that here means: same top,
 * same inline offset, and a close button box as tall as the logo with its icon
 * centred inside.
 *
 * --recall-brand-h tracks the rendered height of the 150px-wide logo. If the
 * logo file or its width changes, this is the one value to update.
 */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
	--recall-brand-h: 53px;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .recall-overlay-brand {
	display: block;
	position: absolute;
	top: var(--wp--preset--spacing--40);
	left: var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--50);
	height: var(--recall-brand-h);
	display: flex;
	align-items: center;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .recall-overlay-brand img {
	display: block;
	width: 150px;
	height: auto;
}

/* --- Collapsing --------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex;
}

/* --- Layout ------------------------------------------------------------- */

/*
 * Right-aligned, and started below the brand rather than at a guessed offset:
 * the brand's own top plus its height plus a gap. A fixed value collided with
 * the logo — the first separator was drawn 21px above the logo's bottom edge.
 */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-end;
	width: 100%;
	padding-block-start: calc(
		var(--wp--preset--spacing--40) + var(--recall-brand-h) + var(--wp--preset--spacing--40)
	);
	padding-inline: var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container {
	align-items: flex-end;
	justify-content: flex-start;
	width: 100%;
}

/*
 * Rows put label and chevron on one line and let the submenu take the next.
 *
 * Core sets flex-direction: column on the overlay's nav containers, which these
 * inherit — that stacked each chevron under its label, and turned align-items
 * into horizontal alignment rather than vertical.
 */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .has-child {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container {
	flex-basis: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	align-items: flex-end;
	width: 100%;
	padding-inline: 0;
	/* Core pads the top of overlay submenus, which showed as a larger gap under
	   an expanded header than between any other pair of rows. */
	padding-block: 0;
}

/*
 * Row rhythm comes from the links' own padding, nothing else.
 *
 * The navigation block's blockGap puts a 24px row-gap on these containers. On
 * top of the link padding that made the space under an expanded header roughly
 * double the space between ordinary rows, and left the separators floating
 * away from the text they belong to.
 */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	row-gap: 0;
	gap: 0;
}

/*
 * Each item is itself a column flex container, so its link is positioned by
 * align-items rather than text-align — which cannot reach it.
 */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container > li {
	width: 100%;
	align-items: flex-end;
	text-align: right;
}

/* --- Chevrons ----------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	display: flex;
	align-items: center;
	padding: 0 var(--wp--preset--spacing--20);
}

/*
 * The toggle is a flex container sized by its own content, so without
 * flex-shrink the icon collapses to zero width and takes the button with it —
 * the width applies and still measures 0. Core's own rule sets width: inherit,
 * which resolves to nothing useful here.
 */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__submenu-icon svg {
	display: block;
	width: 0.75rem;
	height: 0.75rem;
	flex-shrink: 0;
}

/*
 * Core gives links inside a submenu container flex-grow: 1, which parks the
 * toggle at the far edge on nested rows while top-level rows keep it beside
 * the label.
 */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation-item__content {
	flex-grow: 0;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* --- Level styling ------------------------------------------------------
 *
 * Each nesting level reads differently, so depth is legible without relying on
 * indentation alone: top level in the brand green, services in the body
 * colour, subservices muted and lighter.
 * ------------------------------------------------------------------------ */

/*
 * Separators run the full width of the overlay. Without an explicit width the
 * item shrinks to its text, because the container aligns items to flex-end —
 * so the rule drew only under the label.
 *
 * Text is centred between separators by padding the row symmetrically and
 * removing core's own asymmetric padding from the link inside it.
 */
/* Every row is separated, including inside submenus. */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	width: 100%;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

/*
 * The padding belongs to each LINK, not to the row that contains it.
 *
 * On the row it padded the whole item — which, once a submenu is expanded,
 * means the label sits at the top of a tall box and 16px of dead space is left
 * hanging below the last submenu entry. Putting it on the link centres every
 * label between its own separators whether or not the section is open, and
 * leaves no trailing gap when it is.
 */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container > li > .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container > li > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	text-transform: uppercase;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container > li > .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	text-transform: none;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container > li > .wp-block-navigation__submenu-container > li > .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-transform: none;
}

/*
 * No indentation for depth: every row aligns to the same right edge. The
 * per-level colour, weight and size above already make the nesting legible, so
 * an indent would only fragment the clean right margin.
 */