/* ========================================
   CORRECTIVE FIXES - INVESTMENT OUTLOOK PAGE
   Ensure Proper Rendering & Structure
   Fix Layout, Spacing, Visual Hierarchy
   ======================================== */

/* Ensure page background is visible */
body {
    background: #ffffff !important;
}

/* Hero section fixes */
.hero {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Section visibility fixes */
.section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.section-light {
    background: #ffffff !important;
}

.section-off-white {
    background: #f8f9fa !important;
}

.section-dark {
    background: linear-gradient(135deg, #272147 0%, #3a316a 100%) !important;
    color: #ffffff !important;
}

/* Container fixes for proper width */
.container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Section title fixes */
.section-title {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #272147 !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
    display: block !important;
    visibility: visible !important;
}

.section-dark .section-title {
    color: #ffffff !important;
}

/* Section intro fixes */
.section-intro {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    text-align: center !important;
    max-width: 900px !important;
    margin: 0 auto 3rem !important;
    color: #2c2c2c !important;
    display: block !important;
    visibility: visible !important;
}

.section-dark .section-intro {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Outlook grid fixes */
.outlook-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    margin: 2.5rem 0 !important;
    visibility: visible !important;
}

.outlook-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #ffffff !important;
    padding: 2rem !important;
    min-height: 200px !important;
}

/* Icon fixes */
.outlook-icon {
    display: block !important;
    visibility: visible !important;
    margin-bottom: 1rem !important;
}

.outlook-icon svg {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
}

/* Chart section fixes */
.chart-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 3rem 0 !important;
    padding: 2.5rem !important;
    background: #ffffff !important;
}

.chart-section-title {
    display: block !important;
    visibility: visible !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
}

.chart-wrapper-large {
    display: block !important;
    visibility: visible !important;
    max-width: 100% !important;
    height: 320px !important;
    position: relative !important;
}

.chart-wrapper-large canvas {
    display: block !important;
    visibility: visible !important;
    max-height: 320px !important;
    width: 100% !important;
}

/* Feature image section fixes */
.feature-image-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
    margin: 3rem 0 !important;
    visibility: visible !important;
}

.feature-content,
.feature-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.feature-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    visibility: visible !important;
}

/* Framework grid fixes */
.framework-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
    margin: 3rem 0 !important;
    visibility: visible !important;
}

.framework-step {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #ffffff !important;
    padding: 2rem !important;
}

/* CTA section fixes */
.outlook-cta {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, #272147 0%, #3a316a 100%) !important;
    padding: 3.5rem 2.5rem !important;
    text-align: center !important;
}

.cta-buttons {
    display: flex !important;
    visibility: visible !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}

/* Content grid fixes */
.content-grid {
    display: block !important;
    visibility: visible !important;
    max-width: 900px !important;
    margin: 2.5rem auto !important;
}

.content-grid p {
    display: block !important;
    visibility: visible !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    margin-bottom: 1.25rem !important;
}

/* Responsive fixes for tablet */
@media (max-width: 991px) {
    .outlook-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .framework-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .feature-image-section {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .chart-wrapper-large {
        height: 280px !important;
    }
}

/* Mobile responsive fixes */
@media (max-width: 767px) {
    .section-title {
        font-size: 1.75rem !important;
    }
    
    .section-intro {
        font-size: 0.95rem !important;
    }
    
    .outlook-card,
    .framework-step {
        padding: 1.5rem !important;
    }
    
    .chart-section {
        padding: 2rem 1.5rem !important;
    }
    
    .chart-wrapper-large {
        height: 240px !important;
    }
    
    .outlook-cta {
        padding: 2.5rem 1.5rem !important;
    }
    
    .cta-buttons {
        flex-direction: column !important;
    }
    
    .cta-buttons .btn {
        width: 100% !important;
    }
}

/* Print visibility fix */
@media print {
    * {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }
}