/*
 * search.css — the news search, first version (AI/architecture/divi-fallstricke.md, section 1a).
 *
 * Two places use it: the form in the news list (template-parts/archive.php) and the results
 * (template-parts/search.php). The results are built from the news list's own classes — area,
 * head, grid, cards, pagination — and archive.css styles those. This file adds only what the
 * list does not have: the form, and on the results the status line with the count and the way
 * back to all news.
 *
 * The breakpoints stand as numbers in the @media rules, not as tokens: CSS does not resolve
 * custom properties in media queries.
 */

/* ------------------------------------------------------------------ *
 * The form
 * ------------------------------------------------------------------ */

.wi-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wi-search-form-gap);
  max-width: var(--wi-search-form-max-width);
  margin: 0 0 var(--wi-search-form-space) 0;
}

/*
 * The field takes the height of the button beside it: the same type, the same border and the same
 * padding in em, so the two stand as one bar at every width without a fixed height on either.
 */
.wi-search-form .wi-search-form__input {
  flex: 1 1 var(--wi-search-input-min-width);
  min-width: 0;
  margin: 0;
  padding: 0.5em 0.75em;
  font-family: var(--wi-font-sans), sans-serif;
  font-size: var(--wi-font-size-body);
  line-height: normal;
  color: var(--wi-color-ink);
  background-color: var(--wi-color-surface);
  border: var(--wi-border-width-button) solid var(--wi-color-ink);
  border-radius: var(--wi-radius);
}

.wi-search-form .wi-search-form__input:focus {
  outline: var(--wi-border-width-button) solid var(--wi-color-accent);
  outline-offset: 2px;
}

.wi-search-form .wi-search-form__submit {
  flex: 0 0 auto;
  margin: 0;
  line-height: normal;
}

/*
 * The form close to the heading. The list's head keeps 50px below the heading (archive.css),
 * meant as the gap to the cards; with the form in between that gap belongs below the form, and
 * above it the form would float away from the heading it belongs to. So where a form follows the
 * head, heading and category bar keep only the narrow heading gap — the value archive.css
 * itself takes from 991px down.
 *
 * `:has()` and not a class on the head: the head is the list's markup, and the rule should hold
 * exactly where a form follows, in the list and on the results alike. Three classes, so it wins
 * over `.wi-archive .wi-archive__title` and the bar's own margin at every width.
 */
.wi-archive .wi-archive__head:has(+ .wi-search-form) .wi-archive__title,
.wi-archive .wi-archive__head:has(+ .wi-search-form) .wi-archive__filters {
  margin-bottom: var(--wi-search-head-space);
}

/* ------------------------------------------------------------------ *
 * The results: the form directly below the heading, then the status line
 * ------------------------------------------------------------------ */

/*
 * On the results the form follows the heading and the status line follows the form, so the form
 * keeps only a small gap. Two classes for the reason given at the heading in 404.css.
 */
.wi-search .wi-search-form {
  margin-bottom: var(--wi-search-status-space);
}

/* Count on the left, the way back on the right; below each other once the line gets narrow. */
.wi-search .wi-search__status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--wi-search-form-gap);
  margin: 0 0 var(--wi-search-form-space) 0;
  font-size: var(--wi-card-date-size);
  color: var(--wi-color-ink);
}

.wi-search .wi-search__back {
  font-weight: var(--wi-font-weight-semibold);
  color: var(--wi-color-ink);
}

.wi-search .wi-search__back:hover,
.wi-search .wi-search__back:focus {
  color: var(--wi-color-accent);
}

/* A long term must not push the heading out of the window. */
.wi-search .wi-search__title {
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ *
 * Narrower windows
 * ------------------------------------------------------------------ */

/* 1600px: running text steps from 20 to 16px on the legacy site. Field and button are running
 * text here and follow, as the explanatory sentence of the error page does. */
@media only screen and (max-width: 1600px) {
  .wi-search-form .wi-search-form__input,
  .wi-search-form .wi-search-form__submit {
    font-size: var(--wi-font-size-body-medium);
  }
}