/* src/components/basic/XWUIBarSiteHeader/XWUIBarSiteHeader.css */
/* XWUIBarSiteHeader · reusable site-shell top bar.
 *
 * The component renders generic structural classes only. Page-level
 * concerns like max-width are exposed as CSS custom properties so the
 * host site can tune them without forking the stylesheet:
 *
 *   --xwui-bar-site-header-max-width   page width clamp (defaults to 1200px)
 *   --xwui-bar-site-header-px          horizontal gutter
 *   --xwui-bar-site-header-mobile-bp   viewport floor for compact layout
 *                                      (JS also collapses on nav wrap/overflow)
 *
 * Tokens like --bg-app, --border-light, --text-primary etc. resolve
 * through the active XWUI style/theme, so the bar follows preset cycles
 * automatically.
 *
 * The max-width and gutter variables are READ with a fallback where they are
 * used, so they work however the bar was mounted and wherever a host sets them:
 * on the tag, on the `.xwui-bar-site-header` class, on a wrapper, or on :root.
 * They used to be defined only on the `xwui-bar-site-header` tag below, so a bar
 * built into a plain host element (the class API) had no gutter and no max
 * width, and a rule on the class could not change them. The tag block stays: a
 * host that sets the variables on the tag (the shell does) keeps working, and the
 * tag still carries the defaults for anything that reads them from outside.
 */

xwui-bar-site-header {
  display: block;
  width: 100%;
  --xwui-bar-site-header-max-width: 1200px;
  --xwui-bar-site-header-px: clamp(1rem, 3vw, 2.5rem);
  --xwui-bar-site-header-mobile-bp: 860px;
}

.xwui-bar-site-header {
  width: var(--xwui-bar-site-header-width, 100%);
  margin: var(--xwui-bar-site-header-margin, 0);
  padding-inline: var(--xwui-bar-site-header-px, clamp(1rem, 3vw, 2.5rem));
  background: var(--xwui-bar-site-header-bg, var(--bg-app));
  border: var(--xwui-bar-site-header-border, 0);
  border-radius: var(--xwui-bar-site-header-radius, 0);
}
.xwui-bar-site-header.has-blur {
  background: var(--xwui-bar-site-header-bg, color-mix(in srgb, var(--bg-app) 75%, transparent));
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
}
.xwui-bar-site-header.is-bordered {
  border-bottom: 1px solid var(--border-light);
}
.xwui-bar-site-header.has-shadow {
  box-shadow: var(--shadow-lg);
}
/* Subtle depth cue once the scroll-condense state kicks in (existing JS class -
   no new scroll hook added). Skipped when has-shadow already opts into the
   stronger shadow above. */
.xwui-bar-site-header.is-condensed:not(.has-shadow) {
  box-shadow: var(--shadow-sm);
}
.xwui-bar-site-header[data-position="sticky"] {
  position: sticky;
  top: 0;
  z-index: 50;
}
/* The <xwui-bar-site-header> host is as tall as the bar, so a sticky bar's host
   carries the stickiness against the page column it sits in. */
xwui-bar-site-header:has(> .xwui-bar-site-header[data-position="sticky"]) {
  position: sticky;
  top: 0;
  z-index: 50;
}
.xwui-bar-site-header[data-position="fixed"] {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
}

/* ── Scroll-transparency (config.scrollTransparent) ─────────────────────────
 * The background moves to a ::before layer so it can fade by scroll direction
 * WITHOUT touching the brand/nav/actions opacity. Opt-in via the class, so
 * headers that don't use the feature keep the plain `background` above. */
