/**
 * GPRO Divi Icons — front-end utility.
 *
 * Provides .gpro-icon for inserting any Divi ETmodules icon inline with
 * text. The font itself ships with the Divi theme and is loaded by Divi
 * when icons appear elsewhere on the page.
 *
 * Usage:
 *   <span class="gpro-icon">&#xe052;</span>
 *
 *   <!-- Scaled up, inline with smaller text: -->
 *   <span class="gpro-icon" style="font-size: 1.7em;">&#xe052;</span>
 *
 * Alignment, size-independent:
 *   vertical-align: middle aligns the icon's box centre to the text's
 *   x-height middle. ETmodules positions its glyphs in the lower half
 *   of the em-box, so on its own that lands a touch low — the
 *   translateY then lifts the icon by a percentage of its own height,
 *   which scales proportionally at any font-size.
 *
 *   Fine-tune sitewide if needed by overriding --gpro-icon-offset in
 *   the child theme :root, e.g.
 *     :root { --gpro-icon-offset: -8%; }
 *
 *   Or per-instance with an inline transform:
 *     style="transform: translateY(-12%);"
 *
 * line-height: 1 strips the inherited line-box height, otherwise the
 * icon inherits the surrounding text's line-height and gets offset.
 *
 * Color and size cascade naturally — inherit from the surrounding text
 * unless overridden inline (style="font-size: 32px; color: red;") or
 * via a more specific rule.
 */

.gpro-icon {
    font-family: 'ETmodules', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    display: inline-block;
    vertical-align: middle;
    transform: translateY(var(--gpro-icon-offset, -10%));
}