/* WhatsApp chat button (homepage + blog). Uses the site tokens when present. */
:root { --wa-ease: cubic-bezier(0.22, 1, 0.36, 1); }
/* =========================================================
   WhatsApp chat button
   ========================================================= */
.wa {
  position: fixed; right: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px); z-index: 850;
  display: flex; align-items: center; gap: 0; height: 58px; padding: 0 0 0 0; border-radius: 999px;
  background: #25d366; color: #fff; box-shadow: 0 16px 40px -12px rgba(18, 140, 70, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  transition: gap 0.45s var(--ease, var(--wa-ease)), padding 0.45s var(--ease, var(--wa-ease)), transform 0.35s var(--ease, var(--wa-ease)), box-shadow 0.35s;
}
.wa::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #25d366; z-index: -1; animation: wa-ping 2.6s cubic-bezier(0, 0, 0.2, 1) 1.5s infinite; }
@keyframes wa-ping { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
.wa__icon { width: 58px; height: 58px; flex: none; display: grid; place-items: center; }
.wa__icon svg { width: 28px; height: 28px; fill: #fff; }
.wa__label { display: grid; max-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--f-body, "Geist", system-ui, sans-serif); font-weight: 600; font-size: 15px; line-height: 1.15; transition: max-width 0.45s var(--ease, var(--wa-ease)), padding 0.45s var(--ease, var(--wa-ease)); }
.wa__label small { font-size: 9.5px; font-weight: 500; opacity: 0.85; letter-spacing: 0.08em; }
.wa:hover, .wa:focus-visible { transform: translateY(-3px); box-shadow: 0 22px 50px -14px rgba(18, 140, 70, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.25) inset; }
.wa:hover .wa__label, .wa:focus-visible .wa__label, .wa.is-peek .wa__label { max-width: 220px; padding-right: 22px; }
.wa:focus-visible { outline: 3px solid var(--blue, #2f6bff); outline-offset: 3px; }
/* out of the way during the opening and while the menu is open */
body.is-loading .wa, body.menu-open .wa { opacity: 0; pointer-events: none; transform: scale(0.6); }
.wa { transition-property: gap, padding, transform, box-shadow, opacity; }
@media (max-width: 700px) { .wa { height: 54px; } .wa__icon { width: 54px; height: 54px; } }

/* lift the button above the pricing quote bar so it never covers "Request quote" */
@media (max-width: 1100px) { body.quote-open .wa { transform: translateY(-88px); } }