/*------------------------------------*\
    
    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

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

.bg-white {
    background: #ffffff;
}

.bg-tan {
    background: #f8f4ea;
}

.bg-blue {
    background: #dce7e5;
}

/* Ensure images don't overlap blockquote in Gutenberg */
.wysiwyg blockquote {
    position: relative;
    z-index: 1;
}

.wysiwyg img {
    position: relative;
    z-index: 0;
    margin-top: 20px; /* Adjust as needed */
    margin-bottom: 20px; /* Adjust as needed */
}

.wysiwyg blockquote,
.wysiwyg img {
    clear: both; /* Prevent floating overlap */
}

.wysiwyg blockquote {
    padding: 20px;
}

.wysiwyg .btn + .btn {
    margin-right: 10px;
}

.chat-block__wrap {
    margin-top: 15px;
}

.chat-screenshot {
    margin: 0 auto;
    display: block;
}

@media (min-width: 768px) {
    .wysiwyg .btn + .btn {
        margin-right: 0;
    }
}

@media (min-width: 1200px) {
    .bg-blue .btn-secondary:hover {
        background: #f8f4ea;
        border-color: #dce7e5;
    }

    .wysiwyg h2 span {
        text-transform: uppercase;
    }
}

@media (min-width: 1600px) {
    .wrapper {
        max-width: 1400px;
        margin: 0 auto;
    }
}