@import 'variables';
@import 'mixins';

.header {
  margin-top: ($spacer/2);
  margin-bottom: ($spacer/2);

  @media (min-width: $screen-sm) and (min-height: 500px) {
    position: fixed;
    width: 100%;
    z-index: 1;
    top: 0;
    border: 0;
    will-change: transform;
  }
}

.headerContent {
  @include breakoutviewport;

  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 $spacer;

  @media (min-width: $screen-md) {
    padding: 0;
  }
}

// Logo
/////////////////////////////////////

.title {
  margin-top: $spacer / 5;
  margin-bottom: 0;

  svg {
    fill: $brand-grey-light;
    width: 160px;
    height: 30px;
    margin: 0;
    transition: 0.2s $easing;
  }

  a {
    display: block;
    @include hide-text;

    &:hover,
    &:focus {
      svg {
        fill: $brand-cyan;
      }
    }
  }
}

.nav {
  display: inline-block;
}