/* Library Header */

.com-library-header {
  background: var(--color-primary-deep-purple, #2d0f52);
  color: hsl(0 0% 100% / 1);
  border-bottom: 5px solid var(--color-primary-yellow);
  /*
     Breathing room between the header band and the page body below it.
     The page templates space components 2.4rem apart, which reads as cramped
     under a full-bleed band this heavy. Set as margin-bottom on the header (not
     margin-top on whatever follows) so it works no matter which component comes
     next: in normal flow it collapses with that component's 2.4rem top margin,
     so the gap becomes this value rather than the two added together.
  */
  --com-library-header-gap-after: 3.5rem;
  margin-bottom: var(--com-library-header-gap-after);
}

.com-library-header-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 40px var(--mobile-content-edge-padding);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
}

/* Now an <h1>: the extra class raises specificity above the global `h1` and
   `.int-page h1` rules so their margins, size and dark heading colour don't leak in. */
.com-library-header .com-library-header-title {
  margin: 0;
  font-size: clamp(2.2rem, 1rem + 3vw, 48px);
  line-height: 1.2;
  font-weight: 700;
  color: hsl(0 0% 100% / 1);
}

.com-library-header-subtitle {
  margin: 0.6rem 0 0;
  font-size: clamp(1rem, 0.9rem + 0.6vw, 20px);
  color: hsl(0 0% 100% / 0.8);
}

.com-library-header-tags {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.com-library-header-tag {
  padding: 4px 11px;
  background: hsl(0 0% 100% / 0.12);
  border: 1px solid hsl(0 0% 100% / 0.25);
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* LibAnswers chat button sits under the pills, preceded by a purpose label.
   The button itself is styled by the vendor configurator; we own the label,
   the layout, and the discoverability behaviors (script.js):
     - a one-time pulse on the button shortly after it renders
     - a floating bottom-right clone while the header button is scrolled
       out of view */
.com-library-header-chat {
  /* more air than the pills get, so this reads as its own action group */
  margin-top: 22px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.com-library-header-chat-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: hsl(0 0% 100% / 0.92);
  font-size: 0.98rem;
  font-weight: 600;
}
.com-library-header-chat-label svg { flex: 0 0 auto; }

/* One-time pulse — a single expanding ring; script.js adds/removes the class */
@keyframes wnmu-chat-pulse {
  0%   { box-shadow: 0 0 0 0    hsl(41 97% 59% / 0.6); }
  100% { box-shadow: 0 0 0 15px hsl(41 97% 59% / 0); }
}
.com-library-header-chat .wnmu-chat-pulse {
  animation: wnmu-chat-pulse 1s ease-out 2;
}

/* Floating fallback — shown by script.js only while the header's chat button
   is scrolled out of view. Holds a clone of the vendor button (vendor CSS
   still styles the button itself; we add elevation + icon alignment). */
.com-library-header-chat-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}
.com-library-header-chat-float.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.com-library-header-chat-float > * {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 6px 22px hsl(0 0% 0% / 0.35);
}
.com-library-header-chat-float svg { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .com-library-header-chat .wnmu-chat-pulse { animation: none; }
  .com-library-header-chat-float { transition: none; }
}

.com-library-header-search > *:first-child { margin-top: 0; }
.com-library-header-search > *:last-child { margin-bottom: 0; }

@media (width <= 820px) {
  /* Smaller screens: a bit less, so the content isn't pushed too far down. */
  .com-library-header { --com-library-header-gap-after: 2.75rem; }

  .com-library-header-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 5px;
  }

  /*
   * On mobile the search box is narrow, so each tab's icon + label wrap onto
   * two lines. Center them within each tab instead. (Override here.)
   */
  .com-library-header-search #discovery-search-box .material-tab {
    text-align: center;
  }

  /*
   * The search box carries an inline `margin: 1em 0` (top + bottom). Trim it to
   * a single 1rem bottom margin. !important is required to beat the inline style.
   */
  .com-library-header-search #discovery-search-box {
    margin: 0 0 1rem !important;
  }

  .com-library-header-chat-float {
    right: 14px;
    bottom: 14px;
  }
}