/**
 * Base Theme - site header.
 *
 * Sticky positioning is pure CSS. The only JavaScript involved is
 * assets/js/header.js, which adds .is-scrolled so the elevation shadow can
 * appear once the page has moved - and the header works correctly without it.
 */

.base-header {
	border-block-end: 1px solid transparent;
	transition: border-color var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		box-shadow var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
	z-index: 100;
}

/*
 * The body class is set server-side in inc/enqueue.php, so the header is
 * already sticky on first paint. Nothing shifts once scripts run.
 */
.has-sticky-header .base-header {
	inset-block-start: var(--base-admin-bar-height);
	position: sticky;
}

/* Elevation appears only once the page has scrolled. */
.base-header.is-scrolled {
	border-block-end-color: var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--sm);
}

/* Without the script, fall back to a permanent hairline rather than nothing. */
.no-js .base-header,
.base-header--minimal {
	border-block-end-color: var(--wp--preset--color--border);
}

.base-header__inner {
	min-height: var(--base-header-height);
}

.base-header__brand .wp-block-site-logo img {
	display: block;
	height: auto;
}

/* Keep the logo and site title on one line even at 320px. */
.base-header__brand {
	flex: 0 1 auto;
	min-width: 0;
}

.base-header__actions {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * The header CTA is redundant on small screens - the same action is inside
 * the navigation overlay - and it crowds out the hamburger. Hide it there.
 */
@media (max-width: 599px) {
	.base-header__cta {
		display: none;
	}
}