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

/* ==========================================================================
   2. 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;               
    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-color: #a8b7ce !important; /* FIXED: Swapped shorthand background for strict color */
    background-image: none !important;
    color: #fff !important;
    border: 0 none #000;
    padding: 10px 15px;      
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Hover style match: Changes to white background with dark text */
.accordion-trigger:hover {
    background-color: #ffffff !important; /* FIXED: Swapped shorthand background for strict color */
    background-image: none !important;
    color: #333 !important;
    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;
}

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

/* ==========================================================================
   DYNAMIC PANELS MATRIX ENGINE OVERRIDES (Add this here!)
   ========================================================================== */
/* 1. Hide every single tab sheet out of sight by default */
.tab-panels-matrix .tab-content-panel {
    display: none !important;
    visibility: hidden !important;
}

/* 2. Reveal ONLY the single active panel sheet */
.tab-panels-matrix .tab-content-panel.is-visible {
    display: block !important;
    visibility: visible !important;
}

/* ==========================================================================
   3. UNIFIED ACTIVE TAB HIGHLIGHT (MOVED TO BOTTOM FOR DOMINANCE)
   ========================================================================== */
div.tab-headers-strip button.accordion-trigger.active-tab,
div.tab-headers-strip a.accordion-trigger.active-tab,
.tab-headers-strip .active-tab {
    background-color: #182659 !important; /* Your deep dark blue */
    background-image: none !important;
    color: #ffffff !important;
    border: 0 none #000000 !important;
}