/*
 * Site header component.
 *
 * Self-contained: everything the header renders is styled here, so the header
 * can be changed or replaced without touching base.css or a page sheet. Loads
 * after base.css and before the page-scoped sheets.
 *
 * Two size variants, both from the design spec:
 *
 *   inner (default)  padding 20px 32px, 40px mark, 21px wordmark
 *   .lb-header--home padding 22px 32px, 46px mark, 23px wordmark
 *
 * The header measures itself into --lb-header-h (sticky-stack.js), so growing
 * or shrinking it here cannot desync the filter bar and sidebar beneath it.
 */

/* ---------------------------------------------------------------- Shell -- */

/*
 * The header is the flex row itself - no inner container. It runs full width
 * with its own inline padding rather than the 1400px content container, which
 * is what keeps the brand at the page edge on wide screens.
 */
.lb-header {
	position: sticky;
	top: var(--lb-sticky-header);
	z-index: var(--lb-z-header);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding: 20px 32px;
	background: var(--lb-paper);
	transition: background var(--lb-dur) var(--lb-ease);
}

.lb-header--home {
	padding-block: 22px;
}

/*
 * Blur appears only once the page has actually moved, and the header carries
 * no shadow: the sticky filter bar beneath it owns the one shadow in the
 * stack, and two blurred bars must never overlap.
 */
.lb-header.is-scrolled {
	background: rgba(251, 249, 246, .9);
	backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------------- Brand -- */

.lb-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	flex-shrink: 0;
	color: var(--lb-ink);
}

.lb-header--home .lb-header__brand {
	gap: 12px;
}

/* A rounded-square tile, not a circle. Circles are the language of the utility
   controls - search, arrows, close - and cropping the ornate mark into one both
   clips the letterforms and makes the brand read as another button. */
.lb-header__mark {
	width: 40px;
	height: 40px;
	border-radius: var(--lb-r-control);
	object-fit: cover;
	display: block;
}

.lb-header--home .lb-header__mark {
	width: 46px;
	height: 46px;
}

/* Newsreader is self-hosted at 300 only - any heavier value synthesises. */
.lb-header__name {
	font-family: var(--lb-font-serif);
	font-size: 21px;
	font-weight: 300;
	white-space: nowrap;
}

.lb-header--home .lb-header__name {
	font-size: 23px;
	letter-spacing: .01em;
}

/* ------------------------------------------------------------------ Nav -- */

/* The nav is offset past the header's own 18px gap; the actions cluster takes
   the remaining width with margin-left:auto, so the nav is not a flex filler. */
.lb-header__nav {
	margin-left: 20px;
	min-width: 0;
}

.lb-header--home .lb-header__nav {
	margin-left: 24px;
}

.lb-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lb-s1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-menu > li {
	position: relative;
}

.lb-menu > li > a {
	display: inline-flex;
	align-items: center;
	padding: 10px 15px;
	border-radius: var(--lb-r-pill);
	color: var(--lb-ink-2);
	font-size: 13px;
	transition: background var(--lb-dur) var(--lb-ease),
	            color var(--lb-dur) var(--lb-ease);
}

.lb-header--home .lb-menu > li > a {
	padding: 10px 16px;
}

.lb-menu > li > a:hover,
.lb-menu > li.current-menu-item > a,
.lb-menu > li.current-menu-ancestor > a {
	background: var(--lb-nav-hover);
	color: var(--lb-ink);
}

/* Sub-menus stay simple: below 900px the parent theme's mobile menu takes
   over the whole navigation. */
.lb-menu .sub-menu {
	display: none;
	position: absolute;
	z-index: 2;
	min-width: 200px;
	margin-top: var(--lb-s2);
	padding: var(--lb-s2);
	border-radius: var(--lb-r-thumb);
	background: var(--lb-surface);
	box-shadow: var(--lb-sh-panel);
	list-style: none;
}

.lb-menu > li:hover > .sub-menu,
.lb-menu > li:focus-within > .sub-menu {
	display: block;
}

.lb-menu .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--lb-r-thumb);
	color: var(--lb-ink);
	font-size: 13.5px;
}

.lb-menu .sub-menu a:hover {
	background: var(--lb-linen);
}

/* -------------------------------------------------------------- Actions -- */

.lb-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex-shrink: 0;
}

/*
 * Search and the mobile toggle are the same control: a hairline circle on the
 * paper ground that inverts to ink on hover. Both are declared here rather
 * than reusing .lb-circle, which fills white and belongs to card chrome.
 */
.lb-scope .lb-header__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	padding: 0;
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-r-pill);
	background: transparent;
	color: var(--lb-ink-2);
	cursor: pointer;
	transition: background var(--lb-dur) var(--lb-ease),
	            color var(--lb-dur) var(--lb-ease),
	            border-color var(--lb-dur) var(--lb-ease);
}

