.header {
  background-color: map-deep-get($foundation-palette, primary);
  margin-bottom: 0.3em;

  svg {
    width: rem-calc(250);
    height: rem-calc(50);
  }

  path {
    fill: $white;
  }

  // &:after {
  //   content: "";
  //   display: block;
  //   width: 100%;
  //   height: rem-calc(4);
  //   background: map-deep-get($foundation-palette, secondary);
  //   position: relative;
  //   bottom: -$global-margin/2;
  // }

  &__container {
    @include grid-row();
    padding: $global-margin;

    @include breakpoint (medium) {
      display: flex;
      align-items: center;
    }
  }

  &__logo {
    float: left;
    margin-bottom: $global-margin;
    padding-right: $global-padding;

    @include breakpoint (large) {
      margin-bottom: 0;
      padding-right: 0;
    }
  }

  &__section {
    flex-grow: 1;

    &--button {
      @include button(
        false,
        map-deep-get($foundation-palette, secondary),
        scale-color(map-deep-get($foundation-palette, secondary), $lightness: -15%),
        map-deep-get($white),
        solid
      );
      text-transform: uppercase;
      font-weight: bold;
      margin-bottom: 0;
    }

    &--tagline {
      color: $white;
      max-width: 200px;
      display: none;

      @include breakpoint (large) {
        display: inline-block;
        float: left;
        margin-left: $global-margin*2;
      }
    }

    &--social {
      @extend %hide-mobile;

      svg {
        width: rem-calc(20);
        height: rem-calc(20);

        path {
          fill: $white;
        }
      }
    }
  }

  &__lower {
    background-color: map-deep-get($foundation-palette, secondary);
    margin-bottom: $global-margin*2;

    .container {
      @include grid-row();
      // padding: $global-padding/2;
      @include flex-align(justify, middle);


      @include breakpoint (medium) {
        display: flex;
        justify-content: space-between;
      }
    }

    > div {
      margin: 0 $global-margin;
      padding: $global-padding 0;
    }

    &--content {
      padding-left: 1rem;
    }

    &--form {
      margin-left: auto;

      ul {
        margin: 0;
      }

      input, select {
        margin: 0;
      }

      select {
        height: 100%;
      }

      @include breakpoint (small down) {
        margin: $global-margin;
      }

      input[type=submit] {
        @include button(
          false,
          map-deep-get($foundation-palette, primary),
          scale-color(map-deep-get($foundation-palette, primary), $lightness: -15%),
          white,
          solid
        );
        text-transform: uppercase;
        font-weight: bold;
        margin-bottom: 0;

        @include breakpoint (small down) {
          margin-top: $global-margin;

        }
      }
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      float: left;
      margin-right: $global-margin;
    }
  }
}