/* ==========================================================================
   1. GLOBAL UTILITY RESET
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   2. REUSABLE STRUCTURAL TEXT ELEMENTS (Full Width Blocks)
   ========================================================================== */
.full-width-text {
    width: 100%;
    margin-top: 0;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Global button active highlight placed securely underneath full-width-text */
.tab-headers-strip a.active-tab {
    background: #182659 none repeat left top !important;
    color: #fff !important;
    border: 0 none #000 !important;
}

/* Reusable Generic Main Section Headings (Mirrored from your old heading3 settings) */
.full-width-heading {
    width: 100%;
    font: normal normal 24px 'Open Sans', 'Arial', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    color: #3B3B3B;
    text-decoration: none;
    text-align: left;
    line-height: 1.3;      
    margin-top: 20px;       
    margin-bottom: 5px;    
    padding: 0;
    text-transform: none;
}

/* Reusable Generic Sub-Headings / Accent Blocks (Italicized with Extra Line Space) */
.full-width-subheading {
    width: 100%;
    font: normal normal 18px 'Roboto', 'Arial', sans-serif; 
    font-size: 18px;
    font-style: normal;                                     
    font-weight: 400;
    color: #000;
    text-decoration: none;
    text-align: left;
    line-height: 24px;
    margin-top: 15px;       
    margin-bottom: 15px;    /* Adds a full extra line space worth of padding underneath */
    padding: 0;
    text-transform: none;
}

.full-width-report-by {
    width: 100%;
    font: italic normal 18px 'Roboto', 'Arial', sans-serif; 
    font-size: 18px;
    font-style: italic;                                     
    font-weight: 400;
    color: #000;
    text-decoration: none;
    text-align: left;
    line-height: 24px;
    margin-top: 15px;       
    margin-bottom: 30px;    /* Adds a full extra line space worth of padding underneath */
    padding: 0;
    text-transform: none;
}

.full-width-list {
    width: 100%;
    margin-top: 0;
    margin-bottom: 25px;
    padding-left: 25px;
}

.full-width-list li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.full-width-list li:last-child {
    margin-bottom: 0;
}

.permanent-highlight {
    background-color: #ffffcc !important; /* CHANGED: Soft readable yellow background behind the text */
    border-left: 6px solid #ffff00;       /* Keeps your solid yellow accent line on the left */
    padding: 15px 18px !important;        /* CHANGED: Adds padding to all sides so text doesn't touch the edges */
    border-radius: 4px;                   /* Adds clean, slightly rounded corners to the highlight box */
    display: block;
    box-sizing: border-box;
}


/* ==========================================================================
   3. HORIZONTAL WRAPPING TAB DISPLAY CONTROLS
   ========================================================================== */
.accordion-container {
    display: flex !important;
    flex-direction: column !important; /* Forces panels and header strip into a vertical stack */
    width: 100%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 40px;               /* NEW: Adds a clean one-line gap buffer at the absolute end of the page */
    position: relative;
    box-shadow: none;
}

/* Horizontal tab layout row strip */
.tab-headers-strip {
    display: flex !important;
    flex-direction: row !important;     
    flex-wrap: wrap !important;         /* Auto-wraps buttons onto a new row if screen is narrow */
    gap: 5px !important;                
    width: 100% !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    order: -1 !important;               /* MAGIC: Forces tab headers to render at the absolute top */
}

/* Tab Header Buttons - Mirrored from your old website builder design */
.accordion-trigger {
    display: block;
    font-size: 15px;
    font-style: normal;
    font: normal normal 15px 'Montserrat', Arial, sans-serif;
    font-family: 'Montserrat', Arial, sans-serif;
    text-decoration: none;
    text-align: left;
    line-height: 15px;
    text-transform: none;
    background: #a8b7ce none repeat left top;
    color: #fff;
    border: 0 none #000;
    padding: 10px 15px;      
    transition: background 0.2s ease, color 0.2s ease;
}

/* Hover style match: Changes to white background with dark text */
.accordion-trigger:hover {
    background: #fff none repeat left top;
    color: #333;
    border: 0 none #000;
}

/* Hide Content Panes by default */
.accordion-item .accordion-content {
    display: none;
    padding: 20px 0;
    background: #fff;        
}

/* Automatically display Section 1 text on initial page landing layout engine states */
.accordion-item[data-active="true"] .accordion-content {
    display: block;
}

/* ==========================================================================
   4. INTERNAL MEDIA LAYOUT ROWS (Images & Text Column Handling)
   ========================================================================== */
.media-block {
    display: flex;
    align-items: center;     /* Vertically centers text and image regardless of heights */
    gap: 30px;               
    margin-bottom: 40px;     
    width: 100%;
    clear: both;             
}

/* 2-Column Right configuration layout orientation adjustments */
.media-block.img-right {
    flex-direction: row;     /* Handled natively by ordering layout text first in HTML structure */
}

/* 3-Column Specific Rules */
.media-block.three-column .media-figure {
    flex: 0 0 25% !important;
    max-width: 250px !important;
    min-width: 120px !important;
}

/* Standard 2-Column Image Sizing Container */
.media-figure {
    flex: 0 0 35%;           /* Allocates up to 35% width for the image */
    max-width: 400px;        /* Safety cap to keep images from breaking design layout grid */
    min-width: 150px;        
}

/* Intelligent Fluid Image Scaling Rules for different image dimensions */
.media-figure img {
    max-width: 100%;         
    width: auto;             /* Retains native pixel size for tiny images (stops pixelation stretch) */
    height: auto;            
    display: block;
    margin: 0 auto;          
    border-radius: 4px;      
}

/* Fluid Text Column Box */
.media-body {
    flex: 1;
}

.media-body p {
    margin-top: 0;
    margin-bottom: 1em;
    line-height: 1.6;
}

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

/* ==========================================================================
   5. RESPONSIVE DEVICES OPTIMIZATIONS (iPhone & iPad Mobile Breakpoints)
   ========================================================================== */
@media (max-width: 768px) {
    /* Collapse side-by-side columns inside content rows into a clean vertical flow */
    div.media-block {
        flex-direction: column !important; 
        gap: 20px !important;
    }
    
    /* Force mobile media containers to expand cleanly full width */
    .media-block .media-figure,
    .media-block.three-column .media-figure {
        flex: 0 0 auto !important;         
        width: 100% !important;            
        max-width: 100% !important;
    }

    /* Scales images nicely to fill smaller screen layouts safely without blurriness */
    .media-block .media-figure img {
        width: 100% !important;            
        max-width: 450px !important;       
    }
}