/* =====================================================================
   Maldon Gymnastics Club — floating WhatsApp contact button
   Injected by /assets/cms.js from data/settings.json, so the number,
   the pre-filled message and the on/off switch all live in /admin.
   Nothing renders unless a number is set.
===================================================================== */

.wa-fab{position:fixed;right:20px;bottom:22px;z-index:95;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;                      /* WhatsApp brand green */
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(8,17,32,.3);
  text-decoration:none;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;}
.wa-fab svg{width:31px;height:31px;fill:currentColor;display:block;}
.wa-fab:hover,.wa-fab:focus-visible{background:#1FB457;
  transform:translateY(-3px) scale(1.04);box-shadow:0 12px 30px rgba(8,17,32,.38);}
.wa-fab:focus-visible{outline:3px solid var(--green);outline-offset:3px;}

/* Label that slides out on hover — desktop only, pointer devices only. */
.wa-fab .wa-label{max-width:0;overflow:hidden;white-space:nowrap;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.92rem;
  transition:max-width .3s ease, margin .3s ease;margin:0;}
@media(hover:hover) and (min-width:769px){
  .wa-fab{width:auto;height:58px;border-radius:999px;padding:0 19px;gap:0;}
  .wa-fab:hover .wa-label,.wa-fab:focus-visible .wa-label{max-width:190px;margin-left:10px;}
}

/* Mobile: sit clear of the sticky "Book a trial" bar, which is
   position:fixed at the bottom with z-index 80. */
@media(max-width:768px){
  .wa-fab{right:14px;bottom:calc(74px + env(safe-area-inset-bottom));
    width:54px;height:54px;}
  .wa-fab svg{width:28px;height:28px;}
  .wa-fab .wa-label{display:none;}
}
/* Pages without the sticky bar can sit lower. */
@media(max-width:768px){
  body:not(:has(.mobile-cta)) .wa-fab{bottom:calc(18px + env(safe-area-inset-bottom));}
}

@media(prefers-reduced-motion:reduce){
  .wa-fab,.wa-fab .wa-label{transition:none;}
  .wa-fab:hover,.wa-fab:focus-visible{transform:none;}
}

/* Printing a page shouldn't include a floating button. */
@media print{ .wa-fab{display:none;} }