/**
 * Global header — desktop row + utility bar + mobile row + overlays.
 * Visual source: approved-v1 refs 01 (desktop) and 02 (mobile).
 */

/* Sticky wrapper: position:sticky causes no layout shift. */
.nbf-header-zone--sticky {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--nbf-z-header);
}

/* ------------------------------------------------------------------
 * Utility bar (desktop only)
 * ---------------------------------------------------------------- */
.nbf-utility-bar {
	background: var(--nbf-color-surface);
	border-block-end: 1px solid var(--nbf-color-border);
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-2);
}

.nbf-utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nbf-space-4);
	min-block-size: 2.25rem;
}

.nbf-utility-bar__support,
.nbf-utility-bar__contact {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-5);
}

.nbf-utility-bar__item {
	display: inline-flex;
	align-items: center;
	gap: var(--nbf-space-1);
	color: inherit;
}

a.nbf-utility-bar__item:hover {
	color: var(--nbf-color-primary-600);
	text-decoration: none;
}

.nbf-utility-bar__links {
	display: flex;
	gap: var(--nbf-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nbf-utility-bar__links a {
	color: inherit;
}

.nbf-utility-bar__links a:hover {
	color: var(--nbf-color-primary-600);
	text-decoration: none;
}

@media (max-width: 1023px) {
	.nbf-utility-bar {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Header shell
 * ---------------------------------------------------------------- */
.nbf-header {
	background: var(--nbf-color-surface);
	border-block-end: 1px solid var(--nbf-color-border);
	box-shadow: var(--nbf-shadow-xs);
}

/* Brand */
.nbf-header__brand-link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	text-decoration: none;
	color: var(--nbf-color-primary-700);
}

.nbf-header__brand-link:hover {
	text-decoration: none;
}

.nbf-header__brand-name {
	font-size: var(--nbf-fs-xl);
	font-weight: var(--nbf-fw-black);
	line-height: 1.2;
}

.nbf-header__brand-tagline {
	font-size: var(--nbf-fs-2xs);
	color: var(--nbf-color-text-3);
}

.nbf-header__brand img {
	max-block-size: 3rem;
	inline-size: auto;
}

/* ------------------------------------------------------------------
 * Desktop row
 * ---------------------------------------------------------------- */
.nbf-header__desktop {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-6);
	min-block-size: 4.5rem;
}

.nbf-header__nav {
	flex: 1;
}

.nbf-header__menu {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nbf-header__menu a {
	display: inline-flex;
	align-items: center;
	gap: var(--nbf-space-1);
	padding: var(--nbf-space-2) var(--nbf-space-3);
	border-radius: var(--nbf-radius-sm);
	color: var(--nbf-color-text);
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-medium);
}

.nbf-header__menu a:hover {
	color: var(--nbf-color-primary-600);
	background: var(--nbf-color-primary-50);
	text-decoration: none;
}

.nbf-header__menu .current-menu-item > a,
.nbf-header__menu .current_page_item > a {
	color: var(--nbf-color-primary-700);
	font-weight: var(--nbf-fw-bold);
}

/* Accessible dropdown for one submenu level: open on hover AND focus-within. */
.nbf-header__menu .menu-item-has-children {
	position: relative;
}

.nbf-header__menu .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-inline-size: 12rem;
	margin: 0;
	padding: var(--nbf-space-2);
	list-style: none;
	background: var(--nbf-color-surface);
	border: 1px solid var(--nbf-color-border);
	border-radius: var(--nbf-radius-md);
	box-shadow: var(--nbf-shadow-md);
	display: none;
	z-index: var(--nbf-z-dropdown);
}

.nbf-header__menu .menu-item-has-children:hover > .sub-menu,
.nbf-header__menu .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.nbf-header__menu .sub-menu a {
	display: block;
	inline-size: 100%;
}

/* Actions */
.nbf-header__actions {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-3);
}

.nbf-header__account {
	display: inline-flex;
	align-items: center;
	gap: var(--nbf-space-2);
	color: var(--nbf-color-text);
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-medium);
	padding: var(--nbf-space-2);
	border-radius: var(--nbf-radius-sm);
}

.nbf-header__account:hover {
	color: var(--nbf-color-primary-600);
	text-decoration: none;
}

.nbf-header__cart-icon {
	position: relative;
	display: inline-flex;
}

.nbf-header__cart-icon .nbf-cart-count,
.nbf-header__cart-mobile .nbf-cart-count {
	position: absolute;
	inset-block-start: -0.5rem;
	inset-inline-end: -0.5rem;
}

.nbf-header__cart-mobile {
	position: relative;
}

.nbf-header__cart-mobile .nbf-cart-count {
	background: var(--nbf-color-error);
}

@media (max-width: 1023px) {
	.nbf-header__desktop {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Mobile row
 * ---------------------------------------------------------------- */
.nbf-header__mobile {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--nbf-space-2);
	min-block-size: 3.75rem;
	padding-block: var(--nbf-space-2);
}

.nbf-header__brand--centered {
	position: absolute;
	inset-inline: 0;
	margin-inline: auto;
	inline-size: fit-content;
	pointer-events: none;
}

.nbf-header__brand--centered a {
	pointer-events: auto;
}

.nbf-header__mobile-actions {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-2);
}

@media (max-width: 1023px) {
	.nbf-header__mobile {
		display: flex;
		position: relative;
	}

	.nbf-header__brand-name {
		font-size: var(--nbf-fs-lg);
	}
}

/* ------------------------------------------------------------------
 * Search overlay + mobile menu
 * ---------------------------------------------------------------- */
.nbf-search-overlay .nbf-modal__body {
	display: grid;
	gap: var(--nbf-space-2);
	align-content: start;
}

/* Desktop: the same overlay renders as a centered modal, not fullscreen. */
@media (min-width: 768px) {
	.nbf-search-overlay {
		inline-size: min(28rem, calc(100vw - 2 * var(--nbf-space-4)));
	}
}

.nbf-mobile-menu__list {
	list-style: none;
	margin: 0 0 var(--nbf-space-4);
	padding: 0;
	display: grid;
}

.nbf-mobile-menu__list a {
	display: block;
	padding: var(--nbf-space-3) var(--nbf-space-2);
	border-block-end: 1px solid var(--nbf-color-border);
	color: var(--nbf-color-text);
	font-weight: var(--nbf-fw-medium);
}

.nbf-mobile-menu__list a:hover {
	color: var(--nbf-color-primary-600);
	text-decoration: none;
}

.nbf-mobile-menu__list .sub-menu {
	list-style: none;
	margin: 0;
	padding-inline-start: var(--nbf-space-4);
}

.nbf-mobile-menu__list .sub-menu a {
	font-weight: var(--nbf-fw-regular);
	font-size: var(--nbf-fs-sm);
	color: var(--nbf-color-text-2);
}

.nbf-mobile-menu__meta {
	display: grid;
	gap: var(--nbf-space-1);
}

.nbf-mobile-menu__link {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-2);
	padding: var(--nbf-space-3) var(--nbf-space-2);
	color: var(--nbf-color-text-2);
	border-radius: var(--nbf-radius-sm);
}

.nbf-mobile-menu__link:hover {
	background: var(--nbf-color-primary-50);
	color: var(--nbf-color-primary-600);
	text-decoration: none;
}

/* Body scroll lock while an overlay dialog is open (JS adds the class). */
html.nbf-scroll-lock,
html.nbf-scroll-lock body {
	overflow: hidden;
}