.xwui-bar-site-header.has-scroll-transparent {
  background: transparent;
  position: relative; /* ensure data-position sticky/fixed still wins below */
}
.xwui-bar-site-header.has-scroll-transparent[data-position="sticky"] { position: sticky; }
.xwui-bar-site-header.has-scroll-transparent[data-position="fixed"]  { position: fixed; }
.xwui-bar-site-header.has-scroll-transparent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg-app);
  opacity: 1;
  transition: opacity var(--motion-duration-normal, 0.3s) var(--motion-easing-standard, ease);
  pointer-events: none;
}
/* Blur variant: fade a frosted layer + keep the backdrop blur on the bg layer. */
.xwui-bar-site-header.has-scroll-transparent.has-blur {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.xwui-bar-site-header.has-scroll-transparent.has-blur::before {
  /* Frosted surface. Consumers can supply a translucent brand background (e.g. a
     semi-transparent gradient) via --xwui-bar-site-header-blur-bg; the default is
     a translucent app-bg. color-mix() can't operate on a gradient --bg-app, so
     the override hook is how a gradient-themed bar gets blur without collapsing. */
  background: var(--xwui-bar-site-header-blur-bg, color-mix(in srgb, var(--bg-app) 75%, transparent));
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
}
/* Content sits above the bg layer AND the drawer scrim (z-1) - equal z with
   the scrim would let DOM order paint the scrim over the brand + burger. */
.xwui-bar-site-header.has-scroll-transparent > .xwui-bar-site-header__inner {
  position: relative;
  z-index: 2;
}
/* Scrolling down → fade the background to the configured opacity (default 0.5). */
.xwui-bar-site-header.has-scroll-transparent.is-scroll-transparent::before {
  opacity: var(--xwui-bar-site-header-scroll-opacity, 0.5);
}
/* Open mobile drawer → the bar goes fully solid regardless of scroll state,
   so the brand + burger read clearly over the dimmed page. */
.xwui-bar-site-header.has-scroll-transparent.is-drawer-open::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .xwui-bar-site-header.has-scroll-transparent::before { transition: none; }
}

.xwui-bar-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg, 1.5rem);
  padding-block: var(--xwui-bar-site-header-pad-block, 0.85rem);
  max-width: var(--xwui-bar-site-header-max-width, 1200px);
  margin-inline: auto;
  width: 100%;
  /* Above the drawer scrim (z-1) so brand + burger stay visible while open. */
  position: relative;
  z-index: 2;
  /* Declared on the base (not only .is-condensed) so BOTH directions animate - a condensed-only transition snaps open but eases shut. Only fires when
     condenseOnScroll toggles the padding; inert otherwise. */
  transition: padding-block var(--motion-duration-fast, 0.18s) var(--motion-easing-standard, ease);
}

