/*
 * Fixed — a template part pinned to the top of the viewport.
 *
 * For the Header part carrying `kg-product/navbar`: the block itself is deliberately in
 * the flow (it has to be, for a part to be stickable at all), so pinning it is a decision
 * the *part* makes and not the block. Apply the style and the header stops taking layout
 * height, and the page's first section runs up underneath it.
 *
 * `inset-inline: 0` is not decoration. A `position: fixed` block-level element sizes to
 * its content unless both inline edges are given, so without it the header would shrink to
 * the width of the pill and stop being centred on the screen.
 *
 * `z-index` for the same class of reason: a fixed box paints above static content on its
 * own, but not above a section that has a `position` and a stacking order of its own — and
 * a page has those. 100 matches the Navbar's own, which is the only thing that has to
 * outrank this.
 *
 * The admin bar is `position: fixed` too, and WordPress pays for it with a `margin-top` on
 * `<html>` — which a fixed element does not see. So the offset has to be restated here, at
 * WordPress's own two heights: 32px, and 46px on the narrow layout where the bar wraps to
 * two rows. Written as a `min-width` negation rather than `max-width: 782px` so no
 * fractional viewport can fall between the two states.
 *
 * Nothing here manages pointer events, and it does not need to: the Navbar makes its own
 * full-width row transparent to clicks and lets only the pill and the card opt back in, so
 * a header stretched across the screen does not swallow anything behind it. A different
 * part given this style would have to answer that question itself.
 *
 * ## It does not apply in the editor, deliberately
 *
 * This sheet is loaded on both sides — that is what `sheet()` does, and it is right for
 * every other block style in the theme, which is how the canvas can be trusted to look like
 * the site. `position: fixed` is the exception: in the canvas it would pin the header to the
 * editor's own viewport, so it would escape the editing frame, sit over the toolbar and the
 * inspector, and stay there while the template scrolled underneath it. What an editor needs
 * to see is the part in place, with the style shown as active in the Styles panel.
 *
 * `:not(.editor-styles-wrapper *)` is the guard. That class is the canvas root in both
 * arrangements — the iframed editor puts it on the `<body>` inside the frame, a non-iframed
 * one on a wrapping `<div>` — and matching "descendant of it" rather than the element
 * itself is what covers both without this file having to know which one it is in. Only the
 * `position` rule needs it; the two admin-bar rules below are already unreachable in the
 * canvas, which has no `admin-bar` class.
 */

.wp-block-template-part.is-style-fixed:not(.editor-styles-wrapper *) {
	position: fixed;
	z-index: 100;
	inset-block-start: 0;
	inset-inline: 0;
}

.admin-bar .wp-block-template-part.is-style-fixed {
	inset-block-start: 32px;
}

@media not (min-width: 783px) {
	.admin-bar .wp-block-template-part.is-style-fixed {
		inset-block-start: 46px;
	}
}

/*
 * ## The offset an anchor jump has to clear
 *
 * A pinned part covers the top of the scrollport, so `#section` would otherwise land
 * with its first lines underneath the header. `scroll-padding-top` is the fix and it
 * belongs on the scroll container — `<html>` — which no rule scoped to the part can
 * reach. So the part's sheet publishes the height as a custom property on `<html>` and
 * `assets/css/global/reset.css` adds it to the admin bar's own offset. A page whose
 * header is *not* given this style never sets the property, the fallback there is zero,
 * and the anchor lands flush, which is correct for a header that scrolls away.
 *
 * `:has()` is what carries the value up the tree, and it repeats the editor guard from
 * the `position` rule above for the same reason: in the canvas the part is a descendant
 * of `.editor-styles-wrapper`, so the `:not()` fails, `:has()` does not match, and the
 * editor's scrollport keeps its own padding.
 *
 * **6.5rem is stated, not measured, and it is the Navbar's frame**: 24px inset + the
 * 56px pill + 24px inset = 104px, the three lengths at the top of
 * `src/blocks/navbar/style.scss`. CSS cannot read the height of an out-of-flow box, and
 * the alternative is JavaScript measuring the header on load, on resize and on font
 * swap. Change `--kg-navbar-inset` or `--kg-navbar-height` and this number has to move
 * with them — and a *different* part given the `Fixed` style needs its own value here.
 */
html:has(.wp-block-template-part.is-style-fixed:not(.editor-styles-wrapper *)) {
	--kg-fixed-header-block-size: 6.5rem;
}