// Header
// -----------------------------------------------
// -----------------------------------------------

#site-header {
  flex: 1 0 auto;
  margin-top: ($base-point-grid * 18);
  background: $white;

  .header-flex {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: $white;
    height: 100%;

    .header-text {
      width: $column-5;
      height: 100%;
      justify-content: space-evenly;
      display: flex;
      flex-direction: column;

      h1 {
        color: $base-font-color;
        font-size: 4.188rem;
        line-height: 1.3;

        span {
          display: block;
          margin: ($base-point-grid * 3) 0;
          font-size: 1.286rem;
          font-weight: $font-regular;

          strong {
            font-weight: $font-bold;
          }
        }
      }

      .header-button {
        align-self: flex-start;
        padding: ($base-point-grid / 2) ($base-point-grid * 6);
        display: inline-block;
        font-weight: $font-semibold;
        text-transform: uppercase;
        color: $white;
        border: none;
        background: $brand-primary;
        position: relative;
        transition:
          color $base-duration $base-timing,
          background-color $base-duration $base-timing;

        &::before {
          content: "";
          width: 100%;
          height: 0;
          position: absolute;
          top: -($base-point-grid);
          left: 0;
          border-bottom: $base-point-grid solid $brand-primary;
          border-left: $base-point-grid solid transparent;
          border-right: $base-point-grid solid transparent;
          transition: border $base-duration $base-timing;
        }

        &::after {
          content: "";
          width: 100%;
          height: 0;
          position: absolute;
          bottom: -($base-point-grid);
          left: 0;
          border-top: $base-point-grid solid $brand-primary;
          border-left: $base-point-grid solid transparent;
          border-right: $base-point-grid solid transparent;
          transition: border $base-duration $base-timing;
        }

        &:visited {
          color: $white;
        }

        &:hover {
          text-decoration: none;
          color: $white;
          background: darken($brand-primary, 20);

          &::before,
          &::after {
            border-color: darken($brand-primary, 20) transparent;
          }
        }

        &:active {
          color: $white;
          background: darken($brand-primary, 20);
        }
      }
    }

    .header-image {
      height: 100%;
      width: 33%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 100%;
      }
    }
  }
}

// Responsive
// -----------------------------------------------

@include bp(large) {
  #site-header {
    .header-flex {
      .header-text {
        h1 {
          font-size: 2.9rem;
        }
      }
    }
  }
}

@include bp(medium) {
  #site-header {
    .header-flex {
      .header-text {
        height: 300px;
        text-align: center;
        width: $column-12;

        .header-button {
          align-self: center;
          width: 50%;
        }

        h1 {
          font-size: 2.5rem;
        }
      }

      .header-image {
        display: none;
      }
    }
  }
}
