/* Font Awesome icon styling for the COF site.
   Icons replaced the old emoji; these rules give them brand colours
   per container (green on light tiles, white/gold on dark ones). */

i.fa-solid, i.fa-brands, i.fa-regular { line-height: 1; }

/* Light tiles → brand green */
.program-icon-wrap > i, .result-header-icon > i, .ht-card-icon > i, .fc-icon > i,
.calc-card-icon > i, .symptom-icon > i, .awareness-tab-icon > i, .mission-icon > i,
.rt-icon > i, .disclaimer-icon > i, .cp-promise-icon > i, .cp-secondary-icon > i,
.cp-conf-icon > i, .cp-upload-icon > i, .c-icon > i, .nav-icon > i {
  color: var(--green-700, #137547);
}

/* Pastel protection cards → icon tinted to match its tile */
.cp-card-icon > i, .cp-feature-icon > i { color: var(--green-800, #0d5232); }
.cp-card-fgm .cp-card-icon > i,   .cp-feature-card.fgm .cp-feature-icon > i   { color: #be185d; }
.cp-card-child .cp-card-icon > i, .cp-feature-card.child .cp-feature-icon > i { color: #1d4ed8; }
.cp-card-hiv .cp-card-icon > i,   .cp-feature-card.hiv .cp-feature-icon > i   { color: #7c3aed; }
.cp-card-gbv .cp-card-icon > i,   .cp-feature-card.gbv .cp-feature-icon > i   { color: #dc2626; }

/* Health-tool tiles carry their category colour as an inline pastel background */
[style*="#eff6ff"] > i { color: #1d4ed8; }
[style*="#f0fdf4"] > i { color: #15803d; }
[style*="#f0fdfa"] > i { color: #0f766e; }
[style*="#f5f3ff"] > i { color: #7c3aed; }
[style*="#fdf2f8"] > i { color: #be185d; }
[style*="#fff7ed"] > i { color: #c2410c; }

/* Gradient journey badges */
.journey-icon > i { color: #fff; }

/* Solid green / coloured tiles → white */
.about-value-icon > i, .ig-icon > i, .help-icon > i { color: #fff; }

/* Tiles sitting on dark sections → gold */
.stat-icon-wrap > i, .contact-detail-icon > i, .footer-contact-icon > i { color: var(--gold, #f4a61d); }
.program-icon-wrap[style*="255,255,255"] > i { color: #fff; }

/* Mission icons were 2rem emoji; give the glyph a soft badge so it reads as a designed mark */
.mission-icon > i {
  display: inline-grid; place-items: center;
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--green-50, #f0faf4); font-size: 1.6rem;
}

/* Gentle hover lift on program and tool cards */
.program-card:hover .program-icon-wrap > i,
.ht-card:hover .ht-card-icon > i,
.calc-card:hover .calc-card-icon > i { transform: scale(1.12); }
.program-icon-wrap > i, .ht-card-icon > i, .calc-card-icon > i { transition: transform .25s ease; }