/* Pagefind's default UI, dressed in the site's tokens. It reads its colours
   from these --pagefind-ui-* properties, so this is a re-bind to our tokens
   and not a second palette. */
.search {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: var(--c-ink);
  --pagefind-ui-text: var(--c-ink);
  --pagefind-ui-background: var(--c-surface);
  --pagefind-ui-border: var(--c-border);
  --pagefind-ui-tag: var(--c-surface-alt);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: var(--radius);
  --pagefind-ui-font: var(--f-sans);
}

/* Result titles are links: the ink with the orange rule, like every other
   link on the site. */
.search .pagefind-ui__result-link {
  color: var(--c-link);
  text-decoration-color: var(--c-link-rule);
}

/* The visible label above the box; see search.njk. */
.search__label {
  display: block;
  font-weight: var(--fw-bold);
  margin-block-end: var(--s-2);
}

/* Pagefind draws its placeholder at opacity 0.2, 1.48:1 on white. Full ink-
   muted, 12.67:1, now that it is a hint and no longer the only label. */
.search .pagefind-ui__search-input::placeholder {
  color: var(--c-ink-muted);
  opacity: 1;
}

/* Pagefind hides its Clear button with opacity: 0 while the box is empty, which
   leaves an invisible button in the tab order, and focus disappears onto it
   (2.4.7). visibility: hidden takes it out of the tab order too. */
.search .pagefind-ui__suppressed {
  visibility: hidden;
}

/* A cross instead of the word "Clear". The word stays in the button at size 0,
   so it is still the accessible name; the cross is drawn with empty alt text
   ("/ ''") so it is not read as "multiplication sign". 44px square, a
   comfortable target on a phone. */
.search .pagefind-ui__search-clear {
  font-size: 0;
  min-width: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search .pagefind-ui__search-clear::before {
  content: "\00D7" / "";
  font-size: var(--t-2xl);
  line-height: 1;
  color: var(--c-ink-muted);
}

.search .pagefind-ui__search-clear:hover::before {
  color: var(--c-ink);
}