/*
 * Global header chrome (Phase 3B — docs/HEADER-IMPLEMENTATION.md):
 * announcement bar + desktop main row (logo, dominant search, account, cart).
 * Category row / mega-menu live in components/mega-menu.css; mobile header
 * + drawer live in components/mobile-nav.css — kept separate since each is a
 * distinct concern, per the project's "no duplicate CSS, component-first"
 * rule, not because they overlap.
 */

.bholats-header { position: relative; z-index: var(--z-sticky); }

/* --- Announcement bar: continuous ticker ---
   Same seamless-loop technique as .bholats-brand-marquee (homepage.css) —
   two identical .bholats-announcement__set content blocks side by side,
   track animated exactly -50% so the loop never visibly jumps or resets.
   Not reinvented; that component's own writeup covers the reasoning for
   this pattern in more depth.

   30s for one full -50% cycle, at 4 message-repeats per set (see the
   template's $bholats_repeat_count) — timed against the actual rendered
   text so a single repeat of "Free delivery on orders of R3,000 or more"
   (~41 characters) takes a little over 2 seconds to fully cross a 1440px
   viewport at this speed, comfortably within normal reading pace, not a
   guessed number. */
.bholats-announcement {
	position: relative;
	display: flex;
	align-items: stretch;
	background: var(--color-brand-ink);
	color: var(--color-text-on-brand);
}

.bholats-announcement__viewport {
	flex: 1;
	overflow: hidden;
	padding-inline: var(--space-4) var(--space-8);
	/* Soft fade at both edges, same as the brand marquee, so the strip
	   reads as continuous motion rather than a hard-clipped window. */
	-webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 94%, transparent);
	mask-image: linear-gradient(to right, transparent, black 4%, black 94%, transparent);
}

.bholats-announcement__track {
	display: flex;
	width: max-content;
	animation: bholats-announcement-scroll 30s linear infinite;
}

.bholats-announcement:hover .bholats-announcement__track,
.bholats-announcement:focus-within .bholats-announcement__track {
	animation-play-state: paused;
}

@keyframes bholats-announcement-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.bholats-announcement__set {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.bholats-announcement__msg {
	padding-inline: var(--space-6);
	font-size: var(--text-xs);
	white-space: nowrap;
}

.bholats-announcement__dismiss {
	position: absolute;
	right: var(--space-2);
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--color-text-on-brand);
	opacity: 0.75;
	border-radius: var(--radius-sm);
}
.bholats-announcement__dismiss:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.bholats-announcement__dismiss svg { width: var(--icon-sm); height: var(--icon-sm); }
.bholats-announcement[hidden] { display: none; }

/* Reduced motion: same treatment .bholats-brand-marquee already uses —
   stop the animation, discard the aria-hidden duplicate set entirely (a
   second static copy of the same message would just be visual noise once
   nothing is scrolling), and show exactly one instance of the message,
   centered, matching the bar's original static appearance. */
@media (prefers-reduced-motion: reduce) {
	.bholats-announcement__viewport {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.bholats-announcement__track {
		animation: none;
		transform: none;
		width: 100%;
	}
	.bholats-announcement__set {
		width: 100%;
		justify-content: center;
	}
	.bholats-announcement__set[aria-hidden="true"] { display: none; }
	.bholats-announcement__msg:not(:first-child) { display: none; }
	.bholats-announcement__msg { text-align: center; }
}

/* --- Desktop main row --- */

.bholats-main-row {
	display: none;
	background: var(--color-surface);
	border-bottom: var(--border-default);
}

@media (min-width: 1024px) {
	.bholats-main-row { display: block; }
}

.bholats-main-row__inner {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding-block: var(--space-4);
}

.bholats-main-row__logo { display: flex; align-items: center; flex-shrink: 0; }
/*
 * 72px (not the old 52px): the supplied logo is a full lockup (circuit/globe
 * emblem stacked above a 3-line "BHOLAT'S / IT WORLD / TECH MADE EASY"
 * wordmark), not a single-line horizontal mark, so it needs real height for
 * the wordmark to stay legible -- verified by rendering the actual asset at
 * 52/64/72px and reading it back; 52px and 64px left "IT WORLD" an
 * illegible blur, 72px is the smallest size where it's reliably readable.
 * See docs/BRAND-IDENTITY-IMPLEMENTATION.md.
 */
.bholats-main-row__logo :is(img, svg) { height: 72px; width: auto; object-fit: contain; }

.bholats-main-row__search { flex: 1; max-width: 640px; }

.bholats-main-row__actions {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	flex-shrink: 0;
}

.bholats-main-row__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	position: relative;
	color: var(--color-text-primary);
	text-decoration: none;
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	min-width: 44px;
}
.bholats-main-row__action:hover { color: var(--color-brand-blue); }
.bholats-main-row__action svg { width: var(--icon-lg); height: var(--icon-lg); }

