/*
 * Services search ([services-search]).
 *
 * Cards used to sit in .col-12.col-lg-6 > .half-width > .float-left.left > .card and were
 * styled through that chain (style.css: .services-search .half-width .left .card ...).
 * These rules give the flatter list the same look. .services-search and #main-search on
 * the list keep their existing margins from style.css.
 */

/* Grid: one column, two from 992px (was .col-12 .col-lg-6) */
.site-main .service-results {
  list-style: none;
  padding: 0;
}

.site-main .service-results__item {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 992px) {
  .site-main .service-results__item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Card (was .half-width .left .card; the 3% top spacing was padding on the floated .left) */
.site-main .service-results .service-card {
  margin-top: 3%;
  border: 0;
  width: 100% !important;
  max-width: 100% !important;
}

.site-main .service-results .service-card h2 {
  color: #4a4a4a;
  font-size: 32px;
  text-transform: uppercase;
}

.site-main .service-results .service-card a {
  color: #4a4a4a;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 24px;
  border-bottom: 1px solid #979797;
}

.site-main .service-results .service-card a:hover {
  text-decoration: none;
  color: var(--orange-color-new);
}

/* Search suggestions: styled by jQuery UI's autocomplete classes; this adds the keyboard highlight. */
.service-suggestions .ui-menu-item.is-active {
  background: #d8d8d8;
}