nav {
  /* set from JS*/
  --normal-height-n-items: 0; 
  --extra-height-n-items: 0; 

  --n-items: 5;
  --gap-submenu-list: .2rem;
  --font-family: var(--ffm-menu);
  --font-size: var(--fsz-menu);

  background-color: white;

  display: flex;

  text-transform: uppercase;

  a {
    color: inherit;
  }

  .submenu-list {
    --font-size: var(--fsz-submenu);
    flex-grow: 1;
    align-self: stretch;
    display: flex;
    text-transform: capitalize;

    .submenu-item {
      flex-grow: 1;
    }
  }

  .menu-item {  
    padding: var(--padding-vertical) 0;
    color: var(--color-logoDark);

    &.active {
      background-color: var(--color-logoDark);
      color: white;

      .submenu-item {
        color: white;
      }
    }

    &.height-extra {
      display: flex;
      flex-direction: column;
      gap: var(--gap-submenu-list);
    }
  }


}


/* MOBILE */
@media (max-width: 600px) {
  nav#menu {    
    --padding-vertical: .3rem;
    --normal-item-height: calc(1.4 * var(--line-height) + 2 * var(--padding-vertical));
    --extra-item-height: calc(1.8 * var(--normal-item-height));

    margin-left: 0;
    margin-right: 0;

    z-index: 10;
    display: block;

    height: 0;
    overflow: hidden;
    transition-property: height;
    transition-duration: 500ms;
    
    
    &.open {
      height: calc(var(--normal-height-n-items) * var(--normal-item-height) + var(--extra-height-n-items) * var(--extra-item-height));
    }

    .menu-item {      

      &.height-normal {
        height: var(--normal-item-height);
      }
      &.height-extra {
        height: var(--extra-item-height);
        padding-bottom: 0;
      }

      &:not(.submenu-item):not(:last-child) {
        border-bottom: .5px solid var(--color-logoDark);
      }

      a {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

/* DESKTOP */
@media (min-width: 600px) {
  nav {
    --padding-vertical: 1rem;

    border-radius: 1rem;
  
    box-sizing: content-box;
    height: calc(2 * var(--item-height) + var(--gap-submenu-list));


    .menu-item {
      flex-grow: 1;
      border-radius: 1rem;

      display: flex;
      align-items: center;
      justify-content: center;

      &.height-extra {
        gap: var(--gap-submenu-list);  
        padding-bottom: 0;
      }
    }
  }

  .submenu-list {
    .submenu-item {
      border-radius: .5rem;
      padding-bottom: calc(2 * var(--padding-vertical));
    }
  }
}