/*------------------------------------*\
    
    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 { 
    color: var( --color-black-02 );
    position: relative;
    z-index: 5;
}

.masthead--innerpage + .wysiwyg .top-curve-inner,
.masthead--innerpage + .contact-form .top-curve-inner {
    display: block;
}

.wysiwyg .top-curve-inner,
.contact-form .top-curve-inner {
    display: none;
}

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

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

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

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

.bg-light-blue .image-text__text :is( p, ul li, ol li){
    color: var( --color-white)
}

.bg-light-blue p {
    color: var(--color-white);
}

.bg-light-blue :is(h2, h3, h4, h5 ),
.bg-blue :is(h2, h3, h4, h5 ) {
    color: var( --color-white )!important;
}


.bg-light-blue a:not(.btn-primary, .btn-secondary, .btn-tertiary ) {
    color: var( --color-white );
    font-weight: 700;
}

.bg-light-blue  a.btn-tertiary {
    color: var(--color-white);
}

.bg-blue h4 {
    color: var( --color-green );
}

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

.wysiwyg.bg-light-blue + .cta {
    background-color: var( --color-light-blue );
}

.wysiwyg.bg-blue + .cta {
    background-color: var( --color-blue );
}

.wysiwyg.bg-gray + .cta {
    background-color: var( --color-gray );
}


.accent-heading {
    color: var( --color-white );
    background-color: var( --color-light-blue-02 );
    border-radius: 0 13px 13px 0;
    font-size: 22px;
    line-height: 1em;
    margin: 0 0 15px 0;
    padding: 8px 56px 10px 0;
    position: relative;
    font-weight: 700;
    font-style: italic;
    display: inline-block;
    z-index: 1;
}

.accent-heading p {
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
}

.accent-heading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -3050px;
    width: 3051px;
    height: 100%;
    background-color: var( --color-light-blue-02 );
    z-index: -1;
}

@media (min-width: 1200px) {
    .bg-blue .btn-primary:hover {
        text-decoration: none;
        background: linear-gradient(135deg,  #02688E 0%,#02688E 100%);
        color: var( --color-white );
    } 

    .bg-blue .btn-secondary:hover {
        background: linear-gradient(135deg,  #009639 0%,#009639 100%); 
    }
    .cta-link {
        text-align: right;
    }

}

.table-structure table {
    border-collapse: collapse;
    width: 100%;
    max-width: 275px;
    margin-bottom: 20px;
}

.table-structure table tbody tr :is(td, th) {
    padding: 7px 0;
    text-align: left;
    font-size: 17px;
    font-weight: 400;
    color: var( --color-white );
    line-height: 1.15em;
    vertical-align: middle;
}

.table-structure table tbody tr th {
    font-weight: 700;
    font-style: italic;
    text-align: left;
}
.image-grid img {
    max-height: 127px;
}
.cta-link {
    margin: 20px 0;
}
.image-item {
    padding-right: 0;
    padding-left: 7px;
    padding-bottom: 7px;
}
@media (min-width: 768px) {
    .table-structure table tbody tr th {
        width: 180px;
    }
     .image-grid img {
        max-height: 227px;
    }
}

@media(min-width:1200px) {
    .image-grid {
        padding-top: 24px;
    }
    .image-grid img {
        max-height: 327px;
    }
    .cta-link {
        margin: 0 0;
    }
}

/* Comparison Table WYSIWYG Styles */
/* These styles will apply to tables with the class "comparison-table" added via WordPress editor */

/* Base Table Styles */
.comparison-table {
    min-width: 1025px;
    margin: 40px auto;
    width: 100%;
    border-collapse: collapse;
    font-family: 'Arimo', sans-serif;
}
.comparison-table tbody tr:nth-child(odd) {
    background-color: rgba(216, 241, 255, 0.25);
}
.table-wrapper{
    overflow-x: auto;
    position: relative;
}
.table-structure::-webkit-scrollbar {
  width: 8px; /* For vertical scrollbars */
  height: 8px; /* For horizontal scrollbars */
}

/* Track (background) */
.table-structure::-webkit-scrollbar-track {

  background: linear-gradient(110deg, #D8F1FF 26.17%, #CFFAE3 89.57%);
  border-radius: 10px;
}

/* Handle (thumb) */
.table-structure::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* Handle on hover */
.table-structure::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.comparison-table th,
.comparison-table td {
    padding: 30px 40px;
    text-align: left;
    font-weight: 400;
    font-size: 24px;
    color: #033041;
    vertical-align: middle;
}

/* Header Styles */
.comparison-table thead th {
    border-bottom: none;
    text-align: center;
    padding-bottom: 50px;
}

.comparison-table thead th:first-child {
    text-align: left;
}
.comparison-table thead th{
    border-right: 1px solid #D9D9D9;
}
.comparison-table thead th:first-child ,
.comparison-table thead th:last-child{
    border-right: 0;
}


/* Body Styles */
.comparison-table tbody tr {
    border-bottom: 1px solid #D9D9D9;
}

.comparison-table tbody td:not(:first-child)  {
    border-left: 1px solid #D9D9D9;
}

/* First column styling */
.comparison-table tbody td.label-cell {
    font-weight: 700;
    font-style: italic;
}

/* Highlight specific rows - add class to tr in editor */
.comparison-table tr.highlight-row {
    background-color: rgba(216, 241, 255, 0.25);
}

/* Logo styling */
.comparison-table .brand-logo {
    text-align: center;
    display: block;
}

.comparison-table .brand-logo img {
    max-height: 200px;
    width: auto;
    margin: 0 auto;
    display: block;
}

/* Small text under logos */
.comparison-table .brand-tagline {
    display: block;
    font-size: 16px;
    color: #033041;
    margin-top: 10px;
    font-style: italic;
}

/* Certification badges */
.comparison-table .certification-badges {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.comparison-table .certification-badges img {
    margin: 0;
}

/* CTA Button styling */
.comparison-table .btn {
  
    border: 1px solid #033041;
    color: #033041;
    text-decoration: none;
    text-transform: initial;
    background: transparent;
    font-weight: 500;

}
.comparison-table .btn strong {
    font-family: 'Arimo';
    font-weight: 700;
}
.comparison-table .btn:hover {
    background : linear-gradient(135deg,#033041 0%,#02688e 100%) ;
    color: #fff;
}

.comparison-table .btn-cta:hover {
    background-color: #033041;
    color: #ffffff;
}

/* Footer row styling */
.comparison-table tfoot td {
    padding: 40px;
    text-align: center;
    border: none;
}


/* Responsive Design */
@media (max-width: 1200px) {
    .comparison-table th,
    .comparison-table td {
        padding: 20px 30px;
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    .comparison-table th,
    .comparison-table td {
        padding: 20px;
        font-size: 18px;
    }
}