/* ============================================================
   UI ICONS
   Inline-sprite icons emitted by the {% icon %} shortcode as
   <svg class="icon"><use href="#icon-NAME"></use></svg>.
   The sprite symbols carry their own stroke="currentColor" and
   fill="none"; the rules below set sizing and a safe color base
   so an icon inherits surrounding text color in both themes.
   The -active variants bake in the lime accent and must NOT be
   forced back to currentColor, so we never set fill/stroke on the
   inner geometry from here — only on the .icon wrapper.
   ============================================================ */

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  display: inline-block;
  vertical-align: -0.18em;
  color: inherit;
}

/* Size modifiers */
.icon--sm { width: 1em;   height: 1em;   vertical-align: -0.12em; }
.icon--lg { width: 1.6em; height: 1.6em; }
.icon--xl { width: 2.2em; height: 2.2em; }

/* Force the brand accent regardless of inherited text color */
.icon--accent { color: var(--accent); }

/* ---- Service cards (homepage + /services/) ----
   The icon sits above the small mono .service-tag label. Kept at a
   fixed px size so it reads larger than the 10px tag text. On the
   featured (dark) card it picks up the lime accent, matching the
   tag's own accent treatment in sections.css. */
.service-icon {
  display: inline-flex;
  color: var(--ink);
  margin-bottom: 12px;
}
.service-icon .icon {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}
.service-card.featured .service-icon { color: var(--accent); }