.bd-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1001;
  box-shadow: 0 3px 15px 0 rgb(0 0 0 / 10%);
  color: var(--independence);

  &-main {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: 56px;
    margin: 0 auto;
    width: 90%;

    @include media('large') {
      height: 64px;
    }

    @include media('xlarge') {
      max-width: var(--max-content-width);
    }
  }

  &-home {
    display: flex;
    align-items: center;
    margin-right: auto;

    &-logo {
      height: 32px;
      max-width: 32px;
      max-height: 32px;
      margin-right: 16px;
    }

    &-title {
      font-weight: var(--bold);
      font-size: var(--font-size-26);
      line-height: var(--line-height-64);
      letter-spacing: -1px;
      color: var(--maastricht-blue);
    }
  }

  &-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: calc(100vh - 100%);
    padding: 30px;
    background: var(--white);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;

    @include media('large') {
      position: relative;
      top: 0;
      display: flex;
      align-items: center;
      flex: 1 1 auto;
      height: 100%;
      padding: 0 30px;
      opacity: 1;
      pointer-events: auto;
    }

    .--mainmenuopen & {
      opacity: 1;
      pointer-events: auto;
    }

    &-item {
      position: relative;
      display: flex;
      flex-direction: column;
      margin-bottom: 16px;

      @include media('large') {
        flex-direction: row;
        align-items: center;
        height: 100%;
        margin-bottom: 0;
        padding: 0 20px;
      }
    }

    .bd-link,
    &-link {
      font-size: var(--font-size-21);
      font-weight: var(--bold);
      line-height: 1.14;
      width: fit-content;

      @include media('large') {
        font-size: var(--font-size-16);
      }
    }

    a:after {
      bottom: 0;
    }
  }

  &-burger {
    color: inherit;

    @include media('large') {
      display: none;
    }

    &-icon {
      height: 19px;
      width: 26px;
      fill: currentColor;
      transform: scale(1.6);
    }
  }
}
