/*
 * Site header (docs/DESIGN_SYSTEM.md section 8.4): sticky, white, a hairline that appears on scroll,
 * no backdrop blur. 64 px high below 1024 px, 80 px from 1024 px, where the navigation becomes a bar.
 */
@layer components {
	.icon {
		flex: none;
		width: 1.5rem;
		height: 1.5rem;
	}

	.icon-sprite {
		position: absolute;
		width: 0;
		height: 0;
		overflow: hidden;
	}

	.site-header {
		position: sticky;
		inset-block-start: 0;
		z-index: var(--z-sticky);
		background: var(--color-surface);
		transition: box-shadow var(--dur-base) var(--ease-out);
	}

	/* Without JavaScript the mobile menu is a list that is always open, and it sits inside the header. A header
	   as tall as that would cover the page if it stayed pinned, so below 1024 px it scrolls away with the page
	   (from 1024 px the bar is one row and can stay). */
	html:not(.js) .site-header {
		position: static;
	}

	/* The panels (the mobile menu, a mega panel, a list of links) live inside the header, which is one stacking
	   level and sits below the floating WhatsApp button. While one is open the header goes above it, so the
	   button is never drawn over a link of the panel. */
	.site-header:has([aria-expanded="true"]) {
		z-index: var(--z-overlay);
	}

	/* The hairline is an inset shadow, so it never changes the header's height. */
	.site-header.is-scrolled {
		box-shadow: var(--shadow-hairline-bottom);
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		min-height: var(--header-h);
	}

	.site-header__brand {
		min-width: 0;
		margin-inline-end: auto;
	}

	/* The site name stands in for the logo until one is uploaded; one line, so the header keeps its height. */
	.site-header__title {
		display: block;
		overflow: hidden;
		color: var(--color-text);
		font-family: var(--font-display);
		font-size: var(--fs-h4);
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The theme's wordmark, while no logo is chosen in Site Identity: 32 px high (approved range 28 to 36 px). */
	.site-header__logo {
		display: block;
	}

	.site-header__logo-image {
		display: block;
		width: auto;
		height: var(--size-logo);
	}

	.site-header__brand .custom-logo-link {
		display: block;
	}

	.site-header__brand .custom-logo {
		width: auto;
		max-height: var(--size-icon-button);
	}

	.site-header__actions {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	/* Below 1024 px: a WhatsApp icon button and the Menu button. Without JavaScript the Menu button is
	   hidden and the menu is a plain list. */
	.site-header__whatsapp {
		display: none;
		white-space: nowrap;
	}

	.js .site-header__menu-button {
		display: inline-flex;
	}

	.site-header__menu-button {
		display: none;
	}

	@media (min-width: 64em) {
		html:not(.js) .site-header {
			position: sticky;
		}

		.site-header__brand {
			margin-inline-end: 0;
		}

		.site-header__whatsapp {
			display: inline-flex;
		}

		.site-header__whatsapp-icon,
		.js .site-header__menu-button {
			display: none;
		}
	}
}