/*---*\
    WYSIWYG Block
    Rich text content section with support for:
    - Optional subheading
    - H2-H4 headings
    - Paragraph text with hyperlinks
    - Floated images (right alignment)
    - Blockquote with quote icon
    - Custom bullet lists
    - Button components (primary, secondary, tertiary)

    BACKGROUND VARIATIONS:
    - .bg-white (default)
    - .bg-light (light blue #E9EDF0)
    - .bg-gradient-blue (dark navy #002336 with inverse colors)
\*---*/


/* ==========================================================================
   BASE STYLES (Mobile First)
   ========================================================================== */

.wysiwyg {
    overflow: hidden;
}

.wysiwyg__content {
    max-width: 900px;
    margin: 0 auto;
}

.wysiwyg__content > *:first-child {
    margin-top: 0;
}

.wysiwyg__content > *:last-child {
    margin-bottom: 0;
}

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

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.wysiwyg__content h2 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.wysiwyg__content h3 {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.wysiwyg__content h4 {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.wysiwyg__content h2:first-child,
.wysiwyg__content h3:first-child,
.wysiwyg__content h4:first-child,
.wysiwyg__content .sub-heading + h2,
.wysiwyg__content .sub-heading + h3,
.wysiwyg__content .sub-heading + h4 {
    margin-top: 0;
}

.wysiwyg__content p {
    margin-bottom: var(--paragraph-spacing);
    line-height: var(--line-height-body);
}

.wysiwyg__content a:not(.btn):hover {
    color: var(--color-link-hover);
    background: linear-gradient(90deg, rgb(0 35 54 / 4%) 0%, rgb(67 101 119 / 12%) 100%);
    border-radius: 4px;
}



/* ==========================================================================
   LINKS
   ========================================================================== */

.wysiwyg__content a:not(.btn) {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wysiwyg__content a:not(.btn):hover {
    color: var(--color-primary);
    text-decoration: none;
    background: linear-gradient(90deg, rgb(0 35 54 / 4%) 0%, rgb(67 101 119 / 12%) 100%);
    border-radius: 4px;
}


/* ==========================================================================
   FLOATED IMAGES
   ========================================================================== */

.wysiwyg__content img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--spacing-md);
    border-radius: 20px;
    border: 8px solid rgb(211 215 217 / 25%);
    box-shadow: 0 0 16px 0 rgba(67, 101, 119, 0.25);
}

.wysiwyg__content img.alignright {
    float: none;
    margin-left: 0;
}

.wysiwyg__content img.alignleft {
    float: none;
    margin-right: 0;
}

.wysiwyg__two-col-list.content-checklist li::before {
    display: none;
}


/* ==========================================================================
   BLOCKQUOTE
   ========================================================================== */

.wysiwyg__content blockquote {
    position: relative;
    margin: var(--spacing-lg) 0;
    padding: 24px;
    background: linear-gradient(96deg,rgba(245, 245, 245, 0.93) 0%, rgba(233, 237, 240, 0.8) 68%);
    border-radius: var(--border-radius);
    clear: both;
}

.wysiwyg__content blockquote p {
    font-size: var(--font-size-body);
    line-height: 1.5;
    margin-bottom: 0;
}

.wysiwyg__content blockquote p strong {
    font-weight: var(--font-weight-semibold);
}

.wysiwyg__content blockquote cite {
    display: block;
    margin-top: var(--spacing-sm);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-body-small);
    color: var(--color-text-secondary);
}

@media( min-width : 1200px ) {
    .wysiwyg__content blockquote {
        padding: 50px;
    }
}


/* ==========================================================================
   UNORDERED LISTS
   ========================================================================== */

.wysiwyg__content ul {
    margin: var(--spacing-md) 0;
    padding-left: 0;
    list-style: none;
}

.wysiwyg__content ul li {
    position: relative;
    margin-bottom: 16px;
    line-height: var(--line-height-body);
    padding-left: 20px;
}

.wysiwyg__content ul li:last-child {
    margin-bottom: 0;
}

/* Nested lists */
.wysiwyg__content ul ul {
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
}

.wysiwyg__content ul ul li::before {
    font-size: 24px;
    color: var(--color-secondary);
}


/* ==========================================================================
   ORDERED LISTS
   ========================================================================== */

