/**
 * Cool Bear — header / primary navigation component
 *
 * Wordmark lockup (text-only, no image asset) + curated primary nav.
 * Loaded sitewide. Uses theme.json tokens only.
 */

/* --- Logo lockup (yellow box + bear + COOL BEAR UK) ---------------------- */
/* Brand yellow is the logo's own #FFF100 (distinct from the accent token —
   it's an imported brand asset, not a UI accent). */
.cb-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff100;
	border: 1px solid #0d0d0f;
	padding: 0 14px 0 0;
	height: 44px;
	text-decoration: none;
	overflow: hidden;
	/* The header bar is flex nowrap — without this the lockup gets
	   shrunk to a sliver by the search bar's flex-grow. */
	flex: 0 0 auto;
}

.cb-logo__bear {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	display: block;
}

.cb-logo__text {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	color: #0d0d0f;
	line-height: 1;
	white-space: nowrap;
}

.cb-logo:hover .cb-logo__text,
.cb-logo:focus-visible .cb-logo__text {
	color: #0d0d0f;
}

@media (max-width: 480px) {
	.cb-logo { height: 38px; }
	.cb-logo__bear { width: 38px; height: 38px; }
	.cb-logo__text { font-size: 0.92rem; }
}

/* --- Wordmark ------------------------------------------------------------ */
.cb-header__bar .cb-wordmark {
	margin: 0;
}

.cb-header__bar .cb-wordmark a,
.cb-header__bar .cb-wordmark {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}

.cb-header__bar .cb-wordmark a:hover,
.cb-header__bar .cb-wordmark a:focus {
	color: var(--wp--preset--color--text);
}

/* Accent underline cue under the wordmark */
.cb-header__bar .cb-wordmark a {
	display: inline-block;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding-bottom: 2px;
}

/* --- Primary nav -------------------------------------------------------- */
.cb-primary-nav {
	--wp--style--block-gap: 0;
}

.cb-primary-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-muted); /* #B6B6C2 ~9.5:1 on base */
	/* DESIGN.md §3 signature: small tracked all-caps nav. */
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.cb-primary-nav .wp-block-navigation-item__content:hover,
.cb-primary-nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent);
}

/* Active / current page state — accent text + accent underline */
.cb-primary-nav .current-menu-item > .wp-block-navigation-item__content,
.cb-primary-nav .wp-block-navigation-item__content[aria-current="page"],
.cb-primary-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Mobile overlay readability */
.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
}

/* === In-bar search (2026-06-06) ======================================== */
/* The search form moved from its own wp_body_open strip into the header
   bar: wordmark | search | nav (+ Woo-hooked account/cart). Overrides the
   legacy strip styles from breadcrumbs.css. */

/* 2026-07-02: the header bar + utility bar contents were clamped to the 760px
   theme content column — the logo floated ~340px in from the left edge and the
   VAT toggle hung near the middle of the screen. Align both to the same
   widened shell as the homepage sections so the header reads as one balanced
   full-width bar: logo hard left, search centre, nav + basket hard right.
   (!important outguns the wp-container constrained-layout child clamp.) */
.cb-header__bar,
.cb-utilitybar__inner {
	max-width: min(1280px, 94vw) !important;
}

/* The header template part in the DB (Site-Editor customised) carries a
   woocommerce/mini-cart block alongside the theme's own .cb-cart-link —
   two basket icons, the mini-cart one rendering as a grey ghost. Keep the
   designed basket link; suppress the stray block. */
.cb-header__bar .wc-block-mini-cart {
	display: none;
}

.cb-header__bar .cb-search-bar {
	margin: 0 var(--wp--preset--spacing--40, 1rem);
	/* Explicit basis — the form has no intrinsic width, so flex-basis:auto
	   collapsed it to 0px between the nowrap wordmark and nav. Widened so a full
	   SKU is visible while typing (was 280px → SKUs clipped to "sk…"). */
	flex: 0 1 420px;
	min-width: 240px;
	position: relative; /* anchor for the .cb-search-suggest dropdown */
}

.cb-header__bar .cb-search-input {
	height: 40px;
	font-size: 0.9rem;
	border-radius: 8px 0 0 8px;
	padding: 6px 14px;
	min-width: 0;
	transition: border-color 150ms ease-out, max-width 200ms ease-out;
}

.cb-header__bar .cb-search-submit {
	height: 40px;
	width: 40px;
	border-radius: 0 8px 8px 0;
}

/* Core's shortcode block emits NO frontend wrapper — .cb-search-bar is the
   direct flex child. Keep nav labels on one line beside it. */
.cb-header__bar .cb-primary-nav .wp-block-navigation-item__label {
	white-space: nowrap;
}

/* Tablet + mobile: the bar wraps to two rows — wordmark + nav + icons on the
   first row, full-width search on the second. Raised 781→1100 (2026-07-02):
   between ~780 and 1100px the nowrap logo+search+nav row exceeded the viewport
   and produced a horizontal page scroll. */
@media (max-width: 1100px) {
	.cb-header__bar {
		flex-wrap: wrap !important;
		/* D18 — wordmark was flush against the viewport edge on phones. */
		padding-inline: var(--wp--preset--spacing--30, 16px);
	}
	.cb-header__bar .cb-search-bar {
		order: 10;
		flex: 1 1 100%;
		max-width: none;
		margin: var(--wp--preset--spacing--20, 0.5rem) 0 0;
	}
}

/* ── Live search suggestions dropdown ─────────────────────────────────────
   Owns its own width so long SKUs wrap/show in full (the browser-native popup
   clipped them). Anchored to .cb-search-bar (position:relative above). */
