/**
 * header.css
 * ----------
 * Announcement bar, desktop header, nav, search, account, cart, mobile menu.
 *
 * Sticky header (opt-in): add class `wrb-header--sticky` on `.wrb-header` in Site Editor.
 */

/* ==========================================================================
   Root header
   ========================================================================== */

.wrb-header {
	width: 100%;
	background-color: var(--wrb-color-background);
	z-index: 200;
}

.wrb-header--sticky {
	position: sticky;
	top: 0;
}

.wrb-header--sticky .wrb-header__main {
	background-color: var(--wrb-color-background);
	box-shadow: 0 1px 0 var(--wrb-color-border);
	transition: box-shadow var(--wrb-transition);
}

/* Scrolled state — toggled by theme.js when sticky is enabled */
.wrb-header--sticky.is-scrolled .wrb-header__main {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.wrb-announcement-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--wrb-announcement-height);
	padding-inline: var(--wrb-spacing-md);
	padding-block: var(--wrb-spacing-xs);
	background-color: var(--wrb-color-foreground);
	color: var(--wrb-color-background);
	text-align: center;
	font-weight: var(--wrb-header-announcement-weight);
	letter-spacing: var(--wrb-header-announcement-letter-spacing);
	text-transform: var(--wrb-header-announcement-transform);
}

.wrb-announcement-bar__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}

/* ==========================================================================
   Main header bar
   ========================================================================== */

.wrb-header__main {
	width: 100%;
	padding-inline: var(--wrb-spacing-md);
	padding-block: var(--wrb-spacing-sm);
	border-bottom: var(--wrb-header-border-width) solid var(--wrb-color-border);
	background-color: var(--wrb-color-background);
}

.wrb-header__bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wrb-spacing-md);
	width: min(100%, var(--wrb-container-width));
	min-height: var(--wrb-header-height);
	margin-inline: auto;
}

.wrb-header__brand {
	display: flex;
	align-items: center;
	gap: var(--wrb-spacing-sm);
	flex-shrink: 0;
	min-width: 0;
}

.wrb-header__logo img {
	width: auto;
	height: auto;
	max-height: 2.75rem;
}

/* ==========================================================================
   Desktop navigation
   ========================================================================== */

.wrb-header__nav--desktop {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	letter-spacing: var(--wrb-header-nav-letter-spacing);
	text-transform: var(--wrb-header-nav-transform);
	font-size: var(--wp--preset--font-size--sm);
}

/* ==========================================================================
   Utilities: search, account, cart
   ========================================================================== */

.wrb-header__utilities {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--wrb-spacing-sm);
	flex-shrink: 0;
}

.wrb-header__search--desktop {
	min-width: 0;
}

.wrb-header__account,
.wrb-header__cart {
	line-height: 1;
}

/* Mini-cart badge — scoped to our cart class only */
.wrb-header__cart .wc-block-mini-cart__badge {
	background-color: var(--wrb-color-primary);
	color: var(--wrb-color-background);
	border-radius: var(--wrb-radius-full);
	font-size: var(--wp--preset--font-size--xs);
}

/*
 * Mini Cart product row: Woo prints TWO thumbnails
 * (catalog-hidden fallback + linked image). Keep a single image per line.
 */
.wc-block-mini-cart .wc-block-cart-item__image,
.wc-block-mini-cart__drawer .wc-block-cart-item__image {
	position: relative;
	width: 4rem;
	min-width: 4rem;
	flex-shrink: 0;
	overflow: hidden;
}

.wc-block-mini-cart .wc-block-cart-item__image > img,
.wc-block-mini-cart__drawer .wc-block-cart-item__image > img {
	display: none;
}

.wc-block-mini-cart .wc-block-cart-item__image > a,
.wc-block-mini-cart__drawer .wc-block-cart-item__image > a {
	display: block;
	line-height: 0;
}

.wc-block-mini-cart .wc-block-cart-item__image > a[hidden],
.wc-block-mini-cart__drawer .wc-block-cart-item__image > a[hidden] {
	display: none;
}

.wc-block-mini-cart .wc-block-cart-item__image > a img,
.wc-block-mini-cart__drawer .wc-block-cart-item__image > a img {
	display: block;
	width: 4rem;
	height: 4rem;
	object-fit: cover;
}

.wc-block-mini-cart .wc-block-cart-item__image > img:not([hidden]),
.wc-block-mini-cart__drawer .wc-block-cart-item__image > img:not([hidden]) {
	display: block;
	width: 4rem;
	height: 4rem;
	object-fit: cover;
}

/* ==========================================================================
   Hamburger (shown on small screens via responsive.css)
   ========================================================================== */

.wrb-header__menu-toggle {
	display: none;
	margin: 0;
}

.wrb-header__hamburger .wp-element-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem;
	border-color: var(--wrb-color-border);
	/* Visually hide label; keep text in DOM for accessibility */
	font-size: 0;
	line-height: 0;
	color: transparent;
}

.wrb-header__hamburger .wp-element-button::before {
	content: "";
	display: block;
	width: 1.25rem;
	height: 0.125rem;
	background-color: var(--wrb-color-foreground);
	box-shadow:
		0 -0.375rem 0 var(--wrb-color-foreground),
		0 0.375rem 0 var(--wrb-color-foreground);
}

/* ==========================================================================
   Mobile menu drawer
   ========================================================================== */

.wrb-mobile-menu {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1100;
}

.wrb-mobile-menu.is-open {
	display: block;
}

.wrb-mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	background-color: var(--wrb-color-overlay);
	cursor: pointer;
}

.wrb-mobile-menu__panel {
	position: absolute;
	inset: 0 auto 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--wrb-spacing-md);
	width: min(22rem, 90vw);
	height: 100%;
	padding: var(--wrb-spacing-md);
	overflow-y: auto;
	background-color: var(--wrb-color-background);
	border-radius: 0 var(--wrb-radius-lg) var(--wrb-radius-lg) 0;
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
	transform: translateX(-100%);
	transition: transform var(--wrb-transition);
}

.wrb-mobile-menu.is-open .wrb-mobile-menu__panel {
	transform: translateX(0);
}

.wrb-mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var(--wrb-spacing-sm);
}

.wrb-mobile-menu__nav {
	width: 100%;
}

.wrb-mobile-menu__actions {
	display: flex;
	flex-direction: column;
	gap: var(--wrb-spacing-sm);
	padding-top: var(--wrb-spacing-sm);
	border-top: 1px solid var(--wrb-color-border);
}

body.wrb-mobile-menu-is-open {
	overflow: hidden;
}