Refactor Olivero styles to use new --drupal-displace variables and ensure that toolbar/buttons are always visible

Olivero currently hard-codes the toolbar height, checking for CSS classes, etc. This is brittle.

This issue is to refactor the CSS to take advantage of the Drupal displace utilities CSS variables. Along the way, we'll fix some edge case issues where components might not show properly in various toolbar configurations.

Testing instructions

Test that the header sits directly below the top toolbar in the following conditions

• On page load
  • When not logged in
  • When logged in and bottom toolbar is active
  • When logged in and bottom toolbar is not active
  • When logged in and bottom toolbar is in vertical orientation
• When scrolled down the page so that the header is fixed
  • When not logged in
  • When logged in and bottom toolbar is active
  • When logged in and bottom toolbar is not active
  • When logged in and bottom toolbar is in vertical orientation
• RTL versions of the above (you need to modify the dir attribute within the HTML tag using developer tools)
• Narrow width (mobile menu) versions of the above.
  • When in narrow width, also open close the primary menu and be sure it works as expected. Be sure to test RTL versions and all toolbar variations.