/*------------------------------------*\
    
    WebFX WYSIWYG Customizations - Global styling for all ACF WYSIWYG's

    Add custom WYSIWYG styling to this file if it should be applied to all ACF WYSIWYG's on the site
    Otherwise, put your block-specific styles in individual block stylesheets

\*------------------------------------*/

.wysiwyg {
    position: relative;
}

.bg-white {
    background: var(--white);
}

.bg-grey {
    background: var(--off-white);
}

.bg-dark-grey {
    background: var(--off-white-darker);
}

.bg-blue,
.notification-popup {
    background: var(--secondary-color);
    color: var(--white);
}

.notification-popup {
    background: var(--secondary-color) !important;
    color: var(--white) !important;
}

.bg-blue h2,
.bg-blue h3,
.bg-blue h4,
.bg-blue h5,
.bg-blue h6,
.bg-blue .sub-heading,
.bg-blue .sub-heading:before,
.notification-popup h2,
.notification-popup h3,
.notification-popup h4,
.notification-popup h5,
.notification-popup h6,
.notification-popup .sub-heading,
.notification-popup .sub-heading:before {
    color: var(--white);
}

.bg-blue p a,
.notification-popup p a {
    color: var(--light-blue);
}

.bg-blue a.btn-secondary,
.notification-popup a.btn-secondary {
    color: var(--secondary-color) !important;
}

.bg-blue ul li:before,
.bg-blue ul li > span:before {
    color: var(--light-blue);
}

.bg-blue .btn-primary,
.notification-popup .btn-primary {
    color: var(--secondary-color);
    background: linear-gradient(90deg, var(--white) 0%, var(--white) 100%);
    box-shadow: 3px 3px 0 0 var(--light-blue);
}

.bg-blue .btn-tertiary,
.notification-popup .btn-tertiary {
    color: var(--light-blue);
}

.wysiwyg p+h3,
.wysiwyg p+h4,
.wysiwyg p+h5,
.wysiwyg p+h6 {
    margin-top: 25px;
}

.top-headlines {
    margin-bottom: 20px;
}

.top-headlines.no-specials-to-display {
    margin-bottom: 0;
}

.top-headlines :last-child {
    margin-bottom: 0;
}

.bottom-content {
    margin-top: 20px;
}

.top-headlines p,
.bottom-content p {
    letter-spacing: 0.02em;
}

.bg-blue:not(.half-and-half) + .bg-blue:not(.wysiwyg),
.bg-grey:not(.half-and-half) + .bg-grey:not(.wysiwyg),
.bg-dark-grey:not(.half-and-half) + .bg-dark-grey:not(.wysiwyg),
.bg-white:not(.half-and-half) + .bg-white:not(.wysiwyg) {
    padding-top: 0 !important;
}

@media (min-width: 768px) {

    .wysiwyg p+h3,
    .wysiwyg p+h4,
    .wysiwyg p+h5,
    .wysiwyg p+h6 {
        margin-top: 30px;
    }

    .top-headlines {
        margin-bottom: 32px;
    }

    .bottom-content {
        margin-top: 32px;
    }

    .top-headlines p,
    .bottom-content p {
        letter-spacing: 0em;
    }
}

@media (min-width: 1200px) {

    .wysiwyg p+h3,
    .wysiwyg p+h4,
    .wysiwyg p+h5,
    .wysiwyg p+h6 {
        margin-top: 40px;
    }

    .bg-blue p a:hover,
    .notification-popup p a:hover {
        color: var(--light-blue);
        text-decoration-color: var(--light-blue);
    }

    .bg-blue a.btn-secondary:hover,
    .notification-popup a.btn-secondary:hover {
        color: var(--secondary-color) !important;
    }

    .bg-blue .btn-primary:hover,
    .notification-popup .btn-primary:hover {
        color: var(--secondary-color);
        background: linear-gradient(90deg, var(--white) 0%, var(--off-white-darker) 100%);
        box-shadow: 1px 1px 0 0 var(--white);
    }

    .bg-blue .btn-tertiary:hover,
    .notification-popup .btn-tertiary:hover {
        color: var(--light-blue);
    }

    .bg-blue .btn-tertiary:hover::before,
    .notification-popup .btn-tertiary:hover::before {
        background: var(--light-blue);
    }

    .top-headlines {
        margin-bottom: 52px;
    }

    .bottom-content {
        margin-top: 52px;
    }

    .top-headlines p,
    .bottom-content p {
        letter-spacing: 0.02em;
    }

}