/* ==========================================================================
   Certified Bling — layout
   Containers, site header (+ nav, search, utilities), scrim, home end marker.
   Mobile-first. Footer chrome is styled in components.css (not rendered in
   Phase 1 but kept harmless).
   ========================================================================== */

.cb-container {
	width: 100%;
	max-width: var(--cb-wide);
	margin-inline: auto;
	padding-inline: var(--cb-gutter);
}

.site-main { display: block; }

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--cb-z-header);
	color: var(--cb-white);
	background: transparent;
	transition: background var(--cb-transition), border-color var(--cb-transition),
		backdrop-filter var(--cb-transition);
	border-bottom: 1px solid transparent;
}

.site-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);
}

/* Solid state: applied immediately on non-hero views (body:not(.cb-has-hero))
   and toggled by JS on scroll for hero views. Fully opaque so hero type never
   bleeds through; a hairline marks the edge. */
body:not(.cb-has-hero) .site-header,
.site-header.is-solid {
	background: var(--cb-black);
	border-bottom-color: var(--cb-line-soft);
}

/* When the drawer/search is open on mobile the header stays solid regardless
   of scroll (JS also forces .is-solid). */
.site-header.is-solid { box-shadow: 0 1px 0 0 var(--cb-line-faint); }

body:not(.cb-has-hero) { padding-top: var(--cb-header-h); }

/* --- Wordmark ------------------------------------------------------- */

.site-header__brand { margin: 0; justify-self: start; }

.site-header__wordmark {
	font-family: var(--cb-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
	white-space: nowrap;
	line-height: 1;
}
.site-header__wordmark:hover { text-decoration: none; opacity: 0.7; }

/* --- Primary nav (desktop) ---------------------------------------- */

.site-nav { justify-self: end; }

.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 0.4rem + 2.4vw, 2.75rem);
}

.site-nav__list a {
	display: inline-block;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--cb-tracking-label);
	color: var(--cb-white);
	padding-block: 0.4rem;
	transition: opacity var(--cb-transition);
}
.site-nav__list a:hover { opacity: 0.55; text-decoration: none; }
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a { text-decoration: underline; text-underline-offset: 0.3em; }

/* --- Utility icons ------------------------------------------------- */

.site-header__utils {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 0.2rem + 1vw, 1rem);
}

.site-header__util {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--cb-white);
	transition: opacity var(--cb-transition);
}
.site-header__util:hover { opacity: 0.55; text-decoration: none; }

.site-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-white);
	color: var(--cb-black);
	font-family: var(--cb-font-mono);
	font-size: 10px;
	line-height: 1;
	border-radius: 999px;
}
.site-header__cart-count.is-empty { display: none; }

/* --- Mobile toggle ---------------------------------------------- */

.site-header__toggle {
	display: none;
	width: 40px;
	height: 40px;
	margin-left: -8px;
	align-items: center;
	justify-content: center;
	color: var(--cb-white);
}
.site-header__toggle-icon { display: inline-flex; }

/* --- Search drawer -------------------------------------------- */

.site-search {
	border-top: 1px solid var(--cb-line-soft);
	background: var(--cb-black);
	overflow: hidden;
}
.site-search[hidden] { display: none; }

.site-search__inner {
	display: flex;
	align-items: center;
	gap: var(--cb-space-s);
	padding-block: var(--cb-space-s);
}
.site-search .search-form { flex: 1; display: flex; gap: 0; }
.site-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);
}
.site-search .search-form__field::placeholder { color: var(--cb-mute); }
.site-search .search-form__field:focus { outline: none; border-bottom-color: var(--cb-white); }
.site-search .search-form__submit {
	background: transparent;
	border: 0;
	color: var(--cb-mute);
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding-inline: var(--cb-space-s);
}
.site-search .search-form__submit:hover { color: var(--cb-white); }
.site-search__close {
	display: inline-flex;
	width: 40px; height: 40px;
	align-items: center; justify-content: center;
	color: var(--cb-mute);
}
.site-search__close:hover { color: var(--cb-white); }

/* ==========================================================================
   Scrim (shared by mobile nav + search on small screens)
   ========================================================================== */

.cb-scrim {
	position: fixed;
	inset: 0;
	z-index: var(--cb-z-overlay);
	background: color-mix(in srgb, var(--cb-black) 55%, transparent);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--cb-transition);
}
.cb-scrim[hidden] { display: none; }
.cb-scrim.is-active { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Home end marker (temporary — matches the section above it; removed when the
   Footer phase lands).
   ========================================================================== */

.cb-home-endcap {
	min-height: 28vh;
	display: grid;
	place-items: center;
	background: var(--cb-black);
	color: var(--cb-white);
}
.cb-home-endcap__label {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--cb-tracking-label);
	color: color-mix(in srgb, var(--cb-mute) 60%, transparent);
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 900px) {
	.site-header__bar {
		grid-template-columns: auto 1fr auto;
	}
	.site-header__toggle { display: inline-flex; }

	/* Wordmark centers between toggle and utils */
	.site-header__brand { justify-self: center; }

	.site-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(84vw, 360px);
		z-index: var(--cb-z-nav);
		background: var(--cb-black);
		border-left: 1px solid var(--cb-line-soft);
		padding: calc(var(--cb-header-h) + 2rem) var(--cb-gutter) var(--cb-gutter);
		transform: translateX(100%);
		transition: transform var(--cb-transition-slow);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.site-nav.is-open { transform: translateX(0); }

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}
	.site-nav__list li { width: 100%; border-bottom: 1px solid var(--cb-line-faint); }
	.site-nav__list a {
		display: block;
		width: 100%;
		padding-block: 1.15rem;
		font-size: var(--cb-text-sm);
	}

	/* Account icon is available inside the drawer context via header utils;
	   keep utils compact on mobile. */
	.site-header__util--account { display: none; }

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

@media (min-width: 901px) {
	/* Desktop: nav sits to the right, utilities far right. Give nav breathing
	   room from the wordmark. */
	.site-header__bar { column-gap: clamp(1.5rem, 0.5rem + 4vw, 4rem); }
	.cb-scrim { display: none !important; }
}