#top {
  z-index: 9;
}

@media screen and (min-width: 46.25rem) {
  [role="banner"] {
    overflow: visible;

    .nav-menu-on {
      overflow: visible;

      .nested-nav {
        li {
          font-size: 0.8125rem;
        }
      }
    }

    [role="navigation"] ul.nested-nav > li:before {
      display: inline-block;
    }
  }

  [role="navigation"] .nested-nav {
    > li {
      position: relative;
      float: left;

      > a {
        padding: .5em 0;
      }

      > ul {
        list-style: none;
        position: absolute;
        background: #fff;
        padding: 0;
        margin: 0;
        min-width: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
        border-radius: 2px;
        left: -.5em;

        li {
          margin: 0;
          float: none;

          &:before {
            display: none;
          }

          a {
            color: $text;
            padding: .46875rem .9375rem;
            display: block;
            font-size: 90%;
            white-space: nowrap;

            &:hover {
              color: $attention;
            }
          }
        }
      }

      &:not(:first-child) {
        > ul {
          left: .5em;
        }
      }

      &:hover {
        > ul {
          display: block;
          visibility: visible;
          opacity: 1;
          top: calc(100% + .5em);
          transition: opacity .25s ease-out, top .25s ease-out, visibility 0s;
        }
      }
    }

    ul {
      /*display: none;*/
      visibility: hidden;
      display: block;
      opacity: 0;
      transition: opacity .25s ease-out, top 0s .5s, visibility 0s .5s;
      top: calc(100%);
    }

    a {
      cursor: pointer;
    }
  }
}

/* This is placed in a media query to prevent the momentary distortion of the page
 * when it is rendered and the browser takes its time to evaluate the @media.
 */
@media screen and (max-width: 46.24rem) {
  [role="banner"] .nested-nav {
    li {
      line-height: 1.5em;
      font-size: 1.125rem;

      ul {
        margin: 0 0 10px;
      }

      a {
        padding: 0;

        &:not(:last-child) {
          pointer-events: none;
        }
      }
    }

    > li {
      > a.in-category:not(:last-child) {
        color: white;
      }
    }
  }

  [role="banner"] [role="navigation"] .nested-nav li:before {
    display: none;
  }
}