/**
 * insta/header — navigation overlay (menu panel) block styles.
 *
 * Scoped to `.ib-header.is-style-<name>` so a header without the style, and every other block on
 * the page, are untouched. The panel's CONTENTS are core/navigation's own inner blocks — these
 * rules only arrange them.
 *
 * Core still owns the shell unconditionally (`position:fixed; inset:0`, flex column, overflow,
 * z-index) and adds `disable-default-overlay` when a custom overlay part is used. These styles work
 * either way: they set the box, not the plumbing.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * Menu — side panel
 *
 * MEASURED on the source (oshinewptheme.com/v62) at 1440 / 768 / 390 with the menu OPEN:
 *   panel   400 × 100vh at every width, position:fixed, right:0, padding 40px, background #fff
 *   links   28px / 36px line-height, constant across widths
 *
 * The width is a CONSTANT 400px in the source, not a viewport fraction — at 768 it is still 400
 * (27.78vw would be 213), and at 390 the source's panel starts at x = -10, i.e. it OVERFLOWS the
 * viewport by 10px. `min(25rem, 100%)` reproduces it exactly at 768 and above and caps it at 390
 * instead of overflowing. That is a deliberate 10px deviation from the source at the smallest
 * width: a horizontal overflow is a defect to inherit, not a design to reproduce.
 * ───────────────────────────────────────────────────────────────────────────── */
.ib-header.is-style-overlay-side-panel .wp-block-navigation__responsive-container.is-menu-open {
	box-sizing: border-box;
	inline-size: min(25rem, 100%);
	inset-inline-end: 0;
	inset-inline-start: auto;
	padding: 2.5rem;
}

/* MAKE THE HEIGHT CHAIN REACH THE CONTENT.
 *
 * Core nests the content two wrappers deep — `__responsive-close` > `__responsive-dialog` >
 * `__responsive-container-content` (navigation.php:805-808) — and gives neither wrapper a height.
 * `block-size: 100%` on the content alone therefore resolves against `auto` and does nothing:
 * measured, the content stayed 356px tall inside a 920px panel, so `space-between` had almost
 * nothing to distribute and the social row sat at y=338 instead of 894.
 *
 * The panel itself is already a flex column (core, unconditional), so each wrapper only needs to be
 * a flex item that grows and a flex column in turn. `min-block-size: 0` because a flex item's
 * automatic minimum is its content size, which would otherwise stop it shrinking to the panel.
 */
.ib-header.is-style-overlay-side-panel .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.ib-header.is-style-overlay-side-panel .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-block-size: 0;
}

/* The panel's own content column fills it and distributes three bands; core leaves it height-auto at
 * flex-start, so everything packs against the top of a 920px panel — measured on the build as
 * logo 96 / link1 146 / social 394 / legal 436 against the source's 40 / 355 / 894 / 933.
 *
 * Core hard-sets `justify-content: flex-start` here at (0,3,0) — three classes, its `:where()`
 * contributing nothing — so NO block attribute can win. Overriding it is why this is a style rule
 * rather than an attribute on the block.
 *
 * `padding-top: 0` removes core's `calc(2rem + 24px)` (=56px). That reserve exists to keep content
 * clear of the close button, but the button is ALREADY `position:absolute; top:0; right:0` in core
 * (style.css:645) and absolute resolves against the padding box — so it already sits at the panel's
 * own 2.5rem inset, and the reserve only pushed every element down by 56px. The button stays exactly
 * where core puts it; nothing here repositions it.
 *
 * MEASURED bands on the source @1440 (identical at 768/390 but for the x origin):
 *   logo  y=40  h=225  flex-start
 *   nav   y=265 h=449  center
 *   foot  y=714 h=246  flex-end   (social row + legal line)
 */
.ib-header.is-style-overlay-side-panel .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	block-size: 100%;
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	justify-content: space-between;
	padding-top: 0;
}

/* The link list is where the distribution actually happens, because core puts EVERY inner block in
 * it as an `<li>` — logo, links and the social row are siblings in one `ul`. (The legal line is the
 * exception: it renders as a `<p>` sibling of the `ul`, so `space-between` on the content above
 * already pins it to the bottom.)
 *
 * `justify-content` cannot express this: it distributes all six items identically, which centred the
 * logo at y=334 instead of leaving it at 40. AUTO MARGINS can — the first item takes all the free
 * space after it and the last takes all the space before it, so with both set the links in between
 * end up centred in what remains. Core sets `justify-content: flex-start` here in the same (0,3,0)
 * rule as the content, which is why this rule has to exist at all.
 *
 * Targets, source @1440: logo 40 · link1 355 · social 894 · legal 933.
 */
.ib-header.is-style-overlay-side-panel .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex: 1 1 auto;
}

.ib-header.is-style-overlay-side-panel .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > :first-child {
	margin-block-end: auto;
}

.ib-header.is-style-overlay-side-panel .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > :last-child {
	margin-block-start: auto;
}