/* ---------------------------------------------------------------------------
 * A slimmer header on phones.
 *
 * The header is sized for a desktop toolbar: a tall bar, a large wordmark and
 * full-size icons, which on a 375px screen eats the top of every page before
 * any content appears. This trims the height, scales the logo to it and keeps
 * the tap targets at 44px so nothing becomes harder to hit than it was.
 * ------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

  header .navbar,
  .header-main .navbar,
  #main-header .navbar {
    min-height: 56px !important;
    padding-bottom: 6px !important;
    padding-top: 6px !important;
  }

  header .navbar-brand img,
  .header-main .navbar-brand img,
  #main-header .navbar-brand img {
    height: 30px !important;
    max-height: 30px !important;
    width: auto !important;
  }

  /* the icon row: keep 44px of touch area while drawing something smaller */
  header .navbar-nav .nav-link,
  .header-main .navbar-nav .nav-link {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 8px !important;
  }

  header .navbar-nav .nav-link i,
  header .navbar-nav .nav-link svg {
    font-size: 1.15rem !important;
  }

  /* the search field was as wide as the bar and pushed everything sideways */
  header .search-box,
  header form[role="search"] {
    max-width: 190px;
  }

  header .search-box input,
  header form[role="search"] input {
    font-size: 0.9rem !important;
    height: 38px !important;
  }

  /* the sign-in button reads as a chip rather than a full-width bar */
  header .btn,
  .header-main .btn {
    font-size: 0.88rem !important;
    padding: 7px 14px !important;
  }

  /* a header that hides on scroll-down and returns on scroll-up gives the page
     its full height back; the theme already toggles this class */
  header.nav-hide-on-scroll {
    transition: transform 0.25s ease;
  }
}

@media (max-width: 575.98px) {

  header .navbar,
  .header-main .navbar,
  #main-header .navbar {
    min-height: 50px !important;
  }

  header .navbar-brand img,
  .header-main .navbar-brand img,
  #main-header .navbar-brand img {
    height: 26px !important;
    max-height: 26px !important;
  }

  /* below this width the field and the icons cannot both fit; the search icon
     opens the field instead, which is what the theme does at tablet size */
  header .search-box,
  header form[role="search"] {
    max-width: 150px;
  }

  header .navbar-nav {
    gap: 0 !important;
  }
}