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

@import "../wireframe/wireframe";

.c-newsletter {
    background-color: $diamond;
    background-image: url('/static/img/newsletter-small.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    max-width: $MAXIMUM_PAGE_WIDTH;
    padding: 40px 0 50px 0;
    position: relative;
    text-align: center;

    @include at-medium-size() {
        background-image: url('/static/img/newsletter-large.jpg');
        padding: 60px 0 70px 0;
    }

    &:before {
        background-color: rgba($black, 0.05);
        bottom: 0;
        content: '';
        height: 100%;
        left: 50%;
        max-width: $MAXIMUM_PAGE_WIDTH;
        position: absolute;
        right: 0;
        top: 0;
        transform: translateX(-50%);
        width: 100%;
    }

    &:after {
        @include font("SOLEIL", 9px, 400, 10px, 60);
        bottom: 4px;
        color: $white;
        content: "Ed Miles";
        position: absolute;
        right: 4px;
        text-shadow: 0 2px 8px rgba($black, 0.2);
        text-transform: uppercase;
    }
}

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

.c-newsletter__logo {
    margin: 0 auto;
    width: 208px;

    svg {
        fill: $white;
        width: 208px;
    }

    @include at-medium-size() {
        width: 540px;

        svg {
            width: 540px;
        }
    }
}

.c-newsletter__title {
    display: none;
}

.c-newsletter__description {
    @include font("SOLEIL", 12px, 400, 16px, 30);
    color: $white;
    margin: 16px 0 30px 0;
    text-align: center;
    text-shadow: 0 2px 8px rgba($black, 0.2);

    @include at-medium-size() {
        @include font-size(14px);
        @include line-height(20px);
        margin: 20px 0 40px 0;
    }
}

.c-newsletter__form-text {
    @include font("SOLEIL", 14px, 400, 14px, 20);
    apperance: none;
    background-color: $white;
    border-radius: 0;
    border: 1px solid $stroller-grey;
    color: $stroller-grey;
    height: 60px;
    margin-bottom: 10px;
    text-align: center;

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

    &::placeholder {
        color: $stroller-grey;
    }
}

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

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

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

.c-newsletter__legal {
    @include font("SOLEIL", 12px, 400, 16px);
    color: $white;
    text-align: center;
    text-shadow: 0 2px 8px rgba($black, 0.2);
}

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