[Merton] Styling amendments

[lucascumsille]

Fixes: https://github.com/mysociety/societyworks/issues/4381

For reviewing and in case of feedback I have added a commit for each point, but once the PR is ready I'll rebase and squash everything into one commit.

Here is the list of changes:

/* B1 - Top banner and logo sizing */
/* Mobile layout:   */
.merton-header {
    border-top-width: 3px;
    padding: 0;
}
.merton-header__logo {
    width: 150px;
    background-position-y: 11px;
}

/* Top banner and logo sizing – desktop layout: */
@media screen and (min-width: 48em) {
    .merton-header {
        border-top-width: 5px;
        padding: 11px 0;
    }
    .merton-header__logo {
        width: 186px;
        background-position-y: 6px;
    }
    /* Verticaly position other elements below the banner */
    body.mappage #site-header, body.mappage .nav-wrapper {
        top: 87px;
    }
    body.mappage #map_box, body.mappage #map_sidebar {
        top: 151px;
    }
}

/* B2 Green menu background in mobile view */
#site-header {
    background-color: #D9F3E5;
}
/* Content top margin in mobile view */
.content {
    margin-top: 1em;
    padding-top: 1em;
}

/* B3 Change ‘Skip to main content’ link text from white to black. */
a.skiplink:focus {
    color: black !important;
}

/* B4 Make background white */
body {
    background-color: white;
}
/* WasteWorks home page mobile view: white background */
#front-main, 
.postcode-form-box,
.postcode-form-box .form-hint,
#front-main .form-hint {
    background-color: white;
    color: #676767;
}

/* B5 - Make H1, H2 and H3 headings bold */
h1, h2, h3 {
    font-weight: bold;
}
/* H1 headings on waste pages - bottom border and correct size */
body.waste h1.govuk-heading-xl:not(:empty) {
    font-size: 2rem;
    border-bottom: 2px solid #e8e8e8;
    padding-bottom: 1rem;
}
@media screen and (min-width: 48em) {
    body.waste h1.govuk-heading-xl:not(:empty) {
        font-size: 2.375rem;
    }
}

/* B6 Styling of primary buttons */
.btn-primary, .govuk-button {
    line-height: 1;
    margin-bottom: 32px;
    padding: 12px 15px 10px;
    background-color: #078141;
    box-shadow: 0 3px 0 #044925;
    color: white;
    border: 0 !important;
    width: auto;
    font-size: 1.2rem;
    font-weight: bold;
}

/* B7 Styling of secondary buttons */
.my-account-buttons a,
.btn-secondary, .govuk-button--secondary {
    line-height: 1;
    padding: 12px 15px 10px;
    background-color: #D9F3E5;
    box-shadow: 0 3px 0 #078141;
    color:  #078141;
    border: 0;
    width: auto;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 0;
}
li .my-account-buttons a {
    font-size: 1rem;
    text-decoration: underline;
    box-shadow: none;
    padding: 0.2em 0.5em;
}
.btn-secondary:disabled {
    opacity: 0.4;
}

/* B8 - Checkbox colour */
.govuk-checkboxes__label::before {
    color: #078141;
}
.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
    color: #222;
}

/* B9 - Radio button colour */
.govuk-radios__label::before {
    color: #078141;
}
.govuk-radios__input:focus + .govuk-radios__label::before {
    color: #222;
}

/* B10 - Text boxes and autocomplete */
input[type=text].govuk-input,
input[type=text].autocomplete__input {
    border: 1px solid #A9A9A9;
    border-bottom: 3px solid #078141;
}
.postcode-form-box div {
    border-color: transparent;
}
.postcode-form-box div input#pc {
    border-top: 1px solid #A9A9A9;
    border-left: 1px solid #A9A9A9;
}

/* B11 - Your bin days page - correct border colours */
.waste-service-descriptor, .waste-service-name.govuk-heading-m, .govuk-summary-list__row {
    border-color: #e8e8e8;
    border-width: 1px;
}
.waste-service-name.govuk-heading-m {
    border-width: 1px;
}

/* B12 - Your bin days - Reporting links */
.waste-services-launch-panel input[type="submit"] {
    text-decoration: underline;
    font-weight: bold;
}

/* B13 - Your bin days - style right links column */
.govuk-grid-column-one-third > .aside {
    border-top: 5px solid #4E337A;
    background-color: #f6f6f6;
    padding: 0 20px 1px;
}
.govuk-grid-column-one-third > .aside ul {
    margin-left: 0;
}
.govuk-grid-column-one-third > .aside li {
    list-style-type: none;
}

.govuk-grid-column-one-third > .aside li a {
    font-weight: normal;
}

/* B14 - Make toggle switches clearer on my account screen */
.segmented-control--radio {
    border: 2px solid #078141;
    border-radius: 20px;
    max-width: 12em;
}
.segmented-control--radio .btn {
    border-width: 0 !important;
    padding: 6px 4px;
    margin: 6px 6px;
    border-radius: 16px !important;
    background-image: none;
}
.segmented-control--radio input+label {
    color: #078141 !important;
}
.segmented-control--radio input:checked+label {
    color: #ffffffff !important;
    background-color: #333333;
}

/* B15 -  Prevent main menu getting wide enough to overlap site name in desktop view */
@media screen and (min-width: 48em) {
    .nav-menu {
        max-width: calc(100vw - 185px);
        display: flex;
        align-items: center;
    }
    .nav-menu li a, .nav-menu li span {
        text-align: center;
    }
    .nav-menu li .report-a-problem-btn {
        white-space: nowrap;
    }
}

/* B16 - Main menu link colour */
.nav-menu a, .nav-menu a:visited {
    color: #044925;
    background-color: transparent !important;
}
#main-nav {
    overflow: visible;
}

[skip changelog]

[lucascumsille]

@jacquelinebylau just in case I have this PR ready, I have asked the developers who should be reviewing it.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 82.75%. Comparing base (8a4dae9) to head (ec8c3be).

:exclamation: Current head ec8c3be differs from pull request most recent head 2f8929a

Please upload reports for the commit 2f8929a to get more accurate results.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## merton-ww-initial #5021 +/- ## ===================================================== - Coverage 82.77% 82.75% -0.02% ===================================================== Files 401 401 Lines 31071 31069 -2 Branches 4908 4906 -2 ===================================================== - Hits 25719 25712 -7 - Misses 3897 3900 +3 - Partials 1455 1457 +2 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.