.wysiwyg__content ol {
    margin: var(--spacing-md) 0;
    padding-left: 0;
    list-style: none;
    counter-reset: list-counter;
    margin-left: 20px;
}

.wysiwyg__content ol li {
    position: relative;
    padding-left: 32px;
    margin-bottom: var(--spacing-xs);
    line-height: var(--line-height-body);
    counter-increment: list-counter;
}

.wysiwyg__content ol li::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.wysiwyg__content ol li:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   BUTTON GROUP
   ========================================================================== */

.btn-group {
    display: flex;
    /* flex-direction: column; */
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    clear: both;
}

.wysiwyg__content .btn-group .btn-tertiary {
    width: auto;
}


/* ==========================================================================
   SECONDARY BUTTON (outline) - base styles handled in global.css
   ========================================================================== */


/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

table {
    width: 100%;
    margin: var(--spacing-md) 0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

table thead th {
    padding: 15px 11px;
    background-color: var(--color-surface-light);
    font-weight: var(--font-weight-semibold);
    font-size: var(--btn-font-size);
    text-align: left;
    color: var(--color-heading);
}

table thead th:first-child {
    border-top-left-radius: var(--border-radius);
}

.bg-light table thead th,
.bg-gradient-blue table thead th {
    background: linear-gradient(89deg, rgb(218 222 226 / 100%) 15%, rgb(245 245 245 / 100%) 83%);
}

table thead th:last-child {
    border-top-right-radius: var(--border-radius);
}

table tbody td {
    padding: 11px;
    font-size: var(--font-size-body);
    line-height: 1.5;
    color: var(--color-text-primary);
}

table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}

table tbody tr:nth-child(even) {
    background-color: var(--color-surface-light);
}

table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--border-radius);
}

table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--border-radius);
}

/* Table Labels */
.wysiwyg__table-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    margin-left: 10px;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    border-radius: var(--border-radius);
    backdrop-filter: blur(2px);
}

.wysiwyg__table-label--sunsetting {
    background-color: var(--color-status-sunsetting-bg);
    border: 1px solid var(--color-status-sunsetting-border);
    color: var(--color-status-sunsetting-text);
}

.wysiwyg__table-label--active {
    background-color: var(--color-status-active-bg);
    border: 1px solid var(--color-status-active-border);
    color: var(--color-status-active-text);
}


/* ==========================================================================
   CTA BANNER
   ========================================================================== */

.wysiwyg__cta-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: 40px var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    background-color: var(--color-surface-light);
    border: 2px solid var(--color-bg-light);
    border-radius: var(--border-radius);
    text-align: center;
}

.wysiwyg__cta-banner-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bg-light-blue .wysiwyg__cta-banner-content a,
.bg-navy .wysiwyg__cta-banner-content a,
.bg-medium-blue .wysiwyg__cta-banner-content a, 
.bg-gradient-blue .wysiwyg__cta-banner-content a,
.bg-primary .wysiwyg__cta-banner-content {
    color: var(--color-primary)!important;
}

.wysiwyg__cta-banner-content h5 {
    margin: 0;
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    color: var(--color-heading);
}

.wysiwyg__cta-banner-content p {
    margin: 0;
    font-size: var(--font-size-body);
    line-height: 1.5;
    color: var(--color-primary);
}

.wysiwyg__cta-banner-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

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

.bg-gradient-blue .wysiwyg__cta-banner {
    background-color: var(--color-surface-muted);
}

/* ==========================================================================
   TWO COLUMN TEXT SECTION
   ========================================================================== */

.wysiwyg__two-col {
    margin: var(--spacing-lg) 0;
    clear: both;
}

.wysiwyg__two-col .row {
    row-gap: var(--spacing-lg);
}

.wysiwyg__two-col-item h4,
.wysiwyg__two-col-item h5 {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
}

.wysiwyg__two-col-item p {
    margin-bottom: var(--spacing-sm);
}

.wysiwyg__two-col-item p:last-child {
    margin-bottom: 0;
}

.wysiwyg__two-col-list {
    margin: var(--spacing-sm) 0 0 0;
    padding: 0;
    list-style: none;
}

.wysiwyg__two-col-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-body);
}

.wysiwyg__two-col-list li:last-child {
    margin-bottom: 0;
}

.wysiwyg__two-col-list li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: 50%;
}