.lb-scope .lb-header__circle:hover {
	background: var(--lb-ink);
	border-color: var(--lb-ink);
	color: var(--lb-paper);
}

.lb-header__circle .lb-glyph {
	font-size: 14px;
	line-height: 1;
}

/* The quote pill: ink on paper, going violet on hover like every ink pill. */
.lb-scope .lb-header__cart {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	padding: 13px 22px;
	border: 0;
	border-radius: var(--lb-r-pill);
	background: var(--lb-ink);
	color: var(--lb-paper);
	font-family: var(--lb-font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	transition: background var(--lb-dur) var(--lb-ease);
}

.lb-scope .lb-header__cart:hover {
	background: var(--lb-violet);
	color: var(--lb-paper);
}

/* rentopian-sync adds icon-badge to the count, which the parent styles as a
   corner dot. Both selectors resolve to the same sand counter. */
.lb-header__cart-count,
.lb-scope .lb-header__cart .icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding-inline: 5px;
	border-radius: var(--lb-r-pill);
	background: var(--lb-sand);
	color: var(--lb-ink);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.lb-header__burger {
	display: none;
}

/* ----------------------------------------------------------- Responsive -- */

/* Below 900px the inline nav is replaced by the parent theme's mobile menu.
   The brand and the quote pill stay, so nothing becomes unreachable. */
@media (max-width: 899px) {
	.lb-header,
	.lb-header--home {
		padding: 20px 24px;
	}

	.lb-header__nav {
		display: none;
	}

	.lb-header__burger {
		display: inline-flex;
	}
}

@media (max-width: 767px) {
	.lb-header,
	.lb-header--home {
		padding: 14px 20px;
	}

	.lb-header--home .lb-header__mark {
		width: 40px;
		height: 40px;
	}

	.lb-header--home .lb-header__name {
		font-size: 21px;
	}
}

/* At phone widths the row would wrap onto a second line, which doubles the
   measured header height and pushes every sticky offset below it down. The
   count badge carries the meaning, so the label is what gives way. */
@media (max-width: 599px) {
	.lb-header__name,
	.lb-header--home .lb-header__name {
		font-size: 19px;
	}

	.lb-header__cart-text {
		display: none;
	}

	.lb-scope .lb-header__cart {
		padding: 12px 16px;
	}
}

/* ------------------------------------------------- Categories dropdown --- */

/*
 * The category list is the one menu that can outgrow the screen, so it scrolls
 * on its own instead of running off the bottom. The height is capped in rem so
 * the cap tracks the user's text size rather than a fixed pixel count.
 *
 * Opening is CSS only: `.lb-menu > li:hover` and `:focus-within` already do it
 * for any menu item with children, so the keyboard path works with no script.
 */
.lb-menu__cats > a {
	gap: 6px;
}

.lb-menu__caret {
	font-size: 10px;
	line-height: 1;
	transition: transform var(--lb-dur) var(--lb-ease);
}

.lb-menu__cats:hover > a .lb-menu__caret,
.lb-menu__cats:focus-within > a .lb-menu__caret {
	transform: rotate(180deg);
}

/*
 * The panel is pulled up against the trigger and the gap repainted as its own
 * padding. Left as a real gap, the pointer would be over neither element while
 * crossing it and the menu would close on the way down.
 *
 * Scrolling is on the panel so a long catalogue cannot run off the bottom of
 * the screen. The cap is in rem, so it tracks the reader's text size.
 */
/* Written as `.lb-menu .lb-menu__cats-list` on purpose: `.lb-menu .sub-menu`
   above is two classes, and a one-class rule loses to it on margin-top however
   far down the file it sits - which left the hover gap this rule removes. */
.lb-menu .lb-menu__cats-list {
	max-height: 26rem;
	margin-top: 0;
	padding-top: calc(var(--lb-s2) * 2);
	padding-right: var(--lb-s1);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--lb-line) transparent;
}

.lb-menu .lb-menu__cats-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lb-s3);
}

.lb-menu__cat-count {
	flex: none;
	min-width: 22px;
	padding: 2px 6px;
	border-radius: var(--lb-r-pill);
	background: var(--lb-linen);
	color: var(--lb-mute);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.lb-menu__cats-list a:hover .lb-menu__cat-count {
	background: var(--lb-surface);
	color: var(--lb-ink);
}

/* Chromium still needs the vendor pseudo-elements for a thin scrollbar. */
.lb-menu .lb-menu__cats-list::-webkit-scrollbar { width: 6px; }
.lb-menu .lb-menu__cats-list::-webkit-scrollbar-track { background: transparent; }

.lb-menu .lb-menu__cats-list::-webkit-scrollbar-thumb {
	background: var(--lb-line);
	border-radius: var(--lb-r-pill);
}