/**
 * @file
 * Compact header styling applied once the page is scrolled.
 *
 * Keyed off the .onscroll class that fixed-header.js puts on the body, and
 * limited to the desktop breakpoint where basecore's fixed header is active.
 *
 * Every transitioned property needs a length (or font-size) in BOTH the
 * scrolled and unscrolled state, otherwise the browser cannot interpolate it
 * and the change snaps. The transitions are also declared outside .onscroll so
 * they run in both directions, not only while shrinking.
 */

@media (min-width: 992px) {
  .header-container {
    --header-ease: ease-in-out;
    --header-speed: 0.5s;
  }

  /* The top bar is pinned along with the header, right above it; fixed-header.js
     sets its top. The z-index matches the one basecore gives the header. Once
     fixed, the page scrolls underneath it, so it needs a background of its own
     rather than whatever was behind it. */
  body.onscroll .page-top-container .header-container .header-top-highlighted.js-fixed {
    position: fixed;
    z-index: 499;
    width: 100%;
    background-color: #eaeaea !important;
  }

  .header-container .header {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0);
    transition: box-shadow var(--header-speed) var(--header-ease);
  }

  /* basecore drops this padding from 10px to 0 on scroll, but only declares
     its (0.2s) transition under .onscroll, so scrolling back up snaps. */
  .header-container .header__container {
    transition: padding var(--header-speed) var(--header-ease);
  }

  .header-container .site-name a,
  .header-container .site-slogan,
  .header-container ul.menu > li > a,
  .header-container ul.menu > li > span,
  .header-container .logo-and-site-name-wrapper {
    transition: font-size var(--header-speed) var(--header-ease),
      padding var(--header-speed) var(--header-ease);
  }

  /* The logo's unscrolled size comes from its column width, so it is animated
     through max-width (column width -> fixed width) and the height follows
     the image's aspect ratio. */
  .header-container .logo img {
    width: auto;
    max-width: 100%;
    transition: max-width var(--header-speed) var(--header-ease);
  }

  /* While scrolled, basecore swaps in its own transitions with more specific
     selectors: a 0.2s one on the header sections and an opacity-only one on
     the fixed header, which would make those parts faster than the rest and
     drop the box-shadow fade. These outrank them to keep one pace. */
  body.fixed-header-enabled.onscroll .header-container .header__container,
  body.fixed-header-enabled.onscroll .header-container .header-first,
  body.fixed-header-enabled.onscroll .header-container .header-second,
  body.fixed-header-enabled.onscroll .header-container .header-third,
  body.fixed-header-enabled.onscroll .header-container ul.menu {
    transition: all var(--header-speed) var(--header-ease);
  }

  body.onscroll.fixed-header-enabled--scroll .header-container .header.js-fixed {
    transition: opacity var(--header-speed) var(--header-ease),
      box-shadow var(--header-speed) var(--header-ease);
  }

  body.onscroll .header-container .header {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
  }

  body.onscroll .header-container .site-name a {
    font-size: 22px;
  }

  body.onscroll .header-container .site-slogan {
    font-size: 11px;
  }

  body.onscroll .header-container ul.menu > li > a,
  body.onscroll .header-container ul.menu > li > span {
    font-size: 14px;
  }

  /* basecore pads these links with 38px top and bottom at this breakpoint,
     which is most of what keeps the header tall, so it has to shrink too. */
  body.onscroll .header-container ul.menu > li > a,
  body.onscroll .header-container ul.menu > li > span {
    padding: 20px 10px;
  }

  body.onscroll .header-container .logo img {
    max-width: 200px;
  }

  body.onscroll .header-container .logo-and-site-name-wrapper {
    padding: 10px 0;
  }
}