/**
 * Navigation on phones — the header row and the overlay menu (ISS-0052).
 *
 * Measured on a 390 px iPhone before this file: the burger sat in the MIDDLE of the
 * header (a space-between row of logo | navigation | search puts the second child in
 * the centre), and the overlay was WordPress's bare default — no padding, entries
 * glued to the right edge, sub-pages in a staircase, no hierarchy, 16 px everywhere.
 *
 * Every value comes from the design system. Below 600 px is where core/navigation
 * collapses into its overlay (core's own breakpoint) — media queries cannot read a
 * custom property, so that one number is literal.
 *
 * Spacing uses the `base-*` steps, not `inline-*`: a Studio child exported before
 * studio#ISS-0009 flattened `inline` to one value, leaving `inline--l` undefined.
 *
 * Specificity: the overlay rules repeat core's selector chains (block-library
 * navigation style) and load after them, so they win at equal weight; nothing
 * uses !important. A padding or colour set in the editor still wins (inline style).
 */

/* 1. Header row: the burger is the last thing on the right. -------------------- */

@media (max-width: 599px) {
	/*
	 * The header row is the space-between group that holds the navigation. Whatever
	 * its children (logo, title, search), the navigation goes last and everything
	 * but the first child packs to the right: logo left · search · burger.
	 * Works on headers customised in the Site Editor too, which never read
	 * parts/header.html again. A header part can be saved with a <div> tag, or wrapped
	 * in a sticky group: hence "inside the first block of the page" next to <header>.
	 */
	:is(header.wp-block-template-part, .wp-site-blocks > :first-child) .wp-block-group.is-content-justification-space-between:has(.wp-block-navigation) {
		justify-content: flex-end;
		gap: var(--wp--custom--semantic--spacing--base-150);
	}

	:is(header.wp-block-template-part, .wp-site-blocks > :first-child) .wp-block-group.is-content-justification-space-between:has(.wp-block-navigation) > :first-child {
		margin-inline-end: auto;
		min-width: 0;
	}

	:is(header.wp-block-template-part, .wp-site-blocks > :first-child) .wp-block-group.is-content-justification-space-between:has(.wp-block-navigation) > :has(.wp-block-navigation),
	:is(header.wp-block-template-part, .wp-site-blocks > :first-child) .wp-block-group.is-content-justification-space-between:has(.wp-block-navigation) > .wp-block-navigation {
		order: 1;
	}
}

/* 2. The overlay menu. ------------------------------------------------------- */

/* Core pads the overlay from the ROOT padding, behind `:not(.disable-default-overlay)`:
   the same chain is needed to weigh as much. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: var(--wp--custom--semantic--layout--gutter);
	padding-top: calc(var(--wp--custom--semantic--layout--gutter) + env(safe-area-inset-top, 0px));
	padding-bottom: calc(var(--wp--custom--semantic--layout--gutter) + env(safe-area-inset-bottom, 0px));
}

/* Close button: a full touch target, kept inside the gutter. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--semantic--size--control--l);
	min-height: var(--wp--custom--semantic--size--control--l);
}

/* Entries read from the left, full width, whatever the desktop justification. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: var(--wp--custom--semantic--size--control--l);
	text-align: start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
}

/* Top-level entries: the sections. One hairline between them. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-block-end: var(--wp--custom--semantic--border--width--hairline) solid var(--wp--custom--semantic--color--neutral--outline-variant);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--semantic--size--control--l);
	padding-block: 0;
	font-size: var(--wp--preset--font-size--text-large);
	font-weight: var(--wp--custom--semantic--typography--heading--h5--font-weight);
}

/* Sub-pages: indented under their section, lighter, still a full touch target. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	gap: 0;
	padding: 0 0 var(--wp--custom--semantic--spacing--base-100);
	padding-inline-start: var(--wp--custom--semantic--spacing--base-200);
}

/* Core pads these links through `.has-child .…submenu-container > .…item > .…content`
   (0,5,0): same depth here, loaded after. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--semantic--size--control--l);
	padding: 0;
	font-size: var(--wp--preset--font-size--text-base);
	font-weight: var(--wp--custom--semantic--typography--body--base--font-weight);
	color: var(--wp--custom--semantic--text--secondary);
}