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

@import "../wireframe/wireframe";

.c-newsletter {
    background-color: $black;
    padding: 20px 0 30px 0;
    position: relative;
    text-align: center;

    &:before {
        background-image: url('/static/img/newsletter.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        content: '';
        height: 100%;
        left: 50%;
        max-width: $MAXIMUM_PAGE_WIDTH;
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        width: 100%;
    }

    @include at-medium-size {
        padding: 30px 0;
    }
}

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

.c-newsletter__logo {
    display: none;
}

.c-newsletter__title {
    @include font('GOTHAM', 24px, 700, 28px);
    color: $white;
    margin: 0 auto 10px auto;

    @include at-medium-size {
        @include font-size(32px);
        @include line-height(36px);
        margin-bottom: 15px;
    }
}

.c-newsletter__description {
    @include font('GOTHAM', 14px, null, 20px, -4);
    color: $oslo-gray;
    margin: 10px auto 20px auto;

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

.c-newsletter__form {
    @include font("GOTHAM", 14px, normal, 14px);
    color: $bon-jour;
    margin: 0 0 15px 0;

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

.c-newsletter__form-text {
    @include font("GOTHAM", 14px, 500, 14px);
    border-radius: 0;
    box-sizing: border-box;
    color: $mineshaft;
    height: 60px;
    margin-bottom: 12px;
    padding: 16px;

    &::placeholder {
        color: $mineshaft;
    }

    @include at-medium-size {
        margin-bottom: 0;
    }
}

.c-newsletter__form-btn {
    @include button-single();
    @include button-single-light();
    height: 60px;

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

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

.c-newsletter__legal {
    @include font('GOTHAM', 10px, null, 14px);
    color: $oslo-gray;
    letter-spacing: 0.025em;
    margin-bottom: 0;
    margin-top: 0;
}

.c-newsletter__privacy {
    color: $oslo-gray;
    text-decoration: underline;
}