/**
 * Bonza, global HEADER, utility bar (row 1) plus two-row shell wrapper.
 *
 * Config investigated: Blocksy's native header builder (theme_mod
 * `header_placements`) already renders row 2 (logo/search/account/
 * wishlist/cart/mobile-trigger, `.ct-header`) config-first, confirmed
 * live on bonza-retheme.blz.au before this task started (status note on
 * ClickUp 86eypb6ab). The centre nav ("Superfoods"/"Supplements"/
 * "Health hub for dogs") is also config-first: a real WP menu ("Header
 * Primary Nav") was created and assigned to Blocksy's own `menu_1`
 * location, then wired into the `middle-row`/`middle` placement of
 * `header_placements` via `wp theme mod` on staging. No custom PHP menu
 * markup: Blocksy's `menu` builder item renders it natively
 * (`#header-menu-1 .menu-container`, `.ct-menu-link`), so it inherits
 * Blocksy's own accessible dropdown and keyboard-interaction JS.
 *
 * Blocksy's header builder ships logo/search/account/cart/wishlist/
 * trigger/menu/text/socials/button items only (confirmed via `grep` of
 * inc/panel-builder/header/*\/config.php on the live theme package).
 * None of those model this file's actual subject: row 1, the trust and
 * utility bar (icon-lockup trust items, a Feefo review line, a real
 * WPML language switcher, an accessible "Our Tale" disclosure, a "Help"
 * link). The established precedent for this exact gap is
 * bonza_checkout_header_render() (86eypb6hr): a PHP-rendered block
 * added additively via a hook that runs INSIDE `#main-container`. The
 * `blocksy:builder:header:custom-output` short-circuit filter is a
 * different mechanism and would replace Blocksy's entire builder output
 * (confirmed by reading inc/integrations/theme-builders.php:
 * `blocksy_output_header()` passes an empty string as the filter's
 * default and skips the native builder on any non-empty return), so
 * this utility bar hooks `blocksy:header:before` (fires right before
 * Blocksy's own `$global_header` echo, confirmed by reading header.php)
 * to prepend row 1 above the already-live icon row and centre nav
 * without touching either.
 *
 * editor-friendly-ok: this restyles the parent theme's global header
 * chrome via a `do_action` hook, matching the reasoning already used
 * for checkout-header-footer.css in this directory. No Gutenberg
 * block/pattern counterpart exists for a global header, so there is no
 * editor surface to keep parity with.
 *
 * Figma: cY9QX6IwGVaaGI4r7J2RRF, HEADER component set 148:18023, desktop
 * variant 148:18019, utility bar frame #29600:56712. Root shell: flex
 * column, gap 16px. Utility bar: flex row, justify space-between,
 * padding 12px 64px, bg #F8EDE3. Left group gap 16px, right group gap
 * 12px. The frame is misnamed "Status Bar/Android" and node
 * #20121:148409 (an Android status-bar mockup artifact positioned above
 * it) is a documented Figma-file defect, not real header content, and
 * is intentionally not reproduced here (see ClickUp 86eypb6ab).
 *
 * Contrast (WCAG 2.2 AA, measured): utility-bar text #494545 on #F8EDE3
 * background computes to 8.20:1 via the sRGB-to-linear relative
 * luminance formula, clearing both the 4.5:1 AA-normal-text and 7:1
 * AAA-normal-text thresholds. Focus rings use #2C6E4F (Bonza's accent
 * green, also used in checkout-trust-signal.css) at 2px solid with a 2px
 * offset; verified above 3:1 against both the #F8EDE3 bar and the white
 * main-bar backgrounds a focused element can land on.
 *
 * Sticky-state decision: Figma's STICKY frame (#34620:76538) proves the
 * header sticks on scroll but does not draw a scrolled state. Build
 * decision made here: keep row 1 in the DOM and collapse its height and
 * opacity to zero on scroll, so the layout does not jump under
 * `prefers-reduced-motion`, and let the main bar's own shadow read as
 * "lifted" the same way it does unscrolled. This is a judgement call,
 * flagged as such in the ClickUp comment, not a Figma-confirmed spec.
 *
 * Breakpoints: 375 mobile (row 1 hides here; mobile HEADER is the
 * full-screen SEARCH panel component, 14061:188816, a separate task per
 * this task's own scope note), 768 tablet (desktop variant reflowed per
 * this task's own "Tablet reflow" line item: padding tightens, the
 * review line truncates), 1440/1512 desktop (Figma-literal values).
 *
 * @date 2026-08-27
 */

