/* utility */
/* ultility classes need to override whatever they are attached to */
@layer utility {

  /* hides element unless page is set to specific language */
  html[lang^="fr" i] .en-only,
  html[lang^="fr" i] .english-only,
  html[lang^="en" i] .fr-only,
  html[lang^="en" i] .french-only {
    display: none;
  }


  /* hides element from screen readers */
  .sr-hidden {
    /* use aria-hidden="true" attribute instead */
  }
  /* hides elements visually but still available for screen readers */
  .sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
  }

  /* hides elements unless page is wider than 700px */
  @media (min-width: 50rem) {
    .mobile-only { display: none; }
  }
  
  /* hides elements unless page is narrower than 700px */
  @media not (min-width: 50rem) {
    .desktop-only { display: none; }
  }



}