/**
 * Labels overview: the page title is shown as the Labelinfo logo.
 *
 * The heading text is replaced rather than removed. It stays in the markup and
 * stays readable to a screen reader and to a search engine — a background image
 * carries no meaning to either — and only its glyphs are hidden, by pushing the
 * text out of the box and clipping it. The logo then sits in the space the
 * heading already occupied.
 *
 * text-indent rather than `font-size: 0` or `color: transparent`: those leave
 * the text selectable and copyable, so a visitor dragging across the page picks
 * up an invisible word.
 *
 * Loaded only on this route (see fido_preprocess_page_title()), so the rule can
 * be plain and the rest of the site never carries it.
 */
.path-labels .block-page-title-block .title {
  /* Height first: the box is what the logo is drawn into. The width follows the
     image's own proportions (342 × 108) so it can never be stretched, and the
     max-width keeps it inside a narrow viewport instead of overflowing. */
  height: 3.5rem;
  width: 11.083rem; /* 3.5rem × 342/108 */
  max-width: 100%;

  /* contain, not cover: the logo must never be cropped, whatever the box does. */
  background-image: url("../../images/labelinfo-logo.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;

  /* Hide the glyphs without hiding the element. */
  text-indent: -100vw;
  overflow: hidden;
  white-space: nowrap;
}

/* A logo is a picture, and a picture that is only there to decorate should not
   be printed as a broken box when backgrounds are off — which they are by
   default in every browser's print dialog. On paper the heading reads as text
   again. */
@media print {
  .path-labels .block-page-title-block .title {
    height: auto;
    width: auto;
    background-image: none;
    text-indent: 0;
    overflow: visible;
    white-space: normal;
  }
}

/* Same reasoning for a forced-colours mode (Windows high contrast), where
   background images are dropped: without this the heading would be an empty
   gap. */
@media (forced-colors: active) {
  .path-labels .block-page-title-block .title {
    height: auto;
    width: auto;
    background-image: none;
    text-indent: 0;
    overflow: visible;
    white-space: normal;
  }
}