/**
 * PCG Hero Reveal
 */

:root {
	/* svh, not dvh: this value must stay locked to the JS scroll target.
	   dvh remeasures as mobile browser chrome collapses mid-scroll, which
	   would shift the offset out from under the user after landing. */
	--pcg-reveal-h: min(1000px, 75svh); /* At least 1000px, no more than 75% viewport height. */
}

.pcg-hero-reveal {
	display: none;
}
body.has-hero-reveal .pcg-hero-reveal {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--pcg-reveal-h);
	z-index: -2;
}
body.has-hero-reveal:has(#wpadminbar) .pcg-hero-reveal {
	margin-top:var(--wp-admin--admin-bar--height);
}
.pcg-hero-reveal__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* ---- Occluding element: MUST be opaque, MUST create its own stacking
   context (position + z-index), or the fixed panel behind it shows
   through / paints incorrectly. ---- */
body.has-hero-reveal #pcg-site-body-wrapper:not(:has(.toggled-on)) { /* Do none of this if the mobile menu is toggled on */
	/* The -1px absorbs a stray pixel below the reveal panel. It must NOT be done
	   with transform: any transformed ancestor becomes the containing block for
	   position:fixed descendants, which re-anchors the cursor-following PAL label
	   (main.js writes viewport clientX/clientY into it) to this wrapper instead. */
	margin-top: calc(var(--pcg-reveal-h) - 1px);
	background: #fff;
	position: relative;
    z-index: 1;
}
#pcg-site-body-wrapper {
	scroll-margin-top: 0;
}