Refactor Three Row Header

The three row header needs re-factoring as it does not currently work well with mobile settings, particularly if you try to hide the main header region (logo, title, social icons) in mobile to get a cleaner app like view.

When you do this background colours from different regions overlap.

There is also an issue of whitespace being left below the header.

In order for responsive settings to work properly the header needs to be broken up into distinct containers.

Currently the background is set by adaptable-page-header-wrapper which makes displaying elements independently messy.

That background should be removed and applied by each individual container, so that if an element is hidden on mobile we do not see the container backgrounds spilling.

It looks like page-header will need another row wrapped around it.

What we want are containers that can be neatly shown / removed at different resolutions with their background colours: