focus styles and visual fixes

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss

@@ -97,10 +97,14 @@
 
       // On hover: heading icon is turned 180deg and grows bigger.
       &--is-active {
+        color: var(--link-blue);
         position: relative;
 
         hy-icon {
           transform: rotateX(180deg);
+          svg {
+            fill: var(--link-blue);
+          }
         }
 
         .desktop-menu-link__label--is-active-trail::after {
@@ -181,11 +185,23 @@
           text-decoration: none;
           width: 100%;
 
+          &:hover,
+          &:focus {
+            box-shadow: 0 0 16px 0 rgba(0, 83, 121, 0.2);
+            color: var(--link-blue);
+
+            svg {
+              //height: 42px;
+              //width: 42px;
+            }
+          }
+
           @include breakpoint($extrawide) {
             @include font-size(24px, 32px);
             align-items: flex-start;
             background-color: var(--grayscale-white);
             flex-direction: column;
+            justify-content: center;
             letter-spacing: -0.75px;
             margin-bottom: 4px;
             padding: 17px 32px 12px 32px;
@@ -202,20 +218,29 @@
           .label {
             border: none;
             margin-left: 14px;
+
+            &:hover,
+            &:focus {
+              color: var(--link-blue);
+            }
           }
+
           .description {
             @include font-size(14px, 18px);
             @include font-weight($regular);
             color: var(--grayscale-dark);
             letter-spacing: -0.2;
             margin-left: 14px;
-            margin-bottom: 20px;
+            margin-bottom: 12px;
             margin-top: 4px;
 
             @include breakpoint($xlarge) {
               @include font-size(16px, 20px);
               letter-spacing: -0.25;
             }
+            &:hover {
+              color: var(--grayscale-dark);
+            }
           }
 
           span.heading-icon {
@@ -239,7 +264,7 @@
           background-color: var(--grayscale-white);
           list-style: none;
           margin: 0;
-          padding: 0;
+          padding: 12px 0;
 
           li {
             a {
@@ -272,6 +297,11 @@
                 outline-offset: -2px;
               }
 
+              &:hover,
+              &:focus {
+                color: var(--link-blue);
+              }
+
               .label {
                 @include breakpoint($extrawide) {
                   border: none;