/*
 * Header bar — complements the flex markup in the `header` template part.
 *
 * Layout: .jw-header is one flex row (space-between, centred):
 *   .jw-header__left  = site logo + city tagline
 *   nav.tjw-mega-nav  = primary mega navigation
 *   .jw-header__right = utility icons (search, account) + mini-cart
 *
 * .jw-header carries the `tjw` class, so brand tokens (--bg/--ink/--line/…)
 * resolve here. Literal hex fallbacks are avoided for that reason.
 */

/* sticky 60px bar reaching the full viewport width. Positioning lives on the
   template-part wrapper (outside .tjw, so no tokens here); the visible fill +
   hairline live on .jw-header, which carries `tjw` and can use brand tokens. */
header.wp-block-template-part:has(.jw-header) {
	position: sticky;
	top: 0;
	z-index: 1000;
}
.jw-header {
	width: 100%;
	min-height: 60px;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}

/* ---------- left: logo + city ---------- */
.jw-header__left {
	gap: 14px;
}
/* The current logo is a very wide wordmark (~17:1), so cap by WIDTH; height
   follows the aspect ratio and stays slim in the 60px bar. */
.jw-header__left .wp-block-site-logo {
	width: auto;
}
.jw-header__left .wp-block-site-logo img {
	width: auto;
	max-width: clamp(190px, 25vw, 320px);
	max-height: 44px;
	height: auto;
}
.jw-header__city {
	font-family: var(--mono);
	font-size: var(--fs-3xs);
	letter-spacing: var(--tr-wider);
	text-transform: uppercase;
	color: var(--ink-40);
	white-space: nowrap;
}
@media (max-width: 1100px) { .jw-header__city { display: none; } }

/* ---------- right: utility ---------- */
.jw-header__right {
	gap: var(--sp-4);
}
.jw-header__right .jw-util {
	display: inline-flex;
	align-items: center;
	color: var(--ink-60);
	transition: color 200ms var(--ease);
}
.jw-header__right .jw-util:hover {
	color: var(--ink);
}
/* keep the mini-cart compact and on-brand */
.jw-header__right .wp-block-woocommerce-mini-cart {
	color: var(--ink-60);
}
/* Swap WooCommerce's trolley glyph for a shopping-bag icon matching the search /
   account utility icons (viewBox 20, 1.4 stroke), while keeping the live count
   badge and the slide-out mini-cart drawer intact. */
.jw-header__right .wc-block-mini-cart__icon { display: none; }
.jw-header__right .wc-block-mini-cart__button {
	color: var(--ink-60);
	transition: color 200ms var(--ease);
	/* shrink the WC button chrome so the bag matches the 18px utility icons and
	   sits vertically centred alongside search/account and the mobile burger. */
	padding: 0;
	min-width: 0;
	line-height: 0;
	display: inline-flex;
	align-items: center;
}
.jw-header__right .wp-block-woocommerce-mini-cart {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}
.jw-header__right .wc-block-mini-cart__button:hover { color: var(--ink); }
.jw-header__right .wc-block-mini-cart__quantity-badge {
	position: relative;
	display: inline-flex;
	width: 18px;
	height: 18px;
}
.jw-header__right .wc-block-mini-cart__quantity-badge::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h11l.6 9.3a1.4 1.4 0 0 1-1.4 1.5H5.3a1.4 1.4 0 0 1-1.4-1.5Z'/%3E%3Cpath d='M7 6.5V5.5a3 3 0 0 1 6 0V6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h11l.6 9.3a1.4 1.4 0 0 1-1.4 1.5H5.3a1.4 1.4 0 0 1-1.4-1.5Z'/%3E%3Cpath d='M7 6.5V5.5a3 3 0 0 1 6 0V6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Recolour WooCommerce's live count badge off its default green to brand Peach.
   The mini-cart block applies the badge colours at runtime by INVERTING the
   element's CSS: it uses the computed `color` as the badge background and the
   computed `background-color` as the numeral (see mini-cart.js badgeBackground/
   TextColor). So to get a Peach pill with an Onyx numeral we set them swapped:
   `color` = Peach, `background-color` = Onyx. No !important — that would override
   the inline style WC writes and break the swap. Tokens keep the dark theme working. */
.jw-header__right .wc-block-mini-cart__badge {
	color: var(--wp--preset--color--accent);            /* Peach #cd8f60 -> badge background */
	background-color: var(--wp--preset--color--primary); /* Onyx #161616 -> badge numeral */
	border: 0;
}

/* ----------------------------------------------------------------------------
   Header live product search. `.jw-search` is a native <details> disclosure:
   the magnifier is the <summary>, the panel a product search <form>. Without JS
   it submits to /?s=…&post_type=product; search.js adds the live results list.
   Styled with the shared .tjw tokens (available because the header carries .tjw).
   ---------------------------------------------------------------------------- */
.jw-header__right .jw-search { position: relative; display: inline-flex; }
.jw-header__right .jw-search > summary {
	list-style: none; cursor: pointer; display: inline-flex; align-items: center;
	color: var(--ink-60); transition: color 200ms var(--ease);
}
.jw-header__right .jw-search > summary::-webkit-details-marker { display: none; }
.jw-header__right .jw-search > summary:hover,
.jw-header__right .jw-search[open] > summary { color: var(--ink); }

