/* Layout
---------------------------------------------------------------------------- */

/* Sticky header */

body:not(.wp-admin) header:has(>.is-position-sticky) {
	position: sticky;
	top: calc( 0px + var( --wp-admin--admin-bar--height, 0px ) );
	z-index: 100;
}

/* Account for admin bar on mobile */

@media (max-width: 600px) {
	header:has(>.is-position-sticky) {
		top: 0;
	}
}

/* Mobile helper classes */

@media (max-width: 781px) {
	.campweb-unstick-mobile {
		position: static;
	}

	header:has(>.campweb-unstick-mobile) {
		position: static;
	}
}

/* Overlay header (transparent menu on top of a hero) */

.site-header.is-overlay {
	position: absolute;
	inset: 0 0 auto 0; /* top:0; left/right:0 */
	z-index: 10;
	background: transparent;
}

/* Pull the first section up under the overlay header so the hero starts at
   the very top of the page. The header is out of flow, so this is mostly a
   safeguard against any default top margin on the first block. */
.site-header.is-overlay + .site-content > :first-child {
	margin-top: 0;
}

/* Take the admin bar out of the flow on an overlay-header page.

   The bar makes core push the whole document down with
   `html { margin-top: 32px !important }`, which breaks this layout twice: a
   100vh hero now runs 32px past the bottom of the viewport, and the header —
   absolute against the initial containing block, which starts above that
   margin — has its top 32px hidden behind the bar.

   So drop the margin on exactly these pages and offset the header instead.
   The hero fills the viewport again and the bar floats over its top edge with
   the header clear of it. Higher specificity than core's `html`, so the
   !important beats the bump style's own.

   Above 600px only, which is where core makes the bar `position: fixed`.
   Below that it is absolute and scrolls away with the page, so the reserved
   margin is the only thing keeping it off the header — leave it alone. */

@media (min-width: 601px) {
	html:has(.site-header.is-overlay) {
		margin-top: 0 !important;
	}

	.admin-bar .site-header.is-overlay {
		top: var( --wp-admin--admin-bar--height, 0px );
	}
}

/* Full-width sections stack flush.

   theme.json sets the root blockGap to var:preset|spacing|medium, so core's flow
   layout gives every block that follows a sibling a margin-block-start of that
   size. Sections carry their own top and bottom padding, so on an alignfull block
   that gap is never what is wanted — and a pattern rooted in core/query cannot
   cancel it from the editor at all, because that block has no spacing support.

   Two class selectors, so this beats core's own `.wp-container-xyz > * + *` rule
   (one class) whichever stylesheet loads last. An explicit margin set on the block
   in the editor is an inline style and still wins over both.

   Note this also applies to a lone alignfull image or separator sitting in a run of
   text: it will now butt against the paragraph above it unless it is given a top
   margin of its own. */
.is-layout-flow > .alignfull,
.is-layout-constrained > .alignfull,
.wp-site-blocks > .alignfull {
	margin-block-start: 0;
}

/* Keep SVG logos proportional. Width comes from the Site Logo block's own
   setting (driven by the attachment's real dimensions); height stays auto so
   the aspect ratio is preserved and is never pinned to a stale 0. */
.wp-block-site-logo img[src$=".svg"] {
	height: auto;
}

/* Safety net: if an SVG still has no usable dimensions, core emits width="0"
   (or none) and the logo collapses. Give it a visible default in that case
   only; once the attachment has real dimensions core sets a width and these
   selectors no longer match, so the block's own width wins. */
.wp-block-site-logo img[src$=".svg"][width="0"],
.wp-block-site-logo img[src$=".svg"]:not([width]) {
	width: 220px;
}