/*
 * In-page sub-navigation: one look for every bar that sits under (or replaces) the site header while scrolling.
 *   - #internalmenu            WPBakery row made sticky by "sticky-element" JS. Used by the glossary A-Z bar and by
 *                              product sub-brand headers (People Counting, Donatello media player/vertica/video wall)
 *   - .topbar_menu/.header_submenu   customer-experience article series (theme template ctemp.css)
 *
 * Look: solid white bar, hairline bottom border, no shadow; links are ink text that become a blue-tint chip on hover;
 * the current page is blue. Legacy CSS made these bars 95% opaque (content showed through) and coloured them
 * (blue bands, green/underlined links).
 */

/* ---- sticky WPBakery rows (#internalmenu) ---------------------------------------------------------------- */
body.wt-site #internalmenu {
  opacity: 1 !important;
  background: #fff !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--wt-line);
}
body.wt-site #internalmenu > .upb_row_bg {
  background: #fff !important;
}

/* A sub-brand header (People Counting, Donatello, Careers) replaces the site header while it is stuck, everywhere:
   some pages hid the site header, others let it cover the top of the bar. The glossary bar (.sticky-align) is
   different: it sits under the site header. */
body.wt-site:has(#internalmenu.element-is-sticky:not(.sticky-align *)) #Top_bar.is-sticky {
  display: none !important;
}

/* Sub-brand header links ("Overview  How it Works"): authored as underlined, colour-spanned text */
body.wt-site #internalmenu .sticky-nav-text p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 0; /* swallows the   spacers between links */
}
body.wt-site #internalmenu .sticky-nav-text a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--wt-r-pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--wt-ink) !important;
  text-decoration: none !important;
  transition: background-color var(--wt-fast) var(--wt-ease), color var(--wt-fast) var(--wt-ease);
}
body.wt-site #internalmenu .sticky-nav-text a :is(span, strong, u) {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit;
}
/* the current section is the link the author emphasised (strong / coloured span) */
body.wt-site #internalmenu .sticky-nav-text a:has(strong, span[style*="color"]) {
  background: var(--wt-tint-blue);
  color: var(--wt-blue) !important;
  font-weight: 600;
}
body.wt-site #internalmenu .sticky-nav-text a:hover {
  background: var(--wt-tint-blue);
  color: var(--wt-blue) !important;
}

/* Glossary A-Z: letters as small chips on the white bar */
body.wt-site ul#menu-glossary {
  background: #fff !important;
  padding: 12px max(16px, calc((100% - 1200px) / 2)) !important;
  gap: 6px;
  justify-content: space-between;
  overflow-x: auto !important;
  scrollbar-width: none;
}
body.wt-site ul#menu-glossary li {
  margin: 0 !important;
  flex: 0 0 auto;
}
body.wt-site ul#menu-glossary li a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border: 1px solid var(--wt-line) !important;
  border-radius: var(--wt-r-pill);
  color: var(--wt-ink) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: #fff;
  transition: background-color var(--wt-fast) var(--wt-ease), border-color var(--wt-fast) var(--wt-ease), color var(--wt-fast) var(--wt-ease);
}
body.wt-site ul#menu-glossary li a:hover {
  background: var(--wt-tint-blue) !important;
  border-color: var(--wt-blue) !important;
  color: var(--wt-blue) !important;
}
body.wt-site ul#menu-glossary li.disable a {
  color: #b3bac6 !important;
  border-color: var(--wt-line) !important;
  background: var(--wt-tint-grey);
}
@media (max-width: 767px) {
  body.wt-site ul#menu-glossary {
    justify-content: flex-start;
    padding: 10px 16px !important;
  }
  body.wt-site ul#menu-glossary li a {
    width: 34px;
    height: 34px;
  }
}

/* ---- customer-experience series sub-menu ----------------------------------------------------------------- */
body.wt-site .header_submenu {
  box-sizing: border-box; /* legacy: width 100% + padding pushed the page 20px wider than the viewport */
  background: #fff !important;
  border-bottom: 1px solid var(--wt-line);
  padding: 8px 16px !important;
  scrollbar-width: none;
}
body.wt-site .header_submenu ul {
  display: flex;
  justify-content: center;
  gap: 6px;
}
body.wt-site .header_submenu ul li a,
body.wt-site .topbar_menu.header_submenu_sticky .header_submenu ul li a {
  padding: 8px 16px !important;
  border-radius: var(--wt-r-pill) !important;
  color: var(--wt-ink) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  text-decoration: none;
}
body.wt-site .header_submenu ul li a:hover,
body.wt-site .header_submenu ul li.current-menu-item a,
body.wt-site .header_submenu ul li a[aria-current] {
  background: var(--wt-tint-blue) !important;
  color: var(--wt-blue) !important;
}
@media (max-width: 1200px) {
  body.wt-site .header_submenu ul {
    justify-content: flex-start;
  }
}
/* the article's table-of-contents card sticks below header + sub-menu, not under them */
body.wt-site:has(.header_submenu_sticky) .sticky_widget {
  top: 132px !important;
}

/* Article table of contents (customer-experience template): legacy bullets were translucent green */
body.wt-site #toc ul li.nav-h2 a::before {
  background: var(--wt-blue) !important;
  border-radius: 50%;
  width: 6px !important;
  height: 6px !important;
  top: 9px !important;
}
body.wt-site #toc ul li:is(.nav-h3, .nav-h4) a::before {
  color: var(--wt-line-strong) !important;
  border-color: var(--wt-line-strong) !important;
}