/*------------------------------------*\
    
    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;
    z-index: 1;
    overflow: hidden;
}

.wysiwyg__bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    bottom: -82px;
    left: 0;
}

/*------------------------------------*\
    BACKGROUND COLORS
\*------------------------------------*/

.bg-white {
    background: #ffffff;
}

.bg-light-blue {
    background: #E4EFFA;
}

.bg-navy {
    background: #1A5086;
    color: #FFFFFF;
}

.bg-dark-blue {
    background: #0F3050;
    color: #FFFFFF;
}

/*------------------------------------*\
    INLINE TEXT FORMATTING
\*------------------------------------*/

.wysiwyg__wrapper code {
    background: #F1F5F8;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: #E74C3C;
}

.wysiwyg__wrapper del {
    text-decoration: line-through;
    opacity: 0.7;
}

.wysiwyg__wrapper u {
    text-decoration: underline;
}

.wysiwyg__wrapper mark {
    background: #FFE66D;
    padding: 2px 4px;
    color: #000000;
}

.wysiwyg__wrapper sub,
.wysiwyg__wrapper sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.wysiwyg__wrapper sup {
    top: -0.5em;
}

.wysiwyg__wrapper sub {
    bottom: -0.25em;
}

/* Dark background variations */
.bg-navy .wysiwyg__wrapper code,
.bg-dark-blue .wysiwyg__wrapper code {
    background: rgba(255, 255, 255, 0.1);
    color: #AFCFF0;
}

.bg-navy .wysiwyg__wrapper mark,
.bg-dark-blue .wysiwyg__wrapper mark {
    background: #AFCFF0;
    color: #0F3050;
}

/*------------------------------------*\
    HORIZONTAL RULES
\*------------------------------------*/

.wysiwyg__wrapper hr {
    border: none;
    border-top: 2px solid #E0E0E0;
    margin: 40px 0;
    clear: both;
}

.bg-light-blue .wysiwyg__wrapper hr {
    border-top-color: #236CB5;
    opacity: 0.3;
}

.bg-navy .wysiwyg__wrapper hr,
.bg-dark-blue .wysiwyg__wrapper hr {
    border-top-color: #AFCFF0;
    opacity: 0.3;
}

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

.wysiwyg__wrapper table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 16px;
    clear: both;
    border: 3px solid #1A5086;
}

.wysiwyg__wrapper table thead {
    background: #1A5086;
    color: #FFFFFF;
}

.wysiwyg__wrapper table th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
    border: 1px solid #0F3050;
}

.wysiwyg__wrapper table td {
    padding: 12px 15px;
    border: 1px solid #DADADA;
}

.wysiwyg__wrapper table tbody tr:nth-child(odd) {
    background: #FFFFFF;
}

.wysiwyg__wrapper table tbody tr:nth-child(even) {
    background: #F9F9F9;
}

.wysiwyg__wrapper table tbody tr:hover {
    background: #F1F5F8;
}

.wysiwyg__wrapper table a {
	color: #1A5086;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

/* Mobile: Card Layout for Tables */
@media (max-width: 767px) {
	.wysiwyg__wrapper table {
		font-size: 14px;
		border: none;
	}

	.wysiwyg__wrapper table,
	.wysiwyg__wrapper table thead,
	.wysiwyg__wrapper table tbody,
	.wysiwyg__wrapper table tr {
		display: block;
	}

	.wysiwyg__wrapper table thead {
		display: none;
	}

	.wysiwyg__wrapper table tbody tr {
		border: 3px solid #1A5086;
		margin-bottom: 15px;
		background: #FFFFFF;
		border-radius: 4px;
		overflow: hidden;
		padding: 0;
	}

	.wysiwyg__wrapper table tbody tr:nth-child(even) {
		background: #FFFFFF;
	}

	.wysiwyg__wrapper table td {
		display: block;
		text-align: left;
		padding: 10px 15px;
		border: none;
		border-bottom: 1px solid #E0E0E0;
		position: relative;
	}

	.wysiwyg__wrapper table td:last-child {
		border-bottom: none;
	}

	.wysiwyg__wrapper table td:before {
		content: attr(data-label);
		font-weight: 600;
		color: #1A5086;
		display: block;
		margin-bottom: 5px;
	}

	.wysiwyg__wrapper table td:empty:before,
	.wysiwyg__wrapper table td:not([data-label]):before {
		content: '';
		display: none;
	}
}

.wysiwyg__wrapper table tfoot {
    background: #F9F9F9;
    font-weight: 600;
}

.wysiwyg__wrapper table tfoot td {
    border-top: 2px solid #236CB5;
}

/* Light Blue Background Tables */
.bg-light-blue .wysiwyg__wrapper table thead {
    background: #0A3259;
}

.bg-light-blue .wysiwyg__wrapper table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.5);
}

