Move transparent border styles to header_container

Removed the `transparent-bottom-border` class and moved the styles to the `gem-c-layout-super-navigation-header__container`

The bottom border is now only applied in forced colours mode, having `transparent-bottom-border` in the HTML could imply that it is set in all cases

Author: MartinJJones

app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -108,6 +108,11 @@ $search-icon-height: 20px;
 .gem-c-layout-super-navigation-header__container {
   position: relative;
   background: $govuk-brand-colour;
+
+  // add a transparent bottom border for forced-color modes
+  @media (forced-colors: active) {
+    border-bottom: 1px solid transparent;
+  }
 }
 
 .gem-c-layout-super-navigation-header__header-logo {
@@ -703,11 +708,4 @@ $search-icon-height: 20px;
   }
 }
 
-// Used to add a transparent bottom border for forced-colour modes
-.transparent-bottom-border {
-  @media (forced-colors: active) {
-    border-bottom: 1px solid transparent;
-  }
-}
-
 // stylelint-enable max-nesting-depth

app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb

@@ -40,7 +40,7 @@
   component_helper.add_data_attribute({ module: "ga4-event-tracker ga4-link-tracker", ga4_expandable: "" })
 %>
 <%= tag.header(**component_helper.all_attributes) do %>
-<div class="gem-c-layout-super-navigation-header__container govuk-width-container transparent-bottom-border">
+<div class="gem-c-layout-super-navigation-header__container govuk-width-container">
   <nav
     aria-labelledby="super-navigation-menu-heading"
     class="gem-c-layout-super-navigation-header__content"