/**
 * BLU-D Construction — Square & Plumb badge component
 * Recurring visual standard. Appears on every project card,
 * the Square & Plumb brand page, and (without text) inline
 * wherever the icon alone is needed.
 *
 * Markup (with text):
 *   <span class="blud-sq-plumb-badge">
 *     <span class="blud-sq-plumb-inline" aria-hidden="true">
 *       {% include directory ~ '/templates/partials/sq-plumb-icon.html.twig' %}
 *     </span>
 *     <span>Square &amp; Plumb</span>
 *   </span>
 *
 * Markup (icon only — same as used in the header):
 *   <span class="blud-sq-plumb-inline" aria-hidden="true">
 *     {% include directory ~ '/templates/partials/sq-plumb-icon.html.twig' %}
 *   </span>
 *
 * Coloring: the SVG uses currentColor, so the parent's `color`
 * value drives both fill and stroke. Inside .blud-sq-plumb-badge
 * that's --color-accent (Old Pitch). Override via CSS as needed.
 */

.blud-sq-plumb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

/* Inline SVG icon — color follows parent via currentColor */
.blud-sq-plumb-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  flex-shrink: 0;
}

.blud-sq-plumb-inline svg {
  height: 30px;
  width: auto;
  display: block;
}

.blud-sq-plumb-inline svg .st0 {
  fill: currentColor;
}

.blud-sq-plumb-inline svg .st1 {
  fill: none;
  stroke: currentColor;
  stroke-miterlimit: 10;
  stroke-width: 27px;
}

/* Size the icon to match the badge text height when used inside
   .blud-sq-plumb-badge — overrides the default 30px header sizing. */
.blud-sq-plumb-badge .blud-sq-plumb-inline svg {
  height: 1.5em;
}