/*
 * Front-page merged top bar: cart, category navigation, currency, account.
 *
 * Loaded only by header-frontpage.php, and every rule is scoped under
 * .wge-topbar--merged, which only that template emits. Nothing here can reach
 * the shop, archive or product headers.
 *
 * Colours and type are taken from what the theme already renders: bar #000,
 * brand red #a12324, headings "Bebas Neue", body Lato.
 *
 * On mobile the WGE Mobile UX plugin pins .shop-header-bar and republishes its
 * measured height as --wge-bar-h, so the chip row is accounted for on its own:
 * the bar reports 97px instead of 52px and page content still starts below it.
 * That is 45px more permanently-fixed header on a phone; see README.
 */

.wge-topbar--merged {
	--wge-tn-bg: #000;
	--wge-tn-fg: #fff;
	--wge-tn-muted: #9a9a9a;
	--wge-tn-line: #232323;
	--wge-tn-accent: #a12324;
	--wge-tn-accent-lite: #ff5f5f;
	--wge-tn-h: 44px;

	position: relative;
	z-index: 900;
}

/*
 * The mega panels are positioned against this box, so they line up with the
 * bar's own content column rather than the viewport.
 */
.wge-topbar--merged > .shop-header-bar.inner {
	position: relative;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	min-height: var(--wge-tn-h);
}

.wge-topbar--merged .header-bar-left,
.wge-topbar--merged .header-bar-right {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.wge-topbar--merged .header-bar-right {
	gap: 12px;
}

/* The search form used to live here. If the currency switcher is not
   rendering, its empty wrapper should not hold open a gap. */
.wge-topbar--merged .header-bar-right > div:empty {
	display: none;
}

/* ---------------------------------------------------------------- nav ---- */

.wge-topnav {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
}

.wge-topnav__list {
	display: flex;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* static, so the panels resolve against .shop-header-bar.inner */
.wge-topnav__item {
	position: static;
	display: flex;
	margin: 0;
}

.wge-topnav__link {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 13px;
	color: var(--wge-tn-fg);
	text-decoration: none;
	font-family: "bebas neue", "Bebas Neue", sans-serif;
	font-size: 19px;
	line-height: 1;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.14s ease, color 0.14s ease;
}

.wge-topnav__link.is-accent {
	color: var(--wge-tn-accent-lite);
}

.wge-topnav__link:hover,
.wge-topnav__link:focus-visible,
.wge-topnav__item.has-panel:hover > .wge-topnav__link,
.wge-topnav__item.has-panel:focus-within > .wge-topnav__link {
	background: var(--wge-tn-accent);
	color: var(--wge-tn-fg);
	text-decoration: none;
}

.wge-topnav__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.wge-topnav__caret {
	width: 0;
	height: 0;
	margin-top: 2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	opacity: 0.7;
}

/* -------------------------------------------------------------- panel ---- */

.wge-topnav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	padding: 22px 0 24px;
	background: #fff;
	border-bottom: 3px solid var(--wge-tn-accent);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.wge-topnav__item.has-panel:hover .wge-topnav__panel,
.wge-topnav__item.has-panel:focus-within .wge-topnav__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.wge-topnav__panel-inner {
	padding: 0 4px;
}

.wge-topnav__eyebrow {
	margin: 0 0 12px;
	font-family: Lato, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8a8a8a;
}

.wge-topnav__cols {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 5;
	column-gap: 26px;
}

.wge-topnav__cols li {
	break-inside: avoid;
	margin: 0;
}

.wge-topnav__cols a {
	display: block;
	padding: 5px 0;
	color: #141414;
	text-decoration: none;
	font-family: "bebas neue", "Bebas Neue", sans-serif;
	font-size: 17px;
	line-height: 1.25;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.wge-topnav__cols a:hover,
.wge-topnav__cols a:focus-visible {
	color: var(--wge-tn-accent);
	text-decoration: none;
}

.wge-topnav__all {
	display: inline-block;
	margin-top: 18px;
	padding-bottom: 2px;
	border-bottom: 2px solid var(--wge-tn-accent);
	color: var(--wge-tn-accent);
	text-decoration: none;
	font-family: "bebas neue", "Bebas Neue", sans-serif;
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.wge-topnav__all:hover {
	color: #111;
	border-bottom-color: #111;
	text-decoration: none;
}

/* --------------------------------------------------- narrow desktop ------ */

@media (max-width: 1200px) {
	.wge-topnav__link {
		padding: 0 10px;
		font-size: 18px;
		letter-spacing: 1px;
	}

	.wge-topnav__cols {
		columns: 4;
	}
}

/* -------------------------------------------------------------- mobile --- */

@media (max-width: 900px) {

	/* Row 1 keeps cart / currency / account. The nav wraps onto its own
	   full-width row underneath and scrolls sideways.

	   Side padding is moved off the bar and onto the individual rows, so the
	   chip strip can run the full width without a negative-margin breakout
	   that has to guess what the bar's padding currently is. */
	.wge-topbar--merged,
	.wge-topbar--merged > .shop-header-bar.inner {
		padding-left: 0;
		padding-right: 0;
	}

	.wge-topbar--merged > .shop-header-bar.inner {
		flex-wrap: wrap;
		row-gap: 0;
	}

	.wge-topbar--merged .header-bar-left {
		order: 1;
		padding-left: 12px;
	}

	.wge-topbar--merged .header-bar-right {
		order: 2;
		margin-left: auto;
		padding-right: 12px;
	}

	.wge-topnav {
		order: 3;
		flex: 0 0 100%;
		width: 100%;
		margin: 0;
		border-top: 1px solid var(--wge-tn-line);
	}

	.wge-topnav__list {
		justify-content: flex-start;
		padding: 0 12px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}

	.wge-topnav__list::-webkit-scrollbar {
		display: none;
	}

	.wge-topnav__item {
		scroll-snap-align: start;
	}

	.wge-topnav__link {
		min-height: 44px; /* matches --wge-tap in wge-mobile-ux */
		padding: 0 12px;
		font-size: 18px;
	}

	/* Hover panels are useless on touch: the top-level links go straight to
	   the category archives instead. */
	.wge-topnav__caret,
	.wge-topnav__panel {
		display: none !important;
	}

	/* Fade only the trailing edge, so a cut-off chip reads as "scrolls".
	   A leading fade would dim the first chip even at rest. */
	@supports (mask-image: linear-gradient(90deg, #000, transparent)) {
		.wge-topnav {
			-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
			mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
		}
	}
}

@media (max-width: 380px) {
	.wge-topnav__link {
		padding: 0 10px;
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wge-topnav__link,
	.wge-topnav__panel {
		transition: none;
	}
}

/* ------------------------------------------------------ optional: sticky --
 *
 * Not on by default. The bar is the first child of #masthead, and a sticky
 * child only travels as far as its parent's box, so pinning the bar alone
 * would need it moved out of the header. Making the whole header sticky works
 * without moving anything, at the cost of ~140px of viewport on desktop.
 *
 * To try it, uncomment:
 *
 * @media (min-width: 901px) {
 *     #masthead { position: sticky; top: 0; z-index: 900; background: #fff; }
 *     body.admin-bar #masthead { top: 32px; }
 * }
 */