Fix orange outline on global site search

The global header was recently updated to use the search component
instead of a hard coded search field.

This resulted in an issue where the input outline is now orange due to
more specific styles from govuk_template conflicting with the search
component styles.

This updates the component styles to be more specific in order to
override the CSS from govuk_template. It uses the compatibility mixin to
ensure the fix is only applied when in compatibility mode, and also to
ensure the code is easier to clean up when compatibility mode is no
longer a "thing".

app/assets/stylesheets/govuk_publishing_components/components/_search.scss

@@ -36,7 +36,6 @@ $large-input-size: 50px;
 
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
   @include govuk-font($size: 19, $line-height: (28 / 19));
-
   padding: 6px;
   margin: 0;
   width: 100%;
@@ -71,6 +70,13 @@ $large-input-size: 50px;
   }
 }
 
+@include govuk-compatibility(govuk_template) {
+  //  ultra specific rule overrides focus styling from govuk_template
+  #global-header .gem-c-search__input[type="search"]:focus { // stylelint-disable selector-max-id
+    @extend .gem-c-search__input[type="search"]:focus; // stylelint-disable scss/at-extend-no-missing-placeholder
+  }
+}
+
 .gem-c-search__submit {
   border: 0;
   cursor: pointer;