.wysiwyg__two-col-list li span {
    flex: 1;
}

.wysiwyg__two-col-list li strong {
    font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   HORIZONTAL RULE
   ========================================================================== */

.wysiwyg__content hr {
    margin: var(--spacing-lg) 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}


/* ==========================================================================
   DARK BACKGROUND VARIATIONS (.bg-gradient-blue)
   ========================================================================== */

.wysiwyg.bg-gradient-blue .wysiwyg__content h2,
.wysiwyg.bg-gradient-blue .wysiwyg__content h3,
.wysiwyg.bg-gradient-blue .wysiwyg__content h4 {
    color: var(--color-heading-inverse);
}

.wysiwyg.bg-gradient-blue .wysiwyg__content p,
.wysiwyg.bg-gradient-blue .wysiwyg__content li {
    color: var(--color-text-inverse);
}

/* CTA banner sits in a light container — keep text dark */
.wysiwyg.bg-gradient-blue .wysiwyg__cta-banner-content p {
    color: var(--color-primary);
}

.wysiwyg.bg-gradient-blue .wysiwyg__content a:not(.btn),
.wysiwyg.bg-navy .wysiwyg__content a:not(.btn),
.wysiwyg.bg-medium-blue .wysiwyg__content a:not(.btn),
.wysiwyg.bg-primary .wysiwyg__content a:not(.btn) {
    color: var(--color-link-inverse);
}

.wysiwyg.bg-gradient-blue .wysiwyg__content a:not(.btn):hover,
.wysiwyg.bg-navy .wysiwyg__content a:not(.btn):hover,
.wysiwyg.bg-medium-blue .wysiwyg__content a:not(.btn):hover,
.wysiwyg.bg-primary .wysiwyg__content a:not(.btn):hover,
.wysiwyg.bg-light .wysiwyg__content a:not(.btn):hover,
.wysiwyg.bg-light-gray .wysiwyg__content a:not(.btn):hover {
    color: var(--color-primary);
    text-decoration: none;
    background: linear-gradient(90deg, rgb(255 255 255) 0%, rgb(238 242 244) 100%);
}

/* Dark background - Blockquote */
.wysiwyg.bg-gradient-blue .wysiwyg__content blockquote,
.wysiwyg.bg-navy .wysiwyg__content blockquote,
.wysiwyg.bg-medium-blue .wysiwyg__content blockquote,
.wysiwyg.bg-primary .wysiwyg__content blockquote,
.wysiwyg.bg-light .wysiwyg__content blockquote,
.wysiwyg.bg-light-gray .wysiwyg__content blockquote {
    background: var(--color-surface-light);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-primary);
}

.wysiwyg.bg-gradient-blue .wysiwyg__content blockquote p,
.wysiwyg.bg-navy .wysiwyg__content blockquote p,
.wysiwyg.bg-medium-blue .wysiwyg__content blockquote p,
.wysiwyg.bg-primary .wysiwyg__content blockquote p,
.wysiwyg.bg-light-blue .wysiwyg__content blockquote p,
.wysiwyg.bg-light-gray .wysiwyg__content blockquote p {
    color: var(--color-primary);
}

.wysiwyg.bg-gradient-blue .wysiwyg__content blockquote cite,
.wysiwyg.bg-navy .wysiwyg__content blockquote cite,
.wysiwyg.bg-medium-blue .wysiwyg__content blockquote cite,
.wysiwyg.bg-primary .wysiwyg__content blockquote cite,
.wysiwyg.bg-light .wysiwyg__content blockquote cite,
.wysiwyg.bg-light-gray .wysiwyg__content blockquote cite {
    color: rgba(255, 255, 255, 0.7);
}

/* Dark background - Lists */
.wysiwyg.bg-gradient-blue .wysiwyg__content ul li::before {
    color: var(--color-primary);
    background: var(--color-white);
}

.wysiwyg.bg-gradient-blue .wysiwyg__content ol li::before {
    color: var(--color-white);
}

/* Dark background - HR */
.wysiwyg.bg-gradient-blue .wysiwyg__content hr {
    border-top-color: rgba(255, 255, 255, 0.2);
}

/* Dark background - Two Column Text Section */
.wysiwyg.bg-gradient-blue .wysiwyg__two-col-item h4,
.wysiwyg.bg-gradient-blue .wysiwyg__two-col-item h5 {
    color: var(--color-heading-inverse);
}

