/* =====================================================================
   Beyond Journey - header and footer logo
   ---------------------------------------------------------------------
   images/logo.png is 200 x 40 and holds the wordmark only: "beyond
   journey" over the tagline. There is no "bj" mark on it to hide.

   THIS FILE USED TO CROP ONE OFF, AND THAT IS WHY THE LOGO READ
   "yond journey" ON EVERY PAGE.

   The earlier artwork was 216 x 40 with the mark occupying x 0-30 and a
   clean 9px empty gutter at x 31-39, so the file cropped 40px off the
   left to leave the type. That artwork has since been replaced by the
   wordmark-only file, and the crop kept firing: measured on the current
   file it cut 37px of real glyphs, taking the "be" with it.

   Re-measured, the current file has no gutter to cut at:

       images/logo.png   200 x 40, colour-type 6
       empty-column runs: 15-16, 61-61, 95-96, 102-102, 169-170
       -- the widest is 2px, i.e. ordinary letter spacing

   So there is nothing to crop. The logo is drawn whole, sized by height,
   and the width follows its real 5:1 aspect. If the artwork is ever
   swapped again, re-measure before adding any offset here - a crop that
   outlives its source silently eats letters.

   SHARPNESS, HONESTLY: the source is 200px wide with no SVG or @2x asset
   in the project, so on a HiDPI screen it stays as soft as the file is.
   Only a vector export from the designer fixes that.
   ===================================================================== */

/* One number controls the lockup: --h, its rendered height. The width is
   derived from the artwork's own ratio, so the two cannot drift apart. */
.bj-logo {
  --h: 34px;
  --ratio: 5;                    /* 200 / 40 */

  display: block;
  height: var(--h);
  width: calc(var(--h) * var(--ratio));
}

.bj-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* style.css sets a global img { max-width: 100% }; harmless here, but
     stated so a narrow parent cannot squeeze the lockup out of ratio. */
  max-width: none;
  display: block;
}

/* ---------------------------------------------------------------
   Beating the template on the header logo
   ---------------------------------------------------------------
   css/style.css carries:

       .navbar-default a.navbar-brand   -- specificity 0,2,1
         height: auto;
         flex: 1;

   `flex: 1` stretches the brand across the navbar and squashes the
   artwork. `.bj-logo` alone is 0,1,0 and loses; the selector below is
   0,3,0, so it wins on specificity rather than on load order.
   --------------------------------------------------------------- */
.main_header_area .navbar-brand.bj-logo {
  height: var(--h);
  width: calc(var(--h) * var(--ratio));
  flex: 0 0 auto;
  padding: 0;
}

/* ---------------------------------------------------------------
   Footer
   ---------------------------------------------------------------
   Logo-footer.png runs its tagline under the mark and cannot be reused
   cleanly, so the footer takes this same file and knocks it to white -
   the dark plum wordmark is unreadable on the navy footer panel.

   TRADE-OFF: the filter takes the tagline to white too, so it loses the
   orange it carries in the source.
   --------------------------------------------------------------- */
.bj-logo--light { --h: 38px; }
.bj-logo--light img { filter: brightness(0) invert(1); }

/* ---------------------------------------------------------------
   Responsive - only --h changes; the width follows it.
   --------------------------------------------------------------- */
@media (max-width: 1199px) {
  .bj-logo { --h: 32px; }
  .bj-logo--light { --h: 36px; }
}
@media (max-width: 991px) {
  .bj-logo { --h: 30px; }
  .bj-logo--light { --h: 34px; }
}
@media (max-width: 575px) {
  .bj-logo { --h: 26px; }
  .bj-logo--light { --h: 29px; }
}