lightspeeddevelopment/lsx-customizer

.lsx-title {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: $lsx-large-gap / 2;
    margin-top: 0;
    text-align: center;

    &:after {
        content: "";
        display: block;
        height: 2px;
        margin: $lsx-gap auto 0;
        width: 80px;
    }

    & > small {
        color: inherit;
        display: block;
        line-height: inherit;
        margin-top: 8px;

        &.long-text {
            margin-top: 16px;
        }
    }
}

#home-widgets {
    margin-top: $lsx-large-gap;

    & > .widget {
        margin-bottom: $lsx-large-gap;

        &.widget_lsx_full_width_alt,
        &.widget_lsx_full_width {
            &:last-child {
                margin-bottom: 0;
            }
        }

        &.widget_text {
            [class*="col-"] + [class*="col-"] {
                @include media("<phone") {
                    margin-top: $lsx-large-gap / 2;
                }
            }
        }
    }

    h3,
    .widget-title {
        @extend .lsx-title;
    }

    .textwidget,
    p {
        margin-bottom: 0;
    }

    p {
        & + p {
            margin-top: $lsx-gap;
        }

        & .btn {
            margin-top: 0;
        }
    }

    img ~ p {
        margin-top: $lsx-gap;
    }

    .btn {
        margin-top: $lsx-large-gap / 2;
    }
}

.content-area {
    .lsx-full-width-base,
    .lsx-full-width-base-small,
    .lsx-full-width,
    .lsx-full-width-alt {
        margin: 0 -9999rem;
        padding: $lsx-large-gap 9999rem;

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .widget-title {
            &:after {
                display: none;
            }
        }
    }

    .lsx-full-width-base-small {
        padding-bottom: $lsx-large-gap / 2;
        padding-top: $lsx-large-gap / 2;
    }
}

.page-header {
    border: 0 none;
    margin: 0 0 $lsx-gap;
    padding: 0;

    & > .page-title {
        margin-bottom: 0;
    }
}

// lsx-subheading styles
.content-area {
    .lsx-subheading {
        @include media(">desktop") {
            max-width: 90rem;
            margin-left: auto;
            margin-right: auto;
        }
        h2,
        h3 {
            font-size: 48px;
            color: #333;
            line-height: 50px;
        }
        p {
            font-size: 26px;
            color: #777;
            line-height: 30px;
            &:last-child {
                &:after {
                    content: "";
                    display: block;
                    height: 2px;
                    margin: 2.4rem auto 0;
                    width: 80px;
                    background-color: #dadddf;
                }
            }
            &:not(.has-text-align-center) {
                text-align: initial;
                &:after {
                    margin-left: 0;
                }
            }
            &.has-text-align-left {
                &:after {
                    margin-left: 0;
                }
            }
            &.has-text-align-right {
                text-align: right;
                &:after {
                    margin-right: 0;
                    margin-left: auto;
                }
            }
        }
    }
}

// Style to pass google mobile friendly test
@media (max-width: 400px) {
    .home {
        #home-widgets {
            .widget {
                .row {
                    margin: 0;
                }
            }
        }
    }
    #footer-widgets a:not(.btn):not(button) {
        word-break: break-all;
    }
    // #primary {
    //     padding: 0;
    // }
    .widget {
        .lsx-full-width-base {
            padding: 2rem;
            margin: 0;
        }
    }
}

@include content-colours();