/* ============================================================
   Signature Homeworx — Google Rating widget.
   Tokens: edit this block to re-skin.
   Sizing is em-based against a fixed 16px root set below, so the
   Elementor Size control (--shxgr-size, unitless %) scales the
   whole widget proportionally; 100/unset = v1.0 pixel sizes.
   ============================================================ */
.shx-gr {
  --shxgr-star: #fbbc04;
  --shxgr-star-base: #d8d7e2;
  --shxgr-navy: #0D0040;
  --shxgr-white: #ffffff;
  --shxgr-muted: #71717f;
  --shxgr-font: 'Outfit', system-ui, sans-serif;
  --shxgr-g-blue: #4285F4;
  --shxgr-g-red: #EA4335;
  --shxgr-g-yellow: #FBBC05;
  --shxgr-g-green: #34A853;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375em; /* 6px */
  font-family: var(--shxgr-font);
  font-size: calc(16px * var(--shxgr-size, 100) / 100);
  line-height: 1.2;
}

/* Whole-widget link variant (URL control set) */
a.shx-gr {
  text-decoration: none;
  cursor: pointer;
}
a.shx-gr:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}
/* Link root: out-specify theme/Elementor-kit `a` and `a:hover` rules
   (color + decoration) without disturbing the Elementor text-color
   control, which still wins through the --shxgr-text first slot. */
a.shx-gr.shx-gr--dark,
a.shx-gr.shx-gr--dark:hover,
a.shx-gr.shx-gr--dark:focus,
a.shx-gr.shx-gr--dark:visited {
  color: var(--shxgr-text, var(--shxgr-navy));
  text-decoration: none;
}
a.shx-gr.shx-gr--light,
a.shx-gr.shx-gr--light:hover,
a.shx-gr.shx-gr--light:focus,
a.shx-gr.shx-gr--light:visited {
  color: var(--shxgr-text, var(--shxgr-white));
  text-decoration: none;
}

/* ---- Stars: gray base strip + gold overlay clipped to the fill % ---- */
.shx-gr__stars { position: relative; line-height: 0; }
.shx-gr__strip { white-space: nowrap; }
.shx-gr__strip svg { width: 2.125em; height: 2.125em; display: inline-block; margin: 0 0.125em; } /* 34px, 2px */
.shx-gr__strip--base svg { fill: var(--shxgr-star-base); }
.shx-gr__strip--fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: var(--shxgr-fill, 100%);
}
.shx-gr__strip--fill svg { fill: var(--shxgr-star); }
.shx-gr--anim .shx-gr__strip--fill { transition: width 0.9s cubic-bezier(0.22, 0.8, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  .shx-gr--anim .shx-gr__strip--fill { transition: none; }
}

/* ---- Numeric + count line ---- */
.shx-gr__meta { display: flex; align-items: baseline; gap: 0.4em; font-size: 0.9375em; } /* 15px; gap 6px/15px */
.shx-gr__num { font-weight: 800; font-size: 1.1333em; } /* 17px / meta's 15px */
.shx-gr__sep { opacity: 0.6; }

/* ---- Google wordmark (colored letters; official mark — not recolorable) ---- */
.shx-gr__wordmark { font-weight: 500; font-size: 2em; letter-spacing: -0.046875em; } /* 32px, -1.5px */
.shx-gr__wordmark span:nth-child(1) { color: var(--shxgr-g-blue); }
.shx-gr__wordmark span:nth-child(2) { color: var(--shxgr-g-red); }
.shx-gr__wordmark span:nth-child(3) { color: var(--shxgr-g-yellow); }
.shx-gr__wordmark span:nth-child(4) { color: var(--shxgr-g-blue); }
.shx-gr__wordmark span:nth-child(5) { color: var(--shxgr-g-green); }
.shx-gr__wordmark span:nth-child(6) { color: var(--shxgr-g-red); }

/* ---- Schemes (--shxgr-text, when set by Elementor, overrides the pair) ---- */
.shx-gr--dark { color: var(--shxgr-text, var(--shxgr-navy)); }
.shx-gr--dark .shx-gr__count { color: var(--shxgr-text, var(--shxgr-muted)); }
.shx-gr--light { color: var(--shxgr-text, var(--shxgr-white)); }
.shx-gr--light .shx-gr__count { color: var(--shxgr-text, rgba(255, 255, 255, 0.8)); }
.shx-gr--light .shx-gr__strip--base svg { fill: rgba(255, 255, 255, 0.3); }