/* Docks .link-list-wrap below the header on scroll (toggled by js/link-list-sticky-nav(-drupal).js).
   top offset reuses var(--header-height) — don't hardcode px. top:0 variant (header hidden) lives in
   link-list-sticky-nav--desktop.css, gated to the same >=1024px breakpoint header.css uses. */

/* Fixed positioning can't be transitioned from the absolute resting state, so this keyframe fakes a
   reveal on stick instead of a visible jump; intentionally not played in reverse on unstick. */
@keyframes link-list-sticky-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body .link-list-wrap.link-list-wrap--stuck {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  z-index: 1000;
  background: var(--clr-white);
  transition: top 0.3s ease;
  animation: link-list-sticky-in 0.22s ease;
}

body .link-list-wrap.link-list-wrap--stuck .link-list {
  background: var(--clr-black-70);
  gap: 0;
}

body .link-list-wrap.link-list-wrap--stuck .link-list > .link-list__item:not(.link-list__item--light) > .link-list__link:not(:hover):not(:focus-visible):not(:active) {
  background: transparent;
}

/* Must stay `>` direct-child combinators, not descendant selectors: .link-list__item/.link-list__link are
   reused verbatim inside .link-list__more-menu (relocated by JS), and a descendant selector here would
   also re-match those dropdown items, overriding their own smaller sizing from link-list.css. */
/* Do not add `transition` on min-height/width/height/font-size below: js/link-list.js's ResizeObserver
   watches .link-list's box size, and animating these causes it to fire mid-animation and flicker items
   between the row and the "More" dropdown. Color/transform are safe to animate (don't affect layout). */
body .link-list-wrap.link-list-wrap--stuck .link-list > .link-list__item {
  min-height: var(--sp12);
  border-right: 1px solid var(--clr-gray-380);
}

body .link-list-wrap.link-list-wrap--stuck .link-list > .link-list__item > .link-list__link > .link-list__number {
  width: 40px;
  height: 40px;
  font-size: var(--fs-24);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

body .link-list-wrap.link-list-wrap--stuck .link-list > .link-list__item > .link-list__link > .link-list__label {
  font-size: var(--fs-13);
}

body .link-list-wrap.link-list-wrap--stuck .link-list__more-toggle {
  height: 100%;
  font-size: var(--fs-13);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

body .link-list-wrap.link-list-wrap--stuck .link-list__more-toggle:not(:hover):not(:focus-visible):not([aria-expanded="true"]) {
  background: transparent;
}