/**
 * =============================================================================
 * FAQ PAGE STYLES
 * =============================================================================
 * 
 * File:        css/faq-styles.css
 * Version:     1.0.0
 * Theme:       Tractor Works Child Theme
 * 
 * Purpose:     Styles for FAQ pages built in Elementor.
 * 
 * Previously:  This was in WPCode as "FAQ Page Styles (Simplified)"
 * 
 * HOW TO USE IN ELEMENTOR:
 * 
 * Only 3 class names are needed:
 * 
 *   CLASS           WHERE TO ADD IT
 *   --------------  ------------------------------------------------
 *   faq-page        Outermost container (wraps everything)
 *   faq-header      Banner container at top (title + intro)
 *   faq-cta         Bottom "Still have questions?" container
 * 
 * Everything else is styled automatically based on element type
 * (H1, H2, H3, paragraphs) within these containers.
 * 
 * =============================================================================
 */


/* =============================================================================
   1. FAQ HEADER BANNER
   =============================================================================
   
   Dark green section at top of the page.
   Add class "faq-header" to the Container holding the title + intro.
   
*/

.faq-header {
    background-color: var(--tw-dark-green) !important;
    padding: 30px 30px 35px 30px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    margin-bottom: 50px !important;
    border-radius: 6px !important;
    max-width: calc(100% - 40px) !important;
}

/* Page title (H1) inside the header - white text */
.faq-header h1,
.faq-header .elementor-heading-title {
    font-family: var(--tw-font-heading) !important;
    color: var(--tw-warm-white) !important;
}

/* Intro paragraph inside the header */
.faq-header p {
    color: #E8E4DE !important;
    font-size: 1.1rem !important;
    margin-top: 12px !important;
}

/* Links inside the header intro */
.faq-header a {
    color: var(--tw-light-tan) !important;
    text-decoration: underline !important;
}

.faq-header a:hover {
    color: var(--tw-warm-white) !important;
}


/* =============================================================================
   2. FAQ QUESTIONS (H2 headings)
   =============================================================================
   
   All H2 elements inside .faq-page get the green left border style.
   
*/

.faq-page h2,
.faq-page h2.elementor-heading-title,
.faq-page .elementor-widget-heading h2.elementor-heading-title {
    font-family: var(--tw-font-heading) !important;
    border-left: 4px solid var(--tw-forest-green) !important;
    padding-left: 20px !important;
    color: var(--tw-dark-green) !important;
}


/* =============================================================================
   3. FAQ ANSWERS (paragraphs)
   =============================================================================
   
   Paragraph text inside .faq-page gets slight indent to align with questions.
   
*/

.faq-page .elementor-widget-text-editor p {
    color: var(--tw-dark-brown) !important;
    padding-left: 24px;
}

/* Don't indent paragraphs inside the header or CTA box */
.faq-header p,
.faq-cta p {
    padding-left: 0 !important;
}


/* =============================================================================
   4. FAQ CTA BOX
   =============================================================================
   
   "Still have questions?" box at bottom of page.
   Add class "faq-cta" to the Container.
   
*/

.faq-cta {
    background-color: var(--tw-cream) !important;
    border: 1px solid var(--tw-light-tan) !important;
    border-radius: 4px !important;
    padding: 30px !important;
    margin-top: 50px !important;
    text-align: center !important;
}

/* Heading inside CTA box */
.faq-cta h3,
.faq-cta .elementor-heading-title {
    color: var(--tw-dark-green) !important;
    margin-bottom: 10px !important;
}

/* Text inside CTA box */
.faq-cta p {
    color: var(--tw-earth-brown) !important;
    margin-bottom: 0 !important;
}

/* Links inside CTA box */
.faq-cta a {
    color: var(--tw-forest-green) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.faq-cta a:hover {
    color: var(--tw-dark-green) !important;
    text-decoration: underline !important;
}


/* =============================================================================
   5. RESPONSIVE STYLES
   =============================================================================
*/

@media (max-width: 768px) {
    
    .faq-header {
        margin-left: 10px !important;
        margin-right: 10px !important;
        max-width: calc(100% - 20px) !important;
        padding: 25px 20px 25px 20px !important;
    }
    
    .faq-page h2 {
        font-size: 1.3rem !important;
    }
    
}