.bg-light-blue .wysiwyg__wrapper table tbody tr:hover {
    background: rgba(255, 255, 255, 0.7);
}

.bg-light-blue .wysiwyg__wrapper table tfoot {
    background: rgba(255, 255, 255, 0.5);
}

.bg-light-blue .wysiwyg__wrapper table tfoot td {
    border-top-color: #0A3259;
}

/* Dark Background Tables */
.bg-navy .wysiwyg__wrapper table,
.bg-dark-blue .wysiwyg__wrapper table {
    color: #0F3050;
}

.bg-navy .wysiwyg__wrapper table thead,
.bg-dark-blue .wysiwyg__wrapper table thead {
    background: #AFCFF0;
    color: #0F3050;
}

.bg-navy .wysiwyg__wrapper table tbody tr:nth-child(even),
.bg-dark-blue .wysiwyg__wrapper table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.95);
}

.bg-navy .wysiwyg__wrapper table tbody tr,
.bg-dark-blue .wysiwyg__wrapper table tbody tr {
    background: #FFFFFF;
}

.bg-navy .wysiwyg__wrapper table tbody tr:hover,
.bg-dark-blue .wysiwyg__wrapper table tbody tr:hover {
    background: #E4EFFA;
}

.bg-navy .wysiwyg__wrapper table tfoot,
.bg-dark-blue .wysiwyg__wrapper table tfoot {
    background: #E4EFFA;
}

.bg-navy .wysiwyg__wrapper table tfoot td,
.bg-dark-blue .wysiwyg__wrapper table tfoot td {
    border-top-color: #AFCFF0;
}

/*------------------------------------*\
    CODE BLOCKS & PREFORMATTED TEXT
\*------------------------------------*/

.wysiwyg__wrapper pre {
    background: #2C3E50;
    color: #FFFFFF;
    padding: 20px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.6;
    margin: 30px 0;
    clear: both;
}

.wysiwyg__wrapper pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

.bg-light-blue .wysiwyg__wrapper pre {
    background: #0A3259;
}

.bg-navy .wysiwyg__wrapper pre,
.bg-dark-blue .wysiwyg__wrapper pre {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #AFCFF0;
}

/*------------------------------------*\
    CUSTOM FORMAT STYLES
\*------------------------------------*/

/* Large Font */
.wysiwyg__wrapper .large-font {
    font-size: 20px;
    line-height: 1.5em;
}

/* List Column (single column with custom styling) */
.wysiwyg__wrapper .list-column {
    columns: 1;
    column-gap: 30px;
}

/* Two Column List */
.wysiwyg__wrapper .list--two-columns {
    columns: 1;
    column-gap: 30px;
}

@media (min-width: 768px) {
    .wysiwyg__wrapper .large-font {
        font-size: 22px;
    }

    .wysiwyg__wrapper .list--two-columns {
        columns: 2;
        column-gap: 40px;
    }

    .wysiwyg__bg {
        height: 1048px;
        bottom: -48px;
    }
}

