/* ==========================================================================
   whatsapp-float.css — floating "Chat with us on WhatsApp" button
   --------------------------------------------------------------------------
   Site-wide persistent WhatsApp CTA, fixed to the bottom-right corner of the
   viewport on every page. Visual language mirrors the hero WhatsApp pill
   (.wa-cta__link in home.css): solid WhatsApp dark teal (#075E54) keeps the
   white label AA-compliant; the glyph uses bright WhatsApp green (#25D366).
   The global brand palette is untouched. Sits at the bottom-bar layer
   (--z-bottom-bar) so it stays above page content and the sticky header but
   below true overlays.
   ========================================================================== */

.wa-float__link {
  position: fixed;
  inset-inline-end: var(--space-16);
  bottom: var(--space-16);
  z-index: var(--z-bottom-bar);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding-block: var(--space-8);
  padding-inline: var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: #075e54;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-button-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-button);
  letter-spacing: var(--tracking-button);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--shadow-raised);
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.wa-float__link:hover:not(:focus-visible) {
  background: color-mix(in srgb, var(--color-heading) 10%, #075e54);
  box-shadow: var(--shadow-overlay);
}

.wa-float__link:active {
  background: color-mix(in srgb, var(--color-heading) 16%, #075e54);
  box-shadow: none;
  transform: translateY(1px);
}

.wa-float__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  fill: #25d366;
}

/* Tablet/desktop — a little more breathing room from the viewport edges. */
@media (min-width: 768px) {
  .wa-float__link {
    inset-inline-end: var(--space-24);
    bottom: var(--space-24);
  }
}

/* Very narrow screens — compact icon-only disc so the button never becomes
   excessively wide or covers content. The label stays in the accessibility
   tree via the visually-hidden clip pattern. */
@media (max-width: 479px) {
  .wa-float__link {
    width: 56px;
    height: 56px;
    padding: 0;
  }

  .wa-float__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}