/* ==========================================================================
   Iron Shore Roofing — icon badge legibility fix
   --------------------------------------------------------------------------
   THE BUG
   The three icon-badge components are authored in the app bundle as:

       .why-icon, .value-icon, .contact-info-icon {
         background-color: var(--color-primary);
         color:            var(--color-accent);
       }

   The lucide glyphs inside stroke with `currentColor`, so the design intent
   was an accent-coloured symbol sitting on a primary-coloured tile. Both
   custom properties currently resolve to the same blue:

       --color-primary = #1a5fd4
       --color-accent  = #1a5fd4

   so every symbol was drawing blue-on-blue (contrast ratio 1.00) and the
   badges rendered as plain blue squares. The icons were always present and
   correctly chosen — dollar-sign for pricing, shield for insured, map-pin for
   local, award for warranties, sparkles for cleanup, heart/hammer/shield-check
   on About, phone/mail/map-pin/clock on Contact — they simply could not be seen.

   THE FIX
   Give the glyphs an explicit legible colour rather than depending on two
   design tokens happening to differ. White on solid brand blue also matches
   `.process-number`, the one badge on the site that was already rendering
   correctly, so the treatment stays consistent with the existing design
   rather than introducing a new one.

   Deliberately unchanged: badge size, shape (square, matching
   .process-number), position, spacing, and every icon choice. Nothing here
   affects layout, so there is no reflow risk on any page.

   Note: the underlying --color-accent / --color-primary collision is left
   alone on purpose. That token may be relied on elsewhere where blue is
   correct, and retuning a global palette variable is a wider change than
   this fix warrants.
   ========================================================================== */

.why-icon,
.value-icon,
.contact-info-icon {
  /* lucide strokes inherit this through currentColor */
  color: #ffffff;
}

/* Belt and braces: if a future build hardcodes the stroke attribute instead
   of using currentColor, this still holds the icon legible. */
.why-icon > svg,
.value-icon > svg,
.contact-info-icon > svg {
  color: inherit;
  stroke: currentColor;
}

/* At 18–24px a 2px stroke on saturated blue can look slightly heavy; easing it
   a touch keeps the glyph crisp without changing its size or position. */
.why-icon > svg,
.contact-info-icon > svg {
  stroke-width: 1.9;
}

.value-icon > svg {
  stroke-width: 1.8;
}