/*
Pages built with blocks. Loaded by inc/base/editor.php on those pages only.
The page runs full width, like Page Builder rows; Group blocks keep the
content width from theme.json.
*/

.ing-blocks .site-inner .content-sidebar-wrap .entry {
	max-width: none;
	width: auto;
	padding: 0;
}

/*
main.css gives every heading color: #333 and font-weight: 400, which beats
the color a block inherits from its container (white text on a dark
GenerateBlocks section turns gray) and flattens bold headings. Hand both
back to the blocks. Low specificity, so block classes still win; GenerateBlocks
text sets its own color and weight, so it is left out.
*/

.ing-blocks .entry-content :where(h1, h2, h3, h4, h5, h6):not(:where(.gb-text)) {
	color: inherit;
	font-weight: 700;
}

/*
Parallax background: add iphc-parallax to a block's Additional CSS class(es).
A copy of the block's own background sits a little taller than the block and
drifts as the page scrolls. Browsers without scroll-driven animations, and
visitors who prefer reduced motion, keep the normal background.
*/

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.iphc-parallax {
			position: relative;
			isolation: isolate;
			overflow: clip;
			view-timeline: --iphc-parallax;
		}

		.iphc-parallax::after {
			content: "";
			position: absolute;
			inset: -20% 0;
			z-index: -1;
			background-image: inherit;
			background-size: cover;
			background-position: inherit;
			background-repeat: no-repeat;
			pointer-events: none;
			animation: iphc-parallax linear both;
			animation-timeline: --iphc-parallax;
		}
	}
}

@keyframes iphc-parallax {
	from { transform: translateY(-12%); }
	to { transform: translateY(12%); }
}