/* ==========================================================================
   Biyani Announcements — rotating top bar
   Scoped entirely to .bj-ann / .bj-ann-keep; never edits header.css (owned
   elsewhere) or any other shared theme selector.
   Tokens: biyani-design/tokens.css (--bj-*)
   ========================================================================== */

/* The theme's own .header-store-notice now only carries an inert truthiness
   marker (kept non-empty in PHP so .header-top still renders for the
   currency-switcher placement script that also targets it). Collapse it to
   zero so it never claims flex space next to our own bar. */
header.ts-header .header-top .header-store-notice {
	flex: 0 0 0 !important;
	width: 0 !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
}
.bj-ann-keep {
	display: none !important;
}

.bj-ann {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	height: 18px;
	flex: 1 1 auto;
	min-width: 0;
}
.bj-ann[hidden] {
	display: none !important;
}

/* Fallback: only used if .header-top > .container is ever missing (see
   announcements.js `place()`), so the bar is never silently lost. */
.bj-ann--static {
	height: auto;
	background: var(--bj-ivory-2, #F5EFE5);
	border-bottom: 1px solid var(--bj-line, rgba(28, 26, 23, .12));
	padding: 10px 16px;
}

.bj-ann__left,
.bj-ann__right {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 28%;
}
.bj-ann__right {
	gap: 10px;
}

.bj-ann__brand {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--bj-ink, #1C1A17);
	font-family: var(--bj-font-body, "Jost", sans-serif);
	font-size: 12px;
	letter-spacing: 0.02em;
	text-decoration: none;
}
.bj-ann__brand:hover,
.bj-ann__brand:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bj-ann__center {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex: 1 1 auto;
	min-width: 0;
}

/* Width is set inline by announcements.js: sized to the longest active
   message, capped to the space actually available (never smaller than it
   needs to be, never wider than the row has room for) — fixed once per
   load so rotation between differently-long messages never shifts layout. */
.bj-ann__viewport {
	position: relative;
	flex: 0 0 auto;
	min-width: 0;
	height: 18px;
	overflow: hidden;
}
.bj-ann__track {
	position: relative;
	height: 100%;
}
.bj-ann__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .5s ease, transform .5s ease;
	pointer-events: none;
}
.bj-ann__item.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.bj-ann__item a,
.bj-ann__item span {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: var(--bj-font-body, "Jost", sans-serif);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--bj-ink, #1C1A17);
	text-decoration: none;
}
.bj-ann__item a:hover,
.bj-ann__item a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Arrows: an 18px box keeps the bar's own height unchanged (no layout shift);
   the ::before pseudo (out of flow, doesn't affect sizing) gives the required
   44px tap target without inflating the row. */
.bj-ann__arrow {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--bj-ink, #1C1A17);
	cursor: pointer;
	transition: background .2s ease, box-shadow .2s ease;
}
.bj-ann__arrow svg {
	width: 14px;
	height: 14px;
	display: block;
}
.bj-ann__arrow::before {
	content: "";
	position: absolute;
	inset: -13px; /* 18px box + 13px each side = 44px effective tap target */
}
.bj-ann__arrow[hidden] {
	display: none;
}

.bj-ann__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--bj-ink, #1C1A17);
	border-radius: 999px;
	transition: background .2s ease, box-shadow .2s ease;
}
.bj-ann__social svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Glass hover/focus pop (design-baseline interaction rule, 2026-09-26):
   glass background + thin gold focus ring, no brown/copper fill. */
.bj-ann__arrow:hover,
.bj-ann__social:hover {
	background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85));
	box-shadow: var(--bj-glass-shadow-solid, 0 1px 2px rgba(18, 14, 10, .06));
}
.bj-ann__arrow:focus-visible,
.bj-ann__social:focus-visible,
.bj-ann__brand:focus-visible {
	background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85));
	outline: 2px solid var(--bj-gold-light, #D9A850);
	outline-offset: 2px;
}

/* announcements.js toggles this once it has measured whether the left line,
   the message and the social icons actually fit the bar side by side —
   never a guessed pixel breakpoint. */
.bj-ann--narrow .bj-ann__left,
.bj-ann--narrow .bj-ann__right {
	display: none;
}
.bj-ann--narrow .bj-ann__center {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.bj-ann__item {
		transition: none;
	}
}