/*
 * Menu Overlay — the contents of the full-screen menu panel.
 *
 * Registered by `includes/styles/blocks/core-group-menu-overlay.php` as an opt-in
 * `core/group` style, activated by `is-style-menu-overlay` on the outer group in
 * `parts/menu-overlay.html`.
 *
 * The panel is three bands: the header floating over the top (which belongs to the
 * header part, not here), the links centred in the viewport, and the two actions at
 * the bottom. The links are centred on the **whole viewport** rather than on the
 * space below the header — that is what the design does, and the rule below explains
 * how the padding makes it come out that way.
 *
 * It has to survive a short window, which the design has no frame for: a laptop with
 * the browser half-height leaves less room than four 32px links and a button row
 * need. Everything here is sized so that case scrolls rather than collides.
 */

.wp-block-group.is-style-menu-overlay {
	/*
	 * Two rows: the links, then the actions.
	 *
	 * A grid rather than a flex column with `margin-block: auto` on the links,
	 * which is what this was first. Auto margins centre beautifully until the
	 * content is taller than the box, at which point they collapse to zero and the
	 * content simply overflows — in a short window the links went behind the header
	 * and the actions sat on top of them. A `1fr` row cannot shrink below its
	 * content, so the panel grows instead and the layer scrolls.
	 */
	display: grid;
	grid-template-rows: 1fr auto;
	/* 20px, the design's margin on all four sides of the panel's contents. */
	padding: 1.25rem;
	/*
	 * Plus the header, which floats over this panel: without it the first link sits
	 * behind the logo. The gap below the links matches — 20px of padding, a 20px
	 * gap and a 44px actions row is the same 84px — which is what makes the links
	 * land on the *viewport's* centre rather than on the centre of the space left
	 * over. That is what the design does, and it is why the two numbers are worth
	 * keeping equal if either changes.
	 */
	padding-block-start: calc(1.25rem + var(--kg-header-height, 4rem));
	gap: 1.25rem;
}

/*
 * Core's flow layout gives every child after the first a `margin-block-start` of
 * the group's own blockGap — `lg`, so 14.8px here — *on top of* this grid's `gap`.
 * That broke the symmetry the centring depends on: the bottom band came out 78.8px
 * against the 84px of top padding, and the links sat 7px high. The grid's `gap` is
 * the only spacing that should exist. Core's rules are wrapped in `:where()`, so
 * this outranks them without `!important`.
 */
.wp-block-group.is-style-menu-overlay > * {
	margin-block: 0;
}

/* Centred in the `1fr` row, both ways. */
.wp-block-group.is-style-menu-overlay > .wp-block-navigation {
	align-self: center;
	justify-self: center;
}

.wp-block-group.is-style-menu-overlay .wp-block-navigation__container {
	/* The design centres each link on the panel rather than left-aligning them. */
	align-items: center;
	text-align: center;
}

/*
 * The two actions need no rules of their own.
 *
 * Their flex box, centring and 44px height are the `core/button` default block
 * style's (`includes/styles/blocks/core-button.php`); their square corners are the
 * `border.radius` on each button in `parts/menu-overlay.html`; and their equal
 * widths are core's `wp-block-button__width-50`, which subtracts half the block gap
 * so two of them fit the row exactly — 163px each at the design's width.
 *
 * That last one is only true because `theme.json`'s global `blockGap` is `0px` and
 * not a bare `0`: core sizes the class with `calc(50% - var(…) * .5)`, and
 * `calc(<percentage> - <number>)` is invalid CSS, which silently drops the width
 * and leaves the buttons hugging their text.
 */

/*
 * A submenu unfolds *in* the menu here — it does not drop out of it.
 *
 * `assets/css/blocks/navigation.css` is the default `core/navigation` style, so
 * the panel it describes arrives in this overlay too: a 343px white card with a
 * shadow, absolutely positioned, laid over an orange full-screen menu and across
 * the three links under it. Every one of those decisions is right on the header
 * bar and wrong here, so this section takes them back rather than qualifying
 * them there — the panel is the same block in a different place, not a second
 * design.
 *
 * The mechanism stays entirely core's. A closed submenu is `width: 0; height: 0;
 * overflow: hidden`, which in normal flow is a row that takes no space, and the
 * open state restores `auto` for both — so putting the panel back in the flow is
 * the whole of the behaviour change. Nothing here opens or closes anything.
 *
 * It opens on a tap and on nothing else, and that is the block's own setting
 * rather than anything here: `parts/menu-overlay.html` gives this one navigation
 * block `submenuVisibility: "click"`, so core adds `open-on-click` instead of
 * `open-on-hover-click`, its hover-open rule excludes that class outright, and
 * `render_block_core_navigation_submenu()` never prints the `pointerenter`
 * handlers in the first place. The header bar's navigation is a separate block
 * and keeps `hover`, which is why this is set per block and not in `theme.json`.
 *
 * The cost is stated so it is not rediscovered: in `click` mode core renders the
 * label as a `<button>` rather than an `<a>`, so "Branscher" opens the group here
 * instead of linking to its own page. `hover` (the header's behaviour, which on
 * a touch device is already tap-only — core returns early from `openMenuOnHover`
 * when `event.pointerType === "touch"`) and `always` (the group permanently
 * unfolded, label still a link) are the two alternatives, both one attribute
 * away.
 */

