A) Regarding your issues 1 to 5 they all relate to the problem below
When you use move Title/tagline over header image, they float above the header image, so as the header image gets smaller on mobile you can end up with A couple of issues.
1- The Title get split on two lines, you can prevent that by adding the rule below in Main options > Fonts & Custom > Custom CSS rule box (or Global Custom CSS Rule box in the customizer)
#site-title {max-width:85%;}
2- There is also a small issue with the Custom logo which is not vertically positionned like the title.
@weaver this case shows a potential problem with the way the Custom logo is positionned vertically
The Title and Tagline are positionned with margin-top:4% !important, so as the image scales down, the title moves up to maximize positionning.
But the Custom Logo is positionned with margin-top:3.2em which does not change when the image scales down.
As a result, the Image logo and the Title do not move together.
May be the custom logo should use the same type of positionning as the title (%)
@marcelloc In the mean time, this is the Custom CSS you could put in the Global Custom CSS Rule box to improve things
#header .custom-logo-link {margin-top:4%;}
3- The tagline gets split over two lines
To give as much space horizontally to the title and tagline, add the rule below to move the logo left on phones
.is-phone #header .custom-logo-link {margin-left:2%;margin-right:1%;}
If the Tagline still gets on two lines, we can add more rule to make it smaller, or you can set it to be hidden on phones.
B ) For your issue number 6, I do not understand what you mean, so you need to elaborate.
But if you want the background image to scale with the browser, you can add the rule below
body.custom-background {background-size:cover;}