/* Drake KB — SEARCH RESULTS PAGE
 *
 * Styles the results view rendered by mu-plugins/drake-kb-search/template.php
 * (see mu-plugins/drake-kb-search.php for why that page is custom rather than a
 * BetterDocs shortcode). Every selector is namespaced under `.drake-search`, so
 * this file cannot leak into the header, the article page, or the rails.
 *
 * All colors/fonts come from tokens.css.
 */

.drake-search {
  font-family: var(--drake-font);
  color: var(--drake-ink);
  background: var(--drake-bg);
}

/* --- Head band: title + form + result count -------------------------------- */

/* Two columns, not a stack: title/form/count on the left, the search-guidance tip
 * on the right.
 *
 * WHY. The form is capped at 640px (its comfortable measure) inside an 1180px band,
 * so stacking a fourth block under the count line left the entire right half of the
 * band empty while the tip pushed the results and the facet rail down the page.
 * Beside the form the tip occupies space that was already blank, and the band gets
 * SHORTER at every width above the breakpoint — it is now sized by the taller of the
 * two columns rather than by their sum.
 *
 * The tracks are proportional (fr), not `minmax(0, 640px) 1fr`, so both columns
 * shrink together. A fixed 640px left track holds its width as the viewport narrows
 * and starves the right one — at a 900px viewport it would leave the tip ~180px wide
 * and many lines tall, which is how a "fix" for stacking becomes worse than stacking.
 * 1.4fr : 1fr is chosen so that at the band's full 1180px the left track computes to
 * ~642px and the form renders at exactly the 640px measure it had before this change;
 * the form is not being resized, it is being given a neighbour.
 *
 * Three explicit rows — title, form, count — because the tip spans them with
 * `grid-row: 1 / -1`, and negative line numbers only count back through the EXPLICIT
 * grid; with implicit rows `-1` silently collapses to line 1. The last row is `1fr`
 * rather than `auto` so that when the tip is the taller column its excess height is
 * absorbed below the count line instead of being distributed across all three rows,
 * which would have drifted the form and count apart. Left-column spacing is therefore
 * identical to the old block layout (the children's own margins still supply the
 * 16px/12px gaps; grid does not collapse them, and none of them collapsed before).
 *
 * `column-gap` reuses the 32px of .drake-search__body below, so the head band and the
 * rail/results grid share one gutter.
 */
.drake-search__head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 20px;
  border-bottom: 1px solid var(--drake-line);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 32px;
  align-items: start;
}

/* Everything except the tip stays in the left column. Not strictly required —
 * auto-placement happens to flow around a column-2 item that spans every explicit
 * row — but stated so a future fifth element in the band cannot land beside the
 * title by accident. */
.drake-search__head > * { grid-column: 1; }

.drake-search__title {
  font-family: var(--drake-font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--drake-blue);
  line-height: var(--drake-line-heading);
  margin: 0 0 16px;
  /* The h1 quotes the raw query back, so its width is user-controlled. It now lives in
   * a ~642px grid track instead of the full 1132px band, which makes a long unbroken
   * paste (already able to overflow before) roughly twice as easy to trigger — and
   * here it would spill INTO the tip beside it rather than into empty space. No effect
   * on any query that wraps normally. */
  overflow-wrap: break-word;
}

.drake-search__form {
  display: flex;
  gap: 8px;
  max-width: 640px;
  margin: 0 0 12px;
}

.drake-search__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 9px 12px;
  border: 1px solid var(--drake-line);
  border-radius: 3px;
  background: var(--drake-bg);
  color: var(--drake-ink);
}

.drake-search__input:focus {
  outline: 2px solid var(--drake-blue);
  outline-offset: -1px;
  border-color: var(--drake-blue);
}

.drake-search__submit {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 9px 20px;
  border: 1px solid var(--drake-blue);
  border-radius: 3px;
  background: var(--drake-blue);
  color: #fff;
  cursor: pointer;
}

.drake-search__submit:hover {
  background: var(--drake-blue-dark);
  border-color: var(--drake-blue-dark);
}

.drake-search__count {
  font-size: 0.9rem;
  color: var(--drake-gray);
  margin: 0;
}

.drake-search__count strong { color: var(--drake-ink); }
.drake-search__of { color: var(--drake-gray); }
.drake-search__count a { color: var(--drake-blue); }

/* --- Search guidance TIP --------------------------------------------------- */

/* The box itself is a real KB callout (`kb-callout kb-callout-tip`), styled by
 * callouts.css, which now carries a `.drake-search` scope alongside its two
 * article-body scopes. Nothing about the look is restated here — in particular not
 * the green trio, whose label colour (#2b6e33, 5.62:1) is an accessibility fix
 * that must exist in exactly one place.
 *
 * All that is left is where the box SITS: the head band's right-hand column, beside
 * the form rather than stacked full-width beneath the count line, and a slightly
 * smaller type size to match the count line it follows, since this is page furniture
 * rather than article prose. `1rem` from callouts.css would make the guidance louder
 * than the results it is guiding.
 *
 * `grid-row: 1 / -1` spans all three explicit rows of .drake-search__head so the box
 * aligns with the top of the h1 and is free to be taller than the form beside it. The
 * `max-width: 760px` it used to need to keep a readable measure in a full-width band
 * is gone: the grid track is the constraint now, and re-capping it would only reopen
 * the whitespace this rule exists to close.
 *
 * `margin: 0` overrides callouts.css's `1.15em 0`. The old `14px 0 0` was clearing the
 * count line above it; there is nothing above it any more, and a top margin here
 * would drop the tip out of alignment with the title.
 *
 * Scoped `.drake-search .drake-search__tip` and not the bare element class, which
 * is NOT this file's usual one-class idiom but is load-bearing here: the rules
 * being overridden are `.drake-search .kb-callout { margin; font-size }`, two
 * classes, so a single-class selector loses on specificity no matter that
 * search.css is enqueued after callouts.css. A bare `.drake-search__tip` silently
 * rendered at the article-body 1rem.
 */
