[data-fui-comp="ui-site-header"] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md, 16px);
  inline-size: 100%;
  block-size: 100%;
  padding-inline: var(--spacing-lg, 24px);
}
[data-fui-comp="ui-site-header"] .ui-site-header__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg, 24px);
  margin-inline-start: var(--spacing-xl, 32px);
}
[data-fui-comp="ui-site-header"] .ui-site-header__links a {
  color: var(--ui-site-header-nav-color, currentColor);
  text-decoration: none;
  font-size: 14px;
}
[data-fui-comp="ui-site-header"] .ui-site-header__links a[data-fui-active] {
  color: var(--ui-site-header-nav-active-color, var(--color-primary, currentColor));
}

/* Opt-in underline-reveal variant (NavUnderline:true). A 1px rule wipes in
   from the left on hover / focus / active. Colour + vertical offset are
   themeable via the --ui-site-header-nav-underline-* vars. */
[data-fui-comp="ui-site-header"].ui-site-header--nav-underline .ui-site-header__links a {
  position: relative;
}
[data-fui-comp="ui-site-header"].ui-site-header--nav-underline .ui-site-header__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: var(--ui-site-header-nav-underline-bottom, -4px);
  height: 1px;
  background: var(--ui-site-header-nav-underline-color, var(--color-primary, currentColor));
  transition: right 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-fui-comp="ui-site-header"].ui-site-header--nav-underline .ui-site-header__links a:hover,
[data-fui-comp="ui-site-header"].ui-site-header--nav-underline .ui-site-header__links a:focus-visible {
  color: var(--ui-site-header-nav-active-color, var(--color-text, currentColor));
}
[data-fui-comp="ui-site-header"].ui-site-header--nav-underline .ui-site-header__links a:hover::after,
[data-fui-comp="ui-site-header"].ui-site-header--nav-underline .ui-site-header__links a:focus-visible::after,
[data-fui-comp="ui-site-header"].ui-site-header--nav-underline .ui-site-header__links a[data-fui-active]::after,
[data-fui-comp="ui-site-header"].ui-site-header--nav-underline .ui-site-header__links a[aria-current="page"]::after {
  right: 0;
}
@media (prefers-reduced-motion: reduce) {
  [data-fui-comp="ui-site-header"].ui-site-header--nav-underline .ui-site-header__links a::after {
    transition: none;
  }
}
[data-fui-comp="ui-site-header"] .ui-site-header__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  margin-inline-start: auto;
}
[data-fui-comp="ui-site-header"] .ui-site-header__mobile {
  display: none;
  position: relative;
}
[data-fui-comp="ui-site-header"] .ui-site-header__mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  background: transparent;
  border: 1px solid var(--ui-site-header-icon-border, transparent);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  list-style: none;
}
[data-fui-comp="ui-site-header"] .ui-site-header__mobile-toggle::-webkit-details-marker { display: none; }

/* Icon swap: menu in closed state, X in open state. Inline SVG paths
   inherit color via stroke="currentColor". Single source of visual
   truth — no pseudo-bar math, no transform animations to misalign. */
[data-fui-comp="ui-site-header"] .ui-site-header__icon { display: block; }
[data-fui-comp="ui-site-header"] .ui-site-header__icon--close { display: none; }
[data-fui-comp="ui-site-header"] details[open] .ui-site-header__icon--menu { display: none; }
[data-fui-comp="ui-site-header"] details[open] .ui-site-header__icon--close { display: block; }

/* Mobile drawer: position-, size-, and color-themable via CSS vars
   so a host can pick the popover-vs-sheet shape without overriding
   the rule. Defaults are a trigger-anchored popover at the top right;
   set --ui-site-header-drawer-position: fixed + inset values to
   convert to a viewport-anchored sheet. */
