/**
 * Fix FAQ Section Positioning in Blog Pages
 * Centers and properly positions FAQ sections
 */

/* FAQ Section Centering and Styling */
.faq-section,
section.faq-section {
    max-width: 800px !important;
    margin: 60px auto !important;
    padding: 40px 20px !important;
    text-align: center !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.faq-section h2 {
    text-align: center !important;
    margin-bottom: 30px !important;
    color: #212529 !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
}

.faq-item {
    text-align: left !important;
    margin-bottom: 25px !important;
    padding: 20px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    border-left: 4px solid #004085 !important;
}

.faq-item h3 {
    color: #004085 !important;
    margin-bottom: 10px !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

.faq-item p {
    color: #495057 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Ensure FAQ is not stuck at bottom */
.faq-section:last-child {
    margin-bottom: 60px !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .faq-section {
        margin: 40px auto !important;
        padding: 30px 15px !important;
    }
    
    .faq-section h2 {
        font-size: 1.5rem !important;
    }
    
    .faq-item {
        padding: 15px !important;
    }
    
    .faq-item h3 {
        font-size: 1.1rem !important;
    }
}

/* Fix positioning in blog articles */
.blog-content .faq-section,
article .faq-section,
main .faq-section {
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
}