/* The navbar (with its breadcrumb) stays pinned while scrolling on every
   viewport; on mobile this also matches the fixed back tab and breadcrumb pill
   that sit just beneath it. */

/* DO NOT set `overscroll-behavior-y: none` (or `contain`) on `html` / `body`
   to "fix" sticky-vs-fixed chrome detach during rubber-band overscroll.
   That property disables the browser's native pull-to-refresh gesture on
   touch devices (phones, tablets, and any viewport ≥901px where the old
   desktop-only media query still applied). Prefer fixing the detach by
   aligning positioning (e.g. make related chrome sticky/fixed consistently)
   or gating with pointer media queries that exclude touch — never by
   killing document overscroll. */
#topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.topbar-user-menu__icon {
    display: block;
    fill: currentColor;
    height: 15px;
    width: 13px;
}

.topbar-user-menu__item {
    font-size: 15px;
    font-weight: 500;
}

.topbar-user-menu__item i {
    display: inline-flex;
    font-size: 15px;
    justify-content: center;
    line-height: 1;
    width: 16px;
}

.topbar-user-menu__item span {
    line-height: 20px;
}

/* A plain link among the header's menus (InsuranceClerk, ENGPROD-601 QA round 2): the look of the
 * Company and Project triggers (sc-header-nav-trigger), without their chevron since it opens a page. */
.topbar-nav-link {
  align-items: center;
  border-radius: var(--sc-border-radius-pill, 999px);
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  font-size: var(--sc-font-size-body, 16px);
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 24px;
  min-height: 32px;
  padding: var(--sc-space-xs, 4px) var(--sc-space-lg, 16px);
  text-decoration: none;
  white-space: nowrap;
}

.topbar-nav-link:hover {
  background: var(--sc-brand-mint, #e2f5f2);
  color: var(--sc-brand-blue, #0c0a3e);
  text-decoration: none;
}

.topbar-nav-link:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .topbar-nav-link {
    min-height: 44px;
    padding-inline: var(--sc-space-sm, 8px);
  }
}