/*
 * WordPress wraps the header template part in its own <header
 * class="wp-block-template-part"> element, which only ever contains this
 * block and so is always exactly as tall as it. Sticky positioning needs
 * room to operate within its containing block, so the sticky rules must
 * live on that outer wrapper rather than on .solea-site-header itself —
 * otherwise the header scrolls away like a static element.
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.solea-site-header {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--brand-border);
}

.solea-site-header .solea-header-inner {
	margin: 0 auto;
	padding: 12px clamp(20px, 2.4vw, 48px) 12px clamp(250px, 21vw, 360px);
}

.solea-logo-badge {
	position: absolute;
	top: 0;
	left: 20px;
	z-index: 5;
	width: clamp(220px, 20vw, 320px);
	height: 173px;
	border-radius: 0 0 24px 24px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--brand-border);
	box-shadow: 0 8px 24px -14px rgba(57, 18, 102, 0.25);
	display: grid;
	place-items: center;
	padding: clamp(12px, 1.3vw, 22px);
	transform-origin: top left;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease;
}

/* Shrinks the box and the logo inside it together once the page is scrolled. */
.solea-site-header.is-scrolled .solea-logo-badge {
	transform: scale(0.7);
	box-shadow: 0 4px 14px -10px rgba(57, 18, 102, 0.2);
}

/*
 * While the nav menu is open (.is-menu-open, toggled by view.js), the menu
 * panel is pinned right below the header, and at its normal size the badge
 * overhangs well past the header and would otherwise sit on top of / hide
 * the panel's first row of nav items — so unlike the scrolled state above,
 * this one has to fully clear the header, not just shrink a bit. Scaling
 * the whole badge (instead of e.g. capping just its height) keeps the box
 * and the logo inside it shrinking together as one proportional unit —
 * 0.48 is tuned against the badge's height (175px, line 31) so the
 * scaled-down badge (175 * 0.48 = 84px) fits well within the header's own
 * rendered height (96px nav min-height + 24px padding + 1px border = 121px)
 * and never overhangs.
 */
.solea-site-header.is-menu-open .solea-logo-badge {
	transform: scale(0.48);
	box-shadow: 0 4px 14px -10px rgba(57, 18, 102, 0.2);
}

/*
 * max-height keeps this in sync with the badge's own height/padding values
 * above (line 31/38) instead of duplicating the numbers: a wide/landscape
 * logo still fills the full badge width as before, but a taller or
 * near-square logo is scaled down (object-fit: contain) instead of
 * overflowing the badge and the header beneath it.
 */
.solea-site-header .solea-logo-badge .wp-block-site-logo,
.solea-site-header .solea-logo-badge img {
	width: 100%;
	height: auto;
	max-height: calc(175px - 2 * clamp(12px, 1.3vw, 22px));
	object-fit: contain;
	display: block;
}

/*
 * Below 1180px the nav switches to its burger layout (see site-nav's
 * style.css), and the header becomes a plain inline row: the site logo
 * (unboxed) and the agglo logo on the left, search + burger on the right.
 * The absolute badge box and its reserved header-inner padding only make
 * sense for the desktop overlap layout, so both are undone here.
 */
@media (max-width: 1179px) {
	.solea-site-header {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px clamp(16px, 4vw, 24px);
	}

	.solea-site-header .solea-header-inner {
		flex: 1 1 auto;
		margin: 0;
		padding: 0;
	}

	.solea-logo-badge {
		position: static;
		flex: none;
		width: auto;
		height: auto;
		border-radius: 0;
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 0;
		transform: none;
	}

	.solea-site-header.is-scrolled .solea-logo-badge,
	.solea-site-header.is-menu-open .solea-logo-badge {
		transform: none;
		box-shadow: none;
	}

	.solea-site-header .solea-logo-badge .wp-block-site-logo,
	.solea-site-header .solea-logo-badge img {
		width: auto;
		max-height: 40px;
	}
}