@media (min-width: 1200px) {
    .wysiwyg__wrapper .large-font {
        font-size: 24px;
    }

    .wysiwyg__bg {
        height: 1592px;
        top: 0;
        bottom: auto;
    }

    .wysiwyg {
        z-index: 3;
    }
}

/* Prevent list items from breaking across columns */
.wysiwyg__wrapper .list-column li,
.wysiwyg__wrapper .list--two-columns li {
    break-inside: avoid;
    page-break-inside: avoid;
}

/*------------------------------------*\
    NESTED LISTS
\*------------------------------------*/

.wysiwyg__wrapper ul ul,
.wysiwyg__wrapper ol ol,
.wysiwyg__wrapper ul ol,
.wysiwyg__wrapper ol ul {
    /*
    margin-top: 10px;
    margin-bottom: 10px;
    */
}

.wysiwyg__wrapper ul ul li,
.wysiwyg__wrapper ol ol li {
    margin-bottom: 8px;
}

/* Fix for centered lists - center the TOP-LEVEL list itself, not the text */
.wysiwyg__wrapper > ul[style*="text-align: center"],
.wysiwyg__wrapper > ol[style*="text-align: center"],
.wysiwyg__wrapper .has-text-align-center > ul,
.wysiwyg__wrapper .has-text-align-center > ol,
.wysiwyg__wrapper .text-center > ul,
.wysiwyg__wrapper .text-center > ol,
.text-center > ul,
.text-center > ol {
    display: inline-block;
    text-align: left;
}

/* Nested lists should remain as block elements */
.wysiwyg__wrapper ul ul,
.wysiwyg__wrapper ul ol,
.wysiwyg__wrapper ol ul,
.wysiwyg__wrapper ol ol,
.text-center ul ul,
.text-center ul ol,
.text-center ol ul,
.text-center ol ol {
    display: block;
}

/* Ensure all list items stay left-aligned */
.wysiwyg__wrapper ul[style*="text-align: center"] li,
.wysiwyg__wrapper ol[style*="text-align: center"] li,
.wysiwyg__wrapper .has-text-align-center li,
.wysiwyg__wrapper .text-center li,
.text-center li {
    text-align: left;
}

/*------------------------------------*\
    IMAGE WRAPPING & ALIGNMENT
\*------------------------------------*/

.wysiwyg__wrapper p {
    overflow: visible;
    clear: none;
}

.wysiwyg__wrapper img.alignleft {
    float: left;
    margin: 0 30px 20px 0;
}

.wysiwyg__wrapper img.alignright {
    float: right;
    margin: 0 0 20px 30px;
}

.wysiwyg__wrapper img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    float: none;
}

/* Clear floats before certain elements */
.wysiwyg__wrapper blockquote,
.wysiwyg__wrapper .blockquote-col,
.wysiwyg__wrapper table,
.wysiwyg__wrapper pre,
.wysiwyg__wrapper hr {
    clear: both;
}

/*------------------------------------*\
    BUTTON SPACING IN PARAGRAPHS
\*------------------------------------*/

.wysiwyg__wrapper p .btn {
    margin-right: 0;
    margin-left: 0;
    display: inline-block;
	margin-top: var(--spacing-lg, 20px);
    margin-right: var(--spacing-lg, 20px);
}



/*------------------------------------*\
    BACKGROUND COLOR VARIATIONS
\*------------------------------------*/

/* Sub-heading variations */
.bg-light-blue .sub-heading {
    color: #0A3259;
}

.bg-light-blue .sub-heading::before {
    background: #236CB5;
}

.bg-navy .sub-heading,
.bg-dark-blue .sub-heading {
    color: #E4EFFA;
}

.bg-navy .sub-heading::before,
.bg-dark-blue .sub-heading::before {
    background: #AFCFF0;
}

