Move global CSS to top of cascade

The global CSS we're keeping from the GOVUK
Template styles needs to go in the same position
as it was before, above GOVUK Elements.

This means we can't use any variables from GOVUK
Frontend in it so this changes the link colour
back to what it was (until all links get updated).

app/assets/stylesheets/globals.scss

@@ -42,12 +42,20 @@ input[type="search"]::-webkit-search-decoration {
 // To be removed when all links follow the GOV.UK Frontend conventions:
 // https://design-system.service.gov.uk/styles/typography/#links
 a {
-  @extend %govuk-link;
+  &:link {
+    color: $link-colour;
+  }
 
-  // Stops visited links looking different, until we can add the `govuk-link--no-visited-state`
-  // class to all links we want stay the same colour after visiting
   &:visited {
-    color: $govuk-link-colour;
+    color: $link-visited-colour;
+  }
+
+  &:hover {
+    color: $link-hover-colour;
+  }
+
+  &:active {
+    color: $link-active-colour;
   }
 }
 

app/assets/stylesheets/main.scss

@@ -16,6 +16,9 @@ $path: '/static/images/';
 // Dependencies from GOVU.UK Frontend Toolkit, rewritten for this application
 @import 'url-helpers';
 
+// Specific to this application, needs to go at the top of the cascade
+@import 'globals';
+
 // Dependencies from GOV.UK Elements
 // https://github.com/alphagov/govuk_elements
 @import 'elements/helpers';
@@ -35,7 +38,6 @@ $path: '/static/images/';
 @import './govuk-frontend/all';
 
 // Specific to this application
-@import 'globals';
 @import 'grids';
 @import 'components/cookie-message';
 @import 'components/site-footer';