.c-header {
  @include z(z-header);
  position: relative;
  background: palette(primary);
  padding: 48px 0;

  @include mq(1500) {
    padding: 65px 0 100px;
  }
}

.c-header__overlay {
  position: absolute;
  width: 100%; 
  background-color: transparent;
}

.c-header__main {
  position: relative;
  @include flex(space-between, center);

  @include mq($max: 1200){
    padding: 0 40px;
  }
  @include mq(1200){
    @include contain;
  }
}

.c-header__logo {
  width: 200px;
  color: white;

  svg{
    width: 100%;
  }

  @include mq(1500) {
    width: 242px;
  }
}

.c-header__primary,
.c-header__secondary {
  width: calc((100% - 242px) / 2);
  margin: 0;
  list-style: none;

  > * + * {
    margin-left: 45px;

    @include mq(1500) {
      margin-left: 85px;
    }
  }
}

.c-header__primary {
  @include flex(flex-start, center);
}

.c-header__secondary {
  @include flex(flex-end, center);
}

.c-header__link {
  position: relative;
  @include font(mid, 26, medium);
  color: white;
  text-decoration: none;

  &:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 1px;
    display: block;
    width: 100%;
    background-color: rgba(white, 0.5);
    transform: scaleX(0);
    transform-origin: 25% 50%;
    transition: width 0.2s, transform 0.2s, background-color 0.2s;
  }

  &:hover{
    &:before{
      transform: scaleX(1);
    }
  }

  &.is-active {
    &:before {
      height: 2px;
      transform: scaleX(1);
      background-color: white;
    }
  }
}

.c-header__button {
  display: none;
}

@include mq($max: 1200) {
  .c-header__logo {
    order: 1;
  }

  .c-header__primary {
    order: 2;
    width: auto;
  }

  .c-header__secondary {
    display: none;
  }

  .c-header__button {
    display: block;
    order: 3;
  }
}

@include mq($max: $overlay-menu) {

  .c-header {
    padding: 40px 0;
  }

  .c-header__main {
    padding: 0 28px;
  }

  .c-header__primary,
  .c-header__button{
    display: none;
  }
}