/**
 * Bowerscapes FA7 Duotone — Bridge CSS
 *
 * Loaded LAST so it can override FA7 defaults.
 * Three jobs:
 *   1. Override font-display:block → swap so icons are visible before the
 *      webfont finishes loading (FOIT fix).
 *   2. Wire Elementor's color control into FA7's --fa-primary-color.
 *   3. Ensure the icon <i> element has proper dimensions inside Elementor.
 */

/* ── 1. font-display: swap override ─────────────────────────────────────────
 *
 * FA7's CSS uses font-display:block, which hides ALL icon glyphs until the
 * webfont downloads. Since most FA7 icon unicodes are in the Private Use Area,
 * "invisible" with block means they render as zero-width/zero-height —
 * making the icon picker look empty.
 *
 * Declaring the same @font-face with font-display:swap means the browser
 * shows a system-font fallback immediately (so elements have dimensions) and
 * swaps in the icon font once loaded.
 *
 * The src URL is relative to THIS file's location:
 *   assets/duotone-bridge.css  →  assets/fontawesome/webfonts/
 */
@font-face {
    font-family: "Font Awesome 7 Duotone";
    font-style:  normal;
    font-weight: 900;
    font-display: swap;
    src: url('fontawesome/webfonts/fa-duotone-900.woff2') format('woff2');
}
@font-face {
    font-family: "Font Awesome 7 Duotone";
    font-style:  normal;
    font-weight: 300;
    font-display: swap;
    src: url('fontawesome/webfonts/fa-duotone-light-300.woff2') format('woff2');
}
@font-face {
    font-family: "Font Awesome 7 Duotone";
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url('fontawesome/webfonts/fa-duotone-regular-400.woff2') format('woff2');
}
@font-face {
    font-family: "Font Awesome 7 Duotone";
    font-style:  normal;
    font-weight: 100;
    font-display: swap;
    src: url('fontawesome/webfonts/fa-duotone-thin-100.woff2') format('woff2');
}
@font-face {
    font-family: "Font Awesome 7 Sharp Duotone";
    font-style:  normal;
    font-weight: 900;
    font-display: swap;
    src: url('fontawesome/webfonts/fa-sharp-duotone-solid-900.woff2') format('woff2');
}
@font-face {
    font-family: "Font Awesome 7 Sharp Duotone";
    font-style:  normal;
    font-weight: 300;
    font-display: swap;
    src: url('fontawesome/webfonts/fa-sharp-duotone-light-300.woff2') format('woff2');
}
@font-face {
    font-family: "Font Awesome 7 Sharp Duotone";
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url('fontawesome/webfonts/fa-sharp-duotone-regular-400.woff2') format('woff2');
}
@font-face {
    font-family: "Font Awesome 7 Sharp Duotone";
    font-style:  normal;
    font-weight: 100;
    font-display: swap;
    src: url('fontawesome/webfonts/fa-sharp-duotone-thin-100.woff2') format('woff2');
}

/* ── 2. Elementor color control → FA7 primary variable ──────────────────────
 *
 * Target both the long-form classes AND the single-token FA7 aliases
 * (fad, fadr, fadl, fadt, fasds, fasdr, fasdl, fasdt).
 * Elementor now uses the alias as displayPrefix, so the picker grid
 * creates <i class="fad fa-leaf"> elements — those need the color wiring.
 */
.elementor-icon i.fa-duotone,
.elementor-icon i.fad,
.elementor-icon i.fadr,
.elementor-icon i.fadl,
.elementor-icon i.fadt,
.elementor-icon i.fa-sharp-duotone,
.elementor-icon i.fasds,
.elementor-icon i.fasdr,
.elementor-icon i.fasdl,
.elementor-icon i.fasdt,
.elementor-icon-wrapper i.fa-duotone,
.elementor-icon-wrapper i.fad,
.elementor-icon-wrapper i.fadr,
.elementor-icon-wrapper i.fadl,
.elementor-icon-wrapper i.fadt,
.elementor-icon-wrapper i.fa-sharp-duotone,
.elementor-icon-wrapper i.fasds,
.elementor-icon-wrapper i.fasdr,
.elementor-icon-wrapper i.fasdl,
.elementor-icon-wrapper i.fasdt,
.elementor-widget-icon i.fa-duotone,
.elementor-widget-icon i.fad,
.elementor-widget-icon i.fadr,
.elementor-widget-icon i.fadl,
.elementor-widget-icon i.fadt,
.elementor-widget-icon i.fa-sharp-duotone,
.elementor-widget-icon i.fasds,
.elementor-widget-icon i.fasdr,
.elementor-widget-icon i.fasdl,
.elementor-widget-icon i.fasdt {
    --fa-primary-color: currentColor;
}

/* ── 3. Proper dimensions in picker and on frontend ──────────────────────────
 *
 * Ensures icon cells always have visible dimensions while fonts load,
 * and that the FA7 font assignment cannot be reset by theme/Elementor CSS.
 * Includes both long-form and alias selectors.
 */
i.fa-duotone,
i.fa-sharp-duotone,
i.fad, i.fadr, i.fadl, i.fadt,
i.fasds, i.fasdr, i.fasdl, i.fasdt {
    position:   relative;
    display:    inline-block;
    min-height: 1em;
    min-width:  1.25em;
    font-style:  normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

i.fa-sharp-duotone,
i.fasds, i.fasdr, i.fasdl, i.fasdt {
    font-family: var(--_fa-family, "Font Awesome 7 Sharp Duotone") !important;
}

i.fa-duotone,
i.fad, i.fadr, i.fadl, i.fadt {
    font-family: var(--_fa-family, "Font Awesome 7 Duotone") !important;
}

/* ── Global :root opacity defaults ──────────────────────────────────────────*/
:root {
    --fa-primary-opacity:   1;
    --fa-secondary-opacity: 0.4;
}