/**
 * @file
 * Navigation in header.
 */
.header-nav {
  position: fixed;
  z-index: 501;
  /* Appear above overlay and contextual links in header. */
  inset-block-start: 0;
  inset-inline-start: 100%;
  visibility: hidden;
  overflow: auto;
  /* Ensure that header nav not use additional space and force system branding
   * block text to unnecessarily wrap. */
  flex-basis: max-content;
  width: 100%;
  height: 100%;
  max-width: min(20vi + var(--mobile-nav-width, 32rem));
  padding-block-end: var(--sp-m-l);
  padding-inline: var(--sp-m-l);
  /* Create room for the "close" button. We cannot use margin because the
   * mobile navigation needs to slide beneath the button, but we also cannot
   * use padding because that would enable the button to scroll out of the
   * viewport on short screens. */
  border-block-start: solid var(--color--white) calc(min(20vi, var(--sp10)) + var(--drupal-displace-offset-top, 0px));
  background-color: var(--color--white);
  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, visibility 0.2s;
  /*
   * Ensure top border has the same color as the background when in forced colors.
   */
}
.header-nav.is-active {
  visibility: visible;
  transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px)));
}
[dir=rtl] .header-nav.is-active {
  transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px)));
}
@media (forced-colors: active) {
  .header-nav {
    border-top-color: canvas;
  }
}
@media (width > 1200px) {
  body:not(.is-always-mobile-nav) .header-nav {
    align-self: end;
    position: static;
    display: flex;
    visibility: visible;
    overflow: visible;
    gap: var(--sp-l);
    align-items: center;
    justify-content: flex-end;
    max-width: unset;
    padding: unset;
    transition: transform 0.2s;
    transform: none;
    border-block-start: 0;
    box-shadow: none;
  }
  body:not(.is-always-mobile-nav) .header-nav > nav:not(:first-child) {
    padding-inline-start: var(--sp-l);
    border-inline-start: 1px solid var(--color--gray-90);
  }
}

.header-nav-overlay {
  position: fixed;
  z-index: 101;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100vh;
  display: none;
  opacity: 0.2;
  background: var(--color--gray-5);
}
.is-overlay-active .header-nav-overlay {
  display: block;
}
@media (forced-colors: active) {
  .header-nav-overlay {
    background: canvastext;
  }
}