/* EN | FR toggle in the marketing nav (NP-4743). Sits in the primary_menu
 * region just before the account block, so immediately before Contact Us
 * (NP-4968). A quieter label than the Contact Us / Login superfish links:
 * 14px, regular weight, their grey-blue (#ccd8de) at 50% opacity. */
.bca-lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0 7px 0 0;
  color: rgba(204, 216, 222, 0.5);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.bca-lang-toggle:hover,
.bca-lang-toggle:focus {
  /* The hover colour of the Start Trial / Login links beside it. */
  color: #6eb6b0;
  text-decoration: none;
}

/* Centred against its neighbours (Start Trial / Login) in the navbar row. */
.block-bca-site-translate-toggle {
  display: flex;
  align-items: center;
  align-self: center;
}

/* The toggle sits between the marketing menu and the account block (block
 * weight -30, NP-4968). The navbar spreads its blocks with
 * justify-content: space-between, which would leave the toggle floating in
 * the middle of the bar. An auto margin on the toggle takes up that free
 * space instead, so FR, Contact Us, Login and Start Trial sit together on
 * the right. Desktop only (Bootstrap lg), the mobile menu stacks. */
@media (min-width: 992px) {
  /* 5px + the navbar's 7px gap + the link's 7px right padding: 19px
   * between the label and Contact Us. */
  .block-bca-site-translate-toggle {
    margin-left: auto;
    margin-right: 5px;
  }
}

/* Mobile menu: the toggle leads the Contact Us / Login / Start Trial row,
 * whose links are 55px tall and sit at the bottom of the account block.
 * Match both so the labels line up. 991.98px is Bootstrap's
 * media-breakpoint-down(lg), where the navbar collapses, so this query and
 * the min-width: 992px one above leave no gap between them. */
@media (max-width: 991.98px) {
  .block-bca-site-translate-toggle {
    align-self: end;
    padding-left: 21px;
  }

  .bca-lang-toggle {
    line-height: 55px;
  }
}