/*------------------------------------*\
    
    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: #ffffff;
}

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

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

.bg-brown h2,
.bg-brown h3,
.bg-brown h4,
.bg-brown h5,
.bg-brown h6 {
    color: var(--white);
}

.bg-brown .sub-heading {
    color: #D2E1D9;
}

.bg-brown ul li:before {
    background: #D2E1D9;
}

.bg-brown p a:not(.btn), 
.bg-brown li a:not(.btn) {
    color: #D2E1D9;
}

.bg-brown p a:not(.btn):hover, 
.bg-brown li a:not(.btn):hover {
    border-color: #D2E1D9;
}

.bg-brown .btn-tertiary {
    color: var(--white);
}

.bg-brown .btn-tertiary::before {
    background: var(--white);
}

.bg-light-tan {
    background: var(--light-tan);
}

.wysiwyg img {
    height: 200px;
    max-width: initial;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.wysiwyg ul ul {
    margin-top: 15px;
}

.wysiwyg.bg-brown p a.btn {
    color: var(--white);
}

@media (min-width:768px) {
    .wysiwyg img {
        height: 322px;
        width: 100%;
    }
}

@media (min-width: 1200px) {

    .bg-brown p a:hover {
        border-color: #D2E1D9;
    }

    .wysiwyg.bg-brown .btn-primary:hover {
        background: var(--light-green);
            border: 1px solid var(--white);
    }

    .bg-brown .btn-tertiary:hover {
        color: #D2E1D9;
    }

    .bg-brown .btn-tertiary:hover::before {
        background: #D2E1D9;
    }

    .wysiwyg img {
        height: 322px;
        width: 505px;
    }

    p:has(img.alignleft) + ul {
        margin-left: 525px;
    }
}

.wysiwyg.bg-brown blockquote p a {
  color: #3c4f45;
}

.wysiwyg.bg-brown blockquote ul li::before {
  background: #3c4f45;
}

.wysiwyg h5,
.wysiwyg h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

.wysiwyg h5 {
    font-size: 24px;
}

.wysiwyg h6 {
    font-size: 20px;
}

.wysiwyg.bg-brown blockquote p a:hover {
  border-color: #3c4f45;
}