/**
 * icons.css  --  FrugalNova Centralized Icon Styles
 * ===================================================
 * This file normalizes ALL icon rendering across the site.
 *
 * Icon systems in use:
 *   1. Phosphor Icons (CDN: unpkg.com/@phosphor-icons/web)
 *      Usage: <i class="ph ph-rocket"></i>
 *             <i class="ph-fill ph-star"></i>
 *
 *   2. HTML entities for symbols (arrows, quotes, dashes)
 *      Usage: &rarr;  &mdash;  &#9733;  etc.
 *      These are pure ASCII in the source and render universally.
 *
 * ENCODING RULES (DO NOT VIOLATE):
 *   - No raw emoji in this file.
 *   - No non-ASCII characters.
 *   - If you need a special char in a CSS `content:` property,
 *     use the CSS unicode escape: content: '\2605'  (not content: '\u2605')
 *
 * NOTE: Box-drawing chars like --- and === in comments are intentional ASCII.
 */

/* =================================================================
   1. PHOSPHOR ICON BASE NORMALIZATION
   ================================================================= */

/* Ensure icons within spans/divs display inline-flex and center */
.ph,
.ph-fill,
[class^="ph-"],
[class*=" ph-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}

/* Prevent icons from being selected as text */
.ph,
.ph-fill {
  user-select: none;
  -webkit-user-select: none;
}

/* =================================================================
   2. ICON SIZE TOKENS
   Use these classes: .fn-icon-sm  .fn-icon-md  .fn-icon-lg  .fn-icon-xl
   ================================================================= */

.fn-icon-xs  { font-size: 0.75rem; }
.fn-icon-sm  { font-size: 1rem; }
.fn-icon-md  { font-size: 1.25rem; }   /* default */
.fn-icon-lg  { font-size: 1.5rem; }
.fn-icon-xl  { font-size: 2rem; }
.fn-icon-2xl { font-size: 2.5rem; }
.fn-icon-3xl { font-size: 3rem; }

/* =================================================================
   3. ICON-IN-ORB CONTEXT (trust bar, who-we-help panels, about widgets)
   These are the <span class="trust-item-icon"> / <span class="wh-icon-emoji">
   / <span class="w-icon"> etc. wrappers that now contain <i class="ph...">
   ================================================================= */

/* Trust bar icons */
.trust-item-icon i {
  font-size: 1.4rem;
  color: inherit;
}

/* Who-we-help panel icon emojis */
.wh-icon-emoji i {
  font-size: 1.6rem;
  color: inherit;
}

/* About widget icons */
.w-icon i {
  font-size: 1.4rem;
  color: inherit;
}

/* Mini-feature icons */
.mf-icon i {
  font-size: 1.2rem;
  color: inherit;
}

/* Client logo icons */
.client-logo-icon i {
  font-size: 1.6rem;
  color: inherit;
}

/* Generic fn-icon span wrapper (used by fix script) */
.fn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fn-icon i {
  font-size: inherit;
  color: inherit;
  line-height: 1;
}

/* =================================================================
   4. MEGA MENU ICONS
   ================================================================= */

.mega-icon i {
  font-size: 0.95rem;
  color: inherit;
}

/* =================================================================
   5. QUIZ / FORM ICONS
   ================================================================= */

.qopt-icon i,
.qb-icon i {
  font-size: 1.2rem;
  color: inherit;
}

/* =================================================================
   6. CTA SECTION ICONS (feature lists, check marks)
   ================================================================= */

/* Check marks in feature lists - used in service pages */
.feature-check i,
.check-item i {
  font-size: 1rem;
  color: var(--clr-accent, #B5246A);
}

/* =================================================================
   7. STAR RATING DISPLAY
   The testi-star spans now contain &#9733; which renders as a solid star.
   This section ensures proper golden color.
   ================================================================= */

.testi-star {
  color: #f59e0b;         /* Amber gold - visible on all backgrounds */
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
}

/* Featured review badge star (now &#9733;) */
.featured-badge {
  /* already styled in trust.css - just ensure star renders gold */
  color: #f59e0b;
}

/* =================================================================
   8. ICON COLOR UTILITIES
   ================================================================= */

.fn-icon-accent  { color: var(--clr-accent,  #B5246A); }
.fn-icon-primary { color: var(--clr-primary, #1a2e44); }
.fn-icon-muted   { color: var(--clr-text-muted, #4a4a58); }
.fn-icon-gold    { color: #f59e0b; }
.fn-icon-green   { color: #22c55e; }
.fn-icon-white   { color: #ffffff; }
.fn-icon-blue    { color: #3b82f6; }
.fn-icon-rose    { color: #f43f5e; }
.fn-icon-purple  { color: #a855f7; }

/* =================================================================
   9. ICON ANIMATION UTILITIES
   ================================================================= */

/* Gentle pulse for attention-drawing icons */
@keyframes fn-icon-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}

.fn-icon-pulse {
  animation: fn-icon-pulse 2s ease-in-out infinite;
}

/* Spin for loading/sync icons */
@keyframes fn-icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.fn-icon-spin {
  animation: fn-icon-spin 1s linear infinite;
}

/* =================================================================
   10. ACCESSIBILITY
   ================================================================= */

/* Decorative icons should be hidden from screen readers */
[aria-hidden="true"].ph,
[aria-hidden="true"].ph-fill,
[aria-hidden="true"] i.ph,
[aria-hidden="true"] i.ph-fill {
  speak: none;
}