/* Small additions for the static clone (search results, minor layout guards). */

.search-page-results {
  margin-top: 45px;
  text-align: left;
}

.search-page-results[hidden],
.search-results__empty[hidden] {
  display: none !important;
}

.search-results__heading {
  margin-bottom: 30px;
}

.search-result-card {
  margin-bottom: 32px;
}

.search-result-card__media {
  display: block;
  overflow: hidden;
}

.search-result-card__image {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.search-result-card:hover .search-result-card__image {
  transform: scale(1.03);
}

.search-result-card .grid-view-item__title {
  margin-top: 12px;
}

.search-result-card .grid-view-item__title a {
  color: inherit;
}

.search-result-card__desc {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #69727b;
}

.search-results__empty {
  margin: 30px 0 10px;
}

@media only screen and (max-width: 749px) {
  .search-result-card__image {
    height: 200px;
  }
}

/* ----- header: solid white bar, dark hamburger and search icon -----
   The theme drew a transparent bar with white icons over the hero image. The
   bar is now solid white and the icons use the logo's colour (#343434, sampled
   from AVWOODSY_LOGO_G1200_x_300_px.png). Change --header-ink to retint them.
   The selectors are more specific than the theme's inline !important rules. */
:root {
  --header-ink: #343434;
}

body .site--header {
  left: 0;
  width: 100%;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

body .site--header,
body .site--header .site-header__inner {
  background: #ffffff !important;
}

body .site--header .site-header__toggle-nav,
body .site--header .header-icon {
  color: var(--header-ink) !important;
}

/* The bar no longer floats over the hero, so the home page starts below it
   like every other page. */
body.template-index {
  margin-top: 65px !important;
}

/* ----- PageFly tab headers on phones -----
   The theme sizes each tab header to its label and forbids wrapping, so long
   labels such as "Execution and Project Management" ran into the next button.
   On phones every header takes the full row and wraps its label. */
@media only screen and (max-width: 767px) {
  #MainContent [data-pf-type="TabsMenu"] > [data-pf-type="TabHeader2"] {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: left;
    line-height: 1.3;
  }
}