/* ---------------------------------------------------------------
   WhatsApp enquiry tab
   Floating tap-to-chat with the message already written for them.
   Icon only, no text label, the glyph does the explaining.
   Inherits the host site's --pill / --ease / --card / --ink tokens
   if they exist, falls back to sane values if they don't.
   --------------------------------------------------------------- */

/* tokens live on :root, not on .wa-tap. the bubble is a sibling of the button,
   so anything scoped to .wa-tap is invisible to it. */
:root{
  /* deeper than stock WhatsApp green (#25d366) on purpose. the stock neon reads as
     a bolted-on widget next to most brand palettes, this still reads as WhatsApp
     instantly but sits in the design. stock green is one line away if wanted. */
  --wa:#1fa855;                /* button fill */
  --wa-deep:#17904a;           /* button fill on hover */

  /* neutral elevation, not a coloured glow. a tinted halo is the giveaway of a
     bolted-on chat widget, plain shadow reads as part of the site. */
  --wa-shadow:0 12px 28px -10px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
  --wa-shadow-hover:0 18px 36px -12px rgba(0,0,0,.68), 0 2px 6px rgba(0,0,0,.32);

  --wa-gap:clamp(.9rem,2.2vw,1.4rem);
  --wa-size:60px;              /* button diameter, the bubble offsets off this */
}

.wa-tap,.wa-peek,.wa-peek *{
  box-sizing:border-box;         /* don't rely on the host site having a reset */
}

.wa-tap{
  position:fixed;
  right:var(--wa-gap,1.25rem);
  bottom:calc(var(--wa-gap,1.25rem) + env(safe-area-inset-bottom,0px));
  z-index:85;                     /* under a typical fixed header, over page content */

  display:grid;
  place-items:center;
  width:var(--wa-size);
  height:var(--wa-size);
  border-radius:50%;
  background:var(--wa);
  color:#fff;
  text-decoration:none;           /* don't rely on the host site's link reset */
  -webkit-tap-highlight-color:transparent;
  box-shadow:var(--wa-shadow);

  /* entry state, flipped by data-wa-state="in" once the page has settled */
  opacity:0;
  transform:translateY(14px) scale(.94);
  transition:opacity .45s var(--ease,cubic-bezier(.16,1,.3,1)),
             transform .45s var(--ease,cubic-bezier(.16,1,.3,1)),
             background .22s ease,
             box-shadow .28s var(--ease,cubic-bezier(.16,1,.3,1));
}
.wa-tap[data-wa-state="in"]{opacity:1;transform:none}

.wa-tap:hover{
  background:var(--wa-deep);
  box-shadow:var(--wa-shadow-hover);
}
.wa-tap[data-wa-state="in"]:hover{transform:translateY(-2px)}
.wa-tap:active{transform:translateY(0) scale(.96)}

.wa-tap svg{width:31px;height:31px;fill:currentColor}