/* Canonical size scale (conf.size). md = historical defaults above. */
.xwui-bar-site-header--xxxxs {
  --xwui-bar-site-header-pad-block: 0.2rem;
  --xwui-bar-site-header-condensed-pad: 0.12rem;
  --xwui-bar-site-header-link-pad: 0.1rem 0.3rem;
  --xwui-bar-site-header-link-size: 0.65rem;
  --xwui-bar-site-header-brand-size: 0.75rem;
  --xwui-bar-site-header-logo-min: 14px;
  --xwui-bar-site-header-gap: 0.5rem;
}
.xwui-bar-site-header--xxxs {
  --xwui-bar-site-header-pad-block: 0.28rem;
  --xwui-bar-site-header-condensed-pad: 0.16rem;
  --xwui-bar-site-header-link-pad: 0.15rem 0.35rem;
  --xwui-bar-site-header-link-size: 0.7rem;
  --xwui-bar-site-header-brand-size: 0.8rem;
  --xwui-bar-site-header-logo-min: 16px;
  --xwui-bar-site-header-gap: 0.55rem;
}
.xwui-bar-site-header--xxs {
  --xwui-bar-site-header-pad-block: 0.35rem;
  --xwui-bar-site-header-condensed-pad: 0.2rem;
  --xwui-bar-site-header-link-pad: 0.2rem 0.4rem;
  --xwui-bar-site-header-link-size: 0.75rem;
  --xwui-bar-site-header-brand-size: 0.85rem;
  --xwui-bar-site-header-logo-min: 18px;
  --xwui-bar-site-header-gap: 0.65rem;
}
.xwui-bar-site-header--xs {
  --xwui-bar-site-header-pad-block: 0.4rem;
  --xwui-bar-site-header-condensed-pad: 0.25rem;
  --xwui-bar-site-header-link-pad: 0.22rem 0.45rem;
  --xwui-bar-site-header-link-size: 0.8rem;
  --xwui-bar-site-header-brand-size: 0.9rem;
  --xwui-bar-site-header-logo-min: 20px;
  --xwui-bar-site-header-gap: 0.75rem;
}
.xwui-bar-site-header--sm {
  --xwui-bar-site-header-pad-block: 0.5rem;
  --xwui-bar-site-header-condensed-pad: 0.3rem;
  --xwui-bar-site-header-link-pad: 0.25rem 0.55rem;
  --xwui-bar-site-header-link-size: 0.8125rem;
  --xwui-bar-site-header-brand-size: 0.95rem;
  --xwui-bar-site-header-logo-min: 22px;
  --xwui-bar-site-header-gap: 1rem;
}
.xwui-bar-site-header--md {
  --xwui-bar-site-header-pad-block: 0.85rem;
  --xwui-bar-site-header-condensed-pad: 0.45rem;
  --xwui-bar-site-header-link-pad: 0.4rem 0.85rem;
  --xwui-bar-site-header-link-size: 0.95rem;
  --xwui-bar-site-header-brand-size: 1.05rem;
  --xwui-bar-site-header-logo-min: 28px;
  --xwui-bar-site-header-gap: 1.5rem;
}
.xwui-bar-site-header--lg {
  --xwui-bar-site-header-pad-block: 1rem;
  --xwui-bar-site-header-condensed-pad: 0.55rem;
  --xwui-bar-site-header-link-pad: 0.5rem 1rem;
  --xwui-bar-site-header-link-size: 1.05rem;
  --xwui-bar-site-header-brand-size: 1.15rem;
  --xwui-bar-site-header-logo-min: 34px;
  --xwui-bar-site-header-gap: 1.75rem;
}
.xwui-bar-site-header--xl {
  --xwui-bar-site-header-pad-block: 1.15rem;
  --xwui-bar-site-header-condensed-pad: 0.65rem;
  --xwui-bar-site-header-link-pad: 0.55rem 1.1rem;
  --xwui-bar-site-header-link-size: 1.125rem;
  --xwui-bar-site-header-brand-size: 1.25rem;
  --xwui-bar-site-header-logo-min: 40px;
  --xwui-bar-site-header-gap: 2rem;
}
.xwui-bar-site-header--xxl,
.xwui-bar-site-header--xxxl,
.xwui-bar-site-header--xxxxl {
  --xwui-bar-site-header-pad-block: 1.35rem;
  --xwui-bar-site-header-condensed-pad: 0.75rem;
  --xwui-bar-site-header-link-pad: 0.65rem 1.25rem;
  --xwui-bar-site-header-link-size: 1.2rem;
  --xwui-bar-site-header-brand-size: 1.35rem;
  --xwui-bar-site-header-logo-min: 48px;
  --xwui-bar-site-header-gap: 2.25rem;
}
.xwui-bar-site-header[class*="xwui-bar-site-header--"] > .xwui-bar-site-header__inner {
  gap: var(--xwui-bar-site-header-gap, var(--spacing-lg, 1.5rem));
}

/* ── Logo position (config.logoPosition: start | middle | end) ──────────────
 * Places the brand along the bar's main axis with LOGICAL spacing, so it
 * follows the document direction automatically (start = left in LTR, right in
 * RTL). Everything is scoped under the `data-logo-position` attribute - headers
 * that don't opt in keep the default space-between layout untouched. `order`
 * plus auto inline-margins position the three desktop clusters (brand · nav ·
 * actions); the compact (drawer) layout below keeps the burger opposite the
 * logo so it never lands on the same edge. */
.xwui-bar-site-header[data-logo-position] > .xwui-bar-site-header__inner {
  justify-content: flex-start;
}
.xwui-bar-site-header[data-logo-position] .xwui-bar-site-header__brand   { order: 1; }
.xwui-bar-site-header[data-logo-position] .xwui-bar-site-header__links   { order: 2; }
.xwui-bar-site-header[data-logo-position] .xwui-bar-site-header__actions { order: 3; }

/* start: [brand nav] ......................... [actions] */
.xwui-bar-site-header[data-logo-position="start"] .xwui-bar-site-header__actions {
  margin-inline-start: auto;
}

/* middle: [nav] ............ [brand] ............ [actions] */
.xwui-bar-site-header[data-logo-position="middle"] .xwui-bar-site-header__links   { order: 1; }
.xwui-bar-site-header[data-logo-position="middle"] .xwui-bar-site-header__brand {
  order: 2;
  margin-inline: auto;
}
.xwui-bar-site-header[data-logo-position="middle"] .xwui-bar-site-header__actions { order: 3; }

