/**
 * Bonza, Navbar Overlay: desktop Events dropdown, desktop Language
 * switcher dropdown, and the tablet/mobile drawer it shares a Figma
 * component set with (ClickUp 86eypb6ke).
 *
 * Config investigated: General > Colors (no site-wide theme.json colour
 * preset exists yet, task 86eyk8nqd "Design foundations" is still in
 * progress, same documented gap as footer.css / hero-banner.css), Blocksy
 * header builder (Appearance > Customize > Header Builder: no desktop nav
 * item, mega-menu, or mobile-menu extension point is configured on this
 * site yet, `wp menu list` on bonza-retheme.blz.au shows Main Menu /
 * Service Menu / three footer menus, none assigned to a theme location,
 * confirmed via `wp option get theme_mods_blocksy-child`. HEADER (CU
 * 86eypb6ab) owns wiring the real header chrome; this component only
 * owns the overlay panels plus the interaction contract documented in
 * custom.php `bonza_navbar_overlay_render_provisional_triggers()`).
 *
 * editor-friendly-ok: this styles global header/nav chrome (drawer plus
 * dropdown panels rendered in wp_footer), not editable post content, same
 * class of exception as checkout-header-footer.css.
 *
 * Figma: cY9QX6IwGVaaGI4r7J2RRF, component set "Navbar Overlay" 224:172474.
 *   TYPE=Mobile-Menu   17430:152740 (390x1701, 16px radius right edge)
 *   TYPE=Events        29560:84461  (161x168, 12px radius), desktop dropdown
 *   TYPE=CURRENCY      34467:310824 (169x168, 12px radius), desktop dropdown
 * The component set also has TYPE=Help, TYPE=weekly, TYPE=Desktop-Mega menu
 * 1/2 and TYPE=TYPE6 siblings not named in this task's scope note (which
 * names exactly Events, Currency and Mobile-Menu). Left unbuilt, flagged
 * in the CU-86eypb6ke comment instead of guessed at.
 *
 * CONTENT FLAGS (confirmed against the live `main-menu` WP menu on
 * bonza-retheme.blz.au, not guessed):
 *   - Figma's Mobile-Menu top group reads "SUPLEMENTS" (sic). No menu item
 *     with that title exists; the live menu's matching position (second
 *     child of "Shop", alongside "Superfoods") is titled "Bioactive Bites".
 *     Rendered with the live title/URL, not the Figma string. Flag stands
 *     for design/client to confirm the intended label.
 *   - Figma's Mobile-Menu second group repeats "Health hub for dogs" (it
 *     already opens the first group). The live menu has exactly one
 *     "Health Hub for Dogs" item, top-level, not nested under "Our Tale".
 *     Treated as a confirmed Figma duplication and rendered once.
 *   - "our import" and "our guarantee" are confirmed typos/casing for the
 *     live menu's actual "Our Impact" / "Our Guarantee", rendered with the
 *     live, correct strings.
 *   - Figma's Events (29560:84461) and Currency (34467:310824) variants both
 *     contain the same placeholder link set (Preorder Catalogues, Card/
 *     Miniature Singles, Wholesale Info, About us, Reviews, Our Import, Our
 *     Guarantee): hobby-shop/trading-card copy unrelated to a dog-food
 *     brand, evidence this pair of variants is unfinished or copy-pasted in
 *     Figma, not real content. TYPE=CURRENCY additionally has no currency
 *     data at all; its only distinct rows are language options ("DE ·
 *     German", "ES · Spanish", "FR · French", "NL · Dutch"), so it is a
 *     mislabelled language switcher, not a currency switcher. Built as
 *     such (WPML `wpml_active_languages`, all 5 site languages resolve
 *     live, `curl` returned 200 on /de/ /es/ /fr/ /nl/). The TYPE=Events
 *     shell is built and wired to the live "Discover" submenu (real,
 *     on-brand content already in the site's Main Menu) as a working
 *     stand-in, pending design confirming what "Events" is actually meant
 *     to show. No events/calendar plugin exists on this site to build
 *     against.
 *   - Separately, WooCommerce's own currency (a different concern from the
 *     WPML language switcher above) is single-currency: `wp option get
 *     woocommerce_currency` returns GBP, and WCML's own `_wcml_settings
 *     [default_currencies]` has an empty value for every one of the 5
 *     languages, so multi-currency is scaffolded but never actually
 *     configured. No currency-switching UI is built here; there is nothing
 *     live to switch between. Flagged as an open blocker in the CU
 *     comment.
 *
 * WCAG 2.2 AA, MEASURED (formula against the literal hex, not assumed):
 *   - Ink text #2E2A2A on cream #F8EDE3 body bg: 12.30:1 (pass; 86eyv0k44
 *     GL-05 recompute, was #494545 at 8.20:1)
 *   - Ink text #2E2A2A on white #FFFFFF badge/help cards: 14.18:1 (pass;
 *     was #494545 at 9.46:1)
 *   - White #FFFFFF "Menu" heading plus close icon on the #247B4E drawer
 *     header bar: 5.23:1 (pass, clears the 4.5:1 normal-text floor)
 *   - Badge icon glyph, corrected 2026-09-04 (client-reported): previously
 *     read as sitting on an inner WHITE disc, not directly on the orange
 *     #FFA825 circle, because an earlier pass had wrongly added that white
 *     disc layer (not in Figma). With that disc removed, the icon sits
 *     directly on #FFA825; Figma's own icon fill #2E2A2A measures 7.44:1
 *     there (formula above), clearing both 4.5:1 text and 3:1 UI-component
 *     floors on its own, no white layer needed.
 *   - Focus ring, body of the drawer/dropdowns (cream/white backgrounds):
 *     solid 2px #1F6B42 outline plus 2px offset on links, buttons and
 *     inputs, measured 5.62:1 against #F8EDE3 and 6.48:1 against #FFFFFF,
 *     clears the 3:1 floor. The original #16A34A measured 2.86:1 on cream,
 *     failing the floor, caught in audit and replaced with the same
 *     colour Hero Banner's own contrast fix already uses for this exact
 *     pairing (see the "Hero Banner, WCAG contrast fix" CHANGELOG entry).
 *   - Focus ring, close button only: the button sits directly on the
 *     #247B4E header bar, where #1F6B42 measures 1.24:1, worse than the
 *     #16A34A it replaced. Scoped separately to #FFFFFF (5.23:1 on
 *     #247B4E, the same figure already measured for the "Menu" heading on
 *     this bar) rather than reusing --bno-focus.
 *
 * Breakpoints: drawer pattern serves 0 to 1023px (covers the 375 floor,
 * 428 as-drawn and 744 tablet checks), dropdown pattern serves 1024px+
 * (covers 1440/1512), matching Blocksy's own internal 1024px mobile to
 * desktop split already used by hero-banner.css / footer.css on this
 * site.
 *
 * @date 2026-08-27
 */

