/* ==========================================================================
   Certified Bling — header / navigation (Phase 1)

   FINAL (locked at Phase 1 approval): a child-theme header.php override,
   not Blocksy's native panel-builder — see header.php's own comment for
   the full reasoning. This is a deliberate, permanent architecture choice,
   not a placeholder.

   Desktop: logo left · primary nav center-right · utilities + primary CTA
   right (same arrangement already proven on the current site). Transparent
   over a hero, solid (Liquid Glass bar) elsewhere and on scroll.
   ========================================================================== */

/* The glass background lives on `.cb-header::before`, NOT on `.cb-header`
   itself — deliberate. `backdrop-filter` on an element establishes a new
   containing block for any `position:fixed` DESCENDANT, and `.cb-nav` /
   `.cb-search` are both nested inside `.cb-header`. With the filter on the
   real element, their `inset:0 0 0 auto` resolved against the ~68px header
   box instead of the viewport — the mobile nav drawer rendered ~120px tall
   instead of full-height. Found live during the Phase 1 visual QA pass
   (confirmed via CDP: removing backdrop-filter from `.cb-header` alone
   changed the drawer's measured height from 121px to a correct 844px) and
   fixed by moving the filter to a `::before` layer, which has no
   descendants of its own to break — `.cb-header` stays filter-free so its
   real children keep the viewport as their containing block. */
.cb-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--cb-z-header);
	color: var(--cb-white);
}
.cb-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background var(--cb-transition), border-color var(--cb-transition), backdrop-filter var(--cb-transition);
}
body:not(.cb-has-hero) .cb-header::before,
.cb-header.is-solid::before {
	background: var(--glass-bg-strong);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	border-bottom-color: var(--glass-border);
}
@media (prefers-reduced-transparency: reduce) {
	body:not(.cb-has-hero) .cb-header::before,
	.cb-header.is-solid::before { background: var(--cb-black); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
body:not(.cb-has-hero) { padding-top: var(--cb-header-h); }

.cb-header__bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: var(--cb-space-m);
	min-height: var(--cb-header-h);
}

.cb-header__brand { margin: 0; justify-self: start; }
/* Phase 14: the official horizontal logo (Media Library attachment,
   cbb_get_logo_image() — never a filesystem path) replaced the plain-text
   wordmark this rule used to style directly. .cb-header__wordmark is now
   just the clickable/hover wrapper; .cb-header__logo sizes the actual
   mark — height-constrained (width:auto preserves its real 3:1 aspect
   ratio, never stretched/squashed), a restrained size matching the small
   nav-row footprint the text wordmark held before it. */
.cb-header__wordmark { display: inline-flex; align-items: center; line-height: 0; }
.cb-header__wordmark:hover { text-decoration: none; opacity: 0.7; }
.cb-header__logo { height: clamp(20px, 14px + 1.6vw, 30px); width: auto; display: block; }

/* --- Desktop primary nav ------------------------------------------- *
   Premium/spacious, not a dense shop-nav wall: 5 items, generous gaps,
   mono-tracked small caps. Shop/Collections/Create Custom each carry a
   dropdown (.cb-nav__item--dropdown); Our Vision/Partners are plain links. */
.cb-nav { justify-self: end; }
.cb-nav__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center;
	gap: clamp(1.25rem, 0.4rem + 2.6vw, 3rem);
}
.cb-nav__item { position: relative; }
.cb-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	/* Suisse Int'l per the Phase 1 typography lock — primary nav is UI. */
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--cb-tracking-label);
	color: var(--cb-white);
	padding-block: 0.4rem;
	background: none; border: 0; cursor: pointer;
	transition: opacity var(--cb-transition);
}
.cb-nav__link:hover { opacity: 0.55; text-decoration: none; }

/* Small caret on dropdown-bearing items only — CSS-only triangle, no icon
   asset, rotates on open (both hover-open and JS .is-open share this). */
.cb-nav__item--dropdown .cb-nav__link::after {
	content: '';
	width: 6px; height: 6px;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--cb-transition);
	opacity: 0.7;
}
.cb-nav__item--dropdown:hover .cb-nav__link::after,
.cb-nav__item--dropdown:focus-within .cb-nav__link::after,
.cb-nav__item--dropdown.is-open .cb-nav__link::after {
	transform: rotate(225deg) translateY(1px);
}

/* --- Dropdown panel — Liquid Glass, genuinely floating above content,
   exactly the case liquid-glass.css's own rules call out for its use. Opens
   on :hover/:focus-within for pointer/keyboard with no JS required;
   interactions.js adds a click-toggle path for touch (no hover state) and
   closes a sibling dropdown when another opens. */
