/**
 * Double WYSIWYG Block
 * CSS for flexible double column WYSIWYG content block
 * Supports different layout ratios and column reversal
 * 
 * @package Salient
 * @since 1.0
 */

/* ==========================================================================
   BLOCK CONTAINER & LAYOUT
   ========================================================================== */

.double-wysiwyg-block-wrap {
    position: relative;
    z-index: 1;
}

/* Fill Screen Layout */
.double-wysiwyg-block-wrap.fill-screen {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.double-wysiwyg-block-wrap.fill-screen .double-wysiwyg-block-inner {
    border-radius: 0;
}

.double-wysiwyg-block-inner {
    position: relative;
    overflow: hidden;
    padding: 60px 0 !important;
}

.double-wysiwyg-block-wrap .page-container {
    position: relative;
    z-index: 2;
}

.double-wysiwyg-block-wrap .block-content {
    position: relative;
    z-index: 2;
}

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

/* Background color schemes with text color adaptation */
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #0F2027"],
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #0F2027"] .title h2,
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #0F2027"] .subtitle h3,
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #0F2027"] .double-wysiwyg-column-content {
    color: #ffffff !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #1B71B6"],
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #1B71B6"] .title h2,
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #1B71B6"] .subtitle h3,
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #1B71B6"] .double-wysiwyg-column-content {
    color: #ffffff !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #24A7D9"],
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #24A7D9"] .title h2,
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #24A7D9"] .subtitle h3,
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #24A7D9"] .double-wysiwyg-column-content {
    color: #ffffff !important;
}

/* Transparent background - dark text */
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: transparent"],
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: transparent"] .title h2,
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: transparent"] .subtitle h3,
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: transparent"] .double-wysiwyg-column-content {
    color: #1b1d21 !important;
}

/* White background - dark text */
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #ffffff"],
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #ffffff"] .title h2,
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #ffffff"] .subtitle h3,
.double-wysiwyg-block-wrap .double-wysiwyg-block-inner[style*="background-color: #ffffff"] .double-wysiwyg-column-content {
    color: #1b1d21 !important;
}

/* Headings */
.double-wysiwyg-block-wrap .title h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 0 0 24px 0 !important;
}

.double-wysiwyg-block-wrap .subtitle h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 16px 0 !important;
}

/* ==========================================================================
   CONTENT LAYOUT
   ========================================================================== */

.double-wysiwyg-content {
    width: 100%;
    max-width: 100%;
}

.double-wysiwyg-column {
    display: flex;
    flex-direction: column;
}

.double-wysiwyg-column-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

/* ==========================================================================
   GRID LAYOUT
   ========================================================================== */

/* Grid container */
.double-wysiwyg-content .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* Desktop grid - 12 columns */
@media (min-width: 1024px) {
    .double-wysiwyg-content .grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* Ensure columns take full width on mobile */
.double-wysiwyg-column {
    grid-column: span 1 / span 1;
}

@media (min-width: 1024px) {
    .double-wysiwyg-column.lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }
    
    .double-wysiwyg-column.lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }
    
    .double-wysiwyg-column.lg\:col-span-6 {
        grid-column: span 6 / span 6;
    }
    
    .double-wysiwyg-column.lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }
    
    .double-wysiwyg-column.lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }
}

/* ==========================================================================
   RICH TEXT CONTENT STYLES
   ========================================================================== */

/* Apply shared rich text styles */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content {
    /* Base typography */
    font-family: 'Open Sans', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.5em !important;
    ;
}

/* Headings */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 24px 0 !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 20px 0 !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 18px 0 !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content h4 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 16px 0 !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content h5 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 14px 0 !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content h6 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
}

/* Paragraphs */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content p {
    font-size: 18px !important;
    line-height: 1.5em !important;
    margin: 0 0 16px 0 !important;
}

