/* ==========================================================================
   PX Blob – Inline decorative highlight
   Wraps a word in <span class="px-blob"> via TinyMCE button / px_render_heading.
   The blob SVG from Figma (node 183:9551) appears behind the text.

   3-slice systeem (2026-07): de designer-blob wordt in drie vensters geknipt
   via viewBox-slicing van dezelfde SVG. De uiteinden (0-40 en 131-171) houden
   hun vaste vorm, alleen de buik (40-131, preserveAspectRatio='none') rekt mee
   met de woordlengte. Zo werkt de blob op korte EN lange woorden zonder dat de
   organische vorm vervormt.

   Hand-getekende kantel: ZIT IN DE SVG-BRON, niet in CSS (2026-07-08 fix).
   Elk van de 3 vensters bevat dezelfde <path>, gewrapt in
   <g transform="rotate(-0.6 85.5 34.5)"> — een rotatie rond het middelpunt
   van de ORIGINELE 171×69 tekening, VOORDAT CSS de buik uitrekt. Waarom niet
   gewoon transform:rotate() op de ::before-box (zoals eerst)? Een rotatie op
   een box verschuift de uiteinden verticaal met een bedrag dat evenredig is
   aan de boxbreedte. Bij een kort woord is dat onzichtbaar, maar bij een lang
   woord (bv. "Kindsponsoring:") liep de rechterkant van de blob zichtbaar
   omhoog/omlaag t.o.v. de linkerkant: de blob omsloot het woord niet meer
   netjes. Door de kanteling in de SVG te bakken (vaste 171×69-ruimte, ver vóór
   de eventuele buik-uitrekking) blijft de verschuiving altijd even klein,
   ongeacht de woordlengte. Geverifieerd op de path-data: geen clipping in
   geen van de 3 viewBox-vensters (max. puntverschuiving ~0,9 eenheid van de
   171×69-ruimte, ruim binnen de bestaande marge).

   Kleur per module via custom property (mask + background-color):
     .px-mijn-module .px-blob { --px-blob-color: var(--Oranje-10); }
   Default: Turquoise-50 (globale stijl).
   ========================================================================== */

:root {
  /* Links vast uiteinde (viewBox 0-40 van 171). Path in <g transform="rotate(...)">
     gewrapt: zie toelichting bovenaan (kanteling in bron, niet in CSS-transform). */
  --px-blob-shape-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 69'%3E%3Cg transform='rotate(-0.6 85.5 34.5)'%3E%3Cpath d='M12.8513 10.0224L16.3589 5.46582C17.4584 4.43302 23.4281 2.61096 34.2679 -0.000337383L105.124 3.47243C111.077 5.45134 114.988 6.19449 116.855 5.70189C126.073 9.24077 130.953 10.9664 131.494 10.8787C132.087 11.1623 132.62 11.5033 133.091 11.9017C136.478 13.3469 143.775 14.0635 154.982 14.0515C155.157 14.3081 155.899 14.6626 157.208 15.1151C158.57 15.9389 159.425 16.6074 159.774 17.1206L164.516 27.1772C167.049 32.3692 168.682 37.5645 169.416 42.7631C170.203 48.333 170.23 52.934 169.498 56.5661L165.861 67.5532C163.784 69.5041 159.935 68.7035 154.313 65.1516C136.472 61.3011 127.071 59.4061 126.111 59.4667C125.273 59.4126 123.693 59.0039 121.371 58.2407C120.464 58.6727 117.889 58.5677 113.647 57.9258L99.7424 56.4758C94.3304 54.4092 91.1969 53.7776 90.3417 54.5808C78.0524 54.7683 71.4799 53.7918 70.624 51.6516C70.5019 51.7663 69.8472 51.5401 68.66 50.9728C64.3655 49.9595 61.2147 50.1853 59.2076 51.6501C57.148 52.7435 49.3192 54.6294 35.7213 57.3079C34.9883 57.9964 32.4311 58.5058 28.0496 58.836C26.9501 59.8688 24.5589 61.0635 20.8759 62.42C17.1232 64.2626 14.0511 65.0453 11.6595 64.7682C5.56696 63.7615 1.81257 58.2452 0.396277 48.2194C-0.338096 43.0208 -0.0516407 36.2325 1.25564 27.8543C2.61538 19.8475 5.12777 14.1228 8.7928 10.6802L12.8513 10.0224Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  /* Rekbare buik (viewBox 40-131); preserveAspectRatio='none' is verplicht,
     anders letterboxt de browser de mask-laag en valt er een gat in het midden.
     Ook hier eerst de kleine kanteling toepassen (op de vaste 171×69-bron),
     dan pas non-uniform uitrekken: zo blijft de kanteling begrensd i.p.v. mee
     te groeien met de eindbreedte. */
  --px-blob-shape-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='40 0 91 69' preserveAspectRatio='none'%3E%3Cg transform='rotate(-0.6 85.5 34.5)'%3E%3Cpath d='M12.8513 10.0224L16.3589 5.46582C17.4584 4.43302 23.4281 2.61096 34.2679 -0.000337383L105.124 3.47243C111.077 5.45134 114.988 6.19449 116.855 5.70189C126.073 9.24077 130.953 10.9664 131.494 10.8787C132.087 11.1623 132.62 11.5033 133.091 11.9017C136.478 13.3469 143.775 14.0635 154.982 14.0515C155.157 14.3081 155.899 14.6626 157.208 15.1151C158.57 15.9389 159.425 16.6074 159.774 17.1206L164.516 27.1772C167.049 32.3692 168.682 37.5645 169.416 42.7631C170.203 48.333 170.23 52.934 169.498 56.5661L165.861 67.5532C163.784 69.5041 159.935 68.7035 154.313 65.1516C136.472 61.3011 127.071 59.4061 126.111 59.4667C125.273 59.4126 123.693 59.0039 121.371 58.2407C120.464 58.6727 117.889 58.5677 113.647 57.9258L99.7424 56.4758C94.3304 54.4092 91.1969 53.7776 90.3417 54.5808C78.0524 54.7683 71.4799 53.7918 70.624 51.6516C70.5019 51.7663 69.8472 51.5401 68.66 50.9728C64.3655 49.9595 61.2147 50.1853 59.2076 51.6501C57.148 52.7435 49.3192 54.6294 35.7213 57.3079C34.9883 57.9964 32.4311 58.5058 28.0496 58.836C26.9501 59.8688 24.5589 61.0635 20.8759 62.42C17.1232 64.2626 14.0511 65.0453 11.6595 64.7682C5.56696 63.7615 1.81257 58.2452 0.396277 48.2194C-0.338096 43.0208 -0.0516407 36.2325 1.25564 27.8543C2.61538 19.8475 5.12777 14.1228 8.7928 10.6802L12.8513 10.0224Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  /* Rechts vast uiteinde (viewBox 131-171). Zelfde bron-kanteling als links. */
  --px-blob-shape-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='131 0 40 69'%3E%3Cg transform='rotate(-0.6 85.5 34.5)'%3E%3Cpath d='M12.8513 10.0224L16.3589 5.46582C17.4584 4.43302 23.4281 2.61096 34.2679 -0.000337383L105.124 3.47243C111.077 5.45134 114.988 6.19449 116.855 5.70189C126.073 9.24077 130.953 10.9664 131.494 10.8787C132.087 11.1623 132.62 11.5033 133.091 11.9017C136.478 13.3469 143.775 14.0635 154.982 14.0515C155.157 14.3081 155.899 14.6626 157.208 15.1151C158.57 15.9389 159.425 16.6074 159.774 17.1206L164.516 27.1772C167.049 32.3692 168.682 37.5645 169.416 42.7631C170.203 48.333 170.23 52.934 169.498 56.5661L165.861 67.5532C163.784 69.5041 159.935 68.7035 154.313 65.1516C136.472 61.3011 127.071 59.4061 126.111 59.4667C125.273 59.4126 123.693 59.0039 121.371 58.2407C120.464 58.6727 117.889 58.5677 113.647 57.9258L99.7424 56.4758C94.3304 54.4092 91.1969 53.7776 90.3417 54.5808C78.0524 54.7683 71.4799 53.7918 70.624 51.6516C70.5019 51.7663 69.8472 51.5401 68.66 50.9728C64.3655 49.9595 61.2147 50.1853 59.2076 51.6501C57.148 52.7435 49.3192 54.6294 35.7213 57.3079C34.9883 57.9964 32.4311 58.5058 28.0496 58.836C26.9501 59.8688 24.5589 61.0635 20.8759 62.42C17.1232 64.2626 14.0511 65.0453 11.6595 64.7682C5.56696 63.7615 1.81257 58.2452 0.396277 48.2194C-0.338096 43.0208 -0.0516407 36.2325 1.25564 27.8543C2.61538 19.8475 5.12777 14.1228 8.7928 10.6802L12.8513 10.0224Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
}

