.search {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  position: relative;
}

.search.search--full {
  max-width: none;
}

.search .search__input-container {
  position: relative;
  width: 100%;
}

.search .search__input {
  outline: none;
  border: 1px solid var(--color-light-gray);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 0.875rem 0.5rem 0.875rem 2.25rem;
  width: 100%;
  transition: var(--transition);

  font-family: Montserrat;
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.search .search__input:hover,
.search .search__input:focus-visible {
  border: 1px solid var(--color-dark-blue);
  box-shadow:
  0 0 0 2px var(--color-white);
}

.search .search__input::placeholder {
  color: var(--color-dark-gray-text);
}

.search .search__icon {
  color: var(--color-signature-blue-text);
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.search [role="listbox"]:has([role="option"]) {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9;

  max-height: 14.25rem;
  overflow-y: scroll;
  overflow-x: hidden;

  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius-sm);
}

.search [role="option"]:not(:last-child) {
  border-bottom: 1px solid var(--color-light-gray);
}

.search [role="option"] {
  display: block;
  padding: var(--space-md);
  font-family: Montserrat;
  font-size: var(--text-size-default);
  line-height: 1;
  text-decoration: none;
  text-align: left;

  transition: var(--transition);
}

.search a:hover {
  background: var(--color-light-tan);
}

.search a>p:first-child {
  font-weight: var(--font-weight-bold);
  color: var(--color-nearly-black);
  margin-bottom: 0.125rem;
}

.search a>p:last-child {
  font-weight: var(--font-weight-medium);
  color: var(--color-dark-gray-text);
}