/* end: [nav] ......................... [actions] [brand] */
.xwui-bar-site-header[data-logo-position="end"] .xwui-bar-site-header__links { order: 1; }
.xwui-bar-site-header[data-logo-position="end"] .xwui-bar-site-header__actions {
  order: 2;
  margin-inline-start: auto;
}
.xwui-bar-site-header[data-logo-position="end"] .xwui-bar-site-header__brand { order: 3; }

/* Compact (drawer) layout: links + actions are hidden, so re-order the brand,
 * the mobile settings strip and the burger to keep the logo on its configured
 * edge with the burger opposite it. */
.xwui-bar-site-header[data-logo-position].is-mobile-nav > .xwui-bar-site-header__inner {
  justify-content: flex-start;
}
/* start: [brand] .................... [settings] [burger] */
.xwui-bar-site-header[data-logo-position="start"].is-mobile-nav .xwui-bar-site-header__brand {
  order: 0;
  margin-inline-end: auto;
}
.xwui-bar-site-header[data-logo-position="start"].is-mobile-nav .xwui-bar-site-header__mobile-settings { order: 1; }
.xwui-bar-site-header[data-logo-position="start"].is-mobile-nav .xwui-bar-site-header__inner > xwui-button,
.xwui-bar-site-header[data-logo-position="start"].is-mobile-nav .xwui-bar-site-header__inner > button[aria-controls="xwui-bar-site-header__drawer"] {
  order: 2;
}
/* Desktop still applies `__actions { margin-inline-start: auto }`. Two
   auto-margins split the leftover row, so settings + burger sit mid-bar
   with empty space past the hamburger. Brand's end-auto is the only spacer. */
.xwui-bar-site-header[data-logo-position="start"].is-mobile-nav .xwui-bar-site-header__actions {
  margin-inline-start: 0;
}
/* middle: [settings] ....... [brand] ....... [burger] */
.xwui-bar-site-header[data-logo-position="middle"].is-mobile-nav .xwui-bar-site-header__mobile-settings { order: 0; }
.xwui-bar-site-header[data-logo-position="middle"].is-mobile-nav .xwui-bar-site-header__brand {
  order: 1;
  margin-inline: auto;
}
.xwui-bar-site-header[data-logo-position="middle"].is-mobile-nav .xwui-bar-site-header__inner > xwui-button,
.xwui-bar-site-header[data-logo-position="middle"].is-mobile-nav .xwui-bar-site-header__inner > button[aria-controls="xwui-bar-site-header__drawer"] {
  order: 2;
}
/* end: [settings] [burger] .................... [brand] */
.xwui-bar-site-header[data-logo-position="end"].is-mobile-nav .xwui-bar-site-header__mobile-settings { order: 0; }
.xwui-bar-site-header[data-logo-position="end"].is-mobile-nav .xwui-bar-site-header__inner > xwui-button,
.xwui-bar-site-header[data-logo-position="end"].is-mobile-nav .xwui-bar-site-header__inner > button[aria-controls="xwui-bar-site-header__drawer"] {
  order: 1;
}
.xwui-bar-site-header[data-logo-position="end"].is-mobile-nav .xwui-bar-site-header__brand {
  order: 2;
  margin-inline-start: auto;
}
.xwui-bar-site-header[data-logo-position="end"].is-mobile-nav .xwui-bar-site-header__actions {
  margin-inline-start: 0;
}

/* Scroll-condense (config.condenseOnScroll): tighter bar once scrolled off the
   top. The pad is a token so brands retune the condensed height without
   touching the mechanism class. */
.xwui-bar-site-header.is-condensed > .xwui-bar-site-header__inner {
  padding-block: var(--xwui-bar-site-header-condensed-pad, 0.45rem);
}
@media (prefers-reduced-motion: reduce) {
  .xwui-bar-site-header__inner { transition: none; }
}

.xwui-bar-site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: var(--xwui-bar-site-header-brand-size, 1.05rem);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
  /* Let logo 3D optical scale overflow past the brand slot without clipping. */
  overflow: visible;
}
.xwui-bar-site-header__brand:hover { text-decoration: none; }
.xwui-bar-site-header__brand xwui-logo {
  display: inline-flex;
  min-height: var(--xwui-bar-site-header-logo-min, 28px);
  overflow: visible;
}

