.faq .search {
  position: relative;
  background-color: var(--color-primary);
  background-image: radial-gradient(circle at center, hsl(198, 80%, 50%), hsl(198, 80%, 40%));
  color: white;
}
.faq .search > div {
  max-width: 60ch;
  margin: 0 auto;
  padding: 4rem 1rem;
}
.faq .search h1 {
  margin: 0;
  font-size: 2rem;
}
.faq .search-form {
  margin-top: 3rem;
}
.faq .search-field {
  border: thin solid rgba(255,255,255,0.5);
  border-radius: 0.25rem;
  transition: 0.2s;
}
.faq .search-field:focus-within {
  border: thin solid white;
}
.faq .search-input,
.faq .search-submit {
  color: white;
  border: none;
  padding: 1rem;
  transition: box-shadow .25s;
}
.faq .search-input::placeholder {
  color: rgba(255,255,255,0.75);
}
.faq .search-icon {
  display: block;
  width: 1em;
  height: 1em;
  opacity: 0.5;
  transition: 0.2s;
}
.faq .search-form:valid .search-icon {
  opacity: 1;
}

.faq .questions {
  margin-bottom: 4rem;
}
.faq .questions h2 {
  font-weight: lighter;
  font-size: 2rem;
  color: var(--color-primary);
  margin: 4rem 0 2rem 0;
}
.faq .question h3 {
  display: inline;
}
.faq .question summary {
  color: inherit;
  transition: 0.2s;
}
.faq .question:hover summary,
.faq .question[open] summary {
  font-weight: lighter;
  color: var(--color-primary);
}
.faq .question ul {
  padding: 0 1rem;
}

.faq .questions nav {
  margin: 2rem 0;
}
.faq .questions nav a.button:hover {
  text-decoration: none;
}