/* <ad-search>: the form, and the enhanced combobox popup / inline results. */
.site-search {
  position: relative;
}

.site-search__form {
  display: flex;
  align-items: stretch;
  gap: var(--space-3xs);
}

.site-search__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The header row shares one 44 px height: input, button, theme toggle and
 * language pills. Heights include borders (border-box). */
.site-search__input {
  inline-size: clamp(8rem, 20vw, 14rem);
  block-size: var(--target-comfortable);
  min-block-size: 0;
  border-width: 1px;
  border-color: var(--border-strong);
  border-radius: var(--radius-pill);
  padding-inline: var(--space-xs);
}

.site-search__button {
  block-size: var(--target-comfortable);
  min-block-size: 0;
  padding-inline: 0.9em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  font-size: var(--text--1);
  font-weight: 600;
}

.site-search__button:hover {
  background: var(--bg-tint);
  border-color: var(--accent);
}

@media (width < 48em) {
  .site-search {
    inline-size: 100%;
  }

  .site-search__input {
    inline-size: 100%;
    flex: 1;
  }
}

/* Status line: visible on the search page, screen-reader-only in the header. */
.search-status {
  font-size: var(--text--1);
  color: var(--text-muted);
}

.site-search:not([data-mode="page"]) .search-status {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Results list. As a popup it floats under the header field; on the search
 * page it is an ordinary list in the flow. */
.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3xs);
}

.site-search:not([data-mode="page"]) .search-results {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--space-2xs));
  z-index: 50;
  inline-size: min(28rem, calc(100vw - 2 * var(--gutter)));
  max-block-size: min(60vh, 30rem);
  overflow-y: auto;
  padding: var(--space-2xs);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lg);
}

.search-results__item {
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  border: 2px solid transparent;
}

.search-results__item[aria-selected="true"] {
  background: var(--bg-tint);
  border-color: var(--accent);
}

.search-results__item:hover {
  background: var(--bg-tint);
}

.search-results__title {
  font-weight: 650;
  display: block;
}

.search-results__excerpt {
  font-size: var(--text--1);
  color: var(--text-muted);
  margin: 0;
  max-inline-size: none;
}

.search-results__excerpt mark {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 650;
}

[data-mode="page"] .search-results__item {
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--border);
  border-radius: 0;
}

[data-mode="page"] .search-results__item[aria-selected="true"] {
  border: 2px solid var(--accent);
  border-radius: var(--radius-s);
}