// ==========================================================================
// Search Component
// Styles for ke_search form (c-search-form) and results (c-search-result*)
// ==========================================================================

.c-search-form {
  margin-bottom: 3rem;

  .input-group {
    max-width: 720px;
    width: 100%;
    margin-left: auto;
  }

  .form-control:focus {
    border-color: $primary;
    box-shadow: 0 0 0 0.25rem rgba($primary, 0.2);
  }

  > form {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  @include media-breakpoint-down(md) {
    .input-group {
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .input-group > .form-control {
      flex: 1 1 100%;
      width: 100%;
      min-width: 0;
      font-size: $font-size-sm;
    }

    .input-group > .btn {
      font-size: $font-size-sm;
    }
  }
}

#ke_search_sword {
  padding: $input-padding-y $input-padding-x;
}

.c-search-results {
  &__meta {
    margin-bottom: 1.5rem;
    color: $gray-600;
    font-size: $font-size-sm;
  }

  &__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 0;
  }

  &__empty {
    margin-top: 2rem;
  }

  &__pagination {
    margin-top: 2rem;
  }
}

.c-search-result {
  position: relative;
  padding: 1.5rem;
  border: 1px solid $border-color;
  transition: box-shadow 0.15s ease;

  a {
    color: $primary;
  }

  &:hover {
    box-shadow: $box-shadow-sm;
  }
  @include media-breakpoint-up(md) {
    padding: 2rem;
  }
  &__title {
    font-size: $h5-font-size;
    font-weight: $font-weight-bold;
    margin-bottom: 0.75rem;
    color: $secondary-purpurrot;
    a {
      text-decoration: none;
      font-weight: 700;

      &:hover {
        text-decoration: underline;
      }
    }
    @include media-breakpoint-up(md) {
      font-size: 1.125rem;
    }
  }

  &__teaser {
    font-weight: $font-weight-normal;
    margin-bottom: 0.5rem;

    // ke_search wraps matched keywords in <em>
    em {
      font-style: normal;
      font-weight: $font-weight-bold;
      color: $primary;
    }
  }

  &__date {
    display: block;
    font-size: $font-size-sm;
    color: $gray-500;
  }
}