/* Updated Pages CSS - WCAG AA Compliance Focused */

/* Hero sections - High contrast text */
.hero-section h1 {
    color: var(--text-heading);        /* Teal for large headings */
    font-size: 3rem;                   /* Ensure large enough */
    font-weight: 700;
}

.hero-section p {
    color: var(--text-primary);        /* Emerald for body text */
    font-size: 1.25rem;
}

/* CTA Sections - Accessible combinations */
.cta-section {
    background: linear-gradient(90deg, 
        var(--secondary-emerald) 0%, 
        #1B5E20 100%);                 /* Emerald gradient */
}

.cta-section h2,
.cta-section h3 {
    color: #FFFFFF;                    /* White text on emerald */
    font-weight: 700;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.95);
}

/* Alternative CTA with purple */
.cta-section-purple {
    background: linear-gradient(90deg, 
        var(--accent-purple) 0%, 
        #5E35B1 100%);
}

/* Footer - High contrast dark background */
footer {
    background-color: #1B5E20;         /* Dark emerald instead of teal */
    color: rgba(255, 255, 255, 0.95);
}

footer h5 {
    color: #FFFFFF;
    font-weight: 600;
}

footer a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #FFFFFF;
}

/* Value cards - Accessible text colors */
.value-card {
    padding: 2rem;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.value-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(46, 125, 50, 0.12);
    border-left: 4px solid var(--secondary-emerald);
}

.value-card h4 {
    color: var(--accent-purple);       /* Purple for card titles */
    font-weight: 600;
    margin-bottom: 1rem;
}

.value-card p {
    color: var(--text-primary);        /* Emerald for card text */
}

/* Stats/Numbers - High contrast */
.stat-number {
    color: var(--secondary-emerald);   /* Emerald for numbers */
    font-size: 2.5rem;
    font-weight: 700;
}

.stat-label {
    color: var(--text-primary);
    font-weight: 500;
}

/* Section backgrounds - Safe tints */
.bg-section-light {
    background-color: var(--bg-light);
}

.bg-section-emerald-subtle {
    background: linear-gradient(180deg, 
        rgba(46, 125, 50, 0.03) 0%, 
        rgba(46, 125, 50, 0.06) 100%);
}

.bg-section-purple-subtle {
    background: linear-gradient(180deg, 
        rgba(126, 87, 194, 0.03) 0%, 
        rgba(126, 87, 194, 0.06) 100%);
}

/* Replace problematic teal subtle background */
.bg-section-teal-subtle {
    background: var(--bg-section-emerald-subtle);
}

/* Button variations - Updated for accessibility */
.btn-emerald {
    background-color: var(--secondary-emerald);
    border-color: var(--secondary-emerald);
    color: #FFFFFF;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-emerald:hover {
    background-color: #1B5E20;
    border-color: #1B5E20;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.btn-purple {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
    color: #FFFFFF;
    font-weight: 600;
}

.btn-purple:hover {
    background-color: #5E35B1;
    border-color: #5E35B1;
    color: #FFFFFF;
}

/* Updated coral button - Large text requirement */
.btn-coral {
    background-color: var(--accent-coral);
    border-color: var(--accent-coral);
    color: #FFFFFF;
    font-weight: 700;                  /* Bold required */
    font-size: 1.125rem;               /* Large text required */
    padding: 0.75rem 2rem;             /* Larger padding */
}

.btn-coral:hover {
    background-color: #FF6F47;
    border-color: #FF6F47;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Icon circles - Updated colors */
.icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.icon-circle-emerald {
    background: linear-gradient(135deg, 
        var(--secondary-emerald), 
        #1B5E20);
    color: #FFFFFF;
}

.icon-circle-purple {
    background: linear-gradient(135deg, 
        var(--accent-purple), 
        #5E35B1);
    color: #FFFFFF;
}

.icon-circle-teal {
    background: linear-gradient(135deg, 
        var(--primary-teal), 
        var(--primary-teal-dark));
    color: #FFFFFF;
    font-size: 2.25rem;                /* Larger icons for teal */
}

/* Process steps - Accessible numbering */
.step-number {
    background: var(--secondary-emerald);
    color: #FFFFFF;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.step-title {
    color: var(--accent-purple);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.step-description {
    color: var(--text-primary);
}

/* Contact page - Accessibility focused */
.contact-info h4 {
    color: var(--accent-purple);
}

.contact-info p {
    color: var(--text-primary);
}

.contact-highlight {
    background: rgba(46, 125, 50, 0.1);
    border-left: 4px solid var(--secondary-emerald);
    padding: 1.5rem;
    border-radius: 4px;
}

/* Walking time badge - Safe background */
.walking-time {
    background: rgba(46, 125, 50, 0.1);
    border: 1px solid rgba(46, 125, 50, 0.2);
    color: var(--secondary-emerald);
    font-weight: 600;
}

/* Accessibility notice - High contrast */
.accessibility-notice {
    background: rgba(126, 87, 194, 0.1);
    border: 1px solid rgba(126, 87, 194, 0.2);
    color: var(--accent-purple);
    font-weight: 500;
}

/* Form styling - Enhanced accessibility */
.form-label {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-control {
    border: 2px solid #E0E0E0;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: var(--secondary-emerald);
    box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.25);
    outline: none;
}

/* Error states */
.form-control.is-invalid {
    border-color: #DC3545;
}

.form-control.is-invalid:focus {
    border-color: #DC3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Success states */
.form-control.is-valid {
    border-color: var(--secondary-emerald);
}

/* Job posting cards - Accessible styling */
.job-card {
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    background: #FFFFFF;
}

.job-card:hover {
    border-color: var(--secondary-emerald);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.1);
}

.job-title {
    color: var(--accent-purple);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.job-location {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.job-salary {
    color: var(--secondary-emerald);
    font-weight: 600;
}

/* Mobile responsive updates */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2.25rem;            /* Still large enough for teal */
    }
    
    .icon-circle {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .icon-circle-teal {
        font-size: 1.75rem;            /* Maintain larger size for teal */
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .btn-coral {
        font-size: 1rem;               /* Minimum for accessibility */
        font-weight: 700;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .value-card,
    .service-card,
    .job-card {
        border-width: 2px;
    }
    
    .btn-coral {
        font-weight: 800;              /* Extra bold in high contrast */
    }
    
    .step-number {
        border: 2px solid #FFFFFF;
    }
}

/* Print styles - High contrast */
@media print {
    .hero-section,
    .cta-section {
        background: #FFFFFF !important;
        color: #000000 !important;
    }
    
    .btn-coral,
    .btn-emerald,
    .btn-purple {
        background: #FFFFFF !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }
}