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

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

/* Mobile-first base styles */
/* Section padding comes from .section-padding utility class in global.css */

/* Subheading - uses global .sub-heading class from global.css */
/* Headings - uses global h1-h6 styles from global.css */
/* Paragraphs - uses global p styles from global.css */

/* Blockquote - Default (dark blue gradient for white, light blue, gray backgrounds) */
.wysiwyg-section blockquote,
.wysiwyg blockquote {
    background: var(--color-primary-gradient);
    padding: 40px;
    border-radius: var(--border-radius);
    margin: 30px 0;
    color: var(--color-text-light);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    clear: both;
}

.wysiwyg-section blockquote p,
.wysiwyg blockquote p {
    color: var(--color-text-light);
    margin: 0;
}

/* Lists - Custom circular bullet styling (unique to WYSIWYG) */
.wysiwyg-section ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.wysiwyg-section ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
}

.wysiwyg-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* WordPress Image Alignment Classes */
.wysiwyg-section img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 30px 0;
}

.wysiwyg-section img.alignright {
    float: none;
    margin: 30px 0;
}

.wysiwyg-section img.alignleft {
    float: none;
    margin: 30px 0;
}

.wysiwyg-section img.aligncenter {
    margin: 30px auto;
}


/* ==========================================================================
   DARK BACKGROUND OVERRIDES
   ========================================================================== */
/* Background color classes (.bg-light-blue, .bg-gray, .bg-dark) are in global.css */

/* Subheading color override for dark backgrounds */
.bg-dark .sub-heading,
.has-dark-bg .sub-heading {
    color: var(--color-secondary-light);
}

/* Light blue gradient blockquote for dark backgrounds */
.bg-dark blockquote,
.has-dark-bg blockquote {
    background: var(--color-secondary-gradient);
    color: var(--color-text-primary);
}

.bg-dark blockquote p,
.has-dark-bg blockquote p {
    color: var(--color-text-primary);
}

/* List styling for dark backgrounds */
.bg-dark ul li,
.has-dark-bg ul li,
.bg-dark ol li,
.has-dark-bg ol li {
    color: var(--color-text-light);
}

.bg-dark ul li::before,
.has-dark-bg ul li::before {
    background: var(--color-secondary-light);
}

.bg-dark a {
    background: linear-gradient(to bottom,rgba(75,119,192,.5) 0%,rgba(75,119,192,.5) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px 0;
}


/* Tablet */
@media (min-width: 768px) {
    .wysiwyg-section img.alignright {
        float: right;
        max-width: 400px;
        margin: 0 0 20px 30px;
    }
    
    .wysiwyg-section img.alignleft {
        float: left;
        max-width: 400px;
        margin: 0 30px 20px 0;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    /* No additional changes needed at this breakpoint */
    .bg-dark a:hover {
        background-size: 4px 10px;
        transition: background-size var(--transition-fast);
    }
}

/* Large Desktop */
@media (min-width: 1367px) {
    /* No additional changes needed at this breakpoint */
}