/*--------------------------------------------------------------
# Header CSS
--------------------------------------------------------------*/

.site {
  &-header {
    background-color: $dark;
    padding: 10px 0;

    @media #{$lg} {
      padding: 15px 0;
    }
  }
  &-logo {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;

    img {
      max-width: 200px;

      @media #{$lg} {
        max-width: 160px;
      }
    }
  }

  &-title {
    font-size: 24px;
    text-transform: capitalize;
    color: $white;

    @media #{$sm} {
      font-size: 18px;
    }
  
    a {
      color: $white;
    }
  }

  &-description {
    color: $white;
  }

}

.header {
  &__inner {
    display: grid;
    grid-template-columns: 1fr 3fr 0.3fr;

    @media #{$lg} {
      grid-template-columns: auto 90px;
    }
  }

  &__search {
    display:flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;

    @media #{$lg} {
      justify-content: space-between;
    }

    button {
      color: $white;
      padding: 4px 7px;

      &:hover {
        color: $primary;
      }
      &:focus {
        color: $primary;
        outline: 1px solid $white;
      }
    }

    #menu_open {
      font-size: 22px;
      display: none;

      @media #{$lg} {
        display: block;
      }
    }

    #menu_close {
      font-size: 24px;
      display: none;
    }
  }


}

.modal {
  &__search {
    .modal-body {
      padding-bottom: 30px;
    }
  }
}