.px-blob {
  position: relative;
  display: inline;
  white-space: nowrap;
}

/* De blob (z-index:-1) heeft een stacking context op de heading nodig:
   daardoor blijft hij ONDER de tekst van de kop, maar BOVEN achtergronden
   van omliggende elementen. Zonder deze context zakt de blob onder opaque
   module-achtergronden en wordt hij onzichtbaar. */
.px-heading {
  isolation: isolate;
}

/* Caps: 0.93em = hoogte 1.6em x (40/69), exact de natuurlijke verhouding.
   Buik: gecentreerd tussen de caps met ~0.03em overlap per kant tegen naadjes.
   Geen transform:rotate() hier — de hand-getekende kantel zit in de 3 SVG's
   zelf (zie toelichting bovenaan het bestand). Een rotate() op déze box zou
   opnieuw een verschuiving geven die met de woordbreedte meegroeit.
   max(0em, ...) op de buikbreedte is een defensieve ondergrens: voorkomt een
   negatieve mask-size bij een extreem kort blob-woord (< ~1,4em); heeft geen
   effect op de huidige, werkende breedtes. */
.px-blob::before {
  content: '';
  position: absolute;
  bottom: -0.12em;
  left: -0.22em;
  width: calc(100% + 0.44em);
  height: 1.6em;
  background-color: var(--px-blob-color, var(--Turquoise-50));
  -webkit-mask:
    var(--px-blob-shape-l) left center / 0.93em 100% no-repeat,
    var(--px-blob-shape-m) center / max(0em, calc(100% - 1.8em)) 100% no-repeat,
    var(--px-blob-shape-r) right center / 0.93em 100% no-repeat;
  mask:
    var(--px-blob-shape-l) left center / 0.93em 100% no-repeat,
    var(--px-blob-shape-m) center / max(0em, calc(100% - 1.8em)) 100% no-repeat,
    var(--px-blob-shape-r) right center / 0.93em 100% no-repeat;
  z-index: -1;
  pointer-events: none;
}

/* Descender variant – blob zakt mee met letters als g, j, p, q, y */
.px-blob--descender::before {
  bottom: -0.32em;
}