/* Compact in-header search box — production Oxygen WebHelp overlay.
 *
 * resources/search-in-header.js moves the stock search band into the header's
 * own flex container and stamps `wh_header_search` on <header>. This restyles
 * it there: no band, no background image, one ordinary header-sized control.
 *
 * WHAT IT RECLAIMS. The stock `.wh_search_input` is a full-width strip with
 * `padding: 40px 0` and a background image — `115px 0` on the tiles landing
 * page — for a control one input tall. On a gram page that is ~120px taken off
 * the top of a spectrogram, on every page, in both editions.
 *
 * SCOPE. Every rule hangs off `.wh_header_search`, which only exists once the
 * script has actually moved the box, so a JavaScript-off reader keeps the
 * stock band rather than a half-restyled one.
 *
 * LAYOUT MODE. The host — `.wh_top_menu_and_indexterms_link` — is laid out by
 * the stock sheet as `display: inline-block` (not flex), and `.wh_top_menu ul`
 * inside it as `inline-table`. So the search box is sized and aligned as an
 * inline-block sibling of the menu, NOT with flex properties; a `flex: …` here
 * would silently do nothing.
 *
 * Self-contained (literal sizes, the template's own custom properties only
 * where they already resolve) because this rides the stock Oxygen chrome.
 * Install per ../README.md.
 */

/* 1. The band becomes a control: no padding, no background image, no width
 *    claim on the row. `position: relative` is kept — the stock sheet absolutely
 *    positions .wh_search_button against it. */
.wh_header_search .wh_search_input {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 15em;
  max-width: 40vw;
  margin: 0 0 0 1.5em;
  padding: 0;
  border: 0;
  background: none;
}

/* 2. Shorter than the stock 2.8em, so the header keeps its own height rather
 *    than growing to fit the search box. */
.wh_header_search .wh_search_input .wh_search_textfield {
  width: 100%;
  height: 2.2em;
  margin: 0;
  font-size: 0.9em;
}

/* 3. The submit button is absolutely positioned against rule 1's box by the
 *    stock sheet; match its height so it does not overhang the field. */
.wh_header_search .wh_search_input .wh_search_button {
  height: 2.2em;
  padding: 0 0.8em;
  font-size: 0.9em;
}

/* 4. Narrow screens: the header stacks (the stock sheet switches
 *    .wh_header_flex_container to a column) and the menu group collapses
 *    behind the hamburger. Let the search box use the full width there rather
 *    than sitting as a 15em stub. */
@media (max-width: 767px) {
  .wh_header_search .wh_search_input {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0.5em 0 0;
  }
}