/* ===================================
   HOW WE WORK PAGE - ICON FIXES
   =================================== */

/* Ensure all icons are visible with proper contrast */
.visual-icon {
    width: 60px !important;
    height: 60px !important;
    background: #CA623F !important;
    color: #FAF9F8 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
    flex-shrink: 0 !important;
}

.visual-icon i {
    color: #FAF9F8 !important;
    font-size: 1.75rem !important;
    opacity: 1 !important;
    display: inline-block !important;
}

/* Check list icons */
.check-list-dark i {
    color: #CA623F !important;
    font-size: 1.25rem !important;
    margin-top: 0.25rem !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
}

/* Phase number icons */
.phase-number-large {
    font-size: 5rem !important;
    font-weight: 900 !important;
    color: #CA623F !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

/* Phase section header icons (box, clipboard-check) */
.phase-col h4 i,
.phase-body h4 i {
    color: #CA623F !important;
    font-size: 1.1rem !important;
    margin-right: 0.5rem !important;
    opacity: 1 !important;
}

/* Deliverable list icons */
.deliverable-list i,
.deliverables-list i {
    color: #CA623F !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
}

/* Mini CTA icons */
.mini-cta-text i {
    color: #CA623F !important;
    margin-right: 0.5rem !important;
    opacity: 1 !important;
}

.mini-cta-buttons i,
.phase-mini-cta i {
    color: currentColor !important;
    margin-right: 0.5rem !important;
    opacity: 1 !important;
}

/* Button icons */
.btn i {
    opacity: 1 !important;
    display: inline-block !important;
}

.btn-primary i {
    color: #FAF9F8 !important;
}

.btn-secondary i {
    color: #273E47 !important;
}

/* CTA icons in buttons */
.phase-cta-mini i,
.sticky-cta-bar i {
    color: #FAF9F8 !important;
    margin-left: 0.5rem !important;
    opacity: 1 !important;
}

/* Success story icons */
.success-story-icon {
    width: 50px !important;
    height: 50px !important;
    background: #CA623F !important;
    color: #FAF9F8 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    flex-shrink: 0 !important;
}

.success-story-icon i {
    color: #FAF9F8 !important;
    opacity: 1 !important;
}

/* Top banner icon */
.top-banner i {
    color: #FAF9F8 !important;
    margin-right: 0.5rem !important;
    opacity: 1 !important;
}

/* Navigation icons */
.btn-nav i,
.btn-cta-premium i {
    color: #FAF9F8 !important;
    margin-right: 0.5rem !important;
    opacity: 1 !important;
}

/* Mobile menu icon */
.mobile-menu-btn i {
    color: #273E47 !important;
    opacity: 1 !important;
}

/* Ensure proper contrast ratios for ADA compliance */
/* Background #CA623F with white text #FAF9F8 = 4.68:1 contrast ratio (WCAG AA compliant for large text) */
/* Primary color #CA623F on white background = 4.68:1 (WCAG AA compliant) */

/* Additional icon visibility fixes */
.fas, .far, .fab, .fa {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    opacity: 1 !important;
}

/* Force Font Awesome to load */
i[class*="fa-"]::before {
    opacity: 1 !important;
    display: inline-block !important;
}

/* Hover states for icons */
.visual-card:hover .visual-icon {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(202, 98, 63, 0.3);
}

/* Focus states for accessibility */
.visual-icon:focus,
button:focus i,
a:focus i {
    outline: 3px solid #CA623F !important;
    outline-offset: 2px !important;
}

/* Ensure icons don't inherit transparent colors */
i {
    opacity: 1 !important;
}

/* All phase icons */
.phase-detailed i {
    opacity: 1 !important;
}