@import "@cnbritain/merlin-www-common:houseandgarden";
@import "@cnbritain/merlin-www-buttons:houseandgarden";

@import "../wireframe/wireframe";

.c-newsletter {
    background: $wild-sand;
    margin-bottom: $MOBILE_SLICE_MARGIN;
    margin-left: auto;
    margin-right: auto;
    margin-top: $MOBILE_SLICE_MARGIN;
    position: relative;
    text-align: center;

    @include at-medium-size {
        margin-bottom: $TABLET_SLICE_MARGIN;
        margin-top: $TABLET_SLICE_MARGIN;
    }

    @include at-x-large-size {
        margin-bottom: $DESKTOP_SLICE_MARGIN;
        margin-left: 0;
        margin-right: 0;
        margin-top: $DESKTOP_SLICE_MARGIN;
    }
}

.c-newsletter-wrapper {
    margin: 0 auto;
    max-width: 570px;
    padding: 30px $MOBILE_SIDE_GUTTER;
    position: relative;

    @include at-x-large-size {
        max-width: 1560px;
        padding: 40px $DESKTOP_SIDE_GUTTER;
    }
}

.c-newsletter__logo {
    display: none;
}

.c-newsletter__title {
    @include font("MILLER_DISPLAY", 20px, 400, 20px);
    color: $mine-shaft;
    letter-spacing:4px;
    margin-bottom: 5px;
    margin-top: 0px;
    text-align: center;
    text-transform: uppercase;

    @include at-medium-size {
        @include font-size(26px);
        @include line-height(26px);
        letter-spacing:6px;
        margin-bottom: 10px;
    }
}

.c-newsletter__description {
    @include font("MILLER_DISPLAY", 14px, 400, 19px);
    color: $mine-shaft;
    font-style: italic;
    letter-spacing: 0px;
    margin: 5px 0 20px 0;

    @include at-medium-size {
        @include font-size(16px);
        @include line-height(20px);
    }
}

.c-newsletter__form-text {
    @include font("BRANDON GROTESQUE", 11px, 700, 11px);
    border-radius: 0;
    border: 1px solid $mine-shaft;
    box-sizing: border-box;
    height: 47px;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding: 17px 16px;
    text-align: center;
    text-transform: uppercase;

    &::placeholder {
        color: $silver-chalice;
    }

    @include at-medium-size {
        margin-bottom: 20px;
        text-align: left;
    }
}

.c-newsletter__form-btn {
    @include button-single();
    @include button-single-light();
    height: auto;
    margin-bottom: 10px;
    text-transform: uppercase;

    &:focus,
    &:hover {
        @include button-single-light-hover();
    }

    @include at-medium-size {
        margin-left: 10px;
    }
}

.c-newsletter__legal {
    @include font("BRANDON GROTESQUE", 8px, 700, 8px);
    color: $mine-shaft;
    letter-spacing: 0.5px;
    text-transform: uppercase;

     @include at-medium-size {
         @include font-size(9px);
         @include line-height(9px);
     }
}

.c-newsletter__privacy {
    border-bottom: 1px solid $mine-shaft;
    color: $mine-shaft;
}