.path-search .region-page-title {
  padding-block: var(--spacing-large);
  background-color: var(--color-accent);
}
.path-search .region-page-title h1 {
  color: var(--color-white);
}

.path-search .main {
  background-color: var(--color-accent-lighter);
}

.lgd-search-results-list .form-item {
  margin-bottom: var(--spacing);
}

.lgd-search-results-list__header-container {
  margin-block-start: var(--spacing-largest);
  padding-block-start: var(--spacing-large);
  padding-block-end: var(--spacing-largest);
  border: 0;
  background-color: var(--color-white);
}

.lgd-search-results-list .view-header,
.lgd-search-results-list .view-filters,
.lgd-search-results-list .view-content {
  max-width: var(--width-large);
  margin: auto;
}

.search-results {
  padding-inline-start: 0;
  list-style-position: inside;
}
.search-results > li {
  padding: var(--spacing-largest) var(--spacing-large) var(--spacing);
  border-radius: var(--border-radius);
  background-color: var(--color-white);
}

.search-results > li::marker {
  font-size: var(--font-size-h3);
  font-weight: bold;
  color: var(--color-accent);
}

.search-results > li + li {
  margin-block-start: var(--search-results-item-spacing);
}

.search-results .search-result {
  /*
    We need to display search results as inline when in the search result list.
    Or else Safari will display them as block and other will display them as
    inline. This is only problematic here because we are trying to have a
    background colour on the li item (including the ::marker).
  */
  display: inline-block;
}
.search-result {
  background-color: var(--color-white);
  margin-inline-start: var(--spacing-larger);
  margin-block-start: calc(var(--spacing-larger) * -1);
}


.search-highlight {
  background-color: yellow;
  color: black;
  font-weight: bold;
  padding: 2px;
}