/*
 * Corrections to the theme's CSS, kept apart from it so the captured styles
 * stay byte-identical to production and this file is the only place to look.
 */

/*
 * The archive cards print their thumbnail at its natural width — 1280px — and
 * the theme constrains it nowhere. On a 375px phone /service/ scrolled 905px
 * sideways, which is the whole page moving under the reader's thumb.
 */
.btMediaBox img,
.btArticleMedia img {
  max-width: 100%;
  height: auto;
}

/*
 * A shorter header.
 *
 * It was 132px on a desktop and 141px on a phone — a 36px preheader plus a
 * navbar built around an 80px logo — before a visitor saw any of the page. The
 * theme sets that height in five places that disagree (60px, 70px, 80px, "auto
 * with min-height"), and the body's padding-top is declared four times to
 * match whichever won, so the numbers are asserted here once.
 *
 * Every selector starts at `html body`. This file is last in the head, but the
 * theme also prints stylesheets inside the body — four of them, after it — and
 * those win on order at equal specificity. Weight settles it instead of
 * position, and nothing needs moving.
 *
 * 96px on a desktop, 92px on a phone: the same rows, a smaller logo, less
 * padding. Nothing is removed — the phone number, the language switcher, the
 * menu and the logo all stay where they were.
 *
 * The padding-top moves with it: it is what holds the page below a header that
 * is position: fixed, so shrinking one without the other leaves a band of
 * empty blue or hides the first heading.
 */
html body nav.navbar.navbar-blue,
html body .navbar-blue .container,
html body .navbar-blue .navbar-brand {
  min-height: 60px !important;
  height: 60px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body .navbar-blue .navbar-brand img,
html body .logo-optimized {
  height: 48px !important;
  max-height: 48px !important;
  max-width: 90px !important;
  width: auto !important;
}

html body,
html body.single-service,
html body.single-service_location,
html body.single-post,
html body.page,
html body.home,
html body.blog,
html body.archive {
  padding-top: 96px !important;
}

@media (max-width: 991.98px) {
  html body nav.navbar.navbar-blue,
  html body .navbar-blue .container,
  html body .navbar-blue .navbar-brand {
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 !important;
  }

  html body .navbar-blue .navbar-brand img,
  html body .logo-optimized {
    height: 40px !important;
    max-height: 40px !important;
    max-width: 76px !important;
  }

  html body,
  html body.single-post,
  html body.blog,
  html body.archive,
  html body.search,
  html body.single-service,
  html body.single-service_location,
  html body.page,
  html body.home {
    padding-top: 92px !important;
  }

  html body.single-post .breadcrumbs {
    scroll-margin-top: 92px;
  }

  /*
   * The menu is position: fixed, so its top is measured from the window, not
   * from the navbar: it has to clear the preheader and the navbar together —
   * 36 + 56 — or it opens over the logo, which is what 56px did.
   */
  html body .navbar-blue .navbar-collapse {
    top: 92px !important;
  }
}