/**
 * Site header: sticky, compact, solid (no blur, for low-powered phones).
 * Mobile-first; the desktop layout starts at 64rem (1024px).
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--nscb-z-header);
	background-color: var(--nscb-color-bg);
	background-color: color-mix(in srgb, var(--nscb-color-bg) 94%, transparent);
	border-bottom: 1px solid var(--nscb-color-border);
	border-bottom-color: color-mix(in srgb, var(--nscb-color-border) 55%, transparent);
	box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.8);
}

/* Sit below the WordPress admin bar, which is only fixed above 600px. */
.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

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

/* Logo (shared with the footer). */
.nscb-logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	min-height: 2.75rem;
	color: var(--nscb-color-text);
	text-decoration: none;
}

.nscb-logo__img {
	width: auto;
	max-width: 12.5rem;
	height: auto;
	max-height: 2.75rem;
	object-fit: contain;
}

.nscb-logo__text {
	font-family: var(--nscb-font-heading);
	font-size: var(--nscb-text-md);
	font-weight: 700;
	letter-spacing: var(--nscb-tracking-wide);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* A small highlight mark after the text logo. */
.nscb-logo__text::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-inline-start: 0.3em;
	border-radius: 2px;
	background-color: var(--nscb-color-highlight);
	vertical-align: baseline;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--nscb-space-2);
	margin-inline-start: auto;
}

/* The CTA lives in the menu panel on small screens: one action per row. */
.site-header__cta {
	display: none;
}

/* WhatsApp: icon-only circle on small screens. */
.site-header__whatsapp {
	width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
}

.site-header__whatsapp .nscb-btn__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--nscb-color-border);
	border-radius: var(--nscb-radius-pill);
	background: transparent;
	color: var(--nscb-color-text);
	-webkit-tap-highlight-color: transparent;
	transition: border-color var(--nscb-duration-fast) var(--nscb-ease-standard), background-color var(--nscb-duration-fast) var(--nscb-ease-standard);
}

.site-header__whatsapp .nscb-icon {
	color: var(--nscb-color-highlight);
}

.site-header__toggle:hover {
	border-color: var(--nscb-color-highlight);
	background-color: var(--nscb-color-surface);
}

.site-header__toggle .nscb-icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* No drawer without JavaScript: the menu is shown as a static list instead. */
.no-js .site-header__toggle {
	display: none;
}

@media (min-width: 64rem) {
	.site-header__inner {
		gap: var(--nscb-space-6);
	}

	.nscb-logo__img {
		max-width: 16rem;
		max-height: 3.5rem;
	}

	.nscb-logo__text {
		font-size: var(--nscb-text-lg);
	}

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

	.site-header__whatsapp {
		width: auto;
		padding: var(--nscb-space-2) var(--nscb-space-4);
	}

	.site-header__whatsapp .nscb-btn__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.site-header__toggle {
		display: none;
	}
}