/* ══ Icons — "Icon: …" style variations (inc/block-styles.php) ════════════
   One glyph set (Bootstrap Icons, MIT), drawn as CSS masks so each icon takes
   the color of the text around it. Three shapes, picked by block type:

     Paragraph → small glyph before the text      (top-bar address / phone)
     Heading   → round badge above the heading     (contact cards)
     Group     → round badge left of its contents  ("Call Us at" + number)

   The badge is a currentColor circle with the glyph cut out of it, so the
   section background shows through the glyph on light and dark sections.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --bt-icon-pin   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6'/%3E%3C/svg%3E");
  --bt-icon-phone : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z'/%3E%3C/svg%3E");
  --bt-icon-clock : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z'/%3E%3C/svg%3E");
  --bt-icon-mail  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z'/%3E%3C/svg%3E");
}

.is-style-icon-pin   { --bt-icon: var(--bt-icon-pin); }
.is-style-icon-phone { --bt-icon: var(--bt-icon-phone); }
.is-style-icon-clock { --bt-icon: var(--bt-icon-clock); }
.is-style-icon-mail  { --bt-icon: var(--bt-icon-mail); }

/* ── Paragraph — small inline glyph ──────────────────────────────────────── */
p[class*="is-style-icon-"]::before {
  content          : "";
  display          : inline-block;
  width            : 0.8em;
  height           : 0.8em;
  margin-right     : 0.6em;
  vertical-align   : -0.05em;
  background-color : currentColor;
  -webkit-mask     : var(--bt-icon) center / contain no-repeat;
          mask     : var(--bt-icon) center / contain no-repeat;
}

/* ── Heading + Group — round badge with the glyph cut out ────────────────── */
:is(h1, h2, h3, h4, h5, h6)[class*="is-style-icon-"]::before,
.wp-block-group[class*="is-style-icon-"]::before {
  content          : "";
  flex             : 0 0 auto;
  display          : block;
  width            : 2.25rem;
  height           : 2.25rem;
  border-radius    : 50%;
  background-color : currentColor;
  -webkit-mask     : var(--bt-icon) center / 45% no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite : xor;
          mask     : var(--bt-icon) center / 45% no-repeat, linear-gradient(#000 0 0);
          mask-composite : exclude;
}
:is(h1, h2, h3, h4, h5, h6)[class*="is-style-icon-"]::before { width: 1.75rem; height: 1.75rem; margin-bottom: 0.75rem; }

/* ══ Forge RX — line icons from the design export ═════════════════════════
   Same mechanism: a mask in the text colour. On an empty Group with the
   "bt-glyph" class the icon draws on its own, no badge (step and trust icons);
   --bt-glyph sets its size. The US flag keeps its colours (a picture, not a mask). */

:root {
  --bt-icon-quiz   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5h9.5v15H5.5v-11'/%3E%3Cpath d='M5.5 4.5h3.5v4H5.5z'/%3E%3Cpath d='M9.5 12h6'/%3E%3Cpath d='M9.5 15.5h4'/%3E%3C/svg%3E");
  --bt-icon-shield : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5l7 3v5c0 4-2.9 7.2-7 8.5-4.1-1.3-7-4.5-7-8.5v-5l7-3z'/%3E%3Cpath d='M12 9v6'/%3E%3Cpath d='M9 12h6'/%3E%3C/svg%3E");
  --bt-icon-truck  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5h11v8h-11z'/%3E%3Cpath d='M14.5 12h3.2l2.8 3v2.5h-6z'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3Cpath d='M6 6.5h6'/%3E%3C/svg%3E");
  --bt-icon-pill   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8' width='17' height='8.5' rx='4.25'/%3E%3Cpath d='M12 8v8.5'/%3E%3Cpath d='M6.5 11.5h2'/%3E%3C/svg%3E");
  --bt-icon-box    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.2L12 4l8.5 4.2v7.6L12 20l-8.5-4.2V8.2z'/%3E%3Cpath d='M3.5 8.2L12 12.4l8.5-4.2'/%3E%3Cpath d='M12 12.4V20'/%3E%3C/svg%3E");
  --bt-icon-chat   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.5c0 3.6-3.6 6.5-8 6.5-1 0-2-.15-2.9-.42L4.5 20l1.1-3.1C4.6 15.7 4 14.2 4 12.5 4 8.9 7.6 6 12 6s8 2.9 8 6.5z'/%3E%3Cpath d='M9 12.5h6'/%3E%3C/svg%3E");
  --bt-icon-user   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.7'/%3E%3Cpath d='M4.8 19.5c0-3.6 3.2-5.8 7.2-5.8s7.2 2.2 7.2 5.8'/%3E%3C/svg%3E");
  --bt-flag-us     : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 24'%3E%3Crect width='34' height='22' y='1' fill='%23F6F5F2'/%3E%3Crect width='34' height='3.14' y='1' fill='%23B3202C'/%3E%3Crect width='34' height='3.14' y='7.28' fill='%23B3202C'/%3E%3Crect width='34' height='3.14' y='13.57' fill='%23B3202C'/%3E%3Crect width='34' height='3.14' y='19.86' fill='%23B3202C'/%3E%3Crect width='15.5' height='12.6' y='1' fill='%231F2F4A'/%3E%3C/svg%3E");
}

.is-style-icon-quiz   { --bt-icon: var(--bt-icon-quiz); }
.is-style-icon-shield { --bt-icon: var(--bt-icon-shield); }
.is-style-icon-truck  { --bt-icon: var(--bt-icon-truck); }
.is-style-icon-pill   { --bt-icon: var(--bt-icon-pill); }
.is-style-icon-box    { --bt-icon: var(--bt-icon-box); }
.is-style-icon-chat   { --bt-icon: var(--bt-icon-chat); }

/* ── Group + bt-glyph — the icon alone, no badge ─────────────────────────── */
.wp-block-group.bt-glyph { --bt-glyph: 1.875rem; width: var(--bt-glyph); height: var(--bt-glyph); min-height: 0; }
.wp-block-group.bt-glyph[class*="is-style-icon-"]::before {
  width              : 100%;
  height             : 100%;
  border-radius      : 0;
  -webkit-mask       : var(--bt-icon) center / contain no-repeat;
  -webkit-mask-composite : source-over;
          mask       : var(--bt-icon) center / contain no-repeat;
          mask-composite : add;
}
.wp-block-group.bt-glyph.is-style-icon-flag::before { background: var(--bt-flag-us) center / contain no-repeat; -webkit-mask: none; mask: none; }
.wp-block-group.bt-glyph--lg   { --bt-glyph: 2.125rem; }
.wp-block-group.bt-glyph--flag { width: 1.375rem; height: 0.875rem; }