.wysiwyg.bg-gradient-blue .wysiwyg__two-col-item p {
    color: var(--color-text-inverse);
}

.wysiwyg.bg-gradient-blue .wysiwyg__two-col-list li {
    color: var(--color-text-inverse);
}

.wysiwyg.bg-gradient-blue .wysiwyg__two-col-list li i,
.wysiwyg.bg-dark .wysiwyg__two-col-list li i,
.wysiwyg.bg-light-blue .wysiwyg__two-col-list li i,
.wysiwyg.bg-primary .wysiwyg__two-col-list li i {
    color: var(--color-primary);
    background-color: var(--color-white);
}

@media( max-width : 768px ) {
    .btn-group + .sub-heading {
        margin-top: 30px;
    }
}


/* ==========================================================================
   TABLET BREAKPOINT (768px+)
   ========================================================================== */

@media (min-width: 768px) {
    .wysiwyg__content {
        max-width: 800px;
    }

    /* Floated Images - Tablet */
    .wysiwyg__content img.alignright {
        float: right;
        width: 50%;
        max-width: 360px;
        margin-left: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
    }

    .bg-gradient-blue .wysiwyg__content img.alignright {
        border: 16px solid var(--color-border-image-dark);
    }

    .wysiwyg__content img.alignleft {
        float: left;
        width: 50%;
        max-width: 360px;
        margin-right: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
    }

    /* Blockquote - Tablet */
    .wysiwyg__content blockquote {
        padding: 50px;
    }

    /* Button Group - Tablet */
    .btn-group {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 30px;
    }

    .btn-group .btn {
        width: auto;
    }

    .wysiwyg__cta-banner-content {
        flex: 1;
    }

    .wysiwyg__cta-banner-buttons {
        flex-direction: row;
    }

    /* Two Column Text Section - Tablet */
    .wysiwyg__two-col .row {
        row-gap: var(--spacing-lg);
    }
}


/* ==========================================================================
   DESKTOP BREAKPOINT (1200px+)
   ========================================================================== */

@media (min-width: 1200px) {
    .wysiwyg__content {
        max-width: 1488px;
    }

    /* Floated Images - Desktop */
    .wysiwyg__content img.alignright {
        width: 40%;
        max-width: 719px;
        margin-left: var(--spacing-xl);
        margin-top: 30px;
        margin-bottom: 40px!important;
    }

    .wysiwyg__content img.alignleft {
        width: 40%;
        max-width: 400px;
        margin-right: var(--spacing-xl);
    }

    .wysiwyg__content img {
        border-width: 16px;
    }

    /* Blockquote - Desktop */
    .wysiwyg__content blockquote {
        padding: 50px;
    }

    /* Two Column Text Section - Desktop */
    .wysiwyg__two-col {
        margin: var(--spacing-xl) 0;
    }

    .wysiwyg__two-col .row {
        row-gap: 0;
    }
}

@media( min-width : 1600px ) {
    .wysiwyg__cta-banner {
        flex-direction: row;
        text-align: left;
    }
}


/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .wysiwyg {
        background: none !important;
    }

    .wysiwyg__content img.alignright,
    .wysiwyg__content img.alignleft {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 1em 0;
    }

    .wysiwyg__content blockquote {
        border-left: 3px solid #000;
        background: none;
        padding-left: 1em;
    }

    .wysiwyg__content blockquote::before {
        display: none;
    }

    .wysiwyg.bg-gradient-blue .wysiwyg__content h2,
    .wysiwyg.bg-gradient-blue .wysiwyg__content h3,
    .wysiwyg.bg-gradient-blue .wysiwyg__content h4,
    .wysiwyg.bg-gradient-blue .wysiwyg__content p,
    .wysiwyg.bg-gradient-blue .wysiwyg__content li {
        color: #000;
    }

    .wysiwyg.bg-gradient-blue .wysiwyg__two-col-item h4,
    .wysiwyg.bg-gradient-blue .wysiwyg__two-col-item h5,
    .wysiwyg.bg-gradient-blue .wysiwyg__two-col-item p,
    .wysiwyg.bg-gradient-blue .wysiwyg__two-col-list li {
        color: #000;
    }
}