/*
 * Sizing/colour bridge for the Lucide SVGs injected by js/lucide-icons.js.
 *
 * The <svg> lives INSIDE the original <i>, so it only has to answer two
 * questions: how big, and what colour. Both are answered by inheritance:
 *   1em          -> matches whatever font-size the theme set on the <i>
 *   currentColor -> matches whatever color the theme set, including :hover
 * That means every existing rule and transition keeps working untouched.
 */

.has-lucide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* Kill any leftover glyph from the old broken icon fonts. */
    font-family: inherit;
}

.has-lucide:before,
.has-lucide:after {
    content: none !important;
}

.has-lucide > svg {
    width: 1em;
    height: 1em;
    display: block;
    /* Inherit the theme's colour, including hover states. */
    color: inherit;
}

/* Outline icons: Lucide's default look. */
.has-lucide > svg.lucide {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Brand logos are solid shapes, not outlines. */
.has-lucide > svg.lucide-brand {
    fill: currentColor;
    stroke: none;
}

/*
 * A few spots gave the <i> no font-size of its own, so 1em would resolve to
 * the inherited body size and look too small. These restore the intended
 * visual weight.
 */
.service-block-one .inner-block .icon .has-lucide,
.service-block-two .inner-block .icon .has-lucide {
    font-size: 50px;
}

.contact-info-block .icon .has-lucide {
    font-size: 22px;
}

.main-header .ui-btn .has-lucide,
.mobile-nav-toggler .has-lucide {
    font-size: 18px;
}

.social-links .has-lucide {
    font-size: 15px;
}

/* Star ratings read better filled than outlined. */
.rating .has-lucide > svg.lucide {
    fill: currentColor;
}