/* wa-float: the shared WhatsApp button on every page of hilldevelopment.io (rule: CLAUDE.md; markup wa-float.html; behaviour wa-float.js).
   One round 54 px button, fixed bottom right, 24 px from the edges (16 px on phones, plus the safe area). Fades in once the opening animation is over.
   A page sets only its colours, on its own .wa-float rule:
     --wa-bg, --wa-fg                  the button over light grounds (ground, glyph)
     --wa-bg-light, --wa-fg-light      the light version over dark bands and pictures
     --wa-hover-bg, --wa-hover-fg      hover;  --wa-ring, --wa-ring-light  focus ring
     --wa-border, --wa-border-light    optional line (e.g. 1px solid #282828);  --wa-backdrop  optional material (e.g. blur(10px))
     --wa-z                            stacking: above page content, below the page's menus, panels and overlays
   Footer clearance: the page keeps var(--wa-clear) of extra bottom padding under its last footer line. */
:root { --wa-size: 54px; --wa-gap: 24px; --wa-clear: calc(var(--wa-size) + var(--wa-gap)); }
@media (max-width: 767px) { :root { --wa-gap: 16px; } }

.wa-float {
  position: fixed; z-index: var(--wa-z, 90);
  right: calc(var(--wa-gap) + env(safe-area-inset-right, 0px)); bottom: calc(var(--wa-gap) + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; box-sizing: border-box; width: var(--wa-size); height: var(--wa-size); border-radius: 50%;
  background: var(--wa-bg, #1C1E21); color: var(--wa-fg, #FFFFFF); border: var(--wa-border, 0 solid transparent);
  -webkit-backdrop-filter: var(--wa-backdrop, none); backdrop-filter: var(--wa-backdrop, none); text-decoration: none; -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s ease, visibility 0s linear .4s, background-color .25s ease, color .25s ease;
}
html.wa-on .wa-float { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
html.wa-light .wa-float { background: var(--wa-bg-light, #FFFFFF); color: var(--wa-fg-light, #1C1E21); border: var(--wa-border-light, var(--wa-border, 0 solid transparent)); }

/* The WhatsApp glyph (speech bubble and handset), 1.5 line, drawn in currentColor */
.wa-float__glyph {
  width: 24px; height: 24px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath transform='translate(7.2 7.2) scale(.4)' stroke-width='3.75' d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath transform='translate(7.2 7.2) scale(.4)' stroke-width='3.75' d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) { html .wa-float:hover { background: var(--wa-hover-bg, var(--wa-bg-light, #FFFFFF)); color: var(--wa-hover-fg, var(--wa-fg-light, #1C1E21)); } }
.wa-float:focus-visible { outline: 2px solid var(--wa-ring, #1C1E21); outline-offset: 3px; }
html.wa-light .wa-float:focus-visible { outline-color: var(--wa-ring-light, #FFFFFF); }
@media (prefers-reduced-motion: reduce) { .wa-float, html.wa-on .wa-float { transition: none; } }
@media print { .wa-float { display: none; } }