/*
 * BuySups header.
 *
 * Loaded on the front end and inside the block editors, so the header in the
 * Site Editor matches what visitors see. Only what theme.json cannot express
 * belongs here: the ticker animation, the pill-shaped controls, and the brand
 * lockup sizing.
 */

.bs-header {
	--bs-navy: var( --wp--preset--color--navy, #0b2c4d );
	--bs-navy-light: var( --wp--preset--color--navy-light, #164a7a );
	--bs-navy-deep: var( --wp--preset--color--navy-deep, #08213a );
	--bs-cyan: var( --wp--preset--color--cyan, #1fc8e3 );
	--bs-cyan-wash: var( --wp--preset--color--cyan-wash, #eaf7fb );
	--bs-cyan-muted: var( --wp--preset--color--cyan-muted, #c7e9f3 );
	--bs-cart-purple: #b18dff;
	--bs-cart-purple-light: #c3a6ff;
	--bs-cart-purple-deep: #9a70f5;
	--bs-cart-badge: #0f5132;
	--bs-header-gutter: clamp( 14px, 3vw, 32px );
	--bs-header-pad-y: clamp( 12px, 1.6vw, 16px );
	--bs-ticker-duration: 42s;
	--bs-account-icon:
	url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.8 20a7.5 7.5 0 0114.4 0'/%3E%3C/svg%3E" );

	position: relative;
	z-index: 20;
}

/* ---------------------------------------------------------------- Ticker */

.bs-ticker {
	overflow: hidden;
}

.bs-ticker__rail {
	width: max-content;
	flex-wrap: nowrap;
	animation: bs-ticker-scroll var( --bs-ticker-duration ) linear infinite;
}

.bs-ticker__track {
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0;
	white-space: nowrap;
}

/*
 * The separator is authored as a coloured "●" so it stays editable as text,
 * but U+25CF sits outside the Outfit latin subsets and falls through to an
 * emoji font that ignores the colour. Hide the glyph and draw the dot instead.
 * An inset shadow rather than a background: the block's inline
 * background-color:rgba(0,0,0,0) would win over any background here.
 */
.bs-ticker__track mark.has-inline-color {
	display: inline-block;
	width: 6px;
	height: 6px;
	font-size: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 3px currentColor;
	vertical-align: middle;
}

/*
 * Three identical tracks sit side by side; shifting the rail by exactly one
 * third lands the second track where the first began, so the loop is seamless.
 */
@keyframes bs-ticker-scroll {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( -33.3333% );
	}
}

.bs-ticker:hover .bs-ticker__rail,
.bs-ticker:focus-within .bs-ticker__rail {
	animation-play-state: paused;
}

@media ( prefers-reduced-motion: reduce ) {
	.bs-ticker__rail {
		animation: none;
	}

	/* Without motion the clones are dead weight and repeat for screen readers. */
	.bs-ticker__track:not( :first-child ) {
		display: none;
	}

	.bs-ticker__track:first-child {
		white-space: normal;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* ------------------------------------------------------------- Main bar */

.bs-header__inner {
	max-width: 1680px;
	margin-inline: auto;
	padding: var( --bs-header-pad-y ) var( --bs-header-gutter );
	column-gap: clamp( 16px, 2.4vw, 36px );
}

.bs-header__brand {
	flex: 0 0 auto;
}

.bs-header__brand .wp-block-image {
	margin: 0;
}

.bs-header__brand img {
	display: block;
	width: auto;
}

/* One combined lockup; the intrinsic 4.28:1 ratio sets the width. */
.bs-header__logo img {
	height: clamp( 28px, 2.8vw, 36px );
}

/* ---------------------------------------------------------- Navigation */

.bs-header__nav {
	flex: 1 1 280px;
	min-width: 0;
}

.bs-header__nav .wp-block-navigation-item__content {
	font-size: clamp( 14px, 1.05vw, 15.5px );
	color: var( --bs-navy );
	white-space: nowrap;
}

.bs-header__nav .wp-block-navigation-item__content:hover,
.bs-header__nav .wp-block-navigation-item__content:focus {
	color: var( --wp--preset--color--cyan-deep, #1b7fa8 );
}

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

.bs-header__actions {
	flex: 0 1 auto;
	margin-inline-start: auto;
}

/* Search, account and the Woo account icon share one pill treatment. */
.bs-header__actions .bs-search-link,
.bs-header__actions .wp-block-loginout a,
.bs-header__actions .wp-block-woocommerce-customer-account {
	display: flex;
	align-items: center;
	height: 40px;
	border: 1.5px solid var( --bs-cyan );
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}

/*
 * Search. The control is a link, not core's expanding field: clicking it
 * loads the search results page, where the searching happens.
 */
.bs-header__actions .bs-search-link {
	justify-content: center;
	width: 40px;
	padding: 0;
	color: var( --bs-navy );
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.2s ease;
}

.bs-header__actions .bs-search-link:hover,
.bs-header__actions .bs-search-link:focus-visible {
	background: var( --bs-cyan-wash );
	color: var( --bs-navy );
	border-color: var( --bs-cyan-muted );
}

.bs-header__actions .bs-search-link svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.bs-header__actions .wp-block-loginout a,
.bs-header__actions .wp-block-woocommerce-customer-account {
	justify-content: center;
	width: 40px;
	padding: 0;
	color: var( --bs-navy );
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
}

/*
 * Without WooCommerce this is core's Login/out block, which renders a text
 * link; the pill is icon-sized, so swap the label for the design's account
 * glyph. currentColor keeps it in step with the hover state.
 */
.bs-header__actions .wp-block-loginout a {
	font-size: 0;
}

.bs-header__actions .wp-block-loginout a::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var( --bs-account-icon ) center / contain no-repeat;
	mask: var( --bs-account-icon ) center / contain no-repeat;
}

.bs-header__actions .wp-block-loginout a:hover,
.bs-header__actions .wp-block-woocommerce-customer-account:hover {
	background: var( --bs-cyan-wash );
	border-color: var( --bs-cyan-muted );
}

/* The Woo account block renders its own label alongside the icon. */
.bs-header__actions .wp-block-woocommerce-customer-account .label {
	display: none;
}

/*
 * The block ships no dimensions of its own — its link and glyph both collapse
 * to nothing inside a flex row unless the theme sizes them.
 */
.bs-header__actions .wp-block-woocommerce-customer-account .wc-block-customer-account__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.bs-header__actions .wp-block-woocommerce-customer-account svg {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	fill: currentColor;
}

/* -------------------------------------------------------------- Cart */

.bs-cart .wp-block-button__link {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: var( --bs-cart-purple ) !important;
	color: #000 !important;
	font-family: var( --wp--preset--font-family--outfit, Outfit, sans-serif );
	font-size: 15px;
	font-weight: 600;
	padding: 0 19px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bs-cart .wp-block-button__link:hover {
	background: var( --bs-cart-purple-light ) !important;
	color: #000 !important;
}

.bs-cart .wp-block-button__link:active {
	background: var( --bs-cart-purple-deep ) !important;
}



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

@media ( max-width: 781px ) {
	/* Core collapses the navigation to its overlay toggle here, so the nav no
	   longer needs to claim a row of its own. */
	.bs-header__nav {
		flex: 0 0 auto;
	}

	.bs-header__inner {
		column-gap: 12px;
	}
}

/* ------------------------------------------------- Slide-out cart trigger */

/*
 * Our own cart button (inc/cart-drawer.php) in place of Woo's Mini Cart block.
 * Shapes match the block rules above so the header is unchanged visually — the
 * only difference is what the click opens.
 */
.bs-header__actions .bs-cart {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: var( --bs-cart-purple );
	color: #000;
	font-family: var( --wp--preset--font-family--outfit, Outfit, sans-serif );
	font-size: 15px;
	font-weight: 600;
	padding: 0 19px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bs-header__actions .bs-cart:hover {
	background: var( --bs-cart-purple-light );
	color: #000;
}

.bs-header__actions .bs-cart:active {
	background: var( --bs-cart-purple-deep );
}

.bs-header__actions .bs-cart__icon {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
}

.bs-header__actions .bs-cart__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 21px;
	height: 21px;
	border-radius: 999px;
	background: var( --bs-cart-badge );
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	padding: 0 6px;
}

/* A "0" bubble is noise: an empty cart should read as no badge at all. */
.bs-header__actions .bs-cart__count.is-empty {
	display: none;
}

/* Phone: the pill keeps the glyph and the count, drops the word. */
@media ( max-width: 600px ) {
	.bs-header__actions .bs-cart {
		padding: 0 14px;
		gap: 7px;
	}

	.bs-header__actions .bs-cart__label {
		display: none;
	}
}