/* Text wordmark for a logo-less brand (data.brand.title/subtitle). Shares the
   logo's min-height so the bar keeps the same chrome height whether the host
   ships a mark or only a name. Title styling is inherited from __brand
   (weight/size/color/tracking) - only the box is defined here. */
.xwui-bar-site-header__brand-text {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  min-height: var(--xwui-bar-site-header-logo-min, 28px);
  min-width: 0;
}
.xwui-bar-site-header__brand-title {
  line-height: 1.15;
  white-space: nowrap;
}
.xwui-bar-site-header__brand-subtitle {
  font-size: var(--xwui-bar-site-header-brand-subtitle-size, 0.68em);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.xwui-bar-site-header__links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  /* Allow the cluster to shrink so scrollWidth>clientWidth (and wrap, if a
     consumer overrides nowrap) is observable before labels paint on 2 lines. */
  min-width: 0;
  flex-shrink: 1;
}
.xwui-bar-site-header__link {
  padding: var(--xwui-bar-site-header-link-pad, 0.4rem 0.85rem);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--xwui-bar-site-header-link-size, 0.95rem);
  text-decoration: none;
  /* Prefer hamburger over 2-line labels - overflow is detected in JS. */
  white-space: nowrap;
  transition: color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
    background-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
}
.xwui-bar-site-header__link:hover,
.xwui-bar-site-header__link:focus-visible {
  color: var(--text-primary);
  background: var(--bg-hover);
  text-decoration: none;
}
.xwui-bar-site-header__link:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--accent-primary));
  outline-offset: var(--focus-ring-offset, 2px);
}
.xwui-bar-site-header__link.is-active {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.xwui-bar-site-header__link-icon {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 0.4rem;
  vertical-align: -0.15em;
}

.xwui-bar-site-header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  margin-inline-start: 0.35rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-pill, 9999px);
  background: var(--accent-primary, var(--brand));
  color: var(--text-on-accent, #fff);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.xwui-bar-site-header__link.has-badge {
  /* badge child provides the count affordance */
}

/* ── Dropdown nav item - a top-level menu node with children. ──────────────
   Open is pure CSS: hover OR keyboard focus anywhere inside the wrapper
   reveals the panel, so there is no JS open/close state to manage. */
.xwui-bar-site-header__menu {
  position: relative;
  display: inline-flex;
}
.xwui-bar-site-header__menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  transition: color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
    background-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
}
a.xwui-bar-site-header__menu-trigger:hover {
  text-decoration: none;
}
.xwui-bar-site-header__menu-trigger:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--accent-primary));
  outline-offset: var(--focus-ring-offset, 2px);
}
.xwui-bar-site-header__menu.is-active > .xwui-bar-site-header__menu-trigger {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.xwui-bar-site-header__menu-caret {
  display: inline-flex;
  transition: transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
}
.xwui-bar-site-header__menu:hover .xwui-bar-site-header__menu-caret,
.xwui-bar-site-header__menu:has(:focus-visible) .xwui-bar-site-header__menu-caret {
  transform: rotate(180deg);
}
.xwui-bar-site-header__dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 51;
  min-width: 14rem;
  margin-top: 0.4rem;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg-elevated, var(--bg-card, var(--bg-app)));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg, var(--radius-md));
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--motion-duration-fast, 140ms) var(--motion-easing-standard, ease),
    transform var(--motion-duration-fast, 140ms) var(--motion-easing-standard, ease),
    visibility 0s linear var(--motion-duration-fast, 140ms);
}
.xwui-bar-site-header__menu:hover .xwui-bar-site-header__dropdown,
.xwui-bar-site-header__menu:has(:focus-visible) .xwui-bar-site-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
/* Escape dismisses a panel that hover or focus is holding open (WCAG 1.4.13:
   content shown on hover or focus must be dismissible without moving either).
   Placed AFTER the open rule at the same specificity so it wins; the class is
   cleared once the pointer and focus have both left. */
