/*
 * Nxtzen shared icon normalization.
 *
 * The icon selector renders every glyph as:
 *   <span class="nxtzen-icon"><i class="bi bi-..."></i></span>          (Bootstrap Icons)
 *   <span class="nxtzen-icon"><i class="fa-solid fa-..."></i></span>    (Font Awesome Free)
 *
 * Goal: both libraries occupy the SAME box and visual size so a Font Awesome
 * glyph never renders larger than a Bootstrap one, WITHOUT changing any card
 * dimensions, spacing, colour, or hover behaviour. The wrapper is deliberately
 * transparent — it inherits font-size and colour from whatever container the
 * theme already styles (.service-card .icon, .growth-stage > span,
 * .hosting-pillar-marker, .cap-scroll span), so the existing layout drives size
 * and this only equalizes the two icon fonts within it.
 */
.nxtzen-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* Inherit the size/colour the existing container already defines. */
    font-size: inherit;
    color: inherit;
    vertical-align: middle;
}

/* Both icon fonts share one metric box. width:1em keeps FA (which defaults to
   inline-block with its own width) the same visual footprint as BI. */
.nxtzen-icon > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-size: inherit;
    color: inherit;
}

/* Font Awesome forces font-size on .fa-solid via its own utility rules; pin it
   back to inherit so it matches the surrounding text/box size like BI does. */
.nxtzen-icon > i.fa-solid,
.nxtzen-icon > i[class*="fa-"] {
    font-size: inherit;
}

/* Capability strip: the .cap-scroll span is an inline-flex row with its own
   `gap`, so the icon needs no extra margin here (kept as a no-op comment to
   document that spacing is owned by .cap-scroll span). */