/* wa-knop.css: de WhatsApp-knop (bouwinstructie v4, 3.1). Op alle 27 routes geladen door BaseV3.astro; de rest van de v4-laag (/v3/v4-laag.css) alleen met prop `v4`. */
.wa-knop,.hero .hero-cta.wa-knop{display:inline-flex;align-items:center;gap:10px;text-align:left;line-height:1.25}
.wa-knop .wa-icoon{width:22px;height:22px;flex:0 0 auto}
.wa-knop .wa-tekst{display:inline}
.wa-sub{font-weight:600}
.sitenav-cta.wa-knop .wa-icoon,.nav-knop.wa-knop .wa-icoon{width:18px;height:18px}
.tussen-cta{margin:34px 0 0;text-align:center}
/* hero-knop desktop: de tekst loopt over twee regels; de verticale padding is
   verkleind zodat de knop even hoog blijft als de oude (circa 55px) en het
   portret in het grid niet verschuift (regel 2 van de bouwinstructie). */
@media(min-width:701px){.hero .hero-cta.wa-knop{padding-top:9px;padding-bottom:9px}}
@media(max-width:700px){
  .wa-sub{display:block;font-size:.85em;margin-top:4px}
  .hero .hero-cta.wa-knop{align-items:flex-start}
  .hero .hero-cta.wa-knop .wa-icoon{margin-top:2px}
  /* alleen met de v4-laag (hamburger) verdwijnt de header-knop in het menu (7.1) */
  body.v4 .nav > .wa-knop,body.v4 .sitenav > .wa-knop,body.v4 .nav-knop.wa-knop{display:none}
}


/* Elke 8 seconden een korte, lichte trilling (Pim 12-09). Via de losse
   `rotate`-eigenschap, zodat de hover-transform van .knop blijft werken. */
@keyframes wa-tril{
  0%,6%{rotate:0deg}
  1%{rotate:-2.2deg} 2%{rotate:2.2deg} 3%{rotate:-1.6deg} 4%{rotate:1.2deg} 5%{rotate:-.5deg}
  100%{rotate:0deg}
}
.wa-knop{animation:wa-tril 8s ease-in-out 3s infinite;transform-origin:50% 60%}
@media(prefers-reduced-motion:reduce){.wa-knop{animation:none}}