/* Lists */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content ul,
.double-wysiwyg-block-wrap .double-wysiwyg-column-content ol {
    font-size: 18px !important;
    line-height: 1.5em !important;
    margin: 0 0 16px 0 !important;
    padding-left: 24px !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content li {
    margin: 0 0 8px 0 !important;
}

/* Links */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content a {
    color: #42bcfc !important;
    text-decoration: underline !important;
    transition: color 0.3s ease !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content a:hover {
    color: #1b1d21 !important;
}

/* Emphasis */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content strong,
.double-wysiwyg-block-wrap .double-wysiwyg-column-content b {
    font-weight: 700 !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content em,
.double-wysiwyg-block-wrap .double-wysiwyg-column-content i {
    font-style: italic !important;
}

/* Blockquotes */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content blockquote {
    font-style: italic !important;
    margin: 0 0 20px 0 !important;
    padding: 16px 20px !important;
    border-left: 4px solid #42bcfc !important;
    background-color: rgba(66, 188, 252, 0.05) !important;
    border-radius: 8px !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content cite {
    font-size: 16px !important;
    font-style: normal !important;
    opacity: 0.8 !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content q {
    font-style: italic !important;
}

/* Code */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content code {
    font-family: 'Courier New', monospace !important;
    font-size: 16px !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content pre {
    font-family: 'Courier New', monospace !important;
    font-size: 16px !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    padding: 16px !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    margin: 0 0 20px 0 !important;
}

/* Horizontal Rule */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content hr {
    border: none !important;
    height: 2px !important;
    background-color: rgba(66, 188, 252, 0.3) !important;
    margin: 24px 0 !important;
}

/* Underline */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content u {
    text-decoration: underline !important;
}

/* Images */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 16px 0 !important;
}

/* Figures */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content figure {
    margin: 20px 0 !important;
    text-align: center !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content figcaption {
    font-size: 16px !important;
    font-style: italic !important;
    margin: 8px 0 0 0 !important;
    opacity: 0.8 !important;
}

/* Small text */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content small {
    font-size: 14px !important;
}

/* Marked text */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content mark {
    background-color: rgba(255, 255, 0, 0.3) !important;
    padding: 2px 4px !important;
}

/* Deleted text */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content del {
    text-decoration: line-through !important;
}

/* Inserted text */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content ins {
    text-decoration: underline !important;
}

/* Subscript and Superscript */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content sub {
    vertical-align: sub !important;
    font-size: 14px !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content sup {
    vertical-align: super !important;
    font-size: 14px !important;
}

/* Abbreviations */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content abbr {
    border-bottom: 1px dotted !important;
    cursor: help !important;
}

/* Address */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content address {
    font-style: italic !important;
    margin: 0 0 16px 0 !important;
}

/* Time */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content time {
    font-weight: 600 !important;
}

/* Variables */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content var {
    font-style: italic !important;
}

/* Sample output */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content samp {
    font-family: 'Courier New', monospace !important;
}

/* Keyboard input */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content kbd {
    font-family: 'Courier New', monospace !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Definition lists */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content dl {
    margin: 0 0 16px 0 !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content dt {
    font-weight: 600 !important;
    margin: 0 0 4px 0 !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content dd {
    margin: 0 0 12px 0 !important;
    padding-left: 16px !important;
}

/* Tables */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 0 20px 0 !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content th,
.double-wysiwyg-block-wrap .double-wysiwyg-column-content td {
    padding: 12px !important;
    text-align: left !important;
    border: 1px solid rgba(66, 188, 252, 0.2) !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content th {
    background-color: rgba(66, 188, 252, 0.1) !important;
    font-weight: 600 !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content tr:nth-child(even) {
    background-color: rgba(66, 188, 252, 0.05) !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content tr:hover {
    background-color: rgba(66, 188, 252, 0.1) !important;
}

/* Table responsive wrapper */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content .table-responsive {
    overflow-x: auto !important;
    margin: 0 0 20px 0 !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Large screens (xl) */
@media (min-width: 1280px) {
    .double-wysiwyg-block-inner {
        padding: 80px 0 !important;
    }
    
    .double-wysiwyg-block-wrap .title h2 {
        font-size: 48px !important;
    }
    
    .double-wysiwyg-block-wrap .subtitle h3 {
        font-size: 28px !important;
    }
}

/* Medium screens (lg) */
@media (min-width: 1024px) {
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h1 {
        font-size: 40px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h2 {
        font-size: 36px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h3 {
        font-size: 32px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .double-wysiwyg-block-inner {
        padding: 40px 0 !important;
    }
    
    .double-wysiwyg-block-wrap .title h2 {
        font-size: 32px !important;
    }
    
    .double-wysiwyg-block-wrap .subtitle h3 {
        font-size: 20px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content {
        font-size: 16px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h1 {
        font-size: 28px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h2 {
        font-size: 24px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h3 {
        font-size: 20px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h4 {
        font-size: 18px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h5 {
        font-size: 16px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h6 {
        font-size: 14px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content p {
        font-size: 16px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content ul,
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content ol {
        font-size: 16px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .double-wysiwyg-block-inner {
        padding: 30px 0 !important;
    }
    
    .double-wysiwyg-block-wrap .title h2 {
        font-size: 28px !important;
    }
    
    .double-wysiwyg-block-wrap .subtitle h3 {
        font-size: 18px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content {
        font-size: 14px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h1 {
        font-size: 24px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h2 {
        font-size: 20px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h3 {
        font-size: 18px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h4 {
        font-size: 16px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h5 {
        font-size: 14px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content h6 {
        font-size: 12px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content p {
        font-size: 14px !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content ul,
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content ol {
        font-size: 14px !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Focus states */
.double-wysiwyg-block-wrap .double-wysiwyg-column-content a:focus {
    outline: 2px solid #42bcfc !important;
    outline-offset: 2px !important;
}

.double-wysiwyg-block-wrap .double-wysiwyg-column-content button:focus {
    outline: 2px solid #42bcfc !important;
    outline-offset: 2px !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content a {
        transition: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content a {
        color: #0000ff !important;
    }
}

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

@media print {
    .double-wysiwyg-block-wrap {
        break-inside: avoid !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content {
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    
    .double-wysiwyg-block-wrap .double-wysiwyg-column-content img {
        max-width: 100% !important;
        page-break-inside: avoid !important;
    }
}