/* the nudge bubble: fires once, then remembers it was dismissed */
.wa-peek{
  position:fixed;
  right:var(--wa-gap,1.25rem);
  bottom:calc(var(--wa-size,60px) + var(--wa-gap,1.25rem) + .65rem + env(safe-area-inset-bottom,0px));
  z-index:86;
  width:max-content;                    /* hugs short labels, wraps long ones */
  max-width:min(17rem,calc(100vw - 2.5rem));
  padding:.7rem 1.9rem .7rem .9rem;
  border-radius:14px 14px 5px 14px;
  background:var(--card,#fff);
  color:var(--ink,#282320);
  border:1px solid var(--line,rgba(0,0,0,.1));
  box-shadow:0 14px 34px -18px rgba(0,0,0,.36);
  font-family:inherit;
  /* px, not rem, deliberately. The bubble used to scale off the host's root
     font size, so a site with an 18px base rendered it noticeably larger than
     one with 16px and it started covering body copy. Absolute units keep it
     the same physical size everywhere. */
  font-size:14px;
  line-height:1.4;
  text-align:left;
  opacity:0;
  transform:translateY(8px) scale(.96);
  transform-origin:100% 100%;
  transition:opacity .4s var(--ease,cubic-bezier(.16,1,.3,1)),
             transform .4s var(--ease,cubic-bezier(.16,1,.3,1));
}
.wa-peek[data-wa-state="in"]{opacity:1;transform:none}
.wa-peek[hidden]{display:none}

.wa-peek-close{
  position:absolute;
  top:.3rem;
  right:.3rem;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:0;
  background:none;
  color:var(--ink-soft,#6b625a);
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;
  border-radius:50%;
  transition:color .2s ease,background .2s ease;
}
.wa-peek-close:hover{color:var(--ink,#282320);background:rgba(0,0,0,.06)}

/* --- collision handling ------------------------------------------------ */

/* get out of the way of an open mobile nav. one selector per pattern we use:
   .site-header.menu-open is Yerby, .mobile-menu.open is the ATA site,
   #pkMobNav.open is The Park PT, .nav-open is the generic fallback. add the
   site's own class here if it differs. */
body:has(.site-header.menu-open) .wa-tap,
body:has(.site-header.menu-open) .wa-peek,
body:has(.mobile-menu.open) .wa-tap,
body:has(.mobile-menu.open) .wa-peek,
body:has(#pkMobNav.open) .wa-tap,
body:has(#pkMobNav.open) .wa-peek,
body:has(.nav-open) .wa-tap,
body:has(.nav-open) .wa-peek{
  opacity:0;
  pointer-events:none;
  transform:translateY(10px) scale(.94);
}

/* --- mobile sizing -----------------------------------------------------
   60px reads fine on a laptop and heavy on a phone, where the button sits in
   the thumb zone and competes with the content. Slightly smaller, and closer
   to the edge: bottom used to be gap PLUS the safe-area inset, which stacks
   two clearances on a notched iPhone and floats the button well up the screen.
   max() takes whichever single clearance is larger instead. */
@media(max-width:560px){
  :root{
    --wa-size:52px;
    --wa-gap:.8rem;
  }
  .wa-tap{
    bottom:max(var(--wa-gap,.8rem), env(safe-area-inset-bottom,0px));
  }
  .wa-tap svg{width:27px;height:27px}
  /* Sized in px, not rem, on purpose. The bubble used to inherit the host's
     root font size and typeface, so on a site with a larger base size or a
     wider face it rendered noticeably bigger and covered body copy. Absolute
     units keep it the same physical size on every site. */
  .wa-peek{
    bottom:calc(var(--wa-size,52px) + max(var(--wa-gap,.8rem), env(safe-area-inset-bottom,0px)) + .5rem);
    max-width:min(13rem,calc(100vw - 5.5rem));
    padding:.6rem 1.7rem .6rem .75rem;
    border-radius:13px 13px 5px 13px;
    font-size:13px;
    line-height:1.35;
    box-shadow:0 12px 30px -16px rgba(0,0,0,.34);
  }
  .wa-peek-close{width:24px;height:24px;font-size:.95rem;top:.15rem;right:.15rem}
}

/* on narrow screens the cookie banner goes full width, so sit above it.
   .cookie-banner[hidden] is the pattern on our own builds. The Park PT keeps its
   bar in the DOM and slides it in with .visible instead, so it needs its own
   selector: a :not([hidden]) test would match it permanently. */
@media(max-width:560px){
  body:has(.cookie-banner:not([hidden])) .wa-tap,
  body:has(.pk-cookie-bar.visible) .wa-tap{bottom:calc(var(--wa-gap,1.25rem) + 9.5rem + env(safe-area-inset-bottom,0px))}
  body:has(.cookie-banner:not([hidden])) .wa-peek,
  body:has(.pk-cookie-bar.visible) .wa-peek{display:none}
}

@media(prefers-reduced-motion:reduce){
  .wa-tap,.wa-peek{transition:none}
  .wa-tap[data-wa-state="in"],.wa-peek[data-wa-state="in"]{transform:none}
  .wa-tap[data-wa-state="in"]:hover,.wa-tap:active{transform:none}
}

/* print / no-js: no point showing it */
@media print{.wa-tap,.wa-peek{display:none}}
html:not(.js) .wa-tap,html:not(.js) .wa-peek{display:none}