.xwui-bar-site-header__menu.is-dismissed .xwui-bar-site-header__dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition-delay: 0s;
}
.xwui-bar-site-header__menu.is-dismissed .xwui-bar-site-header__menu-caret {
  transform: none;
}
.xwui-bar-site-header__dropdown-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
    background-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
}
.xwui-bar-site-header__dropdown-link:hover,
.xwui-bar-site-header__dropdown-link:focus-visible {
  background: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}
.xwui-bar-site-header__dropdown-link:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--accent-primary));
  outline-offset: var(--focus-ring-offset, -2px);
}
.xwui-bar-site-header__dropdown-link.is-active {
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}
.xwui-bar-site-header__dropdown-sep {
  height: 1px;
  margin: 0.3rem 0.2rem;
  background: var(--border-light);
}
/* No RTL override: `inset-inline-start: 0` above already anchors the panel to
   the trigger's start edge in either direction (left in LTR, right in RTL). The
   rule that used to sit here re-pinned it to `inset-inline-end: 0` under
   [dir="rtl"], which in RTL is the physical LEFT edge - the LTR layout again,
   hanging the first menu's panel off the wrong side of the bar. */

.xwui-bar-site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Progressive overflow hide · slotted actions with data-collapse-priority="N"
   (lower N hides first) get this class before the bar flips to is-mobile-nav. */
.xwui-bar-site-header__actions > .is-collapse-priority-hidden,
.xwui-bar-site-header .is-collapse-priority-hidden {
  display: none !important;
}

/* Labeled action pills (Sign-in, CTA, …) stay content-sized. Native-flat
   replaces <xwui-button> with <button.xwui-button>, so target both. Never
   stretch to brand-row height; never shrink-clip long translated labels. */
.xwui-bar-site-header__actions > .xwui-button,
.xwui-bar-site-header__actions > button.xwui-button,
.xwui-bar-site-header__drawer-actions > .xwui-button,
.xwui-bar-site-header__drawer-actions > button.xwui-button {
  align-self: center;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Mobile menu toggle - the only interactive control placed as a direct child of
   .xwui-bar-site-header__inner (nav links/actions live in sibling nodes).
   XWUIButton is native-flat: <xwui-button> is replaced by a real <button>, so we
   must target both the legacy host and the flattened control (aria-controls is set
   in buildBurger and survives native-flat attribute copy). */
.xwui-bar-site-header__inner > xwui-button,
.xwui-bar-site-header__inner > button[aria-controls="xwui-bar-site-header__drawer"] {
  display: none !important;
}

.xwui-bar-site-header__drawer {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 49;
  background: var(--xwui-bar-site-header-drawer-bg, var(--bg-elevated, var(--bg-card, var(--bg-app))));
  /* Unset token keeps today's bottom edge. A set token paints every side,
     including the bottom, so a floating drawer can be a card rather than a sheet. */
  border: var(--xwui-bar-site-header-drawer-border, 0);
  border-bottom: var(--xwui-bar-site-header-drawer-border, 1px solid var(--border-light));
  border-radius: var(--xwui-bar-site-header-drawer-radius, 0);
  box-shadow: var(--shadow-lg);
  max-height: 0;
  overflow: hidden;
  /* `visibility: hidden` is what takes the closed drawer's links OUT of the tab
     order: opacity 0 and pointer-events none only hide and un-click them, and
     aria-hidden does not make a focusable link unfocusable. The hide is delayed
     by the fade so the close still animates; the open rule below shows at once. */
  visibility: hidden;
  transition: max-height var(--motion-duration-normal, 220ms) var(--motion-easing-standard, ease),
    opacity var(--motion-duration-fast, 180ms) var(--motion-easing-standard, ease),
    visibility 0s linear var(--motion-duration-normal, 220ms);
  opacity: 0;
  pointer-events: none;
}
.xwui-bar-site-header__drawer.is-open {
  max-height: 80vh;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.xwui-bar-site-header__drawer-list {
  display: flex;
  flex-direction: column;
  padding: 0.5rem var(--spacing-lg, 1rem);
}
.xwui-bar-site-header__drawer-link {
  padding: 0.85rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
    background-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
}
.xwui-bar-site-header__drawer-link:hover,
.xwui-bar-site-header__drawer-link:focus-visible {
  background: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}
.xwui-bar-site-header__drawer-link:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--accent-primary));
  outline-offset: var(--focus-ring-offset, -2px);
}
.xwui-bar-site-header__drawer-link.is-active {
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  color: var(--accent-primary);
}
.xwui-bar-site-header__drawer-link.is-active::after {
  content: '\2192';
}
/* The arrow points the way the text flows: left in a right-to-left page. */
.xwui-bar-site-header__drawer-link.is-active:dir(rtl)::after {
  content: '\2190';
}
.xwui-bar-site-header__drawer-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem var(--spacing-lg, 1rem) 1rem;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}

