/**
 * =============================================================================
 * SHARED CTA (CALL TO ACTION) STYLES
 * =============================================================================
 * 
 * File:        css/cta-styles.css
 * Version:     1.2.0
 * Theme:       Tractor Works Child Theme
 * 
 * Purpose:     Styles for the reusable CTA section component.
 *              Used by template-parts/cta-section.php
 * 
 * CHANGELOG:
 * 
 * v1.2.0 (January 2026)
 *   - Removed redundant :root block (variables now in style.css)
 * 
 * v1.1.0
 *   - Primary button now uses tan background instead of green
 *   - Better contrast against dark green CTA background
 * 
 * NOTE: CSS variables (--tw-forest-green, etc.) are defined in the main
 *       style.css file and inherited by this file.
 * 
 * =============================================================================
 */


/* =============================================================================
   1. CTA SECTION CONTAINER
   =============================================================================
   
   Dark green background with centered content.
   
*/

.tw-cta {
    padding: 80px 40px;
    background: linear-gradient(135deg, var(--tw-dark-green) 0%, var(--tw-forest-green) 100%);
    text-align: center;
}

.tw-cta-inner {
    max-width: 600px;
    margin: 0 auto;
}


/* =============================================================================
   2. CTA HEADING
   =============================================================================
*/

.tw-cta-heading {
    font-family: var(--tw-font-body);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--tw-white);
    margin: 0 0 16px 0;
}


/* =============================================================================
   3. CTA TEXT
   =============================================================================
*/

.tw-cta-text {
    font-family: var(--tw-font-body);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--tw-warm-white);
    margin: 0 0 30px 0;
}


/* =============================================================================
   4. CTA BUTTONS
   =============================================================================
*/

.tw-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Base button styles */
.tw-cta .tw-btn {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--tw-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Primary button (tan/beige background - eye-catching on dark background) */
.tw-cta .tw-btn-primary {
    background-color: var(--tw-tan);
    color: var(--tw-dark-brown);
    border: 2px solid var(--tw-tan);
}

.tw-cta .tw-btn-primary:hover {
    background-color: var(--tw-light-tan);
    border-color: var(--tw-light-tan);
    color: var(--tw-dark-brown);
    transform: translateY(-2px);
}

/* Secondary button (outline style) */
.tw-cta .tw-btn-secondary {
    background-color: transparent;
    color: var(--tw-white);
    border: 2px solid var(--tw-forest-green);
}

.tw-cta .tw-btn-secondary:hover {
    background-color: var(--tw-forest-green);
    color: var(--tw-white);
}


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

@media (max-width: 768px) {
    
    .tw-cta {
        padding: 60px 20px;
    }
    
    /* Stack buttons vertically on mobile */
    .tw-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .tw-cta .tw-btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
    
}