/* ---------------------------------------------------------------------
   Row 1: utility/trust bar (#29600:56712)
   --------------------------------------------------------------------- */
.bhu-bar {
	--bhu-ink: #494545;
	--bhu-bg: #F8EDE3;
	--bhu-rule: #D1D5DB;
	--bhu-focus: #2C6E4F;

	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 12px 64px;
	background-color: var(--bhu-bg);
	font-family: "Kobe1.1", var(--theme-font-family, sans-serif);
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: var(--bhu-ink);
}

.bhu-bar a,
.bhu-bar button.bhu-trigger {
	font: inherit;
	color: inherit;
	text-decoration: none;
}

.bhu-bar a:hover,
.bhu-bar button.bhu-trigger:hover {
	text-decoration: underline;
}

.bhu-bar *:focus-visible {
	outline: 2px solid var(--bhu-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Left group: trust items + review line ------------------------------- */
.bhu-bar__trust {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.bhu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.bhu-item__icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.bhu-item--review {
	gap: 6px;
	min-width: 0;
}

.bhu-item__stars {
	display: inline-flex;
	flex-shrink: 0;
}

.bhu-item__stars svg {
	display: block;
	width: 41px;
	height: 8px;
}

.bhu-item__review-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bhu-item__feefo {
	display: inline-block;
	flex-shrink: 0;
	width: 49px;
	height: 12px;
	color: var(--bhu-ink);
}

.bhu-item__feefo svg {
	display: block;
	width: 49px;
	height: 12px;
}

/* Right group: language, Our Tale, Help -------------------------------- */
.bhu-bar__meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.bhu-rule {
	display: block;
	align-self: stretch;
	width: 0;
	border-left: 1px solid var(--bhu-rule);
	padding: 2px 0;
}

.bhu-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.bhu-trigger__flag {
	display: block;
	width: 21px;
	height: 14px;
	flex-shrink: 0;
	border-radius: 2px;
	object-fit: cover;
}

.bhu-trigger__chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.bhu-disclosure[open] > .bhu-trigger .bhu-trigger__chevron,
.bhu-disclosure[open] > summary.bhu-trigger .bhu-trigger__chevron {
	transform: rotate(180deg);
}

/* <details>/<summary> disclosure: native keyboard + AT support, no JS. */
.bhu-disclosure {
	position: relative;
}

.bhu-disclosure > summary {
	list-style: none;
}

.bhu-disclosure > summary::-webkit-details-marker {
	display: none;
}

.bhu-disclosure__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 40;
	min-width: 180px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px;
	background-color: #FFFFFF;
	border-radius: 8px;
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14);
}

.bhu-disclosure__panel a,
.bhu-disclosure__panel button {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 6px 4px;
	font: inherit;
	color: var(--bhu-ink);
	cursor: pointer;
}

.bhu-disclosure__panel a:hover,
.bhu-disclosure__panel button:hover {
	text-decoration: underline;
}

.bhu-disclosure__panel [aria-current="true"] {
	font-weight: 700;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Sticky state: row 1 collapses while `.is-sticky` (Blocksy's own
   sticky-header JS class on the ancestor panel) is active. Collapsed in
   place, see file header for the reasoning.
   --------------------------------------------------------------------- */
.ct-header.is-sticky .bhu-bar,
.ct-header-sticky .bhu-bar {
	height: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.bhu-bar {
		transition: height 0.2s ease, opacity 0.15s ease, padding 0.2s ease;
	}
}

/* ---------------------------------------------------------------------
   Tablet reflow, 768 (task line item "Tablet reflow of the desktop
   variant"). Same content, tighter spacing; the review line truncates
   via text-overflow above to protect row height and CLS.
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
	.bhu-bar {
		padding: 10px 24px;
		gap: 12px;
	}

	.bhu-bar__trust {
		gap: 12px;
	}

	.bhu-item__review-text {
		max-width: 160px;
	}
}

@media (max-width: 767px) {
	.bhu-bar {
		padding: 8px 16px;
	}

	.bhu-item--review .bhu-item__review-text {
		display: none;
	}
}

/* ---------------------------------------------------------------------
   Mobile, 375: utility bar hides. Mobile HEADER is the full-screen
   SEARCH panel component (14061:188816), a separate task per this
   task's own scope note; the icon row keeps Blocksy's existing mobile
   placements untouched.
   --------------------------------------------------------------------- */
@media (max-width: 599px) {
	.bhu-bar {
		display: none;
	}
}