/*
 * The `<li>` has to be allowed a second line first.
 *
 * Core makes every menu item a flex **row** — `.wp-block-navigation-item
 * { display: flex }` — which is what puts the chevron beside the label. Drop the
 * panel back into the flow of that row and it lands beside the chevron rather
 * than under the label, 200px wide and hanging off the right of the phone.
 * Wrapping the row and giving the panel a whole line of it is what "under" means
 * here; it is the same pair of declarations core writes for its own responsive
 * overlay.
 */
.wp-block-group.is-style-menu-overlay .wp-block-navigation .has-child {
	flex-wrap: wrap;
	justify-content: center;
}

.wp-block-group.is-style-menu-overlay
	.wp-block-navigation
	.has-child
	> ul.wp-block-navigation__submenu-container {
	position: static;
	flex-basis: 100%;
	/*
	 * `transform` is not a positioning scheme and does not stop applying when
	 * `position` does — without this the in-flow list would still be shunted
	 * half its own width to the left by the centring in `navigation.css`.
	 */
	transform: none;

	/*
	 * Core's open state carries `min-width: 200px`, for a panel that would
	 * otherwise be as narrow as its shortest label. This one is a full-width row
	 * in a centred column and has no such problem — and 200px is enough to hold
	 * the list off the menu's centre line. The `ul` in the selector is what wins
	 * against that rule; `navigation.css` has the arithmetic.
	 */
	min-inline-size: 0;

	background-color: transparent;
	box-shadow: none;
	backdrop-filter: none;
	padding-block: 0;
}

/*
 * The rows: the overlay's own centring, and no floor under their width.
 *
 * 343px is the design's *card*, and a card is what this no longer is — left in
 * place it would hold the list 343px wide inside a 350px phone rail and range
 * the labels off the centre line every other link in the menu sits on.
 */
.wp-block-group.is-style-menu-overlay
	.wp-block-navigation
	.has-child
	> .wp-block-navigation__submenu-container
	> .wp-block-navigation-item {
	min-inline-size: 0;
	justify-content: center;
}

/*
 * Subordinate type, and the air to match it.
 *
 * `body-xl` against the menu's own `h-1` is the same step down the scale the
 * design takes between a section's heading and the list under it, and the 300
 * weight is the menu's — a submenu item is a smaller link in the same menu, not
 * a different kind of thing. The 24px of inline padding goes: it was the card's
 * gutter, and there is no card.
 */
.wp-block-group.is-style-menu-overlay
	.wp-block-navigation
	.has-child
	> .wp-block-navigation__submenu-container
	> li.wp-block-navigation-item
	> .wp-block-navigation-item__content {
	padding-block: 0.375rem;
	padding-inline: 0;
	font-size: var(--wp--preset--font-size--body-xl);
	font-weight: 300;
	/*
	 * `text-align` is already `center` on the menu and inherits this far, and it
	 * has nothing to align: core makes this link a flex box so it can fill its
	 * row, and a flex box positions its child with `justify-content`. Without
	 * this the labels range left against a menu whose every other link is
	 * centred.
	 */
	justify-content: center;
}

/*
 * The state is a colour again, not a fill.
 *
 * A full-bleed brand-blue bar is what tells a 343px card's row apart from the
 * three below it; in a centred column on an orange ground it is a stripe across
 * the menu, and the white label `navigation.css` pairs with it is unreadable the
 * moment the fill is gone. So both come off and the theme's own link state —
 * `--kg-link-hover-color`, which `ui-states.css` keeps correct for the ground it
 * is on — takes over, which is what every other link in this overlay already
 * does.
 */
.wp-block-group.is-style-menu-overlay
	.wp-block-navigation
	.wp-block-navigation__submenu-container
	a.wp-block-navigation-item__content:hover,
.wp-block-group.is-style-menu-overlay
	.wp-block-navigation
	.wp-block-navigation__submenu-container
	a.wp-block-navigation-item__content:focus-visible {
	background-color: transparent;
	color: var(--kg-link-hover-color);
	outline-offset: 2px;
}

/*
 * The chevron scales with the label it sits beside — and only that.
 *
 * `navigation.css` pins it at 10px with 8px of air, which is the design's own
 * measurement against a 15px label in the header bar. Beside this menu's 48px
 * one the same 10px reads as a speck.
 *
 * Its *placement* is deliberately left to core, which is why only the two sizes
 * are set here. This menu's submenu is `submenuVisibility: "click"`, so the
 * label is a `<button>` and the chevron a decorative `<span>` after it with
 * `pointer-events: none` — and core sets the pair up as one tap target by giving
 * the button 0.85em of trailing padding and pulling the chevron 0.6em back into
 * it. Restating a margin here would push the glyph out of the button it is
 * supposed to sit inside, and a tap on it would land on nothing. The two values
 * net out to 12px of air at this size, which is the proportion the header bar
 * has at its own.
 */
.wp-block-group.is-style-menu-overlay
	.wp-block-navigation
	.wp-block-navigation-submenu
	> .wp-block-navigation__submenu-icon {
	inline-size: 1.125rem;
	block-size: 1.125rem;
}

/*
 * A little air under the group, put on the last row rather than on the panel.
 *
 * Without it the four sector links run straight into the next top-level one and
 * the menu reads as one uneven list. The panel itself cannot carry the padding:
 * a closed submenu is `height: 0`, not `display: none`, so padding on it is
 * space the menu keeps whether the submenu is open or shut. On a child it is
 * clipped by the same `overflow: hidden` that hides the rows themselves, and so
 * exists only while the group does.
 */
.wp-block-group.is-style-menu-overlay
	.wp-block-navigation
	.has-child
	> .wp-block-navigation__submenu-container
	> .wp-block-navigation-item:last-child {
	padding-block-end: 0.75rem;
}