/**
 * Vertical header shell — Axismundi Vertical Header Contract v0.1.
 *
 * Kept as an opt-in ASSET: single.html currently uses the standard header + a
 * Columns layout, so this shell is not wired in.
 *
 * Single header, transformed by viewport (reverse-responsive):
 *   ≥1200px  vertical rail | content | aside   (CSS grid)
 *   768–1199 top row header | content
 *   ≤767px   compact row header | content
 *
 * The block editor's default responsive only does desktop<->mobile stacking and
 * can't express this 3-breakpoint reverse layout, so the shell layout is owned
 * here as a CSS contract; the template markup only carries semantic structure
 * (Group shell + Group content-shell + main + aside, NOT a Columns block).
 *
 * The aside (table of contents) sticky position and per-viewport visibility are
 * NOT decided here: they belong to the template markup (position) and the editor /
 * single.html block-visibility meta, so this file does not style that aside.
 *
 * Rail width is a grid track (a clean fixed value), which is why this avoids the
 * flex-basis/selfStretch/content-size fights of a flex/Columns shell. Sticky just
 * works: grid items stretch to the row height, so the rail is tall enough for its
 * sticky inner to travel.
 */

.ax-single-shell {
	--ax-rail-width: 320px;
	--ax-toc-width: 280px;
	--ax-shell-gap: var(--wp--preset--spacing--600);
}

/* Rail presentation lives in CSS now (the rail used to be a column with padding;
 * it is a grid track here). Sticky position is declared in the part markup. */
.ax-vertical-header {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--250);
}

/* TODO(contract #8): long rail nav -> cap height + internal scroll. Deferred:
 * a naive max-block-size on the vertical nav makes its flex column wrap into
 * multiple columns, so it needs a non-wrapping scroll wrapper, handled later. */

/* ============================================================ desktop ≥1200 */
@media (min-width: 1200px) {
	.ax-single-shell {
		display: grid;
		grid-template-columns: var(--ax-rail-width) minmax(0, 1fr);
	}

	.ax-single-shell__content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--ax-toc-width);
		column-gap: var(--ax-shell-gap);
	}
}

/* ===================================================== tablet 768–1199 (row) */
@media (max-width: 1199px) {
	/* Shell + content collapse to a single column (reverse of normal responsive:
	 * the rail becomes a top row header). */
	.ax-single-shell,
	.ax-single-shell__content {
		display: block;
	}

	/* Rail -> top row header: identity + nav on one line. Drop the sticky so the
	 * header scrolls away like a normal app bar. */
	.ax-vertical-header {
		position: static;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--300);
		max-inline-size: var(--wp--style--global--wide-size);
		margin-inline: auto;
	}

	/* The part markup is a default-layout Group, so core gives the second child
	 * (the Navigation block) the global block gap as margin-block-start. In the
	 * tablet/mobile row header that vertical stack gap pushes the menu button
	 * below the site title line; row spacing is owned by flex gap above instead. */
	.ax-vertical-header > .ax-vertical-header__nav {
		margin-block-start: 0;
	}

	.ax-vertical-header__nav {
		align-items: center;
		display: flex;
	}

	/* Collapse the rail nav to its overlay (hamburger) from tablet down. Core
	 * gates the hamburger off and the inline container on at @media (min-width:
	 * 600px); re-assert the collapsed state up to 1199 with a higher-specificity
	 * selector so the hamburger stays shown and the inline nav stays hidden
	 * between 600 and 1199. The button still opens navigation-overlay via core's
	 * JS at any width, so overlayMenu stays "mobile" (items remain inline for the
	 * desktop rail) — we only move WHERE it collapses. */
	.ax-vertical-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.ax-vertical-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}