/**
 * Force Tabs to Work - Emergency Fix
 * This CSS forces tabs to hide/show correctly
 *
 * IMPORTANT: Tabs 2, 3, 4 are NESTED INSIDE tab 1 due to Elementor structure
 * Structure:
 * tab-b4a0bc4 (always visible as container)
 *   └─ elementor-357 (Roofing direct content)
 *   └─ tab-5fdae94 (Foundation nested)
 *   └─ tab-bd8d76d (Manufactured nested)
 *   └─ tab-c42f684 (Pest nested)
 */

/* Keep tab-b4a0bc4 container always visible (so nested tabs can show) */
.tab-content-list .tab-content.tab-b4a0bc4 {
    display: block !important;
    opacity: 1 !important;
}

/* Hide tab-b4a0bc4's DIRECT CONTENT (Roofing) by default */
.tab-content-list .tab-content.tab-b4a0bc4 > .elementor-357 {
    display: none !important;
}

/* Show tab-b4a0bc4's direct content ONLY when it's active */
.tab-content-list .tab-content.tab-b4a0bc4.active > .elementor-357 {
    display: block !important;
}

/* Hide all nested tabs by default */
.tab-content-list .tab-content.tab-b4a0bc4 > .tab-content {
    display: none !important;
}

/* Show only the active nested tab */
.tab-content-list .tab-content.tab-b4a0bc4 > .tab-content.active {
    display: block !important;
}

/**
 * Standardize Tab Heights
 *
 * PROBLEM: Tabs with short titles (1 line) are shorter than tabs with long titles (2 lines)
 * SOLUTION: Force all tabs to have uniform height by using flexbox and min-height
 */

/* Make all tab navigation items have consistent height */
.tab-nav-list .tab-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 80px !important;
    align-items: center !important;
}

/* Center the title text vertically within the tab */
.tab-nav-list .tab-nav .tab-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: 200px !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}