Fix link and text selection in budget header

While reviewing commit 7702b55, I forgot to test whether selecting
text in the budget header worked properly.

The negative index (-5) meant it was impossible to select its text or
click on its link.

The good news is the pseudoelement with a negative index (-1) is
considered a child of the .budget-header element, so having a negative
index will cause the pseudoelement to be render behind the content of
the .budget-header element but in front of the background of the
.budget-header element.

This is exactly what we want.

Originally, we didn't have a z-index in the .budget-header element,
meaning the pseudoelement was rendered behind the background of the
.budget-header element, meaning both backgrounds were visible. This was
OK when the background was a plain color, but it wasn't when the
background was an image.

To stress the fact that the budget header is only affected when we use
an image, I'm also moving the code inside the `.with-background-image`
selector, although it would be interesting to check whether it's a good
idea to add `z-index: 0` to the `full-width-background` mixin.

app/assets/stylesheets/participation.scss

@@ -989,12 +989,12 @@
   min-height: $line-height * 25;
   padding-bottom: $line-height;
   padding-top: $line-height * 4;
-  z-index: -5;
 
   &.with-background-image {
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
+    z-index: 0;
   }
 
   h1 {

spec/system/budgets/budgets_spec.rb

@@ -458,6 +458,15 @@
 
       expect(page).to have_content "So far you've supported 0 projects."
     end
+
+    scenario "Main link takes you to the defined URL" do
+      budget.update!(main_link_text: "See other budgets!", main_link_url: budgets_path)
+
+      visit budget_path(budget)
+      click_link "See other budgets!"
+
+      expect(page).to have_current_path budgets_path
+    end
   end
 
   context "In Drafting phase" do