/* Lang + currency sit together below nav - not mixed into the CTA row.
   Drawer uses overflow:hidden for the open animation, so menus must expand
   in-flow (position:static) or they clip / paint over the nav edge. */
.xwui-bar-site-header__drawer-settings {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem var(--spacing-lg, 1rem) 0.35rem;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}
.xwui-bar-site-header__drawer-settings > .xwui-setting-language,
.xwui-bar-site-header__drawer-settings > .xwui-setting-currency,
.xwui-bar-site-header__drawer-settings > .xwui-lang-switcher,
.xwui-bar-site-header__drawer-settings > [data-setting-language],
.xwui-bar-site-header__drawer-settings > [data-setting-currency],
.xwui-bar-site-header__drawer-actions > .xwui-setting-language,
.xwui-bar-site-header__drawer-actions > .xwui-setting-currency,
.xwui-bar-site-header__drawer-actions > .xwui-lang-switcher {
  flex: 1 1 calc(50% - 0.25rem);
  min-width: 7.5rem;
  align-self: stretch;
}
.xwui-bar-site-header__drawer-settings .xwui-setting-language__btn,
.xwui-bar-site-header__drawer-settings .xwui-setting-currency__btn,
.xwui-bar-site-header__drawer-settings .xwui-lang-switcher__btn,
.xwui-bar-site-header__drawer-actions .xwui-setting-language__btn,
.xwui-bar-site-header__drawer-actions .xwui-setting-currency__btn,
.xwui-bar-site-header__drawer-actions .xwui-lang-switcher__btn {
  width: 100%;
  justify-content: flex-start;
}
.xwui-bar-site-header__drawer-settings .xwui-setting-language__menu,
.xwui-bar-site-header__drawer-settings .xwui-setting-currency__menu,
.xwui-bar-site-header__drawer-settings .xwui-lang-switcher__menu,
.xwui-bar-site-header__drawer-actions .xwui-setting-language__menu,
.xwui-bar-site-header__drawer-actions .xwui-setting-currency__menu,
.xwui-bar-site-header__drawer-actions .xwui-lang-switcher__menu {
  position: static;
  inset: auto;
  min-width: 0;
  width: 100%;
  margin-block-start: 6px;
  max-height: min(50vh, 16rem);
  box-shadow: none;
  z-index: auto;
}

/* Compact header strip: clones of slotted lang/currency beside the burger. */
.xwui-bar-site-header__mobile-settings {
  display: none;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.xwui-bar-site-header.is-mobile-nav .xwui-bar-site-header__mobile-settings:not(:empty) {
  display: inline-flex;
}

/* Mobile drawer - a parent menu node flattens into a labelled group with its
   children indented beneath it (no nested dropdown on touch). */
.xwui-bar-site-header__drawer-group {
  display: flex;
  flex-direction: column;
}
.xwui-bar-site-header__drawer-group-title {
  padding: 0.85rem 0.75rem 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, var(--text-secondary));
}
.xwui-bar-site-header__drawer-group .xwui-bar-site-header__drawer-link {
  padding-inline-start: 1.4rem;
  font-weight: 500;
}

.xwui-bar-site-header__scrim {
  position: fixed;
  inset: 0;
  /* The scrim lives INSIDE the header root (a stacking context), so any
     z-index here still paints above the page - but it must stay BELOW the
     header's own inner row and drawer, or it dims the brand + burger too. */
  z-index: 1;
  background: color-mix(in srgb, var(--bg-app) 55%, transparent);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-duration-fast, 180ms) var(--motion-easing-standard, ease);
}
.xwui-bar-site-header__scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .xwui-bar-site-header__drawer,
  .xwui-bar-site-header__scrim {
    transition: none;
  }
}