[data-fui-comp="ui-site-header"] .ui-site-header__mobile-links {
  position: var(--ui-site-header-drawer-position, absolute);
  inset-block-start: var(--ui-site-header-drawer-top, calc(100% + 8px));
  inset-inline-end: var(--ui-site-header-drawer-right, 0);
  inset-inline-start: var(--ui-site-header-drawer-left, auto);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
  min-inline-size: var(--ui-site-header-drawer-min-width, 200px);
  padding: var(--spacing-sm, 8px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(0,0,0,0.1));
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--ui-site-header-drawer-shadow, 0 10px 30px rgba(0,0,0,0.18));
  z-index: 50;
}
[data-fui-comp="ui-site-header"] .ui-site-header__mobile-links a {
  display: block;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
  color: currentColor;
  text-decoration: none;
  border-radius: var(--radius-sm, 6px);
}
[data-fui-comp="ui-site-header"] .ui-site-header__mobile-links a:hover,
[data-fui-comp="ui-site-header"] .ui-site-header__mobile-links a:focus-visible {
  background: var(--color-surface-soft, rgba(0,0,0,0.04));
}

/* Bar actions are layout-transparent on desktop (their cluster participates in
   the right group directly); the foot-of-drawer copy is hidden until ≤720px. */
[data-fui-comp="ui-site-header"] .ui-site-header__bar-actions { display: contents; }
[data-fui-comp="ui-site-header"] .ui-site-header__mobile-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 10px);
  margin-block-start: var(--spacing-md, 16px);
  padding-block-start: var(--spacing-md, 16px);
  border-block-start: 1px solid var(--color-border, rgba(0,0,0,0.1));
}
@media (max-width: 720px) {
  [data-fui-comp="ui-site-header"] .ui-site-header__links { display: none; }
  [data-fui-comp="ui-site-header"] .ui-site-header__mobile { display: block; }
  /* Collapse the bar actions into the drawer so the phone bar is just brand +
     hamburger. The drawer copy (.ui-site-header__mobile-actions) carries them. */
  [data-fui-comp="ui-site-header"] .ui-site-header__bar-actions { display: none; }
}

/* Sheet drawer variant: a full-height slide-in side drawer with a backdrop
   scrim, instead of the compact popover. The panel is only in the layout when
   the mobile <details> is shown (≤720px) and open, so these rules need no
   extra breakpoint guard. */
[data-fui-comp="ui-site-header"].ui-site-header--drawer-sheet .ui-site-header__mobile-links {
  position: fixed;
  inset-block: 0;
  inset-inline: auto 0;
  inline-size: var(--ui-site-header-drawer-width, min(84vw, 340px));
  block-size: 100dvh;
  max-block-size: 100dvh;
  border-radius: 0;
  border-block: 0;
  border-inline-end: 0;
  border-inline-start: 1px solid var(--color-border, rgba(0,0,0,0.1));
  padding: clamp(16px, 5vw, 24px);
  gap: 2px;
  box-shadow: var(--ui-site-header-drawer-shadow, -16px 0 44px rgba(15,12,24,0.28));
  animation: ui-site-header-drawer-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-fui-comp="ui-site-header"].ui-site-header--drawer-sheet .ui-site-header__mobile-links a {
  padding: var(--spacing-sm, 10px) var(--spacing-md, 12px);
  font-size: 1.05rem;
}
[data-fui-comp="ui-site-header"].ui-site-header--drawer-sheet details[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 49;
  background: var(--ui-site-header-scrim, rgba(10, 9, 15, 0.42));
  animation: ui-site-header-scrim-in 0.24s ease;
}
/* Keep the ✕ toggle above the sheet so there's a visible, tappable close
   affordance (Escape and nav-tap also close the disclosure). */
[data-fui-comp="ui-site-header"].ui-site-header--drawer-sheet summary { position: relative; z-index: 60; }
@keyframes ui-site-header-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes ui-site-header-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-fui-comp="ui-site-header"].ui-site-header--drawer-sheet .ui-site-header__mobile-links,
  [data-fui-comp="ui-site-header"].ui-site-header--drawer-sheet details[open]::before { animation: none; }
}