/**
 * Astrum — front-end only layer.
 *
 * Deliberately NOT passed to add_editor_style(). Everything here depends on the
 * front-end document shell — the fixed header, the admin bar offset, anchor
 * scrolling — and would misbehave inside the Site Editor canvas (the bar would
 * detach from the flow and float over the editor UI).
 *
 * Same hard rule as _shared.css: no hex, no px from the design kit; only
 * tokens, plus values that have no token (breakpoints, hairlines, blur radius).
 *
 * Contents:
 *   1. Fixed header
 *   2. Main offset under the header
 *   3. Anchor scrolling
 *   4. Core navigation breakpoint override
 */

/* ==========================================================================
   1. Fixed header

   Block supports only offer `position: sticky`; the design needs `fixed` so the
   hero flows underneath the translucent bar. The admin bar height is exposed by
   core as --wp-admin--admin-bar--height and is absent for logged-out visitors,
   hence the 0px fallback.
   ========================================================================== */

/* The core navigation overlay sets z-index: 100000, so a header z of 100 is
   safe; the overlay always covers the bar it was opened from.

   The backdrop blur is front-end only — inside the editor canvas it would blur
   the editor chrome. The bar is already 88% opaque, so this is a refinement,
   not a load-bearing effect, and it may be dropped if the repaint cost on
   scroll ever shows up in profiling. */
.astrum-header {
	position: fixed;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	inset-inline: 0;
	z-index: var(--wp--custom--header--z);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

/* backdrop-filter makes the header a containing block for `position: fixed`
   descendants. Core's mobile overlay is fixed with inset 0 but carries no
   width/height, so it sized itself to the 82px bar instead of the viewport —
   four of the five menu links ended up outside the scroll area and could not
   be tapped at all. Dropping the filter only while the overlay is open keeps
   the blur everywhere it is actually visible. */
.astrum-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* iOS Safari flickers the blurred layer during rubber-band scrolling and some
   browsers drop backdrop-filter entirely; both end up with a see-through bar
   over the hero photo. Fall back to a fully opaque surface. */
@supports not (backdrop-filter: blur(1px)) {

	.astrum-header {
		background: var(--wp--preset--color--ink);
	}
}

/* ==========================================================================
   2. Main offset under the header

   The header is out of flow, so <main> has to reserve its height — except when
   the page opens with the hero, which is designed to run under the bar.
   :has() is unsupported below iOS 15.4; if old Safari becomes a requirement,
   replace this with a body_class flag set in PHP.
   ========================================================================== */

.wp-site-blocks > main {
	padding-block-start: var(--wp--custom--header--height);
}

/* core/post-content wraps the sections in an .entry-content div, so the hero is
   a grandchild of <main> on every page that renders page content — the direct
   child form alone never matches. Both are kept so the opt-out survives a
   template that drops the wrapper. */
.wp-site-blocks > main:has(> .astrum-hero:first-child),
.wp-site-blocks > main:has(> .entry-content > .astrum-hero:first-child),
.wp-site-blocks > main:has(> *:first-child > .astrum-hero:first-child) {
	padding-block-start: 0;
}

/* ==========================================================================
   3. Anchor scrolling

   Twelve links across the header, the footer and the product cards point at
   five in-page anchors. Without scroll-padding every one of them parks the
   heading underneath the fixed bar.

   `html:root` is (0,1,1) and outranks admin-bar.css's bare `html` (0,0,1).
   ========================================================================== */

html:root {
	scroll-padding-top: calc(var(--wp--custom--header--height) + var(--wp-admin--admin-bar--height, 0px) + 8px);
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

	html:root {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   4. Core navigation breakpoint override

   core/navigation hard-codes its overlay breakpoint at 600px and no block
   attribute changes it; the approved layout collapses at 980px. Core's rules
   carry (0,3,0), so the override has to be scoped by .astrum-header and repeat
   both :not() qualifiers.

   Below 980px this hands the whole menu to the hamburger overlay. That also
   closes a real gap: the preview simply did `.navlinks { display: none }` with
   no replacement, leaving the site structure unreachable on phones (SC 2.4.5).
   ========================================================================== */

@media (max-width: 979.98px) {

	.astrum-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.astrum-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}