/* =================================================================
   ICONS
   Gradient icon-font glyphs, framed icons, icon glow.
   Loaded by inc/enqueue.php (order matters: see the list there).
   ================================================================= */

/* ---------------------------------------------------------------
   Gradient icons
   IP Guardian icons are a custom icon FONT (<i class="ipg ...">),
   so Elementor colours the glyph via `color`. A gradient on text
   is done with background-clip:text on the glyph — that's the
   default below.

   Inline-SVG fill/stroke is kept as a fallback for any icon that
   Elementor renders as <svg> (references #ipg-icon-gradient,
   injected via inc/svg-defs.php).

   NOTE: the gradient is expressed twice — as this linear-gradient
   AND as the SVG def in inc/svg-defs.php. If you retune it, update
   both. Neither format can read the other.

   Add class in Elementor > Advanced > CSS Classes:
     .gradient-icon        default (icon font glyph, or filled svg)
     .gradient-icon.line   stroke / outline svg icons
--------------------------------------------------------------- */

.gradient-icon * {
  overflow: visible;
}

/* The glyph ::before must be IN-FLOW for the gradient to paint:
   some breakpoints/widgets position it absolute + translateX(-50%),
   and a transformed out-of-flow pseudo is EXCLUDED from the
   background-clip:text mask — the gradient then has no glyph to
   clip to and the icon renders invisible (the Safari bug; also
   reproduced in Chrome at mobile widths). Forcing it static keeps
   the glyph inside the clip on every browser and breakpoint.
   (The left:0% rule below predates this and is now mostly
   redundant, but harmless.) */
.gradient-icon .elementor-icon i::before {
    position: static !important;
    transform: none !important;
}

.gradient-icon .elementor-icon i:before {
    left: 0% !important;
}

.gradient-icon i {
  background: linear-gradient(180deg, var(--ipg-powder) 17.79%, var(--ipg-cobalt) 100%) !important;
  color: white !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  padding-bottom: 0.1em;
  height: 1.1em !important; 
}

.framed-icon i {
    width: 1.5em !important;
    height: 1.5em !important;
    padding: 0.8em;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fallback: inline SVG, coloured via `fill` */
.gradient-icon svg,
.gradient-icon svg path {
    fill: url(#ipg-icon-gradient);
}

/* Stroke / outline SVG icons */
.gradient-icon.line svg,
.gradient-icon.line svg path {
    fill: none;
    stroke: url(#ipg-icon-gradient);
}

/* ---------------------------------------------------------------
   Icon glow — soft blue halo, independent of .gradient-icon.
     .icon-glow                 glow only
     .gradient-icon.icon-glow   gradient + glow
   drop-shadow (not text-shadow) so it haloes the rendered glyph,
   gradient and all. Blur is in em, so the glow scales with the
   icon size instead of overwhelming small icons.
--------------------------------------------------------------- */
/* The filter lives on the WRAPPER (.elementor-icon), not the <i>:
   Safari/WebKit has a long-standing bug where a filter on the same
   element as -webkit-background-clip:text breaks the clip and the
   glyph vanishes. drop-shadow on the parent haloes the rendered
   (already-clipped) glyph identically, on every browser. */
.icon-glow .elementor-icon {
    /* literal-palette fallback for Safari < 16.4 (no rgb(from …)).
       Keep in sync with --ipg-arctic / --ipg-powder. */
    filter:
        drop-shadow(0 0 0.04em rgba(175, 233, 253, 0.55))
        drop-shadow(0 0 0.12em rgba(124, 195, 255, 0.28)) !important;
}
@supports (color: rgb(from red r g b / 0.5)) {
    .icon-glow .elementor-icon {
        filter:
            drop-shadow(0 0 0.04em rgb(from var(--ipg-arctic) r g b / 0.55))
            drop-shadow(0 0 0.12em rgb(from var(--ipg-powder) r g b / 0.28)) !important;
    }
}

/* ---------------------------------------------------------------
   Per-post icon — output of [ipg_page_icon] (inc/icons.php), which
   reuses Elementor's .elementor-icon markup so .gradient-icon and
   .icon-glow apply unchanged. Size it per placement by setting the
   var on the wrapper (Elementor Custom CSS on the widget/container):
     .ipg-page-icon { --ipg-icon-size: 64px; }
   or give the shortcode class="hero-icon" and target that.
--------------------------------------------------------------- */
.ipg-page-icon {
    display: inline-block;
    line-height: 1;
}
.ipg-page-icon .elementor-icon {
    font-size: var(--ipg-icon-size, 50px);
}