/** Site-wide WhatsApp action, styled as a compact member of the floating controls. */

@layer components {
  .floating-whatsapp {
    position: fixed;
    right: clamp(1rem, 1rem + 1vw, 2rem);
    bottom: calc(clamp(1.25rem, 1rem + 1.5vw, 2.5rem) + env(safe-area-inset-bottom, 0px));
    z-index: 56;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--color-cream);
    box-shadow: 0 12px 32px -16px rgb(18 43 43 / 0.35);
    color: var(--color-ink);
    font-family: var(--font-body);
    text-decoration: none;
    transition:
      background-color var(--duration-fast) var(--ease-brand),
      transform var(--duration-fast) var(--ease-brand);
  }

  .floating-whatsapp:hover,
  .floating-whatsapp:focus-visible {
    background: var(--color-cream-deep);
    transform: translateY(-2px);
  }

  .floating-whatsapp:focus-visible {
    outline: 2px solid var(--color-forest);
    outline-offset: 3px;
  }

  .floating-whatsapp .site-footer__social-icon {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    color: #25d366;
  }

  body:has(.floating-whatsapp) .site-footer {
    padding-bottom: calc(var(--spacing-section-sm) + 4rem + env(safe-area-inset-bottom, 0px));
  }

  @media (pointer: coarse) {
    .floating-whatsapp {
      width: 3.75rem;
      height: 3.75rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .floating-whatsapp { transition: none; }
  }
}