/* Heading color variations */
.bg-navy h1,
.bg-navy .h1,
.bg-navy h2,
.bg-navy .h2,
.bg-navy h3,
.bg-navy .h3,
.bg-navy h4,
.bg-navy .h4,
.bg-navy h5,
.bg-navy .h5,
.bg-navy h6,
.bg-navy .h6,
.bg-dark-blue h1,
.bg-dark-blue .h1,
.bg-dark-blue h2,
.bg-dark-blue .h2,
.bg-dark-blue h3,
.bg-dark-blue .h3,
.bg-dark-blue h4,
.bg-dark-blue .h4,
.bg-dark-blue h5,
.bg-dark-blue .h5,
.bg-dark-blue h6,
.bg-dark-blue .h6 {
    color: #FFFFFF;
}

/* List bullet variations */
.bg-light-blue ul li:before {
    background: #236CB5;
}

.bg-navy ul li:before,
.bg-dark-blue ul li:before {
    background: #AFCFF0;
}

.bg-navy ol li:before,
.bg-dark-blue ol li:before {
    color: #AFCFF0;
}

/* Link variations */
.bg-navy p a,
.bg-dark-blue p a {
    color: #FFFFFF;
}

.bg-navy a,
.bg-dark-blue a {
    color: #FFFFFF;
}

/* Button variations */
.bg-light-blue .btn-secondary {
    background: #236CB5;
    color: #ffffff;
}

.bg-navy .btn-primary,
.bg-dark-blue .btn-primary {
    background: #E4EFFA;
    color: #1E354C;
}

.bg-navy .btn-secondary,
.bg-dark-blue .btn-secondary {
    background: #FFFFFF;
    color: #1E354C;
}

.bg-navy .btn-tertiary,
.bg-dark-blue .btn-tertiary {
    color: #E4EFFA;
}

/*------------------------------------*\
    UTILITY & CLEANUP
\*------------------------------------*/

.wysiwyg :last-child {
    margin-bottom: 0;
}

/* Clear floats at end of wysiwyg content */
.wysiwyg__wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/*------------------------------------*\
    HOVER STATES
\*------------------------------------*/

@media (min-width: 1200px) {

    .bg-navy p a:hover,
    .bg-dark-blue p a:hover,
    .bg-navy a:hover,
    .bg-dark-blue a:hover {
        color: #E4EFFA;
        border-color: #E4EFFA;
    }

    .bg-navy .btn-primary:hover,
    .bg-dark-blue .btn-primary:hover {
        background: #AFCFF0;
        color: #1E354C;
    }

    .bg-navy .btn-secondary:hover,
    .bg-dark-blue .btn-secondary:hover {
        background: #DDDDDD;
        color: #1E354C;
    }

    .bg-navy .btn-tertiary:hover,
    .bg-dark-blue .btn-tertiary:hover {
        color: #AFCFF0;
        border-color: #AFCFF0;
    }

    .bg-navy .btn-tertiary:hover::before,
    .bg-dark-blue .btn-tertiary:hover::before {
        background: #AFCFF0;
    }

    .bg-light-blue .btn-secondary:hover {
        background: #0A3259;
        color: #ffffff;
    }

    .bg-light-blue .btn-tertiary:hover {
        color: #0A3259;
    }

    .bg-light-blue .btn-tertiary:hover::before {
        background: #0A3259;
    }

    .wysiwyg h3,
    .wysiwyg h4 {
        margin-bottom: 38px;
    }

    .wysiwyg__wrapper table tbody tr:hover td {
        transition: background 0.2s ease;
    }

    .wysiwyg__wrapper table a:hover {
        color: #448FDB;
        border-color: #448FDB;
    }
}

/*------------------------------------*\
    ADJACENT SECTION COLLAPSING
\*------------------------------------*/

.bg-white+.bg-white,
.bg-light-blue+.bg-light-blue,
.bg-navy+.bg-navy,
.bg-dark-blue+.bg-dark-blue {
    margin-top: 0;
    padding-top: 0;
}