.bholats-main-row__cart-count {
	position: absolute;
	top: -4px;
	right: -10px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--radius-full);
	background: var(--color-sale);
	color: var(--color-text-on-brand);
	font-size: 10px;
	font-weight: var(--font-weight-bold);
	line-height: 18px;
	text-align: center;
}
.bholats-main-row__cart-count[hidden] { display: none; }

/* --- Sticky show/hide (docs/HEADER-IMPLEMENTATION.md "Sticky behaviour") ---
   Both the desktop main row and the mobile header opt in via this shared
   class.

   Phase 3K.1 bugfix: this used to be `position: sticky; top: 0;`, but a
   sticky element's containing block is its nearest block ancestor — here
   that's <header>, whose own box is only ~168px tall (announcement bar +
   main row + category row, all in normal flow). A sticky child can't stick
   past its containing block's bottom edge, so once the page scrolled past
   ~168px, <header> itself had scrolled out of view and dragged the "stuck"
   row with it — permanently, since scrolling back up doesn't help until you
   scroll back above that ~168px point. Confirmed via getBoundingClientRect():
   at scrollY 850 the row measured top -852px / bottom -767px, still fully
   off-screen even after scrolling back up 50px.

   position:fixed has no such limit (its containing block is always the
   viewport), so assets/js/header.js now toggles this class between normal
   flow and `.bholats-sticky-header--fixed` once the user scrolls past the
   row's own natural resting position, backed by a `.bholats-sticky-header__spacer`
   sibling (see header.php) sized to match so the category row below doesn't
   jump when this row leaves flow. The scroll-direction hide/show
   (--hidden) behaviour is unchanged and layers on top of this. */
.bholats-sticky-header {
	position: relative;
	transition: transform var(--duration-slow) var(--ease-standard);
}

.bholats-sticky-header--fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-sticky);
}

/* Phase 3K.2 QA fix: position:fixed's containing block is always the
   viewport, so — unlike the old position:sticky row, which inherited the
   page's own admin-bar-aware top offset for free because it stayed in
   normal flow — a fixed row pins to true viewport top:0 and visually
   collides with #wpadminbar (also position:fixed, top:0, z-index:99999,
   32px tall on desktop). Confirmed via screenshot: with no offset, the
   logo, search field, and account/cart controls' top edges render clipped
   behind the black admin bar once the row is pinned. WordPress core adds
   an `.admin-bar` class to <body> whenever the toolbar is showing — used
   here the same way core itself recommends themes handle fixed headers.
   Desktop only (min-width matches .bholats-main-row's own >=1024px
   breakpoint above): below 1024px the mobile header is the only sticky
   row, and WP's own admin bar switches to position:absolute (scrolls with
   the page) at its <=782px breakpoint, so it has already scrolled out of
   view by the time the mobile row ever reaches its own --fixed state
   (confirmed empirically — no overlap occurs there, so no offset is
   needed and none is added, to avoid introducing an unrequired gap). */
@media (min-width: 1024px) {
	body.admin-bar .bholats-sticky-header--fixed { top: 32px; }
}

.bholats-sticky-header--hidden { transform: translateY(-100%); }

.bholats-sticky-header__spacer {
	height: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.bholats-sticky-header { transition: none; }
}