.cb-nav__dropdown {
	position: absolute;
	top: 100%; left: 50%;
	transform: translate(-50%, 6px);
	min-width: 13rem;
	margin-top: var(--cb-space-s);
	padding: var(--cb-space-s) 0;
	background: var(--glass-bg-strong);
	backdrop-filter: blur(20px) saturate(150%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--cb-transition), transform var(--cb-transition), visibility 0s linear var(--cb-transition);
}
.cb-nav__item--dropdown:hover .cb-nav__dropdown,
.cb-nav__item--dropdown:focus-within .cb-nav__dropdown,
.cb-nav__item--dropdown.is-open .cb-nav__dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
	transition: opacity var(--cb-transition), transform var(--cb-transition), visibility 0s;
}
@media (prefers-reduced-transparency: reduce) {
	.cb-nav__dropdown { background: var(--cb-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cb-nav__dropdown { transition: opacity var(--cb-transition); transform: translate(-50%, 0); }
}
.cb-nav__dropdown-list { list-style: none; margin: 0; padding: 0; }
.cb-nav__dropdown-list a,
.cb-nav__dropdown-list .cb-nav__link--pending {
	display: block;
	padding: 0.65rem var(--cb-space-m);
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-xs);
	font-weight: 400;
	color: var(--cb-white);
	white-space: nowrap;
	transition: opacity var(--cb-transition);
}
.cb-nav__dropdown-list a:hover { opacity: 0.6; text-decoration: none; }
.cb-nav__link--pending { color: var(--cb-mute); cursor: default; }
.cb-nav__pending-tag { font-family: var(--cb-font-mono); font-size: 0.9em; letter-spacing: 0.08em; text-transform: uppercase; }
.cb-nav__dropdown-all {
	display: block;
	margin-top: 0.4rem;
	padding: 0.65rem var(--cb-space-m) 0.3rem;
	border-top: 1px solid var(--glass-border);
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cb-gold);
}
.cb-nav__dropdown-all:hover { opacity: 0.7; text-decoration: none; }

/* --- Utility icons --------------------------------------------------- */
.cb-header__utils { justify-self: end; display: flex; align-items: center; gap: clamp(0.4rem, 0.2rem + 0.8vw, 0.9rem); }
.cb-header__util {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: var(--cb-touch-min); height: var(--cb-touch-min);
	color: var(--cb-white);
	transition: opacity var(--cb-transition);
}
.cb-header__util:hover { opacity: 0.55; text-decoration: none; }
.cb-header__cart-count {
	position: absolute; top: 2px; right: 0;
	min-width: 16px; height: 16px; padding: 0 4px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--cb-gold); color: var(--cb-black);
	font-family: var(--cb-font-mono); font-size: 10px; line-height: 1;
	border-radius: 999px;
}
.cb-header__cart-count.is-empty { display: none; }

/* --- Mobile toggle ----------------------------------------------- */
.cb-header__toggle { display: none; width: var(--cb-touch-min); height: var(--cb-touch-min); margin-left: -8px; align-items: center; justify-content: center; color: var(--cb-white); }
.cb-header__toggle-icon { display: inline-flex; }

/* --- Search drawer (Liquid Glass) ----------------------------------- */
.cb-search { border-top: 1px solid var(--glass-border); overflow: hidden; }
.cb-search[hidden] { display: none; }
.cb-search__inner { display: flex; align-items: center; gap: var(--cb-space-s); padding-block: var(--cb-space-s); }
.cb-search .search-form { flex: 1; display: flex; gap: 0; }
.cb-search .search-form__field {
	flex: 1; background: transparent; border: 0; border-bottom: 1px solid var(--cb-line-soft);
	color: var(--cb-white); padding: 0.75rem 0; font-size: var(--cb-text-lg);
}
.cb-search .search-form__field::placeholder { color: var(--cb-mute); }
.cb-search .search-form__field:focus { outline: none; border-bottom-color: var(--cb-white); }
/* Suisse Int'l per the Phase 1 typography lock — it's a button, not a label. */
.cb-search .search-form__submit { background: transparent; border: 0; color: var(--cb-mute); font-family: var(--cb-font-body); font-weight: 500; font-size: var(--cb-text-xs); text-transform: uppercase; letter-spacing: 0.12em; padding-inline: var(--cb-space-s); }
.cb-search .search-form__submit:hover { color: var(--cb-white); }
.cb-search__close { display: inline-flex; width: var(--cb-touch-min); height: var(--cb-touch-min); align-items: center; justify-content: center; color: var(--cb-mute); }
.cb-search__close:hover { color: var(--cb-white); }

/* ==========================================================================
   Mobile nav drawer — Liquid Glass panel, right-slide, focus-trapped (see
   interactions.js — same proven pattern as the current site's main.js).
   ========================================================================== */
