/*
 * Keep Bootstrap's explicit open state visible at desktop widths.
 * Sandbox already opens dropdowns on hover, but its base opacity and
 * visibility rules otherwise hide a menu opened by keyboard, touch or click.
 */
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu.show {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
  }

  .navbar-expand-lg .navbar-nav > .dropdown > .dropdown-menu.show {
    top: 100%;
  }

  .navbar-expand-lg .navbar-nav .dropdown-submenu > .dropdown-menu.show {
    top: 0;
  }
}

/*
 * Sandbox normally draws dropdown carets from its Custom icon font. Use CSS
 * borders instead so navigation remains clear if that optional font is absent
 * or has not loaded yet.
 */
.navbar .dropdown-toggle::after {
  content: "";
  width: 0;
  height: 0;
  font-family: inherit;
  vertical-align: 0.15em;
  border-top: 0.4em solid currentColor;
  border-right: 0.34em solid transparent;
  border-bottom: 0;
  border-left: 0.34em solid transparent;
}

body .navbar .dropend > .dropdown-toggle::after,
body .navbar .dropdown-submenu > .dropdown-toggle::after {
  content: "";
  vertical-align: 0;
  border-top: 0.34em solid transparent;
  border-right: 0;
  border-bottom: 0.34em solid transparent;
  border-left: 0.4em solid currentColor;
}

/* Preserve Sandbox's linked "more" indicator without the removed Custom font. */
.more::after {
  content: "\2192";
  padding-left: 0;
  margin-left: 0.2rem;
  margin-right: 0;
  font-family: inherit;
  font-size: 1em;
  font-weight: 400;
  line-height: 1;
  vertical-align: 0;
}

/* Use a text chevron instead of Sandbox's unavailable Custom icon font. */
.breadcrumb-item + .breadcrumb-item::before {
  content: "\203A";
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1;
  padding-top: 0;
}

/* Keep each documentation heading visually grouped with its own four links. */
@media (min-width: 992px) {
  .dropdown-mega .docs-menu-heading {
    margin-bottom: 0.2rem;
    padding-bottom: 0;
  }

  .dropdown-mega .docs-menu-heading-following,
  .dropdown-mega .docs-menu-heading-new-row {
    margin-top: 1.8rem;
  }

  .dropdown-mega .docs-menu-links {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .dropdown-mega .docs-menu-links .dropdown-item {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }
}