/**
 * Transparent header.
 *
 * On pages with General Page Options -> Transparent Header set to Yes, <body>
 * carries .vd-header-transparent (functions.php). The page is pulled up under
 * the header, so the first section's background runs behind the header and the
 * announcement bar, and that section gets the header's height added to its top
 * padding so its content still starts below the header.
 *
 * --vd-header-height is the live header height, written to <html> by
 * vd-header-offset.js. The values below are only stand-ins until it runs,
 * measured at each Bricks breakpoint (the header is fluid in between).
 */
:root {
	--vd-header-height: 210px;
}

@media (max-width: 991px) {
	:root {
		--vd-header-height: 172px;
	}
}

@media (max-width: 767px) {
	:root {
		--vd-header-height: 164px;
	}
}

@media (max-width: 478px) {
	:root {
		--vd-header-height: 115px;
	}
}

/* The header is sticky, so it still takes up space in the flow; a negative
   margin of the same height slides the content up underneath it. The header
   (z-index 998) stays on top - see design-system/Z-INDEX.md. */
body.vd-header-transparent #brx-content {
	margin-top: calc(var(--vd-header-height) * -1);
}

/* CSS can't add to the padding set in Bricks, so on these pages this rule
   REPLACES the first section's top padding: the header height plus the gap
   below it. Change the gap for one page by setting --vd-header-gap on that
   section (Bricks > Style > CSS > Custom properties, or its custom CSS). */
body.vd-header-transparent #brx-content > :first-child {
	padding-top: calc(var(--vd-header-height) + var(--vd-header-gap, var(--at-space--3xl)));
}