/*
 * Shared "On this page" bar.
 *
 * Every jump bar on the site (the bespoke niche and product pages each ship
 * their own markup and class) is pinned the same way: directly under the fixed
 * site header, whatever the header's height is at that screen size. The height
 * comes from --tqp-header-h, which public/scripts/section-nav.js sets from the
 * real header on load and on resize (80px is the fallback). The script also
 * highlights the section in view, keeps the highlighted link visible in the
 * bar on phones, and builds the same bar on service-area pages, which have
 * none in their templates.
 */
:root { --tqp-header-h: 80px; }

nav[aria-label="On this page"],
nav.tqp-sectionnav {
  position: sticky !important;
  top: var(--tqp-header-h) !important;
  z-index: 40 !important;
}

/* A page wrapper with overflow hidden stops any sticky child from sticking. */
.ar-page { overflow: clip !important; }

nav[aria-label="On this page"] a[aria-current="true"],
nav.tqp-sectionnav a[aria-current="true"] {
  box-shadow: inset 0 -2px 0 currentColor;
  font-weight: 700;
}

/* The bar this script builds for pages that have none. */
nav.tqp-sectionnav {
  background: rgba(250, 249, 245, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(20, 24, 28, 0.14);
  font-family: var(--font-sans, system-ui, sans-serif);
}
nav.tqp-sectionnav .tqp-sectionnav-inner {
  display: flex;
  gap: 4px 22px;
  width: min(100% - 32px, 1280px);
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
nav.tqp-sectionnav .tqp-sectionnav-inner::-webkit-scrollbar { display: none; }
nav.tqp-sectionnav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 13.5px;
  font-weight: 600;
  color: #343b44;
  text-decoration: none;
  white-space: nowrap;
}
nav.tqp-sectionnav a:hover { color: #000; }
nav.tqp-sectionnav a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
nav.tqp-sectionnav.tqp-sectionnav--dark {
  background: rgba(14, 17, 20, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
nav.tqp-sectionnav.tqp-sectionnav--dark a { color: #cdd3da; }
nav.tqp-sectionnav.tqp-sectionnav--dark a:hover,
nav.tqp-sectionnav.tqp-sectionnav--dark a[aria-current="true"] { color: #fff; }