result_item component print styles

- Prevent element from printing across a page break
- Remove background colour
- Force all colours to black
- Hide 'opens in new tab' text
- Wrap printed URLs to a new line for easier reading

app/assets/stylesheets/components/_result-item.scss

@@ -11,3 +11,26 @@
   border-left: 5px solid govuk-colour("blue");
   padding: govuk-spacing(3);
 }
+
+// stylelint-disable declaration-no-important
+@include govuk-media-query($media-type: print) {
+  .app-c-result-item  {
+    break-inside: avoid;
+    border-color: $govuk-print-text-colour;
+
+    .govuk-link::after {
+      display: block;
+      margin-top: 1mm;
+      font-size: 12pt;
+    }
+  }
+
+  .app-c-result-item--highlighted {
+    background-color: initial;
+
+    a,a:link {
+      color: $govuk-print-text-colour !important;
+    }
+  }
+}
+// stylelint-enable declaration-no-important

app/views/components/_result_item.html.erb

@@ -14,10 +14,9 @@
 %>
 <%= tag.div class: css_classes do %>
   <h4 class="govuk-heading-s govuk-!-margin-bottom-2">
-    <%= link_to (title + " (opens in new tab)" if title.present?), url,
-      class: "govuk-link",
-      target: "_blank",
-      rel: "noreferrer noopener" %>
+    <%= link_to url, class: "govuk-link", target: "_blank", rel: "noreferrer noopener" do %>
+      <%= title || url %> <span class="govuk-!-display-none-print">(opens in new tab)</span>
+    <% end %>
   </h4>
   <p class="govuk-body govuk-!-margin-bottom-1">
     <%= description %>