/* Gedeelde, rustige kleuranimatie voor inhoudskoppen op alle websitepagina's. */
body main :is(h1, h2, h3, h4):not(.no-heading-animation) {
  color: transparent !important;
  background-image: linear-gradient(
    100deg,
    #72e9ff 0%,
    #f8fbff 18%,
    #ff66d5 38%,
    #ffe36d 58%,
    #7ef5bd 78%,
    #72e9ff 100%
  ) !important;
  background-size: 280% 100% !important;
  background-position: 0% 50%;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: chatmee-heading-colour-flow 7s ease-in-out infinite !important;
}

/* Eén herkenbare kophiërarchie op iedere pagina, zonder overdreven dikke tekst. */
body main h1:not(.no-heading-animation) {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body main h2:not(.no-heading-animation) {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

body main h3:not(.no-heading-animation) {
  font-size: 18px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

body main h4:not(.no-heading-animation) {
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

/* Tekstfragmenten volgen het verloop; decoratieve emoji en iconen houden hun kleur. */
body main :is(h1, h2, h3, h4):not(.no-heading-animation) > :is(span, strong, em, b):not([aria-hidden="true"]) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

body main :is(h1, h2, h3, h4):not(.no-heading-animation):nth-of-type(even) {
  animation-delay: -2.35s !important;
}

@keyframes chatmee-heading-colour-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 680px) {
  body main h1:not(.no-heading-animation) { font-size: 24px !important; }
  body main h2:not(.no-heading-animation) { font-size: 20px !important; }
  body main h3:not(.no-heading-animation) { font-size: 17px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body main :is(h1, h2, h3, h4):not(.no-heading-animation) {
    animation: none !important;
    background-position: 48% 50% !important;
  }
}