/* Norsk docs — supplemental overrides on top of the UI bundle's site.css */

/*
 * Mobile navbar fix.
 *
 * The navbar brand is a flex row of [logo] [site-title link] [search box].
 * On narrow screens the title ("Developer Documentation") gets crushed between
 * the logo and the fixed-width search box, wrapping character-by-character and
 * overlapping the search field.
 *
 * On mobile we stack the brand into two rows: [logo | search] on top, with the
 * title on its own full-width row beneath the logo. The navbar is
 * position:fixed at 3.5rem tall and several elements are pinned to that height
 * (body padding-top, the nav sidebar container, and the sticky toolbar), so we
 * grow the navbar to 5.5rem here and shift those dependent offsets to match.
 */
@media screen and (max-width: 768.5px) {
  .navbar {
    height: 5.5rem;
  }

  body {
    padding-top: 5.5rem;
  }

  /* Elements pinned just below the (previously 3.5rem) navbar. */
  .nav-container {
    top: 5.5rem;
  }

  .toolbar {
    top: 5.5rem;
  }

  /* Sidebar height = viewport - navbar (5.5rem) - toolbar (2.5rem). */
  .nav {
    height: calc(100vh - 8rem);
  }

  /* Two-row brand layout. */
  .navbar-brand {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  /* Title link drops to a full-width second row, aligned under the logo. */
  .navbar-brand a.navbar-item {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    padding: 0 1rem 0.4rem 0;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  /*
   * Keep the search box on row 1 next to the logo instead of wrapping to its
   * own line. Flex decides line breaks from each item's *preferred* size
   * (flex-basis), so with the default flex-basis:auto the search advertises the
   * input's intrinsic ~180px width; logo (~210px) + search then overflow a
   * narrow phone and the search wraps down, creating a phantom third row that
   * shoves the title onto the toolbar. flex-basis:0 makes the search advertise
   * zero preferred width, so it never forces a wrap and simply grows into
   * whatever space is left beside the logo.
   */
  .navbar-brand .navbar-item.search {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0;
    flex: 1 1 0;
    min-width: 0;
    /* A little breathing room so the box doesn't butt up against the logo. */
    padding-left: 0.75rem;
  }

  #search-input {
    width: 100%;
    min-width: 0;
    max-width: 220px;
  }
}