From ead4e2641955a950db795a4ad808ca68ba81d294 Mon Sep 17 00:00:00 2001
From: "Paul D. Waite" <paul@pauldwaite.co.uk>
Date: Mon, 25 Sep 2017 11:50:54 +0100
Subject: [PATCH] Removed top margins from headings in fieldsets, and added
 classes to put heading top margins on fieldsets, to work around fieldsets
 preventing child margins from collapsing outside of the fieldset.

---
 .../snippets/form_error_radio_h1_legend.html  |  2 +-
 assets/sass/elements/_forms.scss              | 40 +++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/app/views/snippets/form_error_radio_h1_legend.html b/app/views/snippets/form_error_radio_h1_legend.html
index c230638ae..4c249675b 100644
--- a/app/views/snippets/form_error_radio_h1_legend.html
+++ b/app/views/snippets/form_error_radio_h1_legend.html
@@ -17,7 +17,7 @@ <h2 class="heading-medium error-summary-heading" id="error-summary-heading">
 {% endif %}
 
 <div class="form-group {% if error %} form-group-error{% endif %}">
-  <fieldset>
+  <fieldset class="with-heading-large">
 
     <legend {% if error %} id="example-personal-details"{% endif %}>
       <h1 class="heading-large">
diff --git a/assets/sass/elements/_forms.scss b/assets/sass/elements/_forms.scss
index b69ae219a..3ae091d8c 100644
--- a/assets/sass/elements/_forms.scss
+++ b/assets/sass/elements/_forms.scss
@@ -18,11 +18,51 @@
 fieldset {
   @extend %contain-floats;
   width: 100%;
+
+  &.with-heading-xlarge {
+    margin-top: em(15, 19);
+
+    @include media(tablet) {
+      margin-top: em(30, 19);
+    }
+  }
+
+  &.with-heading-large {
+    margin-top: em(25, 19);
+
+    @include media(tablet) {
+      margin-top: em(45, 19);
+    }
+  }
+
+  &.with-heading-medium {
+    margin-top: em(25, 20);
+
+    @include media(tablet) {
+      margin-top: em(45, 24);
+    }
+  }
+
+  &.with-heading-small {
+    margin-top: em(10, 16);
+
+    @include media(tablet) {
+      margin-top: em(20, 19);
+    }
+  }
 }
 
 // Hack to let legends or elements within legends have margins in webkit browsers
 legend {
   overflow: hidden;
+
+  // Remove top margins from headings in legends, because fieldsets block margin collapsing. Use the .with-heading-* classes for fieldsets defined above to replace these removed margins.
+  .heading-xlarge,
+  .heading-large,
+  .heading-medium,
+  .heading-small {
+    margin-top: 0;
+  }
 }
 
 // Fix left hand gap in IE7 and below