/* Compact layout is class-driven (`.is-mobile-nav`) from JS:
   matchMedia(mobileBreakpoint) OR nav wrap/overflow measure (ResizeObserver).
   CSS cannot use custom props in @media - the 860px query is a no-JS floor only. */
.xwui-bar-site-header.is-mobile-nav .xwui-bar-site-header__links { display: none; }
/* Compact mode empties the actions strip rather than removing it, so that an
   action marked `data-persistent` can stay put. The container keeps display:flex
   because an empty flex row with a gap occupies nothing anyway - and because
   removing it would mean a persistent action had no box to live in.

   WHY the opt-out exists: everything else in the header is site NAVIGATION, and
   navigation legitimately belongs in the drawer when space runs out. A
   persistent action is the opposite kind of thing - a shortcut whose entire
   purpose is being one tap away - so folding it into a hamburger defeats it. */
/* `:not([data-xwui-measuring])` is the escape hatch for the collapse measure.
   measureSiteHeaderNavNeedsCompact() reveals `.actions` to read its intrinsic
   width, but revealing the CONTAINER is useless while this rule keeps its
   CHILDREN at display:none - the container then measures 0, which the compact
   branch reads as "actions never materialized" and latches the hamburger on
   forever. Stamping the attribute for the duration of the measure lets the real
   width through without the children ever painting (they stay inside the
   off-screen, visibility:hidden container). */
.xwui-bar-site-header.is-mobile-nav:not([data-xwui-measuring])
  .xwui-bar-site-header__actions
  > :not([data-persistent]) {
  display: none;
}
/* An empty actions flex item still consumes parent `gap`, which leaves a
   hole past the burger. Hide the strip when nothing persistent remains. */
.xwui-bar-site-header.is-mobile-nav:not([data-xwui-measuring])
  .xwui-bar-site-header__actions:not(:has([data-persistent])) {
  display: none;
}
.xwui-bar-site-header.is-mobile-nav .xwui-bar-site-header__inner > xwui-button,
.xwui-bar-site-header.is-mobile-nav .xwui-bar-site-header__inner > button[aria-controls="xwui-bar-site-header__drawer"] {
  display: inline-flex !important;
}
.xwui-bar-site-header:not(.is-mobile-nav) .xwui-bar-site-header__drawer,
.xwui-bar-site-header:not(.is-mobile-nav) .xwui-bar-site-header__scrim { display: none; }
@media (max-width: 860px) {
  .xwui-bar-site-header:not(.is-mobile-nav) .xwui-bar-site-header__links { display: none; }
  .xwui-bar-site-header:not(.is-mobile-nav) .xwui-bar-site-header__inner > xwui-button,
  .xwui-bar-site-header:not(.is-mobile-nav) .xwui-bar-site-header__inner > button[aria-controls="xwui-bar-site-header__drawer"] {
    display: inline-flex !important;
  }
}
@media (min-width: 861px) {
  .xwui-bar-site-header:not(.is-mobile-nav) .xwui-bar-site-header__drawer,
  .xwui-bar-site-header:not(.is-mobile-nav) .xwui-bar-site-header__scrim { display: none; }
}

/* ── floating pill ───────────────────────────────────────────────────── */
.xwui-bar-site-header.is-floating {
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding-block: 18px;
}
.xwui-bar-site-header.is-floating > .xwui-bar-site-header__inner {
  padding: 8px 8px 8px 20px;
  gap: 20px;
  border-radius: 999px;
  background: var(--bar-floating-bg, color-mix(in srgb, var(--bg-primary) 60%, transparent));
  border: 1px solid var(--bar-floating-border, var(--border-light));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.xwui-bar-site-header.is-floating .xwui-bar-site-header__link {
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: var(--xwui-bar-site-header-link-size, 0.9rem);
}
.xwui-bar-site-header.is-floating .xwui-bar-site-header__link.is-active,
.xwui-bar-site-header.is-floating .xwui-bar-site-header__link[aria-current="page"] {
  color: var(--bar-floating-current-ink, var(--bg-primary));
  background: var(--bar-floating-current-bg, var(--text-primary));
}
.xwui-bar-site-header.is-floating .xwui-button { border-radius: 999px; }