/* Search: the search box in the site header (Pages/Search/_HeaderSearch.cshtml) and the
   search page with its results (Pages/Search/Index.cshtml). The page borrows the forum
   pieces from threads.css (page title, fields, buttons, pager, tags).

   Mobile first: the rules outside a media query lay things out for a phone; the min-width
   blocks at the end add room. Everything tapped is at least 44 px tall, form fields use
   16 px text (smaller makes an iPhone zoom the page), and nothing here moves or animates.

   Every color, font and corner radius is a custom property from site.css, so a
   community's theme can change them. A value with no variable yet gets one there first.
   A found word is marked by a background and by bold, never by color alone. */

/* The header. On a phone there is no room for a text box beside the name, the links and
   the account, so only the button shows: it is the form's submit, and with nothing typed
   it opens the search page, where the box is. From tablet width up the box is here too. */
.header-search { display: flex; align-items: center; margin: 0; }
.header-search-field { display: none; }
/* Where the form sits in the header row, and when the text box joins the button, is
   header.css's business. */
.header-search-button {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--header-field-line); border-radius: var(--radius-small);
  background: var(--header-field); color: var(--header-ink); cursor: pointer;
}
.header-search-button:hover { border-color: var(--header-ink); }
.header-search-field:focus-visible, .header-search-button:focus-visible { outline: 2px solid var(--header-ink); outline-offset: 2px; }

/* The search page */
.search-form {
  display: flex; flex-direction: column; gap: 14px; padding: 16px;
  border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--elev-2);
}
.search-main { display: flex; flex-wrap: wrap; gap: 8px; }
.search-main .forum-field { flex: 1 1 220px; width: auto; min-width: 0; }
.search-main .forum-button { flex: 1 1 auto; }
.search-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 12px; }
.search-filter { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.search-filter label { font-size: 14px; font-weight: 600; }
.search-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 600; line-height: 1.25; cursor: pointer; }
.search-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.search-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* What a search has to say when there are no results to show: how to search, too short,
   nothing found. */
.search-note { padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; }
.search-note-title { margin: 0; font-size: 17px; font-weight: 700; }
.search-note-text { margin: 0; color: var(--muted); }
.search-tips { margin: 0; padding-left: 20px; color: var(--muted); }
.search-tips li + li { margin-top: 4px; }
.search-summary { margin: 0; overflow-wrap: anywhere; }
.search-aside { margin: 0; display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }

/* Results. On a phone each result is a stack: what it is and its title, the excerpt,
   then where, who and when. */
.search-results { margin: 0; padding: 0; list-style: none; }
.search-result { padding: 12px 16px 4px; border-top: 1px solid var(--line-soft); transition: background-color var(--ease); }
.search-result:hover { background: var(--surface-alt); }
.search-result:first-child { border-top: 0; }
.search-result-main { position: relative; min-width: 0; }
.search-result-title { font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.search-result-title:hover { text-decoration: underline; }
/* The whole block, excerpt included, is the title link's tap area. */
.search-result-title::after { content: ""; position: absolute; inset: 0; }
.search-excerpt { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.search-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 2px; color: var(--muted); font-size: 13px; }
.search-meta a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; }
.search-meta a:hover { text-decoration: underline; }
.search-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* A word the search found. */
.search-result mark { padding: 0 2px; border-radius: var(--radius-chip); background: var(--highlight); color: var(--ink); font-weight: 700; }

/* Tablet and up: the text box joins the button in the header, and the filters sit in a row. */
@media (min-width: 768px) {
  /* The box is 200 px wide when the header has the room and gives up to 80 px of it
     before anything has to move to a second line (a moderator's header has more links).
     The large grow number lets it take free space ahead of the navigation, up to its width. */
  .header-search-field {
    display: block; flex: 1 1 auto; width: auto; min-width: 0; height: 40px; padding: 0 12px;
    border: 1px solid var(--header-field-line); border-right: 0;
    border-radius: var(--radius-small) 0 0 var(--radius-small);
    background: var(--header-field); color: var(--header-ink); font: inherit; font-size: 16px;
  }
  .header-search-field::placeholder { color: var(--header-muted); opacity: 1; }
  .header-search-button { width: 44px; height: 40px; border-radius: 0 var(--radius-small) var(--radius-small) 0; }

  .search-form { padding: 18px 20px 20px; }
  .search-main .forum-button { flex: 0 0 auto; padding: 0 24px; }
  .search-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
  .search-filter { flex: 1 1 180px; }
  .search-check { flex: 0 0 auto; }

  .search-note { padding: 22px 20px; }
  .search-result { padding: 14px 20px 8px; }
  .search-result-title::after { content: none; }
  .search-result-title { font-size: 17px; }
}

/* A mouse can hit a smaller link. Touch screens keep 44 px. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .search-meta a { min-height: 32px; }
}