.drake-search .drake-search__tip {
  grid-column: 2;
  grid-row: 1 / -1;
  margin: 0;
  font-size: 0.9rem;
}

/* --- Two-column body: facet rail + results --------------------------------- */

.drake-search__body {
  display: grid;
  /* Narrow fixed rail so the results column keeps a comfortable measure —
   * matching the article page's rail/content proportion. */
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px 56px;
  align-items: start;
}

/* The same 860px at which the rail drops below the results, reused rather than a
 * second near-miss breakpoint: below it there is no spare horizontal space anywhere on
 * the page, so the head band goes back to the stack it was before — title, form,
 * count, tip — which is the right shape on a phone. */
@media (max-width: 860px) {
  .drake-search__body { grid-template-columns: minmax(0, 1fr); }

  .drake-search__head {
    grid-template-columns: minmax(0, 1fr);
    /* auto, not `auto auto 1fr`: with the tip back in flow as a fourth row there is
     * no spanning item left to absorb slack, and a 1fr third row would stretch the
     * count line's box to fill the band. */
    grid-template-rows: none;
  }

  /* Back under the count line, in source order, with the 14px of clearance the
   * stacked layout needs. Two classes, to beat callouts.css — same reason as the
   * base rule above. */
  .drake-search .drake-search__tip {
    grid-column: 1;
    grid-row: auto;
    margin: 14px 0 0;
  }
}

/* --- Category facets ------------------------------------------------------- */

.drake-search__facets {
  background: var(--drake-bg-alt);
  border: 1px solid var(--drake-line);
  border-radius: 3px;
  padding: 14px 0 6px;
  position: sticky;
  top: 16px;
}

.drake-search__facets-title {
  font-family: var(--drake-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--drake-gray);
  margin: 0 16px 10px;
}

.drake-search__facet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 20 top-level categories fit; deep result sets scroll rather than pushing
   * the results column down the page. */
  max-height: 70vh;
  overflow-y: auto;
}

.drake-search__facet {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 16px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--drake-ink);
  text-decoration: none;
  border-left: 3px solid transparent;
}

.drake-search__facet:hover {
  background: var(--drake-blue-tint);
  color: var(--drake-blue-dark);
}

.drake-search__facet.is-active {
  background: var(--drake-bg);
  border-left-color: var(--drake-blue);
  font-weight: 700;
  color: var(--drake-blue);
}

.drake-search__facet-name { min-width: 0; }

.drake-search__facet-count {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--drake-gray);
  background: var(--drake-bg);
  border: 1px solid var(--drake-line);
  border-radius: 999px;
  padding: 1px 8px;
}

.drake-search__facet.is-active .drake-search__facet-count {
  color: #fff;
  background: var(--drake-blue);
  border-color: var(--drake-blue);
}

.drake-search__facet-note {
  font-size: 0.82rem;
  color: var(--drake-gray);
  margin: 10px 16px 6px;
}

/* --- Results -------------------------------------------------------------- */

.drake-search__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drake-search__result {
  padding: 0 0 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--drake-line);
}

.drake-search__result:last-child { border-bottom: 0; }

.drake-search__result-title {
  font-family: var(--drake-font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: var(--drake-line-heading);
  margin: 0 0 5px;
}

.drake-search__result-title a {
  color: var(--drake-blue);
  text-decoration: none;
}

.drake-search__result-title a:hover { text-decoration: underline; }

.drake-search__result-meta {
  font-size: 0.8rem;
  color: var(--drake-gray);
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.drake-search__result-cat {
  color: var(--drake-gray);
  text-decoration: none;
  border-bottom: 1px dotted var(--drake-line);
}

.drake-search__result-cat:hover { color: var(--drake-blue); }

.drake-search__result-excerpt {
  font-size: 0.9rem;
  line-height: var(--drake-line-body);
  color: var(--drake-ink);
  margin: 0;
}

.drake-search__empty {
  font-size: 0.95rem;
  color: var(--drake-gray);
  padding: 8px 0 40px;
}

.drake-search__empty a { color: var(--drake-blue); }

/* --- Pagination ---------------------------------------------------------- */

.drake-search__pager {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--drake-line);
}

.drake-search__pager .page-numbers {
  display: inline-block;
  min-width: 32px;
  text-align: center;
  padding: 5px 9px;
  margin: 0 3px 6px 0;
  font-size: 0.86rem;
  border: 1px solid var(--drake-line);
  border-radius: 3px;
  color: var(--drake-blue);
  text-decoration: none;
}

.drake-search__pager .page-numbers:hover { background: var(--drake-blue-tint); }

.drake-search__pager .page-numbers.current {
  background: var(--drake-blue);
  border-color: var(--drake-blue);
  color: #fff;
  font-weight: 700;
}

.drake-search__pager .page-numbers.dots {
  border-color: transparent;
  color: var(--drake-gray);
}