/** navigation menu style definitions.
    Handles both mobile and desktop versions. */

    /* MOBILE mode - mobile styles - navigation menu - vertical alignment */
    .navbar-v {
        display: flex;
        flex-direction: column;
        background-color: rgba(0,0,0,.8);
        border-radius: 8px;
        padding: .75rem 1rem;
      }
  
      /* DESKTOP MODAL - Desktop styles - navigation menu - horizontal alignment */
      .navbar-h {
        display: flex;
        width: 100%;
        justify-content: center;

        padding: .75rem 1rem;
        align-self: flex-end;
        gap: 100px;
      }

/* MOBILE DEVICE - mobile menu - wraps the 'hamburger' image */
.close-menu-div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: 'Inter', 'Noto Sans', sans-serif;
  font-size: 1rem;
  color: #fff;
  padding-bottom: 3rem;
  cursor: pointer;
}

/* MOBILE DEVICE - mobile menu - wraps the text, 'Close'
   The above hamburger wrapper and this 'Close' wrapper
   work together when the mobile menu is active. These two
   elements work together allowing the client to close the
   mobile menu when active in viewport. */
.menu-close-div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', 'Noto Sans', sans-serif;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
}
  
  .hamburger-icon {
    cursor: pointer;
  }

  /* MOBILE DEVICE - slide/hide mobile menu remove from viewport */
  .menu-hide {
    position: absolute;
    overflow: hidden;
    top: 0rem;
    left: -100%;
    z-index: 10;
    padding-top: 1rem;
    width: 300px;
    min-width: 250px;
    height: 200%;
    transition: left 250ms ease-out 50ms;
  }

  /* MOBILE DEVICE - show/slide mobile menu onto viewport */
  .menu-show {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 10;
    padding-top: 1rem;
    width: 100%;
    height: 100%;
    height: 200%;
    transition: left 225ms ease-in 50ms;
    background-color: rgba(0, 0, 0, 0.9);
  }

  .menu-item {
    padding-left: 1rem;
    align-items: left;
    line-height: 60px;
    width: 100%;
    color: rgb(255, 255, 255);
    position: relative;
    /* font-style: normal; */
    font-family: 'Inter', 'Noto Sans', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: .75rem;
    text-transform: uppercase;
    cursor: pointer;
  }

  .menu-item:hover {
    color: rgb(102, 153, 204);
  }
  
  .submenu-item {
    color: rgb(255, 255, 255);
  }

  .submenu-item:hover {
    color: rgb(102, 153, 204);
  }
      
  .hide-submenu {
    display: none;
  }

  .show-submenu{
    position: relative;
    width: 100%;
    padding-left: .2rem;
    color: rgb(41, 41, 41);
    line-height: 2rem;
    z-index: 10;
    text-align: left;
    border-left: 1px solid rgb(153,82,0);
    border-bottom: 1px solid rgb(153,82,0);
  }
  
  
@media (min-width: 601px){
  .navbar-h {
    display: flex;
    padding: .75rem 1rem;
    align-self: flex-end;
    gap: 15px;
    /* background-color: #6af8f9; */
  }

  .menu-item {
    font-size: .95rem;
  }

}

@media (min-width: 800px){
  /* DESKTOP MODAL - Desktop styles - navigation menu - horizontal alignment */
  .navbar-h {
    display: flex;
    padding: .75rem 1rem;
    align-self: flex-end;
    gap: 20px;
    /* background-color: #6af8f9; */
  }

  .menu-item:hover {
    background-color: rgba(248, 69, 70,.6);
    color: #fff;
  }
  
  .menu-item {
    padding: 0 1rem;
    align-items: left;
    line-height: 40px;
    width: auto;
    color: rgb(255, 255, 255);
    position: relative;
    /* font-style: normal; */
    font-family: 'Inter', 'Noto Sans', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: .15rem;
    text-transform: uppercase;
    cursor: pointer;
  }

}

@media (min-width: 992px){
  /* DESKTOP MODAL - Desktop styles - navigation menu - horizontal alignment */
  .navbar-h {
    display: flex;
    padding: .75rem 1rem;
    align-self: flex-end;
    gap: 50px;
    /* background-color: #6af8f9; */
  }

  .menu-item:hover {
    background-color: rgba(248, 69, 70,.6);
    color: #fff;
  }
  
  .menu-item {
    padding: 0 1rem;
    align-items: left;
    line-height: 40px;
    width: auto;
    color: rgb(255, 255, 255);
    position: relative;
    /* font-style: normal; */
    font-family: 'Inter', 'Noto Sans', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: .15rem;
    text-transform: uppercase;
    cursor: pointer;
  }

}

@media (min-width: 1200px){
  /* DESKTOP MODAL - Desktop styles - navigation menu - horizontal alignment */
  .navbar-h {
    display: flex;
    /* padding: .75rem 1rem;
    align-self: flex-end; */
    gap: 100px;
    /* background-color: #6af8f9; */
  }

  .menu-item:hover {
    background-color: rgba(248, 69, 70,.6);
    color: #fff;
  }
  
  .menu-item {
    padding: 0 1rem;
    align-items: left;
    line-height: 40px;
    width: auto;
    color: rgb(255, 255, 255);
    position: relative;
    font-family: 'Inter', 'Noto Sans', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: .15rem;
    text-transform: uppercase;
    cursor: pointer;
  }

}