/* Capability section tabs. Header_Dark_Blue comp at 1600.
 *
 * Bar     full bleed white, 52 tall, 1px --hlb-rule under it
 * Tabs    left, first label on the content edge, active tab mint fill
 * Actions right, PDF icon then GET IN TOUCH, button 35 tall in the comp
 *
 * Label is --hlb-turquoise-text 5.15 on white. The comp's #1CA5A1 is 3.02 and
 * fails at 12px. Active ink on mint 10.25.
 *
 * Tabs use the standalone link role from links.css with a local palette, so
 * the hover line and focus ring match every other link on the site. The
 * current tab swaps the line for the mint block.
 *
 * Pinning is JS (section-tabs.js): .is-fixed at the window top, .is-faded
 * once the page content ends. Same approach the chapter nav proved out on
 * this layout.
 */

.hlb-cap-tabs {
  --hlb-cap-tabs-height: 52px;

  --hlb-link-fg:       var(--hlb-turquoise-text);
  --hlb-link-fg-hover: var(--hlb-ink);
  --hlb-link-accent:   var(--hlb-turquoise);
  --hlb-link-focus:    var(--hlb-navy);

  position: relative;
  z-index: 150;
  width: 100%;
  background: var(--hlb-white);
  border-bottom: 1px solid var(--hlb-rule);
  transition: opacity .25s ease, visibility 0s linear 0s;
}

.hlb-cap-tabs.is-fixed {
  position: fixed;
  right: 0;
  left: 0;
  box-shadow: 0 6px 20px rgba(8, 53, 88, 0.08);
}

.hlb-cap-tabs.is-faded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.hlb-cap-tabs__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: calc(var(--hlb-container) + (var(--hlb-gutter) * 2));
  min-height: var(--hlb-cap-tabs-height);
  margin: 0 auto;
  padding: 0 var(--hlb-gutter);
}

.hlb-cap-tabs__nav {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
}

/* Uncode draws bullets with several selectors, so these win outright. */
.hlb-cap-tabs .hlb-cap-tabs__list,
.hlb-cap-tabs .hlb-cap-tabs__item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-indent: 0 !important;
}

.hlb-cap-tabs .hlb-cap-tabs__item::before,
.hlb-cap-tabs .hlb-cap-tabs__item::after {
  content: none !important;
  display: none !important;
}

.hlb-cap-tabs .hlb-cap-tabs__list {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.hlb-cap-tabs__list::-webkit-scrollbar {
  display: none;
}

.hlb-cap-tabs__item {
  flex: 0 0 auto;
}

/* Color, hover line, focus ring: standalone role, links.css. Type, box and
   the current state here. */
.hlb-cap-tabs .hlb-cap-tabs__link {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: var(--hlb-cap-tabs-height);
  padding: 0 18px;
  font: 400 12px/1 var(--hlb-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    color var(--hlb-speed) var(--hlb-ease),
    background-color var(--hlb-speed) var(--hlb-ease),
    text-decoration-color var(--hlb-speed) var(--hlb-ease);
}

/* Ring inside the tab, or the list's overflow clips it. */
:root .hlb-cap-tabs .hlb-cap-tabs__link:focus-visible {
  outline-offset: -2px;
}

:root .hlb-cap-tabs .hlb-cap-tabs__link[aria-current],
:root .hlb-cap-tabs .hlb-cap-tabs__link[aria-current]:visited,
:root .hlb-cap-tabs .hlb-cap-tabs__link[aria-current]:hover {
  background-color: var(--hlb-mint);
  color: var(--hlb-ink);
  text-decoration-color: transparent;
}

/* Actions. */
.hlb-cap-tabs__actions,
.hlb-cap-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 20px;
}

.hlb-cap-actions {
  display: none;
}

/* 44 square target around the 22px glyph. Mask so the color can move. */
.hlb-cap-tabs__pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--hlb-navy);
  text-decoration: none;
  transition: color var(--hlb-speed) var(--hlb-ease);
}

.hlb-cap-tabs__pdf:visited {
  color: var(--hlb-navy);
}

.hlb-cap-tabs__pdf:hover,
.hlb-cap-tabs__pdf:focus-visible {
  color: var(--hlb-blue);
}

.hlb-cap-tabs__pdf:focus-visible {
  outline: 2px solid var(--hlb-navy);
  outline-offset: -2px;
}

.hlb-cap-tabs__pdf-icon {
  display: block;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--hlb-pdf-icon) no-repeat center / contain;
  mask: var(--hlb-pdf-icon) no-repeat center / contain;
}

@media (forced-colors: active) {
  .hlb-cap-tabs__pdf-icon {
    background: CanvasText;
  }
}

/* Comp button is 35 tall, bar is 52. Still well over the 24px target min. */
.hlb-cap-tabs .hlb-cap-tabs__cta,
.hlb-cap-actions .hlb-cap-tabs__cta {
  min-height: 36px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Phones: bar is tabs only, actions drop into the page under it. */
@media (max-width: 699px) {
  .hlb-cap-tabs__inner {
    padding-right: 0;
  }

  .hlb-cap-tabs__actions {
    display: none;
  }

  .hlb-cap-actions {
    display: flex;
    justify-content: space-between;
    padding: 20px var(--hlb-gutter) 0;
  }

  .hlb-cap-tabs .hlb-cap-tabs__link {
    padding: 0 14px;
  }
    /* Strip runs edge to edge; the gutter becomes padding inside it, so tabs
     scroll off the screen edge instead of clipping mid-screen. */
  .hlb-cap-tabs__inner {
    padding-left: 0;
  }

  .hlb-cap-tabs .hlb-cap-tabs__list {
    padding-left: var(--hlb-gutter) !important;
    padding-right: var(--hlb-gutter) !important;
  }

  /* Edge fade, only on the side with more tabs. Classes come from
     section-tabs.js. A fade rather than a blur: blurred text reads as a
     rendering bug and hurts legibility. */
  .hlb-cap-tabs__list {
    --hlb-tabs-fade-l: 0px;
    --hlb-tabs-fade-r: 0px;

    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hlb-tabs-fade-l), #000 calc(100% - var(--hlb-tabs-fade-r)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--hlb-tabs-fade-l), #000 calc(100% - var(--hlb-tabs-fade-r)), transparent 100%);
  }

  .hlb-cap-tabs__list.has-more-left {
    --hlb-tabs-fade-l: 48px;
  }

  .hlb-cap-tabs__list.has-more-right {
    --hlb-tabs-fade-r: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hlb-cap-tabs,
  .hlb-cap-tabs.is-faded,
  .hlb-cap-tabs .hlb-cap-tabs__link,
  .hlb-cap-tabs__pdf {
    transition: none;
  }
}