/* Header */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  @include vendor('transition', 'background-color #{_duration(transitions)} ease');
  background: _palette(bg);
  z-index: _misc(z-index-base);

  height: 3em;
  line-height: 3em;

  padding-left: 1.5rem;

  display: flex;
  justify-content: space-between;
  align-items: center;

  @include breakpoint(small) {
    position: initial;
    height: auto;
    line-height: inherit;

    display: block;
    margin: 0 auto;
    text-align: center
  }
}

.header.alt {
  background: transparent;

  h1 {
    @include vendor('pointer-events', 'none');
    opacity: 0;
  }
}

.header-home {
  @include vendor('transition', 'opacity #{_duration(transitions)} ease');
  margin: 0;
  padding: 0;

  a {
    border: 0;
    display: block;
    height: inherit;
    line-height: inherit;
  }

  @include breakpoint(small) {
    padding: 1rem 0;
  }
}

.header-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;

  li { padding: 0; }


  @include breakpoint(small) {
    justify-content: space-around;
    padding-bottom: 0.5rem;
  }
}

.header-link {
  border: 0;
  color: _palette(fg-bold);
  font-size: 0.8em;
  letter-spacing: _size(letter-spacing-alt);
  padding: 0 1.5rem;
  text-transform: uppercase;

  @include breakpoint(small) {
    padding: 0 0.75rem;
  }
}