/* Header Styles
----------------------------------------------- */

.header {
    &--overlay {
        @include tablet() {
            @include flat() {
                background-color: transparent;
            }
        }

        .header__branding {
            padding-top: 0;

            &-title {
                @include responsive-text( $fz-flat-h1 );
            }
        }

        + .page .page__header:before {
            opacity: .5;
        }
    }

    &__branding {
        a {
            color: $white;
        }
    }

    &__call {
        .header--overlay & {
            background: none;
        }

        @include tablet() {
            &-number {
                display: block;
            }

            .icon {
                display: none;
            }
        }
    }

    @include material() {
        &__nav {
            a {
                font-weight: bold;
            }
        }
    }
}

.theme--flat {
  header {
    .search-form {
      .search-field {
        border: none;
        outline: none;
        font-size: 1rem;
        padding: 15px 34px;

        &:focus {
          border: 2px solid #A1A1A1;
        }
      }
    }
  }
}

.theme--material {
  header {
    .search-form {
      .search-field {
        font-weight: 500;
        font-size: .875rem;
        outline: none;
        border: 0;
        padding: 20px 34px;

        &:focus {
          background-color: #eee;
        }
      }
    }
  }
}