.jw-search__panel {
	position: absolute; top: calc(100% + 14px); right: 0; z-index: 60;
	width: min(360px, calc(100vw - 32px));
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--mediumlight);
	border-radius: 2px; padding: var(--sp-4);
}
.jw-search__input {
	width: 100%; background: transparent; border: 0;
	border-bottom: 1px solid var(--wp--preset--color--mediumlight); border-radius: 0;
	padding: 8px 0; color: var(--ink); font-family: var(--sans); font-size: 15px;
}
.jw-search__input:focus { border-bottom-color: var(--ink); outline: none; }
.jw-search__input::placeholder { color: var(--ink-40); }

.jw-search__results:not([hidden]) { display: block; margin-top: var(--sp-3); max-height: 62vh; overflow-y: auto; }
.jw-search__results .res {
	display: flex; align-items: center; gap: var(--sp-3); padding: 8px 4px;
	color: var(--ink); text-decoration: none; border-radius: 2px;
}
.jw-search__results .res:hover,
.jw-search__results .res[aria-selected="true"] { background: var(--bg-2); }
.jw-search__results .res__thumb {
	width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 2px; background: #fff;
}
.jw-search__results .res__thumb--empty { background: var(--bg-2); }
.jw-search__results .res__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jw-search__results .res__name {
	font-family: var(--serif); font-size: 15px; font-weight: 500; line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jw-search__results .res__meta {
	font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-40);
}
.jw-search__results .res__all {
	display: block; margin-top: 6px; padding: 10px 4px 2px; border-top: 1px solid var(--line);
	font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ink-60); text-decoration: none;
}
.jw-search__results .res__all:hover { color: var(--ink); }
.jw-search__empty {
	margin: var(--sp-3) 0 0; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-60);
}

/* On mobile/tablet the burger (injected by mega-nav.js) sits at the far right;
   the utility icons stay visible alongside it. */
@media (max-width: 1180px) {
	/* Group the utility icons + burger together at the right edge so the bag sits
	   right next to the burger, and let the logo claim the space on the left.
	   The header group is is-content-justification-space-between, which strands the
	   icons mid-bar. Switch to flex-start and push the icon cluster (with the burger
	   right after it) to the end with margin-left:auto so they pack together. */
	/* the header's own flex `gap` sits between the icon cluster and the burger too,
	   so keep it small here and let margin-left:auto open the big logo↔cluster gap.
	   Result: bag sits right next to the burger. Shrunk from --sp-4 (16px) — the
	   logotype's "THE" prefix reads small, so the whole utility+burger cluster is
	   trimmed down to free up more width for the wordmark (2026-07-04). */
	.tjw.jw-header { justify-content: flex-start; gap: var(--sp-2); }
	/* NB: core's `.is-layout-flex > :is(*,div){margin:0}` (0,1,1) and Greyd's
	   `.tjw .wp-block-group{margin:0}` (0,2,0) zero our margins — so these must be
	   qualified to 0,3,0 to actually push the cluster right. */
	.tjw.jw-header .jw-header__right { margin-left: auto; gap: var(--sp-2); }
	.tjw.jw-header .tjw-burger { margin-left: 0; }

	/* Utility icons (search/account/wishlist) are raw inline SVGs with width="18"
	   height="18" HTML attributes (set in functions.php's render markup) — override
	   here rather than touching the PHP, since a CSS width/height beats a
	   presentational HTML attribute regardless of source order. */
	.jw-header__right .jw-util svg { width: 15px; height: 15px; }
	.jw-header__right .wc-block-mini-cart__quantity-badge { width: 15px; height: 15px; }

	/* Larger wordmark to fill the freed space. The logo is a ~17:1 horizontal
	   lockup, so WIDTH is its visual size; height follows the ratio and stays slim
	   in the bar. Explicit width (not max-width) so it actually scales UP past the
	   block's 300px default; srcset supplies the higher-res source. Capped so it
	   never crowds the icons; floored so small phones don't overflow. Bumped
	   2026-07-04 (48vw/360px -> 58vw/390px) now that the icon+burger cluster takes
	   less room — re-test on a real small phone (iPhone SE, 375px) if the floor
	   ever needs raising too. */
	.jw-header__left .wp-block-site-logo,
	.jw-header__left .wp-block-site-logo img {
		width: clamp(190px, 58vw, 390px);
		max-width: none;
		height: auto;
		max-height: 56px;
	}

	/* Firefox-only bug: mega-nav.js locks background scroll by setting
	   `body{position:fixed; top:-Npx}` (see lockScroll() in mega-nav.js) rather
	   than toggling overflow:hidden, specifically so the sticky header can't get
	   knocked out of its stuck position. Chrome/Safari keep the sticky header
	   pinned to the viewport through that trick; Firefox instead re-resolves the
	   header's stuck offset against the now-fixed <body> box, which sits at
	   `top:-scrollY` — so the header (and the logo in it) scrolls out of view by
	   however far down the page you were before opening the drawer. Forcing the
	   header itself to `position:fixed` only while the drawer is open sidesteps
	   the whole ambiguity: a fixed element's containing block is always the
	   viewport, regardless of what position the body has been given. */
	header.wp-block-template-part:has(.tjw-mega-nav.is-open) {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
}