$nav-height: 80px;
$nav-font-color: white;
$nav-font-size: 1.1rem;
$nav-text-transform: uppercase;

body {
  margin-top: $nav-height;
}

nav {
  @media screen and (min-width: $md) {
    height: $nav-height;
  }
  background-color: $eff-red;
  display: block;
  height: $nav-height * 0.75;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
  a {
    border: none;
    color: white;
    display: inline-block;
    text-decoration: none;
    &:hover {
      text-decoration: none;
    }
    &:visited {
      color: inherit;
    }
  }

  .nav-wrapper {
    margin: 0 auto;
    padding: 0;
    position: relative;
    max-width: 860px;
    width: 95%;
    @media screen and (min-width: $lg) {
      max-width: $max-width;
    }
    @media screen and (min-width: 1320px) {
      padding-left: 0;
      width: 100%;
    }

    .menu-logo {
      @media screen and (min-width: $md) {
        background: asset-url('EFF-logo-action.svg') no-repeat;
        height: 50px;
        left: 0;
        margin-top: 17.5px;
        position: relative;
        width: 500px;
      }
      background: asset-url('EFF-monogram-action.svg') no-repeat;
      background-repeat: no-repeat;
      background-size: contain;
      border: none;
      display: inline-block;
      height: 40px;
      margin-top: 9.5px;
      position: absolute;
      top: 0;
      transition: all 0.2s;
      width: 250px;
    }
    ul {
      display: inline-block;
      font-size: 0.75rem;
      list-style: none;
      line-height: 1rem;
      margin: 0.5rem auto 0;
      padding: 0 0 0 1rem;

      li {
        display: block;
        font-size: $nav-font-size;
        font-weight: 700;
        margin: 0.9rem auto 0;
        text-align: left;
        text-transform: $nav-text-transform;
      }
    }

    #nav-menu {  // drop-down menu
      @media screen and (min-width: $md) {
        top: 80px;
        width: 250px;
      }
      @media screen and (min-width: $xl) {
        right: 5%;
      }

      @media screen and (min-width: 1500px) { // wide screens
        right: 10%;
      }
      @media screen and (min-width: 1800px) { //very wide screens
        right: 15%;
      }
      background-color: $gray;
      color: black;
      display: inline-block;
      padding-bottom: 1rem;
      position: absolute;
      right: 2rem;
      top: 60px;
      transition: all 0.3s ease;
      width: 200px;
      z-index: 100;
      a {
        border-bottom: 2px solid $gray;
        color: black;
        &:hover {
          border-bottom: 2px solid black;
        }
      }
      form {  // login/logout
        background: transparent;
        margin: 0;
        padding: 0;
      }
      .nav-form-link {
        input[type=submit] {
          background: none;
          border: none;
          color: black;
          cursor: pointer;
          margin: 0;
          padding: 0;
          text-decoration: none;
          text-transform: uppercase;
          &:hover {
            border-bottom: 2px solid black;
          }
        }
      }
    }
    .nav-modal-container {
      button { // hamburger
        background: $eff-red;
        border: none;
        display: inline-block;
        float: right;
        font-size: 3rem;
        height: 3rem;
        margin: -0.22rem 0 0;
        @media screen and (device-aspect-ratio: 40/71) {
          /* CSS specific to iPhone5/older iPods */
          margin-right: -2rem;
        }
        @media screen and (min-width: $md) {
          font-size: 4rem;
          height: 4rem;
          margin: -4.4rem 0 0;
        }
        @media screen and (min-width: $xl) {
          width: 3rem;
        }
      }

      .nav-modal-backdrop {
        height: 0;
        width: 0;
        opacity: 0;
        overflow: hidden;
        position: fixed;
        transition: opacity 0.2s ease-in;
      }
      #nav-modal-toggle {
        position: absolute;
        left: 90%;
        top: 0;
        height: 6rem;
        width: 6rem;
        margin: 0;
        opacity: 0;
        cursor: pointer;
        @media screen and (min-width: $ph) {
          left: 95%;
        }
        @supports (-webkit-overflow-scrolling: touch) {
          /* CSS specific to iOS devices */
          left: 75%;
          @media screen and (min-width: $md) {
            left: 85%;
          }
        }
        &:checked {
          width: 100vw;
          height: 100vh;
          position: fixed;
          left: 0;
          top: 0;
          z-index: 9;
          opacity: 0;
          ~ .nav-modal-backdrop {
            width: 100%;
            height: 100vh;
            left: 0;
            top: 0;
            z-index: 9;
            pointer-events: none;
            opacity: 1;
            .nav-modal-content {
              z-index: 999;
              pointer-events: auto;
              cursor: auto;
            }
          }
        }
      }
    }
  }
}
