.heady {
  z-index: 2;
  position: fixed;
  top: var(--drupal-displace-offset-top, 0);
  left: 0;
  right: 0;
  background-color: var(--paper);
  transition: transform .5s ease-in-out;
}


.heady--hidden {
  transform: translateY(-100%);
}

.heady--compact {
  transform: translateY(-108px);
  @media (max-width: 768px) {
    transform: translateY(-65px);
  }
}

.heady__top {
  max-width: var(--xl-width);
  margin: 0 auto;
  text-align: center;
  padding: 10px var(--xl-gap-x);
  @media (min-width: 769px) {
    padding: 20px var(--xl-gap-x);
  }
}

.heady__top img {
  @media (max-width: 768px) {
    max-height: 45px;
  }
}

.heady__main {
  background-color: var(--pale-slate);
}

.heady__left {
  @media (min-width: 1301px) {
    min-width: 260px;
  }
  @media (min-width: 595px) and (max-width: 1300px) {
    max-width: 260px;
  }
  @media (max-width: 594px) {
    width: 160px;
  }
}

.heady__right {
  display: flex;
  align-items: center;
  gap: 35px;
}

.heady__right > nav {
  @media (max-width: 1300px) {
    display: none;
  }
}

.heady__wrap {
  max-width: var(--xl-width);
  padding: 22px var(--xl-gap-x);
  margin: 0 auto;
  display: flex;
  gap: 3rem;
  justify-content: space-between;
  align-items: center;
  @media (max-width: 594px) {
    padding: 12px var(--xl-gap-x);
  }
}

.heady__drawer-toggle {
  background-color: transparent;
  color: var(--teal);
  padding: 0;
  cursor: pointer;
  border: none;
  @media (min-width: 1301px) {
    display: none;
  }
}

.heady__drawer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  opacity: 0;
  visibility: hidden;
  background-color: var(--pale-slate);
  color: var(--teal);
  pointer-events: none;
  padding: var(--xl-gap-x);
  box-sizing: border-box;
  transition: .3s ease-in-out;
  transform: translateX(-100vw);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-width: 750px;
  min-height: 100vh;
  top: var(--drupal-displace-offset-top, 0);
}

.heady--compact .heady__drawer {
  top: var(--drupal-displace-offset-top, 108px);
  @media (max-width: 768px) {
     top: var(--drupal-displace-offset-top, 65px);
  }
}

.heady__drawer--open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(0);
  z-index: 1;
}

.heady__drawer img {
  @media (max-width: 594px) {
    width: 160px;
  }
  @media (min-width: 595px) and (max-width: 1300px) {
    max-width: 260px;
  }
}

.heady__drawer > nav:last-child {
  margin: auto 0 0 0;
}

.heady__drawer-toggle--close {
  position: absolute;
  right: var(--xl-gap-x);
  top: var(--xl-gap-x);
}