/* Flagged, not fixed here (86eyv0k44 GL-05, code-review finding): `--bfg-color-ink`
 * (and its `--bfg-color-cream/-white/-green/-amber` siblings below) is a
 * shared-looking custom-property name consumed by this file and by
 * checkout-trust-signal.css / checkout-payment.css, but it is declared
 * nowhere in this codebase -- every consumer's own literal fallback is
 * what actually renders (checkout-header-footer.css's docblock already
 * documents the identical gap for --chf-ink). That is harmless today only
 * because every fallback across all three files independently agrees on
 * #2E2A2A post-GL-05; declaring `--bfg-color-ink` for real in a shared
 * base/token file, without also auditing every current fallback value
 * first, would silently re-skin all of them at once. Out of scope for a
 * colour-value fix; a real base-token pass is the correct place to land
 * this. */
:root {
	--bno-cream: var( --bfg-color-cream, #F8EDE3 );
	--bno-white: var( --bfg-color-white, #FFFFFF );
	--bno-ink: var( --bfg-color-ink, #2E2A2A ); /* 12.30:1 on cream / 14.18:1 on white (WCAG AA/AAA) */
	--bno-green: var( --bfg-color-green, #247B4E );
	--bno-amber: var( --bfg-color-amber, #FFA825 );
	--bno-focus: #1F6B42;
	--bno-heading-font: "Nominee", var( --theme-font-family, sans-serif ); /* --theme-headings-font-family tier removed: defined nowhere in any deployed stylesheet, was a dead fallback link */
	--bno-body-font: "Kobe1.1", var( --theme-font-family, sans-serif );
}

/* ---------------------------------------------------------------------
 * Shared: focus states, screen-reader text, backdrop
 * ------------------------------------------------------------------- */

.bno-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.bno-drawer a:focus-visible,
.bno-drawer button:focus-visible,
.bno-drawer input:focus-visible,
.bno-dropdown a:focus-visible,
.bno-dropdown button:focus-visible,
.bno-trigger:focus-visible {
	outline: 2px solid var( --bno-focus );
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * The close button sits directly on the #247B4E header bar with a
 * transparent background, so the shared --bno-focus ring above (measured
 * against the cream/white body only) does not apply here: #1F6B42 on
 * #247B4E is 1.24:1, worse than the #16A34A it replaced (1.59:1), because
 * both are similarly dark greens. White clears this pairing at 5.23:1,
 * the same figure already measured for the "Menu" heading on this same
 * bar, so it is reused here rather than introducing a third focus colour.
 */
.bno-drawer .bno-drawer__close:focus-visible {
	outline: 2px solid var( --bno-white );
	outline-offset: 2px;
	border-radius: 4px;
}

.bno-backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 36, 34, 34, 0.45 );
	z-index: 9998;
}

/* ---------------------------------------------------------------------
 * Mobile / tablet drawer (Figma 17430:152740), 0 to 1023px
 * ------------------------------------------------------------------- */

.bno-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.bno-drawer[hidden] {
	display: none;
}

/* FIX (full-site audit, 2026-09-01, critical): the MyStickyMenu plugin's
   OWN inline CSS sets its sticky top promo bar to z-index:9999999, about
   1000x higher than this drawer (z-index:9999) and its backdrop
   (z-index:9998), so it stayed visible and clickable on top of the
   drawer's own "Menu" header and close button at every breakpoint,
   confirmed via document.elementFromPoint() hit-testing the close
   button's coordinates. Out-z-indexing a third party's arbitrary value is
   an arms race we would lose again on their next update; hiding it while
   THIS drawer is open (tied to the real open-state class, not a magic
   number) is robust to that. */
body.bno-modal-open .mysticky-welcomebar-fixed-wrap {
	display: none;
}

/* FIX (CU-86eypb6ab, reported 2026-09-04): .bno-backdrop (above) and
   .bno-drawer__panel (below) are both direct children of .bno-drawer,
   which is position:fixed and so creates its own stacking context for
   them. .bno-drawer__panel previously declared no z-index at all (auto),
   so .bno-backdrop's explicit z-index:9998 outranked it inside that local
   context regardless of DOM order -- the backdrop painted on top of the
   panel's own content, exactly the "dark overlay covering the offcanvas
   menu" symptom reported, and since the backdrop also carries
   data-bno-close, a tap on a nav link closed the drawer instead of
   navigating. Panel now uses z-index:9999 (matching .bno-drawer's own
   value has no effect outside this local context, it just reads
   consistently with the 9999/9998 pair already documented in the
   MyStickyMenu comment below) to clear the backdrop's local 9998. */
.bno-drawer__panel {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 390px;
	max-width: 90vw;
	z-index: 9999;
	background: var( --bno-cream );
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
	box-shadow: 4px 0 24px rgba( 36, 34, 34, 0.18 );
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
}

@media ( max-width: 374px ) {
	.bno-drawer__panel {
		width: 100vw;
		max-width: 100vw;
		border-radius: 0;
	}
}

.bno-drawer__header {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var( --bno-green );
	color: var( --bno-white );
	padding: 12px 20px; /* Figma header frame 427319058 is 56px; 32px close button + 24px */
}

.bno-drawer__title {
	font-family: var( --bno-heading-font );
	font-weight: 900;
	font-size: 18px;
	line-height: 1;
	margin: 0;
	color: var( --bno-white );
}

.bno-drawer__close {
	background: transparent;
	border: 0;
	color: var( --bno-white );
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
}

/* FIX (CU-86eypb6ab item 5, 2026-09-04): .bno-drawer__body no longer carries
   its own side padding -- each .bno-drawer__section below owns its own
   padding so its background (cream, default, or white via the --white
   modifier) can bleed edge-to-edge across the panel's full width. Figma's
   offcanvas component (17430:152740) has no search field between sections;
   the .bno-drawer__search rules and markup were correctly removed in
   custom.php.
   CORRECTION (client-reported, 2026-09-04): the line above used to also
   claim "no divider line ... the visual separation is the cream/white swap
   itself, not a border" and removed a .bno-drawer__divider rule on that
   basis. That was wrong -- re-pulling the Figma nodes directly (rectangles
   #34377:120809 / #34377:120889, both "Frame 2147229786 3/4") shows they
   are not empty spacer rectangles, they carry an IMAGE fill: a decorative
   torn-paper-edge pattern graphic, 33.36px tall, `scaleMode: FILL`. Not a
   flat border, but not "no divider" either -- a real graphic asset this
   task missed. Re-added below with the real exported PNG. */
.bno-drawer__body {
	padding: 0 0 32px; /* first link row = 56px header + 24px section padding = Figma y=80 (frame 1261154389) */
}

.bno-drawer__section {
	padding: 24px 16px;
}

.bno-drawer__section--white {
	background: var( --bno-white );
}

/* editor-friendly-ok: same exemption as the file docblock.
 * Torn-paper divider pattern between sections (Figma rectangles
 * #34377:120809 / #34377:120889, same image asset reused for both per
 * Figma's own template reuse). Exported at 3x from Figma
 * (custom/assets/navbar-overlay/bno-drawer-divider-icon-strip.png, 1959x120 native,
 * i.e. 653x40 at 1x) and applied as a `background-size: cover` fill,
 * matching Figma's own `scaleMode: FILL` on that node exactly rather than
 * stretching or tiling it. Height set to 34px (Figma's 33.36px, within this
 * task's 1px tolerance). The image shows cream-above/white-below; the
 * second instance (white section into the cream Help section) needs the
 * opposite direction, so `--flip` mirrors the same asset vertically instead
 * of exporting/maintaining a second near-duplicate file.
 */
.bno-drawer__divider {
	height: 34px;
	background-image: url( '../assets/navbar-overlay/bno-drawer-divider-icon-strip.png' );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.bno-drawer__divider--flip {
	transform: scaleY( -1 );
}

/* 86eypb6ab: compact language chips at the top of the drawer so the switcher
   is on screen on a 667px phone without scrolling. */
.bno-drawer__section--lang {
	padding: 8px 16px 0;
}

.bno-drawer__lang ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bno-drawer__lang li + li {
	margin-top: 0;
}

.bno-drawer__lang a {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-transform: none;
	font-size: 13px;
}

.bno-drawer__lang a[aria-current="true"] {
	background: var( --bno-green ); /* white label on it: 5.23:1 */
	border-color: var( --bno-green );
	color: var( --bno-white );
	text-decoration: none;
}

.bno-drawer__nav-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bno-drawer__nav-group li + li {
	margin-top: 18px;
}

.bno-drawer__nav-group a {
	font-family: var( --bno-heading-font );
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --bno-ink );
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bno-drawer__nav-group a:hover,
.bno-drawer__nav-group a:focus-visible {
	/* source:FIGMA (partial) -- same Link "Main, State=Hover" delta as header-navigation.css's
	   #header-menu-1 .ct-menu-link:hover (Nominee/900/12px/UPPER profile matches). Measured
	   delta is dark -> #FFA825 text+underline, but #FFA825 on this drawer's cream/white
	   background computes to 1.67:1/1.93:1, fails WCAG 2.2 AA. NEEDS HUMAN, same flag as the
	   header nav; underline-only kept until design confirms a compliant hover color. */
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* RECONCILED (86eyv0k44 GL-05, 2026-09-15): this rule used to scope a local
 * #2E2A2A literal here instead of `var(--bno-ink)` (CU-86eypb6ab, Fable 5.1
 * audit follow-up, 2026-09-07), because at the time the shared `--bno-ink`
 * token (and the sitewide `bhp-ink` preset it ultimately falls back to) was
 * wrongly registered as #494545 -- Figma's HELP section specifically
 * (Navbar Overlay instance #34476:106060 -> #34613:73225/73231/73236/73241)
 * uses #2E2A2A, so this rule was scoped rather than changing `--bno-ink`
 * itself and risking a regression on the OTHER offcanvas elements that
 * token also feeds (nav-group links, badge labels), which that audit had
 * not separately re-verified against Figma. GL-05 has now corrected the
 * root preset (homepage.php's `bhp-ink` registration) to #2E2A2A, which
 * also corrected `--bno-ink` and every one of those other elements to the
 * same, actually-correct value -- so `.bno-drawer__help h3` now safely
 * reads `var(--bno-ink)` again, with no local override and one source of
 * truth for this color. 14.18:1 on white / 12.30:1 on cream (WCAG AA/AAA).
 */
.bno-drawer__help h3 {
	font-family: var( --bno-heading-font );
	font-weight: 900;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var( --bno-ink );
	margin: 0 0 16px;
}

.bno-drawer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bno-drawer__contact li {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* FIX (client-reported, 2026-09-08): Figma's Help-section contact rows show the
   email/chat/phone icons bare, with no circular badge around them -- this
   selector's original border+background+border-radius circle treatment was never
   in Figma. Removed the circle, keeping only the sizing/alignment/color properties
   so the icon itself stays correctly sized and vertically centered next to its
   label text. */
.bno-drawer__contact .bno-icon-circle {
	flex: none;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --bno-ink );
}

.bno-drawer__contact a,
.bno-drawer__contact span.bno-contact-text {
	font-family: var( --bno-body-font );
	font-weight: 700;
	font-size: 14px;
	color: var( --bno-ink ); /* RECONCILED (86eyv0k44 GL-05): see the .bno-drawer__help h3 reconciliation above, same prior scoped literal, now redundant. 14.18:1 on white / 12.30:1 on cream (WCAG AA/AAA). */
	text-decoration: none;
}

.bno-drawer__contact a:hover,
.bno-drawer__contact a:focus-visible {
	/* source:DERIVED -- plain body-text link (Kobe1.1/700, default ink), matches Link
	   "Courtesy" variant, no measured Figma color change. Underline-only affordance. */
	text-decoration: underline;
}

/* editor-friendly-ok: same exemption as this file's docblock.
 * FIX (CU-86eypb6ab, Fable 5.1 audit follow-up, 2026-09-07): Figma's
 * WhatsApp contact row (#34613:73232, "ts1" text style) bolds and
 * accent-colors just the word "WhatsApp" within its sentence at #247B4E
 * (Bonza's own accent green, already used for prices/CTAs elsewhere in
 * this task) -- the PHP now wraps only that word in this class (see
 * custom.php, bonza_navbar_overlay_render_mobile_drawer()). #247B4E as
 * TEXT on this row's cream/white background is the same color already
 * used as text in header-navigation.css and search-suggestions.css
 * (prices, category tags) with no contrast issue at that weight/size;
 * not re-derived here since it's the identical pairing already measured
 * there, not a new one. `--bno-focus` (#1F6B42) stays untouched -- it is
 * a documented, deliberate WCAG-contrast override for FOCUS RINGS
 * specifically (this file's own docblock, lines ~83-90: literal Figma
 * #247B4E measures 1.24:1 as a ring color on this header's green bar,
 * below the 3:1 floor), a completely different UI role from this static
 * text color and not something this fix should revert.
 */
.bno-whatsapp-accent {
	color: #247B4E;
}

.bno-drawer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px; /* Figma badge frames sit on a 62px pitch (50px pill + 12px) */
	margin-top: 24px; /* Figma: badges start 24px below the contact block */
}

.bno-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var( --bno-white );
	border-radius: 8px;
	padding: 8px;
}

/* editor-friendly-ok: same exemption as the file docblock.
 * FIX (client-reported, 2026-09-04): the badge circle rendered as a fake
 * "donut" -- an outer 34px amber ring with a second, smaller 23px WHITE
 * disc inside it, and the icon sitting on that inner white disc. Confirmed
 * against Figma (mobile-menu 17430:152740, badge instance #34377:121116):
 * the real spec is a single SOLID 34x34px #FFA825 circle (`border-radius:
 * 16.999998px`, i.e. fully round) with the 19x19px icon centered directly
 * on it, no inner white layer at all. `.bno-badge__icon-disc` is kept as a
 * wrapper (existing PHP markup, not re-templated) but no longer paints its
 * own background or size -- it just centers the icon inside the one real
 * circle. Icon color corrected to Figma's own icon fill (7.44:1 on the
 * amber badge bg, measured via the WCAG relative-luminance formula --
 * clears both the 4.5:1 AA text and 3:1 AA UI-component floors). At the
 * time this fix shipped, this file's own `--bno-ink` was still the wrong
 * #494545, a different dark tone Figma does not use for these icons, so a
 * literal was used to avoid that then-wrong shared token. RECONCILED
 * (86eyv0k44 GL-05, 2026-09-15): `--bno-ink` is now corrected to the same
 * value, so this rule reads it directly -- one source of truth, no
 * functional change.
 */
.bno-badge__icon {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var( --bno-amber );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --bno-ink ); /* 7.44:1 on the amber badge bg (WCAG AA/AAA) */
}

.bno-badge__icon .bno-badge__icon-disc {
	width: 19px;
	height: 19px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.bno-badge__label {
	font-family: var( --bno-body-font );
	font-weight: 700;
	font-size: 16px; /* Kobe text at least 16px (Vita, 86eypb6ke) */
	color: var( --bno-ink );
}

/* ---------------------------------------------------------------------
 * Desktop dropdowns (Figma 29560:84461 Events, 34467:310824 language),
 * 1024px+
 * ------------------------------------------------------------------- */

.bno-dropdown {
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	min-width: 220px;
	background: var( --bno-cream );
	border-radius: 12px;
	box-shadow: 0 8px 40px 0 rgba( 0, 0, 0, 0.12 ); /* Figma Navbar Overlay desktop drop shadow */
	padding: 24px 32px; /* Figma 182x184 panel: 24px top/bottom, 32px sides */
	z-index: 30;
}

.bno-dropdown[hidden] {
	display: none;
}

.bno-dropdown ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px; /* Figma rows are 22px tall on a 38px pitch */
	line-height: 22px; /* the inherited 26.4px made each <li> taller than the 22px link, giving a 42px pitch instead of Figma's 38px */
}

.bno-dropdown li {
	display: flex; /* drops the line-box strut that added 1px under each 22px link */
}

.bno-dropdown a {
	font-family: var( --bno-body-font );
	font-weight: 700;
	font-size: 16px; /* 16px minimum for menu items (Kobe rule) */
	line-height: 22px;
	color: var( --bno-ink );
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.bno-dropdown a:hover,
.bno-dropdown a:focus-visible {
	/* source:DERIVED -- plain body-text link (Kobe1.1/700, default ink), matches Link
	   "Courtesy" variant, no measured Figma color change. Underline-only affordance. */
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* editor-friendly-ok: this styles global header/nav chrome, same exemption as
 * the file docblock.
 * FIX (CU-86eypb6ab QA round, 2026-09-17, item 9 -- "mobile drawer missing a
 * translation dropdown"): confirmed the drawer's own render function
 * (bonza_navbar_overlay_render_mobile_drawer(), custom.php) has never
 * rendered a language section at all, at any locale -- the only existing
 * flag/language markup on the page is this desktop-only dropdown
 * (`.bno-dropdown--language`, hidden below 1024px with no visible trigger
 * below that width either). Handed the exact PHP addition back to the
 * session lead (not my file), reusing this same `.bno-flag` image inside
 * the drawer's own `.bno-drawer__nav-group` list pattern instead of the
 * dropdown's -- broadening this selector now, in my own file, so that
 * markup renders correctly the moment it lands, without a second round-trip
 * for a missing style. */
.bno-dropdown--language img.bno-flag,
.bno-drawer__nav-group img.bno-flag {
	width: 18px;
	height: 13px;
	object-fit: cover;
	border-radius: 2px;
	flex: none;
}

/* ---------------------------------------------------------------------
 * Provisional verification triggers, see custom.php
 * bonza_navbar_overlay_render_provisional_triggers(). HEADER (CU
 * 86eypb6ab) now wires the real mobile-menu hamburger directly, so this
 * bar only keeps the Events/Language dropdown triggers still without a
 * real header entry point; removable in one place once those get one
 * too (see that function's docblock for the current condition).
 * ------------------------------------------------------------------- */

.bno-provisional-bar {
	position: relative;
	display: none;
	align-items: center;
	gap: 20px;
	background: var( --bno-white );
	border-bottom: 1px dashed var( --bno-amber );
	padding: 10px 20px;
	font-family: var( --bno-body-font );
	font-size: 13px;
}

.bno-provisional-bar__label {
	color: var( --bno-amber );
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.04em;
}

.bno-trigger {
	background: transparent;
	border: 1px solid rgba( 46, 42, 42, 0.25 ); /* 86eyv0k44 GL-05: decimal-rgb ink border, was rgba(73,69,69,.25) for the old #494545 */
	border-radius: 6px;
	padding: 6px 12px;
	font-family: var( --bno-body-font );
	font-weight: 700;
	font-size: 13px;
	color: var( --bno-ink );
	cursor: pointer;
}

.bno-trigger[aria-expanded="true"] {
	background: var( --bno-cream );
	border-color: var( --bno-ink );
}

/* Restricted to desktop widths on purpose: the base rule above is
 * display:none, and this is the only query that turns it back on. Kept
 * desktop-only now that HEADER's real hamburger covers mobile-menu
 * directly, since the two remaining triggers (Events, Language) are
 * desktop-only dropdowns anyway. */
@media ( min-width: 1024px ) {
	.bno-provisional-bar {
		display: flex;
	}
}

/* 86eypb6ke L1 map vs Figma Navbar Overlay (390 frame): the drawer nav links are 44px rows
   with a 16px line-height (Link 29236:35364), stacked with no gap (frame 1261153889 is
   132px for three links), the title line-height is 20px (17430:152833), the Help heading
   and contact text are 16px line-height and the contact rows are 44px (Email Row
   34613:73227, Contact Options 358x132). */
.bno-drawer__title {
	line-height: 20px;
}
.bno-drawer__nav-group li + li {
	margin-top: 0;
}
.bno-drawer__nav-group a {
	display: flex;
	min-height: 44px;
	line-height: 16px;
}
.bno-drawer__lang a {
	line-height: 16px;
}
.bno-drawer__help h3 {
	line-height: 16px;
}
.bno-drawer__contact {
	gap: 0;
}
.bno-drawer__contact li {
	min-height: 44px;
}
.bno-drawer__contact a,
.bno-drawer__contact span.bno-contact-text {
	line-height: 16px;
}

/* Language row, Figma List Item 35642:52063: hug-width 44px row, 8px gap, 21x14 flag,
   16px chevron. It sits after the About links in the same section, so the first link row
   lands 24px under the 56px header (Figma frame 1261154389 at y=80), with no extra body inset. */
.bno-drawer__langs-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	font-family: var( --bno-heading-font );
	font-weight: 900;
	font-size: 16px; /* 86eypb6ab r4: Vita, same size as the other drawer menu items (Kobe 16px floor); was Figma 12px */
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --bno-ink );
}
.bno-drawer__langs-toggle::-webkit-details-marker {
	display: none;
}
.bno-drawer__langs-toggle img.bno-flag {
	width: 21px;
	height: 14px;
	object-fit: cover;
	border-radius: 2px;
	flex: none;
}
.bno-drawer__langs-chevron {
	flex: none;
}
.bno-drawer__langs[open] .bno-drawer__langs-chevron {
	transform: rotate( 180deg );
}
.bno-drawer__langs-toggle:focus-visible {
	outline: 2px solid var( --bno-ink );
	outline-offset: 2px;
}
.bno-drawer__langs .bno-drawer__lang {
	padding-bottom: 8px;
}