/* Header — single row, three zones, ROCK SOLID across pages.
 *
 * Desktop: a 1fr | auto | 1fr grid. The equal 1fr side columns guarantee the
 * centre cluster (Onze producten · search · cart) sits at the TRUE centre of
 * the bar, whatever the logo or tabs width. The search has a FIXED pixel width
 * (no vw, no flex-grow) so it never resizes with the viewport, and combined
 * with `scrollbar-gutter: stable` (style.css) the layout width is identical
 * whether or not a page scrolls — so the header never shifts between pages.
 *   [ logo ]            [ Onze producten · search · cart ]            [ tabs ]
 * Mobile (<1025px): burger + logo on row 1, the center group full-width on
 * row 2; mega + tabs hidden (drawer takes over).
 */

.bollaert-header-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	flex-wrap: nowrap;
	min-height: 58px;
}

/* --- Zone 1: logo — brand mark badge (icon only) --- */
.bollaert-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex: 1 1 0; /* left zone (~25%) — logo stays left */
	min-width: 0;
}
/* Horizontal wordmark logo; fixed height beats the WooCommerce content img rule. */
.bollaert-header-row .bollaert-logo {
	height: 44px !important;
	width: auto !important;
	max-width: 100%;
	flex-shrink: 0;
	object-fit: contain;
}

/* --- Zone 2 (grid col 2): Onze producten · search · cart — true centre --- */
.bollaert-header-row__center {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	justify-content: space-between; /* mega left · search · cart right */
	flex: 0 0 50%;                  /* block 2 = half the bar */
	min-width: 0;
}
.bollaert-header-row__center .bollaert-nav__mega-parent { flex: 0 0 auto; }
/* Search = 60% of the central block, so it's nice and wide. */
.bollaert-header-row__center .bollaert-search {
	flex: 0 1 60%;
	min-width: 0;
}

/* Taller controls fill the taller navbar row */
.bollaert-header-row__center .bollaert-search .wp-block-search__input,
.bollaert-header-row__center .bollaert-search input[type="search"] {
	min-height: 44px;
}
.bollaert-header-row .bollaert-nav__mega-btn {
	padding-top: 0.85em;
	padding-bottom: 0.85em;
	transition: transform 0.18s ease, background-color 0.15s ease, color 0.15s ease;
}
/* "Onze producten": keep its blue background, just add the size transition */
.bollaert-header-row .bollaert-nav__mega-btn:hover,
.bollaert-header-row .bollaert-nav__mega-parent:focus-within .bollaert-nav__mega-btn {
	transform: scale(1.05);
}

/* --- Cart (icon over small label, like the tabs) --- */
.bollaert-cart {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
	padding: 0.2em 0.5em;
	border-radius: 10px;
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.1;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.18s ease;
}
/* Cart: no background box on hover — just grow a touch (like the tabs) */
.bollaert-cart:hover,
.bollaert-cart:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--brand-dark);
	transform: scale(1.08);
	outline: none;
}
.bollaert-cart svg { display: block; width: 24px; height: 24px; }
.bollaert-cart__label { display: block; white-space: nowrap; }

/* Red count bubble on the cart icon */
.bollaert-cart__icon-wrap {
	position: relative;
	display: inline-flex;
	line-height: 0;
}
.bollaert-cart__count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--wp--preset--color--danger);
	color: var(--wp--preset--color--white);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 0 2px var(--wp--preset--color--white);
}
.bollaert-cart__count.is-empty { display: none; }

/* --- Zone 3: tabs (icon over small label) — right zone (~25%) --- */
.bollaert-header-row .bollaert-nav__secondary {
	flex: 1 1 0;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--2);
}
.bollaert-header-row .bollaert-nav__secondary a {
	flex-direction: column;
	gap: 2px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.1;
	padding: 0.2em 0.5em;
}
.bollaert-header-row .bollaert-nav__tab-icon { width: 20px; height: 20px; }

/* Bigger, clearer navbar icons — all kept vertically centred, so the layout
   and alignment don't shift. */
.bollaert-header-row .bollaert-nav__mega-icon { width: 22px; height: 22px; }
.bollaert-header-row .bollaert-search__icon { width: 22px; height: 22px; }

/* Active tab: NO solid fill (that blue pill was too heavy) — just a darker,
   bold, slightly enlarged label + icon, with a smooth size/colour transition.
   scale() is a transform (no reflow), so the fixed header never shifts. */
.bollaert-header-row .bollaert-nav__secondary a {
	transition: transform 0.18s ease, color 0.15s ease, background-color 0.15s ease;
}
/* Tabs: no background highlight on hover — only a size bump (the active tab is
   the one that stays bold + enlarged). */
.bollaert-header-row .bollaert-nav__secondary a:hover { background: transparent; color: var(--wp--preset--color--brand-dark); transform: scale(1.08); }
.bollaert-header-row .bollaert-nav__secondary a:hover .bollaert-nav__tab-icon { color: var(--wp--preset--color--brand); }
.bollaert-header-row .bollaert-nav__secondary a.is-active {
	background: transparent;
	color: #1f5f7a;
	font-weight: 700;
	transform: scale(1.12);
}
.bollaert-header-row .bollaert-nav__secondary a.is-active .bollaert-nav__tab-icon { color: #1f5f7a; }
.bollaert-header-row .bollaert-nav__secondary a.is-active:hover {
	background: transparent;
	color: #14455c;
	transform: scale(1.15);
}

/* No blue focus rectangle anywhere in the utility bar, header, mega menu or
   drawer — that outline broke the design. Tap highlight is killed too. */
.bollaert-headerbar a, .bollaert-headerbar button,
.bollaert-header a, .bollaert-header button,
.bollaert-drawer a, .bollaert-drawer button { -webkit-tap-highlight-color: transparent; }
.bollaert-headerbar :focus, .bollaert-headerbar :focus-visible,
.bollaert-header :focus, .bollaert-header :focus-visible,
.bollaert-drawer :focus, .bollaert-drawer :focus-visible { outline: none; }

/* --- Hamburger (mobile only) --- */
.bollaert-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--brand-dark);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.bollaert-burger:hover { background: var(--wp--preset--color--brand-tint); }

/* --- Mobile (<1025px) --- */
@media (max-width: 1024.98px) {
	.bollaert-burger { display: inline-flex; }

	/* Back to flex for the wrapping two-row mobile header. */
	.bollaert-header-row { display: flex; flex-wrap: wrap; row-gap: var(--wp--preset--spacing--3); }

	.bollaert-header-row__center .bollaert-nav__mega-parent,
	.bollaert-header-row .bollaert-nav__secondary {
		display: none;
	}

	/* Row 1: burger | logo (centred) | cart. Row 2: full-width search.
	   `display: contents` dissolves the center wrapper so the cart and search
	   become direct items of the header row and can be ordered / wrapped. */
	.bollaert-burger { order: 0; }
	.bollaert-logo-link { order: 1; flex: 1 1 auto; justify-content: center; }
	.bollaert-header-row__center { display: contents; }
	.bollaert-header-row__center .bollaert-cart { order: 2; }
	.bollaert-header-row__center .bollaert-search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
	}

	.bollaert-cart { padding: 0.4em; }
	.bollaert-cart__label {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}