.cb-search-suggest {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 0;
	right: auto;
	min-width: 100%;
	width: 460px;
	max-width: min(92vw, 520px);
	max-height: min(70vh, 460px);
	overflow-y: auto;
	background: var(--wp--preset--color--surface-raised, #222228);
	border: 1px solid var(--wp--preset--color--border-strong, #42424e);
	border-radius: 10px;
	box-shadow: 0 18px 48px rgb(0 0 0 / 0.45);
	padding: 6px;
}
.cb-search-suggest[hidden] { display: none; }

.cb-suggest__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 7px;
	text-decoration: none;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.cb-suggest__item:hover,
.cb-suggest__item[aria-selected="true"] {
	background: var(--wp--preset--color--surface, #18181c);
}
.cb-suggest__thumb {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	object-fit: contain;
	background: #fff;
	border-radius: 6px;
}
.cb-suggest__thumb--empty { background: var(--wp--preset--color--surface-sunken, #101014); }
.cb-suggest__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-suggest__title {
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--wp--preset--color--text, #f0f0f2);
	/* allow full SKU/title to wrap rather than clip */
	white-space: normal;
	overflow-wrap: anywhere;
}
.cb-suggest__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cb-suggest__sku {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.72rem;
	color: var(--wp--preset--color--text-subtle, #9898a8);
	overflow-wrap: anywhere;
}
.cb-suggest__price {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent, #e8ff00);
	font-variant-numeric: tabular-nums;
}
.cb-suggest__empty {
	padding: 12px 12px;
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}

/* -------------------------------------------------------------------------
 *  Header basket link — persistent path to cart/checkout (sits OUTSIDE the
 *  mobile overlay nav so it stays tappable). Count hydrated by cart-count.js.
 * ------------------------------------------------------------------------- */
.cb-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 6px;
	border-radius: 8px;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	text-decoration: none;
	transition: color 150ms ease, background-color 150ms ease;
}

.cb-cart-link:hover,
.cb-cart-link:focus-visible {
	color: var(--wp--preset--color--text, #f0f0f2);
	outline: none;
}

.cb-cart-link.has-items {
	color: var(--wp--preset--color--text, #f0f0f2);
}

.cb-cart-link__icon {
	display: block;
	width: 24px;
	height: 24px;
}

.cb-cart-link__count {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent, #e8ff00);
	color: var(--wp--preset--color--base, #0d0d0f);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* === D-hybrid language pass (2026-08-16, premium redesign) ================
   Typography + surface pass only — structure, JS hooks, and a11y unchanged.
   Bear keeps its yellow brand square; the wordmark moves out of the pill
   into Archivo expanded white with a mono subline (the approved mockup
   lockup). Search + VAT lose their yellow fills (audit: accent saturation);
   the accent returns only on hover/focus and the cart count. */

.cb-logo {
	background: none;
	border: 0;
	padding: 0;
	gap: 12px;
}

.cb-logo__bear {
	background: #fff100; /* brand yellow, not the UI accent */
	border: 1px solid #0d0d0f;
}

.cb-logo__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-family: var(--wp--preset--font-family--archivo, var(--wp--preset--font-family--sans));
	font-stretch: 125%;
	font-weight: 900;
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text);
}

.cb-logo:hover .cb-logo__text,
.cb-logo:focus-visible .cb-logo__text {
	color: var(--wp--preset--color--text);
}

.cb-logo__sub {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
	font-stretch: 100%;
	font-size: 8.5px;
	letter-spacing: 0.42em;
	color: var(--wp--preset--color--text-subtle);
}

/* Nav: Archivo expanded 800 — substantial, not letterboxed */
.cb-primary-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--archivo, var(--wp--preset--font-family--sans));
	font-stretch: 110%;
	font-weight: 800;
	font-size: 0.875rem;
	letter-spacing: 0.07em;
}

.cb-primary-nav .wp-block-navigation-item__content:hover,
.cb-primary-nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--text);
	border-bottom-color: var(--wp--preset--color--text);
}

/* Current page keeps the accent underline as the one wayfinding accent */
.cb-primary-nav .current-menu-item > .wp-block-navigation-item__content,
.cb-primary-nav .wp-block-navigation-item__content[aria-current="page"],
.cb-primary-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Search: squared instrument — mono input, ghost submit (yellow fill retired) */
.cb-header__bar .cb-search-input {
	border-radius: 0;
	background: var(--wp--preset--color--surface-sunken, #101014);
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	border-right: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text);
}

.cb-header__bar .cb-search-input::placeholder {
	color: var(--wp--preset--color--text-subtle, #9898a8);
}

.cb-header__bar .cb-search-input:focus {
	border-color: var(--wp--preset--color--border-strong, #42424e);
	outline: none;
}

.cb-header__bar .cb-search-submit {
	border-radius: 0;
	background: transparent;
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cb-header__bar .cb-search-submit:hover,
.cb-header__bar .cb-search-submit:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base, #0d0d0f);
}

/* VAT toggle: mono instrument — active segment is white-on-dark, not yellow */
.cb-header__bar .cb-vat-toggle {
	display: flex;
	border: 1px solid var(--wp--preset--color--border-strong, #42424e);
	border-radius: 0;
	background: none;
	overflow: hidden;
}

.cb-header__bar .cb-vat-toggle__btn {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 11px;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--text-subtle, #9898a8);
	transition: background 0.2s ease, color 0.2s ease;
}

.cb-header__bar .cb-vat-toggle__btn--active {
	background: var(--wp--preset--color--text, #f0f0f2);
	color: var(--wp--preset--color--base, #0d0d0f);
}

/* Vehicle picker strip under the header: mono selects, hairline frame */
.cb-vehicle-picker-bar .cb-vp-select {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	border-radius: 0;
}

.cb-vehicle-picker-bar .cb-vp-find {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 0;
}