/* Estilos del buscador (ver `src/components/ui/SiteSearch.astro`). Van en un fichero
   aparte, y no en un <style> inline, para que los admita cualquier CSP con
   `style-src 'self'`. */

.site-search {
  padding: 4rem 0 6rem;
}

.site-search__title {
  margin: 0 0 0.5rem;
}

/* Color explícito: `legacy-theme.css` deja los `<p>` en #1a1a1a, que sobre el fondo
   oscuro del sitio es invisible. */
.site-search__intro,
.site-search__error {
  color: rgb(255 255 255 / 0.8);
  max-width: 48ch;
}

.site-search__intro {
  margin: 0 0 2rem;
}

.site-search__error {
  margin-top: 1.5rem;
}

/* Pagefind viene con tema claro. Estas variables son su API de estilos: basta con
   redefinirlas para que herede el fondo oscuro del sitio. */
#site-search-ui {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: #fff;
  --pagefind-ui-text: #fff;
  --pagefind-ui-background: transparent;
  --pagefind-ui-border: rgb(255 255 255 / 0.25);
  --pagefind-ui-tag: rgb(255 255 255 / 0.08);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 6px;
}

/* No se puede hacer con `--pagefind-ui-font: inherit`: en una propiedad personalizada
   `inherit` significa «hereda el valor de esta misma variable», que en :root es la
   pila de fuentes del sistema de Pagefind. Hay que poner la propiedad de verdad. */
#site-search-ui .pagefind-ui {
  font-family: inherit;
}

/* `legacy-theme.css` trae `input { padding-inline: 1rem !important }`, heredado del
   tema de WordPress. Ese !important gana a la regla de Pagefind y deja el texto
   empezando a 16px, justo debajo de la lupa —que va en el ::before del formulario, a
   20px—, y pisando también el botón de limpiar. Se restauran los valores de Pagefind,
   que son múltiplos de --pagefind-ui-scale para que sigan cuadrando si cambia. */
#site-search-ui .pagefind-ui__search-input {
  background: rgb(255 255 255 / 0.05);
  padding-inline: calc(54px * var(--pagefind-ui-scale))
    calc(70px * var(--pagefind-ui-scale)) !important;
  font-family: inherit;
}

#site-search-ui .pagefind-ui__result-link {
  color: #fff;
}

#site-search-ui .pagefind-ui__result-excerpt mark {
  background: transparent;
  color: #8b7dff;
  font-weight: 700;
}