.search-query-form {
  --search-q-border: 1px solid var(--stanford-40-black);

  border: 1px solid #ababa9;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: white;
  width: 100%; /* overrides https://github.com/projectblacklight/blacklight/blob/69373f202753f04ec6aca179fdf8fa01248a9edf/app/assets/stylesheets/blacklight/_header.scss#L32 */

  .input-group {
    &::before {
      content: "";
      height: 2rem;
      width: 1.5rem;
      margin-left: 0.5rem;
      margin-top: 0.125rem;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E")
        no-repeat left;
    }
    input::placeholder {
      font-style: italic;
    }
  }
  .search-btn {
    border-radius: 0.25rem !important;
    padding: 2px 6px;
    align-items: center;
  }

  input:focus,
  select:focus {
    box-shadow: none;
  }

  .search-field {
    width: 7rem;
    --bs-border-width: 0;
    margin-right: 1px;
  }

  .search-q {
    border: 1px solid transparent;
    border-inline-start: var(--search-q-border);
    outline: none;
  }
}

.search-area-bg {
  padding-block: 2.5rem;
  background-color: var(--stanford-fog-light);

  .search-query-form {
    --search-q-border: none;
  }

  @media (min-width: 992px) {
    .about-section {
      border-inline-start: 1px solid var(--stanford-40-black);
    }
  }
}

#search-navbar search {
  order: 2;
  max-width: 38rem;
  width: 100%;

  @media (width >= 575.98px) {
    order: 3;
    max-width: 100%;
  }

  @media (width >= 991.98px) {
    order: 2;
    max-width: 38rem;
  }
}

/* When search mode & the advanced search link are on the top row and search wraps to the next,
 this provides a fixed width for both rows */
#search-navbar {
  search, .advanced-search-link {
    @media (width >= 767.98px) {
      margin-right: calc(100vw - 45rem);
    }
    @media (width >= 991.98px) {
      margin-right: 0;
    }
  }
}

#advanced-search-form {
  input:focus-visible {
    box-shadow: none;
  }
}

.advanced-facet-heading {
  color: var(--stanford-cardinal);
}