Fix code for map focus style

@benthorner pointed out a few things about these
styles that could do with changes:
- the outline-offset will only appear when the
  outline does, which is in forced-color mode when
  the browser assigns a colour to it, so it
  doesn't need to be assigned in a media query
  targeting forced-color mode
- the `&:focus:not(:focus-visible)` selector
  stops the focus styles showing in scenarios
  where:
  1. the browser supports :focus-visible
  2. focus comes from something other than tabbing
     to the map
  ...so we don't need to target :focus-visible
  specifically.

This applies changes to these styles to remove
those not needed and move some to a better place.

Related to this comment on the associated pull
request:

https://github.com/alphagov/notifications-admin/pull/3996#discussion_r699246969

app/assets/stylesheets/map.scss

@@ -26,21 +26,16 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
   &:focus {
     box-shadow: 0px 0px 0 3px $govuk-focus-text-colour, 0 0 0 6px $govuk-focus-colour;
     outline: solid 3px transparent !important; // sass-lint:disable-line no-important
-  }
-
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
-  }
-
-  &:focus-visible {
-    box-shadow: 0px 0px 0 3px $govuk-focus-text-colour, 0 0 0 6px $govuk-focus-colour;
-    outline: solid 3px transparent !important; // sass-lint:disable-line no-important
-
     // You only see the outline in forced colour mode which doesn't have enough contrast with the
     // map so this creates some space between them to mimic the two-colour default styling
-    @media (forced-colors: active) {
-      outline-offset: 3px;
-    }
+    outline-offset: 3px;
+  }
+
+  // The map should only recieve focus from being tabbed to. This stops the focus state coming
+  // from other sources (like clicks on child elements).
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: none;
   }
 }