/* ═══════════════════════════════════════════════════════
   Icon utility classes — Phosphor Icons (ph-fill, ph-*)
   https://phosphoricons.com/
   ═══════════════════════════════════════════════════════ */

/* --- Color classes (matching site CSS variables) --- */
.icon-blue   { color: #5b8af8; }
.icon-purple { color: #7c60f5; }
.icon-cyan   { color: #22d3ee; }
.icon-green  { color: #34d399; }
.icon-yellow { color: #fbbf24; }
.icon-red    { color: #f87171; }
.icon-muted  { color: #64748b; }
.icon-white  { color: #e2e8f0; }

/* --- Size helpers --- */
.icon-sm  { font-size: 1rem; }
.icon-md  { font-size: 1.25rem; }
.icon-lg  { font-size: 1.5rem; }
.icon-xl  { font-size: 2rem; }
.icon-2xl { font-size: 2.5rem; }
.icon-3xl { font-size: 3rem; }

/* --- Related tools card icon --- */
.related-tool-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
}

/* --- Result page tool badge icon --- */
.result-tool-badge i[class*="ph"] {
    font-size: 1.5rem;
    vertical-align: -0.125em;
}

/* --- Empty state icon --- */
.empty-state__icon {
    font-size: 3rem;
    opacity: 0.45;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.empty-state__icon i[class*="ph"] {
    font-size: inherit;
}

/* --- SEO audit category nav button icon --- */
.seo-nav-btn i[class*="ph"] {
    vertical-align: -0.15em;
    margin-right: 0.3rem;
}

/* --- Result metadata icons (clock, eye, copy) --- */
.result-meta-item i[class*="ph"],
.result-views i[class*="ph"] {
    font-size: 0.9rem;
    vertical-align: -0.1em;
    opacity: 0.65;
}

/* --- SSL status icon --- */
.ssl-status-icon i[class*="ph"] {
    font-size: 2.5rem;
    line-height: 1;
}

/* --- Chrome extension feature icon --- */
.ext-feature-icon i[class*="ph"] {
    font-size: 1.4rem;
    vertical-align: -0.15em;
}

/* --- Inline icon alignment (generic) --- */
i[class*="ph"] {
    display: inline-block;
    vertical-align: -0.125em;
}