/**
 * OSHIDA — header.
 *
 * @figma 1364:1180 / 1571:845 — every page frame carries the nav at y=81, so
 * the header reserves 81px of lead-in plus the 62.26px pill: 143px in total.
 *
 * The header is a NORMAL FLOW element, not an overlay. Page sections therefore
 * need no top offset of their own: content begins at y=143, and the design's
 * first artwork begins at y=195, i.e. the section's own 52px of lead-in.
 *
 * It is also sticky. `inset-block-start` is negative by exactly the difference
 * between the design lead-in and the resting gap, so scrolling parks the pill
 * 16px below the viewport edge instead of dragging 81px of empty band with it.
 *
 * Owner: work package B1.
 */

:root {
	/* Design lead-in above the pill, and the gap it keeps once stuck. */
	--o-header-lead: 81px;
	--o-header-stuck-gap: 16px;
	/* Total block-size of the header, for anything that needs to reason about it. */
	--o-header-block-size: calc(var(--o-header-lead) + 62px);
}

.o-header {
	position: sticky;
	inset-block-start: calc(var(--o-header-stuck-gap) - var(--o-header-lead));
	z-index: var(--o-z-nav);
	padding-block-start: var(--o-header-lead);
	padding-inline: var(--o-gutter);

	/*
	 * The band above and beside the pill is empty. Once the header is stuck it
	 * covers content, so it must not swallow clicks meant for what is under it.
	 */
	pointer-events: none;
}

.o-header > * {
	pointer-events: auto;
}

/* Set by assets/js/nav.js past --o-header-lead of scroll. Purely decorative:
 * nothing about the layout depends on it, so a page with JS off loses only the
 * shadow. */
.o-header.is-scrolled .o-nav__pill {
	box-shadow: var(--o-shadow-panel);
}

@media (prefers-reduced-motion: no-preference) {
	.o-nav__pill {
		transition: box-shadow var(--o-dur-base) var(--o-ease-standard);
	}
}

@media (max-width: 899px) {
	:root {
		--o-header-lead: 16px;
		--o-header-stuck-gap: 16px;
	}
}