/* Laag: framework. De rangorde staat in skeleton/templates/page.php:
 *   @layer framework, site, theme, type, item;
 * Alles wat het framework meestuurt zit in de onderste laag, zodat site-CSS en CMS-opmaak
 * ervan winnen zonder specificiteits-trucs. Binnen deze laag telt specificiteit gewoon, dus
 * de onderlinge verhouding tussen framework-bestanden verandert er niet door.
 *
 * Een bestand dat deze wikkel MIST staat buiten elke laag en wint daarmee van ALLES —
 * ook van het CMS. `tests/Framework/CodeStyle/ModuleCssIsLayeredTest.php` bewaakt dat. */
@layer framework {
/* Drijvende WhatsApp-knop (rechtsonder). Thema-onafhankelijk met var()-fallbacks;
   de merk-kleur blijft WhatsApp-groen tenzij een site --wa-color overschrijft.
   Rechtsonder gepositioneerd zodat 'ie de bewerkings-FAB (linksonder) niet raakt. */

.wa-fab {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  z-index: 190; /* onder de edit-FAB (200) en cookie-banner, boven de content */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--wa-color, #25d366);
  color: var(--wa-icon-color, #fff);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .14);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.wa-fab:hover,
.wa-fab:focus-visible {
  background: var(--wa-color-hover, #1ebe5b);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28), 0 3px 8px rgba(0, 0, 0, .16);
}

.wa-fab:focus-visible {
  outline: 3px solid var(--wa-focus, rgba(37, 211, 102, .5));
  outline-offset: 3px;
}

.wa-fab:active {
  transform: translateY(0) scale(.98);
}

.wa-fab__icon {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  pointer-events: none;
}

/* Zichtbaar label voor screenreaders, verborgen in beeld. */
.wa-fab__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Iets compacter op kleine schermen, maar goed aantikbaar (min. 3rem). */
@media (max-width: 480px) {
  .wa-fab {
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    width: 3.25rem;
    height: 3.25rem;
  }
  .wa-fab__icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

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