/* Search styling */

.help-search {
  margin: 4rem 2rem;
}

.help-search input {
 font-size: 1.7rem;
  width: 100%;
  max-width: none;
  padding: 1.8rem;
  display: inline-block !important;
  border-radius: 3px !important;
  border:none;
}

#searchResults {
  margin: 1rem;
}

.search-result {
  border: 1px solid var(--lightGrey);
  padding: 1.5rem;
  margin-bottom: 0.5rem;
  border-radius: 3px
}

.search-result:hover {
  background-color:var(--beige);
  border: 1px solid var(--beige);
}

.search-result a {
  font-weight: 600;
  display: block;
}

.search-result span {
  font-size: 1.4rem;
  color: var(--darkGrey);
  line-height: 1.7rem;
}

.search-result.top-result {
  border-left: 4px solid var(--purple);
  background: #f5f9ff;
}

.search-result.is-active {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

#noResults {
  margin-top: 0.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;

}

@media screen and (max-width: 768px) {

	.help-search input {
	 font-size: 1.7rem;
	  width: 100%;
	  max-width: none;
	  padding: 1.4rem;
	  display: inline-block !important;
	  border-radius: 3px !important;
	  border:none;
	}

	#searchResults {
	  margin: 1rem 0;
}
}