/* ============================================================
   Floating contact — WhatsApp + Call (D-2)
   Fixed bottom-right on every page. Surface-aware coloring
   driven by IntersectionObserver in js/floating-contact.js.
   ============================================================ */

.floating-contact {
  position: fixed;
  inset-block-end: clamp(24px, 3vw, 48px);
  inset-inline-end: clamp(24px, 3vw, 48px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}

.floating-contact__btn {
  --fc-bg:   var(--c-navy);
  --fc-fg:   var(--c-bone);
  --fc-shadow: 0 6px 20px rgba(13, 46, 81, 0.20);
  --btn-mag-x: 0px;
  --btn-mag-y: 0px;

  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: var(--fc-bg);
  color: var(--fc-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: var(--fc-shadow);
  transform: translate3d(var(--btn-mag-x), var(--btn-mag-y), 0);
  transition: background-color 220ms var(--ease-out),
              color 220ms var(--ease-out),
              transform 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out);
  position: relative;
}

.floating-contact__btn svg {
  inline-size: 24px;
  block-size: 24px;
  fill: currentColor;
}

/* Dark-surface variant: flip to bone bg + navy icon */
.floating-contact--on-dark .floating-contact__btn {
  --fc-bg:   var(--c-bone);
  --fc-fg:   var(--c-navy);
  --fc-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Hover variants */
@media (hover: hover) and (pointer: fine) {
  .floating-contact__btn--whatsapp:hover {
    --fc-bg: #25D366;
    --fc-fg: #ffffff;
  }
  .floating-contact__btn--call:hover {
    --fc-bg: var(--c-orange);
    --fc-fg: var(--c-navy);
  }
  .floating-contact__btn:hover {
    box-shadow: 0 10px 32px rgba(13, 46, 81, 0.30);
  }
}

/* Reduce-motion: kill the magnetic transform animation but keep hover color changes (which are still useful) */
@media (prefers-reduced-motion: reduce) {
  .floating-contact__btn {
    --btn-mag-x: 0px;
    --btn-mag-y: 0px;
    transition: background-color 0s, color 0s, box-shadow 0s;
  }
}

/* Mobile: keep at least 56px so it remains a comfortable tap target */
@media (max-width: 768px) {
  .floating-contact {
    inset-block-end: clamp(16px, 4vw, 28px);
    inset-inline-end: clamp(16px, 4vw, 28px);
  }
}