/* ux-navigation.css — shared chrome additions loaded via partials/footer.html
   on every opted-in page (after legal.css and page-local styles).

   Scope is intentionally narrow:
   1. URL-target scroll offsets, so deep links (#anchors) are not covered by
      the sticky topbar.
   2. Keyboard focus visibility for topbar navigation links.
   3. Compact responsive topbar on narrow viewports — all nav entries stay
      visible and wrapped; only spacing, logo height, and tap sizing shrink.
   4. A right-edge overflow affordance for horizontally scrolling comparison
      tables (.vs-table-wrap) on narrow viewports.

   Selectors are scoped to the .topbar / .vs-table-wrap surfaces so unrelated
   page content is not affected. */

:target {
  scroll-margin-top: 96px;
}

.topbar nav a:focus-visible {
  outline: 2px solid var(--accent, #7fb2d2);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 760px) {
  :target {
    scroll-margin-top: 128px;
  }

  /* Compact header. Higher-specificity, later-loaded variants of the
     legal.css / home / downloads topbar rules; height stays content-driven
     and the nav keeps flex-wrap so no link is hidden. */
  .topbar .topbar-inner {
    min-height: 0;
    height: auto;
    padding: 8px 0 10px;
    gap: 8px;
  }

  .topbar a.lockup img {
    height: 30px;
    width: auto;
  }

  .topbar nav {
    gap: 2px 12px;
    font-size: 0.875rem;
    line-height: 1.25;
  }

  .topbar nav a {
    padding: 5px 8px;
  }

  .topbar .topbar-inner nav a.cta {
    min-height: 0;
    padding: 6px 12px;
  }
}

/* Comparison tables declare min-width: 560px inside .vs-table-wrap
   (overflow-x: auto). Below a 599px viewport the wrap is always narrower
   than the table, so a right-edge fade is a truthful "more to the right"
   affordance. Above that width the table may fit, so no fade is drawn. */
@media (max-width: 599px) {
  .vs-table-wrap {
    background-image: linear-gradient(
      to right,
      transparent,
      color-mix(in srgb, var(--bg) 88%, transparent)
    );
    background-repeat: no-repeat;
    background-position: right;
    background-size: 28px 100%;
  }
}