Change spacing relationship on default and small legends and hints to…

… align with labels

src/components/fieldset/_fieldset.scss

@@ -20,7 +20,7 @@
     box-sizing: border-box; // 1
     display: table;         // 2
     max-width: 100%;        // 1
-    margin-bottom: govuk-spacing(3);
+    margin-bottom: govuk-spacing(2);
     padding: 0;
     // Hack to let legends or elements within legends have margins in webkit browsers
     overflow: hidden;
@@ -32,14 +32,17 @@
 
   .govuk-fieldset__legend--xl {
     @include govuk-font($size: 48, $weight: bold);
+    margin-bottom: govuk-spacing(3);
   }
 
   .govuk-fieldset__legend--l {
     @include govuk-font($size: 36, $weight: bold);
+    margin-bottom: govuk-spacing(3);
   }
 
   .govuk-fieldset__legend--m {
     @include govuk-font($size: 24, $weight: bold);
+    margin-bottom: govuk-spacing(3);
   }
 
   .govuk-fieldset__legend--s {

src/components/hint/_hint.scss

@@ -26,4 +26,24 @@
   .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint {
     margin-bottom: govuk-spacing(2);
   }
+
+  // Reduces margin-bottom of hint when used after the default legend (no class)
+  // or govuk-fieldset__legend--s for better vertical alignment.
+
+  // This adjustment will not work when the legend is outside the <h1>, however
+  // it is unlikely that the default or govuk-fieldset__legend--s class would // be used in this case.
+
+  // This adjustment will not work in browsers that do not support :not()
+  // Users with these browsers will see the default size margin (5px larger)
+
+  .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint {
+    margin-bottom: govuk-spacing(2);
+  }
+
+  // Reduces visual spacing of legend when there is a hint
+
+  .govuk-fieldset__legend + .govuk-hint,
+  .govuk-fieldset__legend + .govuk-hint {
+    margin-top: -(govuk-spacing(1));
+  }
 }