html:has(body.sm-no-scroll) {
  @media (max-width: $grid-float-breakpoint-max) {
    overflow: hidden;
    min-height: 100dvh;
    scroll-behavior: unset;
    overscroll-behavior: none;
  }
}
body {
  font-family: $safe-font-family-sans-serif;
  font-weight: $roboto-light;
  .fonts-loaded & {
    font-family: $font-family-base;
    .heading-fonts, h1, .h1 {
      font-family: $font-family-heading;
      text-transform: none;
    }
  }

  html[lang|="ar"].fonts-loaded & {
    font-family: $arabic_text_font, $safe-font-family-sans-serif;
    .heading-fonts, h1, .h1 {
      font-family: $arabic_text_font, $font-family-heading;
    }
  }
  html[lang|="fa"].fonts-loaded & {
    font-family: $farsi_text_font, $safe-font-family-sans-serif;
    .heading-fonts, h1, .h1 {
      font-family: $farsi_text_font, $font-family-heading;
    }
  }
  html[lang|="he"].fonts-loaded & {
    font-family: $hebrew_text_font, $safe-font-family-sans-serif;
    .heading-fonts, h1, .h1 {
      font-family: $hebrew_text_font, $font-family-heading;
    }
  }
  html[lang|="ja"] & {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", $safe-font-family-sans-serif;
    .heading-fonts, h1, .h1 {
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", $font-family-heading;
    }
  }
  html[lang|="ru"].fonts-loaded & {
    .heading-fonts, h1, .h1 {
      font-family: $font-family-base;
    }
  }
  &.sm-no-scroll {
    @media (max-width: $grid-float-breakpoint-max) {
      position:fixed;
      overflow: hidden;
      overscroll-behavior: none;
      &:not(.ios-fullscreen) {
        min-height: 100dvh;
      }
    }
  }
  &.noScrollFixed {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100dvh;/* uc browser */
  }
}

// Responsive images (ensure images don't scale beyond their parents)
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  @include img-responsive;
}


// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate

.sr-only-focusable {
  &:active,
  &:focus {
    width: 100%;
    height: 100%;
  }
}