/* ──────────────────────────────────────────────────────────────
   Group Four — WhatsApp brand treatment (loaded on every page)

   .g4-wa-nav    The WhatsApp button in the nav bar, in WhatsApp
                 green. That button is built six different ways
                 across the templates (.nav-cta, .btn-premium,
                 .btn-wa, .nav-btn-wa and two Tailwind utility
                 stacks), so each page tags it with this one class
                 and the selectors below out-rank every template's
                 own base and :hover rules, instead of editing six
                 stylesheets.

   .g4-wa-float  Round floating button, bottom-right. z-index 45 sits
                 above page content but under the full-screen mobile
                 menus (50) and the lightbox/success modals (100).
                 While the cookie banner is open, consent.js sets
                 --g4-consent-h to its height so the button rides
                 above the banner rather than disappearing under it.
   ────────────────────────────────────────────────────────────── */

:root {
  --g4-wa: #25d366;
  --g4-wa-dark: #128c7e;
}

nav a.g4-wa-nav {
  background: var(--g4-wa);
  color: #fff;
}
nav a.g4-wa-nav:hover,
nav a.g4-wa-nav:focus-visible {
  background: var(--g4-wa-dark);
  color: #fff;
}

.g4-wa-float {
  position: fixed;
  right: 1.25rem;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: calc(1.25rem + var(--g4-consent-h, 0px));
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + var(--g4-consent-h, 0px));
  z-index: 45;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--g4-wa);
  color: #fff;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .25);
  transition: background .2s, transform .2s, bottom .45s cubic-bezier(.16, 1, .3, 1);
  -webkit-tap-highlight-color: transparent;
}
.g4-wa-float svg {
  display: block;
  width: 1.875rem;
  height: 1.875rem;
}
.g4-wa-float:hover {
  background: var(--g4-wa-dark);
  transform: scale(1.06);
}
.g4-wa-float:focus-visible {
  outline: 3px solid #d1a054;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .g4-wa-float { transition: background .2s; }
  .g4-wa-float:hover { transform: none; }
}

@media print {
  .g4-wa-float { display: none; }
}