@media (max-width: 900px) {
	.cb-header__bar { grid-template-columns: auto 1fr auto; }
	.cb-header__toggle { display: inline-flex; }
	.cb-header__brand { justify-self: center; }

	.cb-nav {
		position: fixed; inset: 0 0 0 auto;
		width: min(86vw, 380px);
		z-index: var(--cb-z-nav);
		padding: calc(var(--cb-header-h) + 2rem) var(--cb-gutter) var(--cb-gutter);
		transform: translateX(100%);
		/* The comment above always called this a Liquid Glass panel, but no
		   rule ever actually gave it one — it rendered fully transparent,
		   with page text bleeding straight through the nav links. Found live
		   during the Phase 1 visual QA pass; matches .cb-glass-panel--drawer
		   in liquid-glass.css (flat right edge, no stray borders). */
		background: var(--glass-bg-strong);
		backdrop-filter: blur(24px) saturate(150%);
		-webkit-backdrop-filter: blur(24px) saturate(150%);
		border-left: 1px solid var(--glass-border);
		box-shadow: var(--glass-shadow);
		transition: transform var(--cb-transition-slow);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.cb-nav.is-open { transform: translateX(0); }
	@media (prefers-reduced-transparency: reduce) {
		.cb-nav { background: var(--cb-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
	}
	/* Flat vertical list, large touch targets, hairline dividers — same
	   restrained drawer the mobile nav has always used, now with Shop/
	   Collections/Create Custom expanding in place as an accordion instead
	   of the desktop hover-dropdown (mobile has no :hover to rely on). */
	.cb-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.cb-nav__item { width: 100%; border-bottom: 1px solid var(--glass-border); }
	.cb-nav__link {
		display: flex; width: 100%; justify-content: space-between;
		padding-block: 1.15rem; font-size: var(--cb-text-sm);
		min-height: var(--cb-touch-min);
	}

	/* Accordion caret — a plain "+" that rotates to "×" on open, same visual
	   language as the FAQ accordion elsewhere in the system (sections.css /
	   the legacy theme's FAQ), not the desktop triangle caret. */
	.cb-nav__item--dropdown .cb-nav__link::after {
		width: 11px; height: 11px;
		border: 0;
		background:
			linear-gradient(currentColor, currentColor) center / 100% 1.4px no-repeat,
			linear-gradient(currentColor, currentColor) center / 1.4px 100% no-repeat;
		transform: none;
		opacity: 1;
		flex: none;
	}
	.cb-nav__item--dropdown.is-open .cb-nav__link::after { transform: rotate(45deg); }
	.cb-nav__item--dropdown:hover .cb-nav__link::after,
	.cb-nav__item--dropdown:focus-within .cb-nav__link::after { transform: none; }
	.cb-nav__item--dropdown.is-open:hover .cb-nav__link::after,
	.cb-nav__item--dropdown.is-open:focus-within .cb-nav__link::after { transform: rotate(45deg); }

	/* Dropdown becomes an inline accordion panel — no floating/positioned
	   glass panel on mobile, it's already inside the drawer's own glass
	   surface. Collapsed via max-height (animatable, unlike [hidden]) and
	   gated to JS-driven .is-open only (no :hover path on touch). */
	.cb-nav__dropdown {
		position: static;
		transform: none;
		min-width: 0;
		margin: 0;
		padding: 0;
		max-height: 0;
		overflow: hidden;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: max-height var(--cb-transition-slow);
	}
	.cb-nav__item--dropdown:hover .cb-nav__dropdown,
	.cb-nav__item--dropdown:focus-within .cb-nav__dropdown {
		/* Cancel the desktop hover-open behavior entirely on touch/mobile
		   widths — only .is-open (tap) controls it here. */
		max-height: 0; transform: none;
	}
	.cb-nav__item--dropdown.is-open .cb-nav__dropdown { max-height: 70vh; }
	@media (prefers-reduced-motion: reduce) {
		.cb-nav__dropdown { transition: none; }
	}
	.cb-nav__dropdown-list a,
	.cb-nav__dropdown-list .cb-nav__link--pending {
		padding: 0.85rem var(--cb-space-m) 0.85rem calc(var(--cb-space-m) + 0.75rem);
		font-size: var(--cb-text-sm);
		min-height: var(--cb-touch-min);
		display: flex; align-items: center;
	}
	.cb-nav__dropdown-all { padding-left: calc(var(--cb-space-m) + 0.75rem); }

	body.cb-nav-open, body.cb-search-open { overflow: hidden; }
}

@media (min-width: 901px) {
	.cb-header__bar { column-gap: clamp(1.25rem, 0.4rem + 3vw, 3.5rem); }
	.cb-glass-scrim { display: none !important; }
}