Allow more elements in investment form header

Since we're going to reuse this pattern in other forms, we shouldn't
rely on the header having just one element. There could be a subtitle.
So we're changing the CSS to be less dependent on a very specific HTML
structure.

Regarding the subtitle, the original idea was to have both an <h1> and
an <h2> element inside the header. However, the W3C advices against it
[1]:

> h1–h6 elements must not be used to markup subheadings, subtitles,
> alternative titles and taglines unless intended to be the heading for
> a new section or subsection.

So we ended up including the subtitle inside he <h1>. We could also add
it in a separate <p> tag. However, in this case I think it's better to
include it in the <h1> (and in the <title> tag) because it helps to
uniquely identify the current page from other pages.

Due to some rounding issues in Firefox, we're manually moving the polygon
6px so there isn't a blank space between it and the icon on the right.
And due to rounding issues in Chrome, we're adding one extra pixel to
the bottom of the polygon defining the clip-path.

[1] https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements

app/assets/stylesheets/budgets/investments/new.scss

@@ -6,71 +6,93 @@
   }
 
   header {
-    @include has-fa-icon(building, regular, after);
-    align-items: center;
-    border: $border-width solid;
-    color: $brand-secondary;
+    $icon-size: $line-height * 4;
+    $padding-right: rem-calc(20);
+    $icon-size-with-padding: $icon-size + $padding-right;
+    $polygon-size: $icon-size / 2;
+    @include background-till-left-of-screen;
+    @include brand-background($brand-secondary);
+    border: $border-width solid $brand-secondary;
     border-bottom-right-radius: rem-calc(12);
     border-top-right-radius: rem-calc(12);
-    display: flex;
     margin-top: $line-height * 2;
+    padding: $line-height * 2 0;
+    position: relative;
 
-    @include breakpoint(large) {
-      padding-right: $line-height;
+    @include breakpoint(small) {
+      &::after {
+        display: none;
+      }
     }
 
-    &::after {
-      display: none;
+    @include breakpoint(large) {
+      $rounding-error: 6px;
+      padding-right: $icon-size-with-padding;
+      background-image: linear-gradient(
+        to right,
+        #{$brand-secondary} 0,
+        #{$brand-secondary} calc(100% - #{$icon-size-with-padding} - 1px),
+        #{$body-background} calc(100% - #{$icon-size-with-padding}),
+        #{$body-background} 100%
+      );
 
-      @include breakpoint(large) {
+      &::after {
+        background: $body-background;
+        content: "";
+        clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%);
         display: block;
-        font-size: rem-calc(100);
-        margin-left: $line-height;
+        position: absolute;
+        right: calc(#{$icon-size-with-padding} - #{$rounding-error});
+        top: 0;
+        height: 100%;
+        width: $polygon-size;
       }
     }
 
+    &::before {
+      top: -$border-width;
+      height: calc(100% + #{$border-width * 2});
+    }
+
     h1 {
-      @include brand-background($brand-secondary);
-      @include background-till-left-of-screen;
+      $heading-icon-size: $icon-size * 0.85;
+      @include has-fa-icon(building, regular);
       @include has-fa-icon(chart-pie, solid, after);
-      flex: 1;
       font-size: rem-calc(36);
-      padding: $line-height * 2 0;
 
       @include breakpoint(small) {
-        &::after {
+        &::after,
+        &::before {
           display: none;
-        }
-      }
-
-      @include breakpoint(medium) {
-        padding-right: 4em;
-
-        &::after {
-          display: block;
-          font-size: 2em;
-          margin-right: rem-calc(60);
           position: absolute;
-          right: 0;
           top: 50%;
           transform: translateY(-50%);
         }
       }
 
-      @include breakpoint(large) {
-        clip-path: polygon(
-          -100vw -#{$border-width},
-          100% -#{$border-width},
-          calc(100% - #{rem-calc(20)}) 50%,
-          100% calc(100% + #{$border-width}),
-          -100vw calc(100% + #{$border-width})
-        );
-        font-size: rem-calc(44);
+      @include breakpoint(medium) {
+        padding-right: $heading-icon-size * 2.5;
+
+        &::after {
+          display: block;
+          font-size: $heading-icon-size;
+          right: $heading-icon-size;
+        }
       }
 
-      &::before {
-        top: -$border-width;
-        height: calc(100% + 2 * #{$border-width});
+      @include breakpoint(large) {
+        font-size: rem-calc(44);
+
+        &::after {
+          right: $icon-size-with-padding + $polygon-size + $heading-icon-size / 2;
+        }
+
+        &::before {
+          color: $brand-secondary;
+          display: block;
+          font-size: $icon-size;
+          right: $padding-right;
+        }
       }
 
       span {

app/assets/stylesheets/mixins/layouts.scss

@@ -87,7 +87,7 @@
   position: relative;
 
   &::before {
-    background: inherit;
+    background-color: inherit;
     content: "";
     height: 100%;
     position: absolute;