header {
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: sticky;
  background-color: var(--white);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}

.header--container {
  position: relative;
  display: flex;
  align-items: center;
}

.header--brand-logo-link {
  margin-top: -10px;
  margin-left: auto;
  margin-right: 4px;

  width: 5.875rem;
  height: 2.32506rem;
  flex-shrink: 0;
  aspect-ratio: 94/37.2;
}

.header--logo-link {
  margin-top: 5px;
  margin-right: auto;
  margin-left: 4px;
  width: 5.62875rem;
  height: 2.50481rem;
  flex-shrink: 0;
}

.header--logo {
  height: 100%;
  width: auto;
}

.header--logo:focus-visible {
  outline: -webkit-focus-ring-color auto 0px;
}

.header--nav {
  display: flex;
  align-items: center;
}

.header--nav.header--modal:not(.header--modal__desktop-only) {
  flex-direction: column;
  background-color: var(--white);
}

.header--nav-links {
  display: flex;
  width: 100%;
  padding: 0 16px;
  list-style-type: none;
  align-items: flex-start;
  .header--nav--item,
  .header--component-menu-item__item {
    width: 100%;
    border-bottom: 1px solid var(--grey2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .header--accordion-title,
  .header--component-menu-item__item--link {
    padding: 12px 16px;
    width: 100%;
    min-height: 56px;
    color: var(--grey);
    font-family: var(--font-family-poppins);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
    letter-spacing: 0.15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .header--accordion-title::after {
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotateX(180deg);
  }
  .header--accordion-title.rotate-arrow-180:after {
    transform: translateY(-50%) rotateX(0deg);
  }
  .header--accordion-content {
    width: 100%;
  }

  .header--nav--subitems {
    list-style-type: none;
    border-top: 2px solid var(--blue);
    width: 100%;
    .header--component-menu-item__subitem {
      width: 100%;
      padding: 12px 16px;
      min-height: 56px;
      border-bottom: 1px solid var(--grey2);
      display: flex;
      align-items: center;
      > a {
        color: var(--grey);
        font-family: var(--font-family-poppins);
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 24px */
        letter-spacing: 0.15px;
        width: 100%;
      }
    }

    .header--component-menu-item__subitem:has(
        .component-menu-item--link.selected
      ) {
      background-color: var(--grey5);
    }

    .header--component-menu-item__subitem:last-child {
      border: 0;
    }
  }
}

.header--nav.header--modal:not(.header--modal__desktop-only)
  .header--nav-links {
  flex-direction: column;
}

.header--accordion-title {
  margin-bottom: 0;
}

.header--nav:not(.header--modal):not(.header--modal__mobile-only)
  .header--accordion-content {
  position: absolute;
}

.header--burger {
  pointer-events: visible;
  cursor: pointer;
}

.header--burger path {
  transform-origin: center center;
  transition: transform var(--transition-time);
}

/* MODALS */

.header--modal {
  position: fixed;
  top: var(--header-height);
  left: 0;
  z-index: 100;

  height: calc(100vh - var(--header-height));
  width: 100vw;

  opacity: 0;
  overflow: auto;

  transition: transform var(--transition-time), opacity var(--transition-time);
}

.starts-offscreen {
  transform: translateX(100%);
}

.header--modal.is-open {
  opacity: 1;
}

.starts-offscreen.is-open {
  transform: translateX(0);
}
.header--nav:not(.header--modal),
.header--modal__desktop-only {
  position: static;

  height: auto;
  width: auto;

  transform: none;
  opacity: 1;

  overflow: auto;
}

@media screen and (min-width: 64rem) /* 1024px */ {
  .header {
    height: 5.5rem;
    .header--container {
      max-width: 75rem;
      .header--brand-logo-link {
        margin-left: 0;
        margin-right: 3.75rem;
        margin-top: -5px;
        width: 8.25rem;
        height: 3.1875rem;
        flex-shrink: 0;
      }

      .header--logo-link {
        margin-top: 10px;
        width: 7.87113rem;
        height: 3.50675rem;
        flex-shrink: 0;
      }

      .header--brand-logo-link,
      .header--logo-link {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .header--nav,
    .header--container {
      overflow: visible !important;
    }
    .header--nav--item {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      min-height: 56px;
    }
    .header--nav--item:has(.header--accordion-title:hover) {
      .header--accordion-title {
        margin-top: 3px;
        border-bottom: 3px solid var(--blue);
        font-weight: 500;
      }
    }
    .header--component-menu-item__item--link:hover {
      border-bottom: 3px solid var(--blue);
      font-weight: 500 !important;
    }

    .header--nav.header--modal.header--modal__mobile-only
      .header--accordion-content {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 220px;
      border-radius: 8px;
      background: var(--white);
      box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
      z-index: 2000;
      display: none;
      max-height: none;
      overflow: hidden;
    }
    .header--nav.header--modal.header--modal__mobile-only
      .header--nav--item:has(.accordion-content:not(.hidden))
      .header--accordion-content {
      display: block;
    }
    .header--nav--item,
    .header--component-menu-item__item {
      border: 0;
    }
    .header--nav-links {
      padding: 0;
      .header--nav--item,
      .header--component-menu-item__item {
        width: auto;
      }
      .header--component-menu-item__item {
        margin-top: 3px;
        padding: 12px 16px;
        max-height: 56px;
      }

      .header--accordion-title {
        padding: 0;
        min-height: auto;
      }

      .header--accordion-title:not(.rotate-arrow-180) {
        margin-top: 3px;
        border-bottom: 3px solid var(--blue);
      }

      .header--accordion-title,
      .header--component-menu-item__item--link {
        font-style: normal;
        font-weight: 400;
        line-height: 25px; /* 156.25% */
      }
      .header--component-menu-item__item--link {
        padding: 0;
        min-height: 0;
      }
      .header--accordion-title::after {
        display: none;
      }
      .header--nav--subitems {
        border-top: 0;
        .header--component-menu-item__subitem:has(
            .component-menu-item--link.selected
          ),
        .header--component-menu-item__subitem:hover {
          background-color: var(--blue);

          a {
            color: var(--white);
          }
        }
      }
    }
  }

  /* HEADER MODALS */

  .header--nav:not(.header--modal),
  .header--nav.header--modal:not(.header--modal__desktop-only) {
    display: flex;
    flex-direction: row;
  }

  .header--nav.header--modal:not(.header--modal__mobile-only) {
    flex-direction: column;
  }

  .header--nav.header--modal.header--modal__mobile-only .header--nav-links {
    flex-direction: row;
  }

  .header--nav.header--modal.header--modal__desktop-only .header--nav-links {
    flex-direction: column;
  }

  .header--modal__mobile-only {
    position: static;

    height: auto;
    width: auto;

    transform: none;
    opacity: 1;
  }

  .header--modal__desktop-only {
    position: fixed;

    height: calc(100vh - var(--header-height));
    width: 100vw;

    transform: translateX(100%);
  }

  .header--modal__desktop-only .header--nav-links {
    flex-direction: column;
  }
}