/* ==========================================================================
   P-Coaching & Therapie  ·  custom.css
   --------------------------------------------------------------------------
   Hoort op de server in:
       media/templates/site/j51_jasmine/css/custom.css

   Wordt geladen als in de templatestijl "Load custom.css" op Ja staat
   (tabblad Custom CSS). Er is geen enkel template-bestand gewijzigd, dus
   een template-update overschrijft dit werk niet.

   INHOUD
     1  Variabelen
     2  Leesbaarheid
     3  Resten van de tekstverwerker
     4  Knoppen en belbare nummers
     5  Toegankelijkheid
     6  Kleine correcties
     7  Hero
     8  Ruimte onder de hero
     9  Vertrouwensbalk
    10  Secties en klachtingangen
    11  Stappenrail "Zo gaat het"
    12  Ademwerk-hub
    13  Veelgestelde vragen
    14  Woordwolk met tekstlinks
    15  Iconen zonder Font Awesome
    16  Uitklappijltjes in het menu
   ========================================================================== */


/* ==========================================================================
   1. VARIABELEN
   ========================================================================== */

:root{
  --pct-paars:        #996699;  /* huisstijl-accent -- ONGEWIJZIGD */
  --pct-paars-tekst:  #6E3D6B;  /* zelfde familie, een tint donkerder */
  --pct-plum:         #4D1A47;
  --pct-plum-diep:    #37102F;
  --pct-creme:        #FFFAF7;
  --pct-creme-2:      #FAF1EC;
  --pct-blush:        #F4EAF2;
  --pct-lijn:         #E7D9E3;
  --pct-grijs:        #59525F;
  --pct-grijs-licht:  #867E8D;
}


/* ==========================================================================
   2. LEESBAARHEID
   --------------------------------------------------------------------------
   #996699 op de creme achtergrond haalt 4,35 : 1. De norm voor lopende
   tekst is 4,5 : 1. Koppen blijven ongewijzigd -- voor grote tekst is de
   norm 3 : 1 en daar zit het accentpaars ruim boven. Alleen de menubalk en
   paarse lopende tekst gaan een tint donkerder (~8 : 1).
   ========================================================================== */

.hornav ul.mod-menu > li > a{
  color:var(--pct-paars-tekst);
}

.item-page p span[style*="#996699"],
.item-page li span[style*="#996699"],
.module_content div span[style*="#996699"]{
  color:var(--pct-paars-tekst) !important;
}


/* ==========================================================================
   3. RESTEN VAN DE TEKSTVERWERKER
   --------------------------------------------------------------------------
   Vangnet voor gekleurde spans die uit de editor zijn blijven staan.
   ========================================================================== */

.item-page span[style*="#ff0000"],
.item-page span[style*="#cc99ff"],
.item-page span[style*="#ff9900"]{
  background-color:transparent !important;
  color:inherit !important;
}

.pct-melding{
  display:block;
  background:var(--pct-blush);
  border-left:4px solid var(--pct-paars);
  border-radius:0 8px 8px 0;
  padding:12px 18px;
  margin:18px 0;
  color:var(--pct-paars-tekst);
}


/* ==========================================================================
   4. KNOPPEN EN BELBARE NUMMERS
   --------------------------------------------------------------------------
   Gebruik: <a class="pct-btn pct-btn--primary" href="#">Tekst</a>
   ========================================================================== */

.pct-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  font-size:16px;
  line-height:1.2;
  padding:14px 22px;
  border-radius:10px;
  border:2px solid transparent;
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.pct-btn:hover{ transform:translateY(-1px); text-decoration:none; }

/* De kleuren met !important: binnen een artikel wint de linkkleur van het
   sjabloon anders van die van de knop, en dan staat er donkere tekst op een
   donkere knop. */
.pct-btn--primary{ background:var(--pct-plum); color:#fff !important; }
.pct-btn--primary:hover{ background:#37102F; color:#fff !important; }

.pct-btn--ghost{ background:transparent; color:var(--pct-plum) !important; border-color:var(--pct-lijn); }
.pct-btn--ghost:hover{ background:var(--pct-blush); border-color:var(--pct-paars); color:var(--pct-plum) !important; }

.pct-btn--light{ background:#fff; color:var(--pct-plum) !important; }
.pct-btn--light:hover{ background:var(--pct-blush); color:var(--pct-plum) !important; }

.pct-btn-groep{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }

a.pct-tel{
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  color:var(--pct-paars-tekst);
  text-decoration:none;
  white-space:nowrap;
}
a.pct-tel:hover{ text-decoration:underline; text-underline-offset:3px; }

@media only screen and (max-width:767px){
  .pct-btn{ width:100%; }
  .pct-btn-groep{ flex-direction:column; }
}


/* ==========================================================================
   5. TOEGANKELIJKHEID
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:3px solid var(--pct-paars);
  outline-offset:2px;
  border-radius:3px;
}


/* ==========================================================================
   6. KLEINE CORRECTIES
   ========================================================================== */

.item-page p,
.module_content p{ line-height:1.7; }


/* ==========================================================================
   7. HERO
   --------------------------------------------------------------------------
   Module "Hero" in positie showcase-1. Mobiel-eerst opgebouwd.
   ========================================================================== */

.pct-hero{
  position:relative;
  background:#B9C6CD;
  overflow:hidden;
}

.pct-hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  display:block;
  margin:0;
  border:0;
  max-width:none;              /* het template zet img{max-width:100%} */
}

/* Verloop van links naar rechts, zodat de vuurtoren rechts in zijn
   eigen licht blijft staan. Op mobiel wel een gewone waas, want daar
   staat de tekst over de volle breedte. */
.pct-hero__scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(41,12,37,.78) 0%,
      rgba(41,12,37,.55) 42%,
      rgba(41,12,37,.10) 72%,
      rgba(41,12,37,0) 100%),
    linear-gradient(180deg,
      rgba(41,12,37,.28) 0%,
      rgba(41,12,37,0) 40%);
}

.pct-hero__in{
  position:relative;
  max-width:1180px;            /* zelfde breedte als .wrapper960 van het template */
  margin:0 auto;
  padding:56px 20px 52px;      /* mobiel */
  min-height:400px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.pct-hero__eyebrow{
  font-family:Nunito, Arial, sans-serif;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  color:#DDBFD9;
  margin:0 0 14px;
}

.pct-hero .pct-hero__titel{
  color:#fff !important;
  font-family:Nunito, Arial, sans-serif;
  font-weight:800;
  font-size:clamp(30px, 7vw, 50px);
  line-height:1.18;
  letter-spacing:-.01em;
  max-width:17ch;
  margin:0;
  text-wrap:balance;
  text-shadow:0 2px 20px rgba(30,8,26,.4);
}

.pct-hero__lead{
  color:#F1E4EE;
  font-size:clamp(17px, 2.2vw, 20px);
  line-height:1.6;
  margin:18px 0 0;
  max-width:46ch;
  text-shadow:0 1px 14px rgba(30,8,26,.45);
}

.pct-hero .pct-btn-groep{ margin:28px 0 0; max-width:340px; }

.pct-hero__meta{
  margin:22px 0 0;
  font-size:14.5px;
  color:#E6D5E3;
  display:flex;
  align-items:center;
  gap:9px;
}
.pct-hero__stip{
  width:9px; height:9px; border-radius:50%;
  background:#7FD09A; flex:none;
  box-shadow:0 0 0 4px rgba(127,208,154,.25);
}

/* De knoppen in de hero staan op een donkere foto en zijn dus omgekeerd:
   de hoofdknop is wit met pruimtekst, de tweede is doorzichtig met witte
   tekst. Deze regels MOETEN !important hebben, want de basisregels van
   .pct-btn--primary en --ghost hebben dat ook (nodig tegen de linkkleur van
   het sjabloon in artikelen). Zonder !important hier wint de basisregel en
   wordt de hoofdknop wit op wit, dus onleesbaar. */
.pct-hero .pct-btn--primary{ background:#fff !important; color:var(--pct-plum) !important; }
.pct-hero .pct-btn--primary:hover{ background:var(--pct-blush) !important; color:var(--pct-plum) !important; }
.pct-hero .pct-btn--ghost{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.55);
}
.pct-hero .pct-btn--ghost:hover{ background:rgba(255,255,255,.22) !important; color:#fff !important; }

@media only screen and (min-width:768px){
  .pct-hero__in{ padding:96px 30px 90px; min-height:520px; }  /* 30px = padding van .maincontent */
  .pct-hero .pct-btn-groep{ max-width:none; }
}

@media only screen and (max-width:767px){
  .pct-hero__scrim{
    background:linear-gradient(180deg,
      rgba(41,12,37,.66) 0%,
      rgba(41,12,37,.52) 60%,
      rgba(41,12,37,.68) 100%);
  }
}


/* ==========================================================================
   8. RUIMTE ONDER DE HERO
   --------------------------------------------------------------------------
   Het template zet 80 px boven de content. Onder een hero is dat te veel.
   Alleen op de homepage (itemid-464).
   ========================================================================== */

body.itemid-464 .maincontent{ padding-top:18px; padding-bottom:0; }

/* --------------------------------------------------------------------------
   De body is wit, de blokken zijn crème. In de ruimte tussen twee blokken
   (bijvoorbeeld onder de paarse band) zag je daardoor een witte streep.
   -------------------------------------------------------------------------- */
body{ background:var(--pct-creme); }
body.itemid-464 .pct-trust{ padding-top:0; margin-bottom:0; }


/* ==========================================================================
   9. VERTROUWENSBALK
   ========================================================================== */

.pct-trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  justify-content:center;
  align-items:center;
  text-align:center;
  font-size:14.5px;
  color:var(--pct-grijs);
  padding:4px 0 20px;
  margin:0 0 26px;
  border-bottom:1px solid var(--pct-lijn);
}
.pct-trust span{ white-space:nowrap; }
.pct-trust b{
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  color:var(--pct-plum);
}
.pct-trust .pct-trust__breed{ white-space:normal; }

@media only screen and (max-width:767px){
  .pct-trust{ gap:8px 18px; font-size:13.5px; }
}


/* ==========================================================================
   10. SECTIES EN KLACHTINGANGEN
   --------------------------------------------------------------------------
   Bewust een lijst met haarlijnen en geen kaartenraster: lichter, en op een
   telefoon prettiger om doorheen te scrollen.
   ========================================================================== */

/* De blokken wisselen van achtergrond en de banden raken elkaar. De ruimte
   zit daarom IN het blok, niet ertussen. */
.pct-sectie{ margin:0; padding:40px 0; }

.pct-sectie__kop{ max-width:60ch; margin:0 0 26px; }
.pct-sectie__kop .pct-sectie__eyebrow{
  font-family:Nunito, Arial, sans-serif;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--pct-paars-tekst); margin:0 0 12px;
}
.pct-sectie__kop h2{
  font-family:Nunito, Arial, sans-serif; font-weight:800;
  color:var(--pct-plum) !important;   /* module style overrides zetten hem soms wit of lichtpaars */
  line-height:1.2; margin:0;
  font-size:clamp(24px, 4.5vw, 32px);
  text-wrap:balance;           /* verdeelt de regels gelijkmatig ipv een los woord */
}
.pct-sectie__kop p{ margin:12px 0 0; color:var(--pct-grijs); font-size:17px; line-height:1.6; }

.pct-klachten{ border-top:1px solid var(--pct-lijn); }

a.pct-kl{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 18px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--pct-lijn);
  text-decoration:none;
  color:inherit;
}
a.pct-kl:hover{ text-decoration:none; }
a.pct-kl:hover .pct-kl__t{ color:var(--pct-paars-tekst); }
a.pct-kl:hover .pct-kl__pijl{
  background:var(--pct-plum); color:#fff; border-color:var(--pct-plum);
}

.pct-kl__t{
  font-family:Nunito, Arial, sans-serif; font-weight:800;
  font-size:18.5px; color:var(--pct-plum); line-height:1.3;
}
.pct-kl__d{
  grid-column:1; font-size:15.5px; color:var(--pct-grijs); line-height:1.55;
}
.pct-kl__pijl{
  grid-row:1 / 3; grid-column:2;
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--pct-lijn);
  display:grid; place-items:center;
  color:var(--pct-paars-tekst); font-size:17px; flex:none;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}

@media only screen and (min-width:768px){
  .pct-sectie{ padding:56px 0; }
  a.pct-kl{
    grid-template-columns:260px 1fr auto;
    align-items:start;
    padding:22px 0;
  }
  .pct-kl__t{ grid-column:1; grid-row:1; }
  .pct-kl__d{ grid-column:2; grid-row:1; }
  .pct-kl__pijl{ grid-column:3; grid-row:1; align-self:center; }
}


/* ==========================================================================
   11. STAPPENRAIL "ZO GAAT HET"
   ========================================================================== */

.pct-rail{ display:flex; flex-direction:column; }

.pct-rl{ display:grid; grid-template-columns:auto 1fr; gap:0 18px; }

.pct-rl__mark{ display:flex; flex-direction:column; align-items:center; }
.pct-rl__num{
  width:34px; height:34px; border-radius:50%;
  background:var(--pct-plum); color:#fff;
  display:grid; place-items:center;
  font-family:Nunito, Arial, sans-serif; font-weight:800; font-size:15px;
  flex:none;
}
.pct-rl__lijn{ width:2px; flex:1; background:var(--pct-lijn); margin:6px 0; }
.pct-rl:last-child .pct-rl__lijn{ display:none; }

.pct-rl__body{ padding-bottom:26px; }
.pct-rl:last-child .pct-rl__body{ padding-bottom:0; }
.pct-rl__body h3{
  font-family:Nunito, Arial, sans-serif; font-weight:800;
  font-size:19px; color:var(--pct-plum); margin:4px 0 6px; line-height:1.3;
}
.pct-rl__body p{ color:var(--pct-grijs); font-size:16px; line-height:1.65; margin:0; }


/* ==========================================================================
   12. ADEMWERK-HUB
   ========================================================================== */

.pct-vormen{ display:flex; flex-direction:column; gap:16px; }

.pct-vorm{
  background:#fff;
  border:1px solid var(--pct-lijn);
  border-radius:12px;
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pct-vorm h3{
  font-family:Nunito, Arial, sans-serif; font-weight:800;
  font-size:18px; color:var(--pct-plum); margin:0; line-height:1.3;
}
.pct-vorm h3 a{ color:var(--pct-plum); text-decoration:none; }
.pct-vorm h3 a:hover{ color:var(--pct-paars-tekst); text-decoration:underline; text-underline-offset:3px; }
.pct-vorm p{ font-size:15.5px; color:var(--pct-grijs); line-height:1.6; margin:0; }

.pct-specs{
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  margin-top:auto; padding-top:12px;
  font-family:Nunito, Arial, sans-serif; font-weight:700; font-size:14px;
  color:var(--pct-paars-tekst);
}
.pct-open{
  border:1.5px dashed #C6A6C4;
  border-radius:6px; padding:2px 9px;
  font-family:Nunito, Arial, sans-serif; font-weight:700; font-size:12.5px;
  color:var(--pct-paars-tekst);
}

@media only screen and (min-width:768px){
  .pct-vormen{ flex-direction:row; flex-wrap:wrap; }
  .pct-vorm{ flex:1 1 calc(50% - 8px); }
}


/* ==========================================================================
   13. VEELGESTELDE VRAGEN
   --------------------------------------------------------------------------
   <details>/<summary>: openklappen zonder een regel JavaScript.
   ========================================================================== */

.pct-faq{ border-top:1px solid var(--pct-lijn); }

.pct-faq details{ border-bottom:1px solid var(--pct-lijn); }

.pct-faq summary{
  cursor:pointer;
  list-style:none;
  padding:18px 44px 18px 0;
  position:relative;
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  font-size:17.5px;
  color:var(--pct-plum);
  line-height:1.4;
}
.pct-faq summary::-webkit-details-marker{ display:none; }
.pct-faq summary::marker{ content:""; }
.pct-faq summary::after{
  content:"+";
  position:absolute; right:8px; top:14px;
  font-size:26px; font-weight:400; line-height:1;
  color:var(--pct-paars);
}
.pct-faq details[open] summary::after{ content:"\2013"; }
.pct-faq summary:hover{ color:var(--pct-paars-tekst); }

.pct-faq .pct-faq__a{
  padding:0 0 20px;
  color:var(--pct-grijs);
  font-size:16.5px;
  line-height:1.7;
  max-width:66ch;
  margin:0;
}


/* ==========================================================================
   14. WOORDWOLK MET TEKSTLINKS
   --------------------------------------------------------------------------
   De woordwolk blijft. Maar een zoekmachine leest geen afbeelding, dus
   eronder dezelfde woorden als echte links.
   ========================================================================== */

.pct-wolk img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  border:1px solid var(--pct-lijn);
  margin:0;
}
.pct-wolk__bij{
  font-size:13px;
  color:var(--pct-grijs-licht);
  line-height:1.5;
  margin:10px 0 0;
}

.pct-taglinks{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  padding:0;
  margin:16px 0 0;
}
.pct-taglinks li{ margin:0; padding:0; }
.pct-taglinks li::before{ content:none; }
.pct-taglinks a{
  display:inline-block;
  font-size:14px;
  line-height:1.3;
  text-decoration:none;
  background:#fff;
  border:1px solid var(--pct-lijn);
  color:var(--pct-paars-tekst);
  padding:6px 12px;
  border-radius:8px;
}
.pct-taglinks a:hover{
  border-color:var(--pct-paars);
  background:var(--pct-blush);
  text-decoration:none;
}


/* ==========================================================================
   15. ICONEN ZONDER FONT AWESOME
   --------------------------------------------------------------------------
   De site gebruikt vier iconen. Font Awesome laadde daarvoor negen
   bestanden van samen ~311 kB. Hieronder dezelfde iconen als SVG-masker.
   De HTML hoeft niet te veranderen: <i class="fa fa-bars"> blijft werken.
   Zet in de templateinstellingen "Load Font Awesome" op Nee.
   ========================================================================== */

.fa{
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-.125em;
  background-color:transparent;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.fa::before{ content:none; }

.fa-bars, .fa-mobile, .fa-facebook, .fa-instagram, .fa-linkedin{
  background-color:currentColor;
}

.fa-bars{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='2.2' rx='1.1'/%3E%3Crect x='3' y='10.9' width='18' height='2.2' rx='1.1'/%3E%3Crect x='3' y='15.8' width='18' height='2.2' rx='1.1'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='2.2' rx='1.1'/%3E%3Crect x='3' y='10.9' width='18' height='2.2' rx='1.1'/%3E%3Crect x='3' y='15.8' width='18' height='2.2' rx='1.1'/%3E%3C/svg%3E");
}

.fa-mobile{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2v14h8V4H8zm4 15.9a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2v14h8V4H8zm4 15.9a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}

.fa-facebook{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5h1.65V4.63c-.29-.04-1.27-.12-2.41-.12-2.39 0-4.02 1.46-4.02 4.13v2.28H7.55V14h2.72v8z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5h1.65V4.63c-.29-.04-1.27-.12-2.41-.12-2.39 0-4.02 1.46-4.02 4.13v2.28H7.55V14h2.72v8z'/%3E%3C/svg%3E");
}

.fa-instagram{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2.6' y='2.6' width='18.8' height='18.8' rx='5.4'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2.6' y='2.6' width='18.8' height='18.8' rx='5.4'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.fa-linkedin{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 3.2a2.3 2.3 0 1 1 0 4.6 2.3 2.3 0 0 1 0-4.6zM2.4 9.2h4.4V21H2.4V9.2zm7 0h4.2v1.6h.06c.6-1.1 2.05-2.26 4.22-2.26 4.5 0 5.34 2.86 5.34 6.58V21h-4.4v-5.2c0-1.24-.02-2.84-1.76-2.84-1.77 0-2.04 1.35-2.04 2.75V21H9.4V9.2z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 3.2a2.3 2.3 0 1 1 0 4.6 2.3 2.3 0 0 1 0-4.6zM2.4 9.2h4.4V21H2.4V9.2zm7 0h4.2v1.6h.06c.6-1.1 2.05-2.26 4.22-2.26 4.5 0 5.34 2.86 5.34 6.58V21h-4.4v-5.2c0-1.24-.02-2.84-1.76-2.84-1.77 0-2.04 1.35-2.04 2.75V21H9.4V9.2z'/%3E%3C/svg%3E");
}


/* ==========================================================================
   16. UITKLAPPIJLTJES IN HET MENU
   --------------------------------------------------------------------------
   Het template zette hier een Font Awesome-teken. Op desktop weggelaten:
   de labels zijn breed en het pijltje viel op een tweede regel. In het
   mobiele schuifmenu blijft het staan -- daar moet je erop tikken.
   ========================================================================== */

.hornav .parent-indicator{ display:none; }

.slideout-menu .menu .parent-indicator{
  font-family:inherit !important;
  display:inline-block;
  width:auto;
  line-height:1;
}
.slideout-menu .menu .parent-indicator::before{
  content:"" !important;
  display:inline-block;
  width:.42em;
  height:.42em;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-.12em);
  vertical-align:middle;
}

/* ==========================================================================
   17. PAULA & PETER IN DE PAARSE BAND
   --------------------------------------------------------------------------
   Modules 736 (Paula) en 796 (Peter), positie bottom-1.
   Was een kale opsomming; nu een kaart met rol, korte omschrijving,
   vakgebieden als labels, praktijkdagen en een belknop.
   ========================================================================== */

.pct-persoon{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  padding:26px;
  height:100%;
}
.pct-persoon h3{
  font-family:Nunito, Arial, sans-serif;
  font-weight:800;
  font-size:22px;
  color:#fff !important;
  margin:0;
  line-height:1.25;
}
.pct-persoon__rol{
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#EBD4E8;
  font-weight:600;
  margin:6px 0 14px;
}
.pct-persoon__d{
  font-size:16.5px;
  line-height:1.65;
  color:#F7EDF6;
  margin:0;
}

.pct-labels{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  padding:0;
  margin:16px 0 0;
}
.pct-labels li{
  margin:0;
  padding:5px 11px;
  font-size:13.5px;
  line-height:1.3;
  background:rgba(255,255,255,.16);
  border-radius:999px;
  color:#fff;
}
.pct-labels li::before{ content:none; }

.pct-persoon__dagen{
  margin:18px 0 0;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:15px;
  color:#F0DEED;
}

.pct-persoon .pct-btn-groep{ margin:16px 0 0; }
/* Zelfde verhaal als in de hero: deze knoppen staan op de paarse band. */
.pct-persoon .pct-btn--primary{ background:#fff !important; color:var(--pct-plum) !important; }
.pct-persoon .pct-btn--primary:hover{ background:var(--pct-blush) !important; color:var(--pct-plum) !important; }
.pct-persoon .pct-btn--ghost{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.5);
}
.pct-persoon .pct-btn--ghost:hover{ background:rgba(255,255,255,.22) !important; color:#fff !important; }

.pct-persoon__reg{
  margin:8px 0 0;
  font-size:13.5px;
  line-height:1.5;
  color:#DCC6D9;
}


/* --------------------------------------------------------------------------
   Module Style Override bottom-3a zet koppen op wit (was voor de fotoband).
   De foto is weg, dus de kop moet weer leesbaar zijn.
   -------------------------------------------------------------------------- */
.bottom-3a .pct-sectie__kop h2{ color:var(--pct-plum) !important; }
.bottom-3a .pct-sectie__kop .pct-sectie__eyebrow{ color:var(--pct-paars-tekst) !important; }

/* ==========================================================================
   18. TARIEVEN EN ROUTE
   --------------------------------------------------------------------------
   Modules 580 (tarieven) en 794 (route), positie base-1.
   Vervangen de registratieblokken; die staan nu bij de personen zelf.
   ========================================================================== */

.pct-fact{
  background:#fff;
  border:1px solid var(--pct-lijn);
  border-radius:12px;
  padding:26px;
  height:100%;
}
.pct-fact h3{
  font-family:Nunito, Arial, sans-serif;
  font-weight:800;
  font-size:20px;
  color:var(--pct-plum);
  margin:0 0 16px;
  line-height:1.3;
}

.pct-rij{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  padding:7px 0;
  border-bottom:1px dashed #F0E6EC;
  font-size:16px;
  line-height:1.4;              /* het template zet 1.7 op alle p */
  color:var(--pct-grijs);
  margin:0 !important;          /* het template zet marge onder elke p */
}
.pct-rij:last-of-type{ border-bottom:0; }
.pct-rij b{
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  color:var(--pct-plum);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.pct-fijn{
  font-size:14px;
  color:var(--pct-grijs-licht);
  line-height:1.6;
  margin:16px 0 0;
}

.pct-adres{
  font-size:16.5px;
  line-height:1.8;
  color:var(--pct-grijs);
  margin:0;
}
.pct-adres b{
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  color:var(--pct-ink, #26212A);
}


/* --------------------------------------------------------------------------
   Logostrook met de beroepsverenigingen
   -------------------------------------------------------------------------- */

.pct-logos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:18px 28px;
  margin:0;
  padding:26px 0 6px;
}
.pct-logos img{
  display:block;
  height:44px;
  width:auto;
  margin:0;
  border:0;
  opacity:.85;
  transition:opacity .15s ease;
  /* De logo's van RBCZ, SCAG en Balanskliniek hebben een witte achtergrond
     in het bestand zelf. Vermenigvuldigen laat dat wit wegvallen tegen het
     crème van de pagina, zonder de bestanden aan te passen. */
  mix-blend-mode:multiply;
}
.pct-logos img:hover{ opacity:1; }

/* --------------------------------------------------------------------------
   Even groot maken.
   Dezelfde hoogte geven werkt niet: elk bestand heeft een andere hoeveelheid
   wit eromheen en een andere vorm. Gemeten hoeveel beeld er in elk bestand
   zit (NBVH 100%, RBCZ 85%, SCAG 85% maar slechts 37% breed, Balanskliniek
   62%) en daar de hoogte per logo op afgestemd, zodat ze optisch even zwaar
   wegen. De negatieve marges halen het overtollige wit links en rechts weg,
   anders lijkt de afstand tussen de logo's ongelijk.
   -------------------------------------------------------------------------- */
.pct-logos img[src*="NBVH"]{ height:44px; }
.pct-logos img[src*="RBCZ"]{ height:49px; }
.pct-logos img[src*="SCAG"]{ height:61px; margin:0 -24px; }
.pct-logos img[src*="Balanskliniek"]{ height:47px; margin:0 -12px; }

@media only screen and (max-width:767px){
  .pct-logos{ gap:14px 24px; }
  .pct-logos img[src*="NBVH"]{ height:36px; }
  .pct-logos img[src*="RBCZ"]{ height:40px; }
  .pct-logos img[src*="SCAG"]{ height:50px; margin:0 -20px; }
  .pct-logos img[src*="Balanskliniek"]{ height:38px; margin:0 -10px; }
}

/* ==========================================================================
   20. TWEEKOLOMS BLOKKEN BINNEN EEN MODULE
   --------------------------------------------------------------------------
   Voor blokken die als een module worden geplaatst maar wel een sectiekop
   en twee kolommen nodig hebben, zoals de woordwolk en tarieven/route.
   ========================================================================== */

.pct-duo{
  display:flex;
  flex-direction:column;
  gap:26px;
}
.pct-duo > *{ min-width:0; }

@media only screen and (min-width:768px){
  .pct-duo{ flex-direction:row; gap:40px; }
  .pct-duo > *{ flex:1; }
  .pct-duo--top{ align-items:flex-start; }
  .pct-duo--midden{ align-items:center; }
}

/* --------------------------------------------------------------------------
   De Module Style Override van bottom-3a zet 25 px marge links. Daardoor
   staat dat blok uit de lijn met alle andere secties (677 px i.p.v. 652 px).
   -------------------------------------------------------------------------- */
.bottom-3a .module_surround{
  margin-left:0 !important;
  margin-right:0 !important;
}


/* ==========================================================================
   21. RUIMTE TUSSEN DE MODULEBLOKKEN
   --------------------------------------------------------------------------
   Het sjabloon zet 80 px binnenruimte boven en onder elke .module_surround.
   Samen met de 44 px van .pct-sectie werd het gat tussen twee blokken 214 px.
   De secties regelen hun eigen ruimte, dus die 80 px kan eruit.
   ========================================================================== */

.bottom-2a .module_surround,
.bottom-3a .module_surround,
.base-1a   .module_surround{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* --------------------------------------------------------------------------
   De paarse band van Paula en Peter.
   Dit blok staat nu in het artikel (via loadmoduleid) in plaats van in
   positie bottom-1, dus de volle breedte komt niet meer van het sjabloon.
   De box-shadow strekt de kleur tot voorbij de schermrand, de clip-path
   snijdt hem boven en onder weer af. Dat werkt zonder 100vw, dus zonder
   gedoe met de schuifbalk.
   -------------------------------------------------------------------------- */
.pct-wie{
  background:var(--pct-paars);
  box-shadow:0 0 0 100vmax var(--pct-paars);
  clip-path:inset(0 -100vmax);
  padding:40px 0;
  margin:0 !important;
}

@media only screen and (min-width:768px){
  .pct-wie{ padding:56px 0; margin:0 !important; }
}

/* Kop in de paarse band: wit in plaats van pruim. */
.pct-wie .pct-sectie__kop h2{ color:#fff !important; }
.pct-wie .pct-sectie__kop .pct-sectie__eyebrow{ color:#EBD4E8 !important; }
.pct-wie .pct-sectie__kop p{ color:#F0DEED; }


/* ==========================================================================
   22. WELKOM - DE EIGEN WOORDEN VAN PAULA
   --------------------------------------------------------------------------
   Zit in het homepage-artikel, direct onder de vertrouwensbalk.
   Stond eerder in twee losse modules (768 en 760) halverwege de pagina, zonder
   kop en met de foto op 'hidden-phone'. Nu een sectie met kop, vooraan, en de
   foto is ook op mobiel zichtbaar.
   ========================================================================== */

.pct-welkom__foto img{
  display:block;
  width:100%;
  height:auto;
  max-width:440px;
  border-radius:16px;
  border:1px solid var(--pct-lijn);
  box-shadow:0 12px 30px rgba(77,26,71,.12);
}

.pct-welkom__tekst > *:first-child{ margin-top:0; }
.pct-welkom__tekst > *:last-child{ margin-bottom:0; }

.pct-welkom__tekst p{
  font-size:17px;
  line-height:1.7;
  color:var(--pct-grijs);
  margin:0 0 16px;
  max-width:58ch;
}

.pct-welkom__tekst .pct-lead{
  font-size:19px;
  line-height:1.6;
  color:var(--pct-plum);
  font-weight:600;
}

.pct-welkom__tekst .pct-vraag{
  font-size:18px;
  font-weight:700;
  color:var(--pct-paars-tekst);
}

.pct-welkom__tekst .pct-slot{
  margin:22px 0 0;
  padding:16px 18px;
  background:var(--pct-blush);
  border-left:3px solid var(--pct-paars);
  border-radius:0 12px 12px 0;
  color:var(--pct-plum);
  font-weight:600;
  font-size:16.5px;
}

@media only screen and (min-width:768px){
  .pct-welkom .pct-duo > .pct-welkom__foto{ flex:0 0 40%; }
  .pct-welkom .pct-duo > .pct-welkom__tekst{ flex:1 1 auto; }
}


/* ==========================================================================
   23. AFSLUITENDE OPROEP
   --------------------------------------------------------------------------
   Onderaan module 580, na de logostrook. Volle breedte met dezelfde
   box-shadow-truc als de paarse band, zodat hij niet aan een sjabloonpositie
   vastzit. De twee bijknoppen staan in wit omlijnd wit, niet in pruim:
   pruim op pruim was in het ontwerp nauwelijks te lezen.
   ========================================================================== */

.pct-cta{
  background:var(--pct-plum);
  box-shadow:0 0 0 100vmax var(--pct-plum);
  clip-path:inset(0 -100vmax);
  padding:48px 0 52px;
  margin:0;                 /* de sectie ervoor levert de tussenruimte al */
  text-align:center;
}

.pct-cta h2{
  font-family:Nunito, Arial, sans-serif;
  font-weight:800;
  font-size:clamp(24px, 4.2vw, 34px);
  line-height:1.25;
  color:#fff !important;
  margin:0 auto;
  max-width:22ch;
  text-wrap:balance;
}

.pct-cta p{
  font-size:17px;
  line-height:1.6;
  color:#EBD4E8 !important;
  margin:14px auto 0;
  max-width:54ch;
}

.pct-cta .pct-btn-groep{
  justify-content:center;
  margin:26px 0 0;
}

.pct-cta .pct-btn--light{ background:#fff !important; color:var(--pct-plum) !important; }
.pct-cta .pct-btn--light:hover{ background:var(--pct-blush) !important; color:var(--pct-plum) !important; }

.pct-cta .pct-btn--ghost{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.55);
}
.pct-cta .pct-btn--ghost:hover{
  background:rgba(255,255,255,.20);
  border-color:#fff;
  color:#fff !important;
}

@media only screen and (min-width:768px){
  .pct-cta{ padding:64px 0 68px; margin:0; }
}

/* Er is geen algemene contactpagina, alleen 'mail naar Paula' en 'mail naar
   Peter'. Vier knoppen wordt rommelig, dus mailen staat als tekstregel onder
   de belknoppen. */
.pct-cta__mail{
  margin:18px auto 0;
  font-size:15px;
  color:#DCC6D9 !important;
  max-width:54ch;
}
.pct-cta__mail a{
  color:#fff !important;
  text-decoration:underline;
  text-underline-offset:3px;
}


/* ==========================================================================
   24. RECENSIES
   --------------------------------------------------------------------------
   Drie citaten uit de openbare Google-recensies van de praktijk, ingekort maar
   woordelijk. Eigen module, via loadmoduleid in het artikel geladen.
   ========================================================================== */

.pct-quotes{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

@media only screen and (min-width:768px){
  .pct-quotes{ grid-template-columns:repeat(3, 1fr); gap:24px; }
}

.pct-quote{
  background:var(--pct-blush);
  border:1px solid var(--pct-lijn);
  border-radius:12px;
  padding:24px;
  margin:0;
  display:flex;
  flex-direction:column;
}

.pct-quote blockquote{
  margin:0;
  padding:0;
  border:0;
  flex:1;
  font-size:16.5px;
  line-height:1.7;
  color:var(--pct-grijs);
}

.pct-quote blockquote::before{
  content:"\201C";
  display:block;
  font-family:Georgia, "Times New Roman", serif;
  font-size:46px;
  line-height:.55;
  color:var(--pct-paars);
  margin:0 0 12px;
}

.pct-quote figcaption{
  margin:18px 0 0;
  padding-top:14px;
  border-top:1px solid var(--pct-lijn);
  font-size:14.5px;
  line-height:1.5;
  color:var(--pct-grijs-licht);
}
.pct-quote figcaption b{
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  color:var(--pct-plum);
}

.pct-quotes__bron{
  margin:20px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--pct-grijs-licht);
  text-align:center;
}


/* ==========================================================================
   25. AGENDA
   --------------------------------------------------------------------------
   Module 866, iCagenda Evenementenlijst, via loadmoduleid in het artikel.
   Haalt de vier eerstvolgende activiteiten rechtstreeks uit de agenda, dus
   niets is vastgetikt en verlopen data verdwijnen vanzelf.

   iCagenda zet de datum, de titel, de plaats en de omschrijving als vier
   losse elementen naast elkaar met floats. Daarom een raster van twee
   kolommen: de datum links over drie rijen, de rest rechts onder elkaar.
   ========================================================================== */

.pct-agenda .ic-section,
.pct-agenda .ic-group{ display:block; width:auto; }

.pct-agenda .default_eventlist{
  width:100% !important;
  float:none !important;
  margin:0 0 14px !important;
  padding:0 !important;
}
.pct-agenda hr{ display:none; }

.pct-agenda .ic-event-div{
  display:grid !important;
  grid-template-columns:66px 1fr;
  column-gap:20px;
  row-gap:6px;
  align-items:start;
  background:#fff;
  border:1px solid var(--pct-lijn);
  border-radius:12px;
  padding:20px 22px;
}

.pct-agenda .ic-event-div > *{
  float:none !important;
  width:auto !important;
  margin:0 !important;
}
.pct-agenda .ic-event-div > *:nth-child(1){ grid-column:1; grid-row:1 / span 3; }
.pct-agenda .ic-event-div > *:nth-child(2){ grid-column:2; grid-row:1; }
.pct-agenda .ic-event-div > *:nth-child(3){ grid-column:2; grid-row:2; }
.pct-agenda .ic-event-div > *:nth-child(4){ grid-column:2; grid-row:3; }

/* Het datumblokje.
   LET OP: de achtergrondkleur komt NIET uit deze CSS. iCagenda zet hem als
   inline stijl op het element, en die wint altijd. De kleur staat per
   activiteit in iCagenda (en als terugval per categorie: Workshop, Training,
   Opleiding). Wil je die kleur veranderen, doe dat dus in de agenda zelf.

   De tekstkleuren hieronder zijn daarom donker gehouden: ze moeten leesbaar
   blijven op welke kleur Paula ook kiest, en die is nu licht (#97bdcf). */
.pct-agenda .ic-date-div{
  width:66px;
  text-align:center;
  border-radius:10px;
  padding:10px 0;
}
.pct-agenda .ic-day{
  font-family:Nunito, Arial, sans-serif;
  font-weight:800;
  font-size:25px;
  line-height:1.1;
  color:var(--pct-plum);
}
.pct-agenda .ic-month{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  color:var(--pct-paars-tekst);
}

.pct-agenda .iceventlist-title a{
  font-family:Nunito, Arial, sans-serif;
  font-weight:800;
  font-size:18.5px;
  line-height:1.3;
  color:var(--pct-plum) !important;
  text-decoration:none;
}
.pct-agenda .iceventlist-title a:hover{ text-decoration:underline; text-underline-offset:3px; }

.pct-agenda .iceventlist-venue,
.pct-agenda .ic-datetime-div{
  font-size:14.5px;
  line-height:1.5;
  color:var(--pct-grijs-licht);
}
.pct-agenda .iceventlist-venue{ margin-right:14px !important; }

.pct-agenda .iceventlist-desc{
  display:block;
  font-size:16px;
  line-height:1.6;
  color:var(--pct-grijs);
}

@media only screen and (max-width:767px){
  .pct-agenda .ic-event-div{ padding:18px; column-gap:14px; grid-template-columns:56px 1fr; }
  .pct-agenda .ic-date-div{ width:56px; }
  .pct-agenda .ic-day{ font-size:22px; }
}


/* ==========================================================================
   26. FOOTER
   --------------------------------------------------------------------------
   Eén module in base-2a, vier kolommen in eigen beheer. Verving vier losse
   modules (824 Algemene Info, 766 Formulieren, 772 Praktijk Info,
   850 Bezoekadres) die elk een sjabloonkolom vulden.
   De band eromheen is paars, dus alle tekst is licht.
   ========================================================================== */

.pct-footer{
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  padding:6px 0 0;
}

@media only screen and (min-width:768px){
  .pct-footer{ grid-template-columns:1.35fr 1fr 1fr 1.15fr; gap:40px; }
}

.pct-footer h3{
  font-family:Nunito, Arial, sans-serif;
  font-weight:800;
  font-size:17px;
  line-height:1.3;
  color:#fff !important;
  margin:0 0 14px;
}

.pct-footer ul{
  list-style:none;
  margin:0;
  padding:0;
}
.pct-footer li{
  margin:0 0 9px;
  padding:0;
  font-size:15.5px;
  line-height:1.5;
}
.pct-footer li::before{ content:none; }

.pct-footer a{
  color:#F0DEED !important;
  text-decoration:none;
}
.pct-footer a:hover{
  color:#fff !important;
  text-decoration:underline;
  text-underline-offset:3px;
}

.pct-footer p{
  font-size:15.5px;
  line-height:1.8;
  color:#F0DEED;
  margin:0;
}
.pct-footer p b{
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  color:#fff;
}

.pct-footer__fijn{
  font-size:14px !important;
  line-height:1.7 !important;
  color:#DCC6D9 !important;
  margin:12px 0 0 !important;
}

.pct-footer__slot{
  margin:34px 0 0;
  padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.25);
  font-size:14px;
  line-height:1.7;
  color:#DCC6D9;
}


/* --------------------------------------------------------------------------
   De onderbalk met de voorwaarden en het copyright stond op crème, onder de
   paarse footer. Dat leest als een brede witte rand onderaan de pagina.
   Nu de donkere pruimkleur, uitgelijnd met de rest, met het copyright boven
   de voorwaarden.

   Pruim in plaats van paars is ook een leesbaarheidskeuze: wit op #996699
   haalt maar 4,45 : 1 en dat is het hoogst haalbare op die kleur. Op #4D1A47
   is het 13,5 : 1.
   -------------------------------------------------------------------------- */

#container_base2_modules{ background:var(--pct-plum-diep) !important; }

#container_footer{
  background:var(--pct-plum-diep) !important;
  padding:22px 30px 26px !important;
  display:flex;
  flex-direction:column;
}

#container_footer .copyright{
  order:1;
  width:100%;
  max-width:1120px;
  margin:0 auto 4px;
  padding:0 !important;
  text-align:left;
}
#container_footer .footermenu{
  order:2;
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 !important;
}

#container_footer .copyright,
#container_footer .copyright *{
  color:#fff !important;
  opacity:.82;
  font-size:13.5px;
  line-height:1.7;
  letter-spacing:0;
  text-transform:none;
}

/* Het sjabloon zet de voorwaardenlijst als kolom. Hier hoort hij op een rij. */
#container_footer .footermenu ul{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  text-align:left !important;
  margin:0;
  padding:0;
  list-style:none;
}
#container_footer .footermenu li{
  display:inline-flex !important;
  flex:0 0 auto !important;
  width:auto !important;
  align-items:center;
  margin:0;
  padding:0;
}
#container_footer .footermenu a{
  color:#fff !important;
  opacity:.82;
  font-size:13.5px;
  line-height:1.7;
}
#container_footer .footermenu a:hover{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:3px;
}

@media only screen and (max-width:767px){
  #container_footer{ padding:20px 20px 24px !important; }
}


/* ==========================================================================
   27. AFWISSELENDE ACHTERGRONDEN
   --------------------------------------------------------------------------
   In het ontwerp wisselen de blokken tussen crème en wit, met de paarse band
   en de donkere afsluiting ertussen. Dat geeft de pagina ritme.

   De banden lopen van rand tot rand met dezelfde box-shadow-truc als de
   paarse band: 100vmax naar links en rechts, verticaal weer afgesneden.
   Geen 100vw, dus geen horizontale schuifbalk.
   ========================================================================== */

.pct-sectie--wit{
  background:#fff;
  box-shadow:0 0 0 100vmax #fff;
  clip-path:inset(0 -100vmax);
}

.pct-sectie--creme2{
  background:var(--pct-creme-2);
  box-shadow:0 0 0 100vmax var(--pct-creme-2);
  clip-path:inset(0 -100vmax);
}

/* De kaarten in een wit blok hebben een crème vulling nodig, anders vallen ze
   weg tegen de achtergrond. */
/* De recensiekaarten hebben hun eigen blush-vulling, die valt overal op.
   De tarieven- en agendakaarten zijn wit en zouden in een wit blok wegvallen;
   die krijgen daar crème. */
.pct-sectie--wit .pct-fact,
.pct-sectie--wit .pct-agenda .ic-event-div{
  background:var(--pct-creme);
}


/* ==========================================================================
   28. MENUBALK
   --------------------------------------------------------------------------
   Het laatste menu-item ("Plan een kennismaking", class pct-menuknop) is een
   knop in plaats van een link. Dat item staat in het hoofdmenu, dus het werkt
   op elke pagina en Edgar kan de tekst en de bestemming zelf beheren.

   Het meeplakken van de kop regelt het sjabloon zelf (parameter sticky_sw).
   Daar geen CSS voor schrijven: die vecht met het sticky-wrapper-script.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Geen menu-item over twee regels: dat maakt de balk hoger en de items
   ongelijk van hoogte. Alles op één regel.
   -------------------------------------------------------------------------- */
.hornav > ul > li > a{ white-space:nowrap; }


/* --------------------------------------------------------------------------
   Het laatste menu-item als knop.
   -------------------------------------------------------------------------- */
.hornav a.pct-menuknop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  font-size:14.5px;
  line-height:1.2;
  letter-spacing:0 !important;
  text-transform:none !important;   /* het menu staat op hoofdletters, de knop niet */
  white-space:nowrap;
  padding:9px 16px !important;
  border-radius:9px;
  background:var(--pct-plum);
  color:#fff !important;
  text-decoration:none;
  transition:background-color .15s ease, transform .15s ease;
}
.hornav a.pct-menuknop:hover{
  background:#37102F;
  color:#fff !important;
  transform:translateY(-1px);
  text-decoration:none;
}
.hornav a.pct-menuknop::after{ content:none; }

/* In het uitschuifmenu op mobiel geen knopopmaak, daar is het gewoon een regel. */
.slideout a.pct-menuknop{
  background:transparent;
  color:inherit !important;
  padding:inherit !important;
  border-radius:0;
}


/* --------------------------------------------------------------------------
   De bovenste regel van de kop is leeg sinds de taalkeuze, de login en de
   sociale iconen eruit zijn. Facebook, Instagram en LinkedIn staan nu in de
   footer bij Contact. Die lege regel kostte 35 px kophoogte.
   Komt er ooit weer iets in die regel, haal deze regel dan weg.
   -------------------------------------------------------------------------- */
#container_header .header_top{ display:none; }


/* ==========================================================================
   29. AFBEELDINGEN IN ARTIKELEN
   --------------------------------------------------------------------------
   De foto's op de pagina's van Paula en Peter hebben een harde grijze rand
   van 3 px met rechte hoeken, als inline stijl in het artikel zelf. Daardoor
   wint die van elke stylesheet en is !important nodig.
   Nu dezelfde afronding als de foto op de homepage.
   ========================================================================== */

/* LET OP: uitdrukkelijk NIET op de homepage (itemid-464). Daar staat de balk
   met de keurmerklogo's in exact dezelfde wrapper. De regel hieronder is
   specifieker dan `.pct-logos img`, dus sloopte hij de vaste hoogte van die
   logo's (ze klapten in) en zette er een kader omheen. Om dezelfde reden
   staan `height` en `max-width` hier niet meer in: die horen bij de
   afbeelding zelf, niet bij dit kadertje. */
body:not(.itemid-464) .com-content-article__body img{
  border-radius:14px;
  border:1px solid var(--pct-lijn);
  box-shadow:0 10px 26px rgba(77,26,71,.10);
}


/* --------------------------------------------------------------------------
   Het logo naast de kop op de pagina's van Paula (module 814, P-Coaching &
   Therapie) en Peter (module 815, P-Coaching & Loopbaan). Het staat in de H2
   zelf, en was hoger dan de regel waardoor het over de tekst viel.
   -------------------------------------------------------------------------- */
#mod-custom814 h2 img,
#mod-custom815 h2 img{
  height:34px;
  width:auto;
  margin:0 0 0 12px !important;
  vertical-align:-6px;
}


/* ==========================================================================
   30. KOPPEN OP DE GEWONE TEKSTPAGINA'S
   ==========================================================================
   Paginatitel = H1. Daaronder stonden overal alleen H3's, dus werd het
   H2-niveau overgeslagen: een gat in de structuur voor zoekmachines en
   schermlezers. De sectiekoppen zijn nu H2.

   Twee grendels om de homepage niet te raken:
   - `body:not(.itemid-464)` sluit de homepage uit;
   - `>` betekent alleen koppen die rechtstreeks in de artikeltekst staan,
     dus nooit de koppen binnen een `.pct-sectie`-blok.
   Zonder die grendels wint deze regel van `.pct-sectie__kop h2` en worden de
   homepage-koppen kleiner. Dat is een keer gebeurd.
   ========================================================================== */

body:not(.itemid-464) .com-content-article__body > h2{
  font-family:Nunito, Arial, sans-serif;
  font-size:25px;
  font-weight:700;
  line-height:1.25;
  color:var(--pct-paars-tekst);
  margin:38px 0 14px;
  text-transform:none;
  letter-spacing:0;
}

body:not(.itemid-464) .com-content-article__body > h2:first-of-type{
  margin-top:30px;
}

/* De regel onder de naam op de pagina's van Paula en Peter ("Therapeut en
   coach - P-Coaching & Therapie") is geen kop maar een ondertitel; die stond
   als H3 in de tekst en opende dus een sectie die er niet is. Nu een gewone
   alinea, een maat kleiner dan de H2 zodat de rangorde klopt. */
body:not(.itemid-464) .pct-ondertitel{
  font-family:Nunito, Arial, sans-serif;
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  color:var(--pct-paars-tekst);
  margin:0 0 22px;
}


/* ==========================================================================
   31. OPLEIDINGSPAGINA'S: ÉÉN OPBOUW
   ==========================================================================
   Deze pagina's zijn los van elkaar gegroeid. Drie hulpmiddelen om ze weer
   gelijk te trekken. Alle drie hangen aan een eigen class, niet aan een
   plek in de pagina, zodat ze nooit per ongeluk iets anders raken.
   ========================================================================== */

/* --- 31a. De foto bovenaan een pagina ------------------------------------
   Overal even groot en op dezelfde plek: rechts naast de tekst op een
   breed scherm, over de volle breedte op een telefoon. Zet op de
   afbeelding class="pct-paginafoto" en haal de inline breedte weg. */
.pct-paginafoto{
  display:block;
  width:100%;
  max-width:360px;
  height:auto;
  margin:0 0 22px;
  border-radius:14px;
  border:1px solid var(--pct-lijn);
  box-shadow:0 10px 26px rgba(77,26,71,.10);
}
@media only screen and (min-width:768px){
  .pct-paginafoto{
    float:right;
    width:360px;
    margin:4px 0 22px 30px;
  }
}

/* --- 31b. Uitklapblok ("Lees verder voor gedetailleerde informatie") -----
   Gewoon <details> en <summary> van HTML zelf. Geen plug-in, geen extra
   JavaScript, geen tabbladen-component. Werkt in elke browser, ook als
   JavaScript uitstaat, en Google leest de inhoud gewoon mee.

   <details class="pct-uitklap">
     <summary>Lees verder voor gedetailleerde informatie</summary>
     <div class="pct-uitklap__in"> ... </div>
   </details>
*/
.pct-uitklap{
  margin:28px 0;
  padding:0 22px;
  border:1px solid var(--pct-lijn);
  border-radius:14px;
  background:var(--pct-creme-2);
}
.pct-uitklap > summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 0;
  cursor:pointer;
  list-style:none;
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--pct-paars-tekst);
}
.pct-uitklap > summary::-webkit-details-marker{ display:none; }
.pct-uitklap > summary::marker{ content:''; }
.pct-uitklap > summary::before{
  content:'';
  flex:0 0 auto;
  width:9px; height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  transition:transform .18s ease;
}
.pct-uitklap[open] > summary::before{ transform:rotate(45deg); }
.pct-uitklap > summary:hover{ color:var(--pct-plum); }
.pct-uitklap > summary:focus-visible{ outline:2px solid var(--pct-paars); outline-offset:3px; }
.pct-uitklap__in{ padding:2px 0 20px; }
.pct-uitklap__in > *:first-child{ margin-top:0; }

/* --- 31c. Datablokken ----------------------------------------------------
   De opleidingsdata stonden in tabbladen van het sjabloon. Nu drie gewone
   kaartjes naast elkaar, zonder component en zonder klikken. */
.pct-data{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin:24px 0;
}
@media only screen and (min-width:768px){
  .pct-data{ grid-template-columns:repeat(3, 1fr); }
}
.pct-data__kaart{
  border:1px solid var(--pct-lijn);
  border-radius:14px;
  background:#fff;
  padding:18px 20px 20px;
}
.pct-data__kaart h3{
  margin:0 0 12px !important;
  font-family:Nunito, Arial, sans-serif;
  font-size:17px !important;
  font-weight:700 !important;
  color:var(--pct-paars-tekst) !important;
}
.pct-data__kaart ul{
  margin:0;
  padding:0;
  list-style:none;
}
.pct-data__kaart li{
  padding:5px 0;
  border-bottom:1px solid var(--pct-lijn);
  font-size:15px;
}
.pct-data__kaart li:last-child{ border-bottom:0; }
.pct-data__kaart li em{
  display:block;
  font-style:normal;
  font-size:13px;
  color:var(--pct-grijs-licht);
}

/* --- 31d. Tweede foto verderop in de tekst -------------------------------
   Staat een pagina twee foto's, dan zweeft de eerste rechts (31a) en deze
   links, zodat de tekst er niet aan één kant tegenaan blijft plakken. */
.pct-paginafoto--links{ }
@media only screen and (min-width:768px){
  .pct-paginafoto--links{
    float:left;
    margin:4px 30px 22px 0;
  }
}

/* --- 31e. De keurmerklogo's onder "Erkenning" ----------------------------
   Stonden tegen elkaar aan, met een wit vierkant om het CAT-logo. Zelfde
   aanpak als de logobalk op de homepage: multiply haalt het wit weg, en de
   hoogtes zijn per logo gemeten zodat ze optisch even groot ogen. */
.pct-keurmerken{
  display:flex;
  align-items:center;
  gap:38px;
  flex-wrap:wrap;
  margin:16px 0 0;
}
.pct-keurmerken img{
  width:auto;
  mix-blend-mode:multiply;
}
.pct-keurmerken img[src*="CAT"]{ height:72px; }
.pct-keurmerken img[src*="NBVH"]{ height:48px; }


/* ==========================================================================
   32. TERUG NAAR BOVEN
   ==========================================================================
   Eén link in de footermodule (867), die op elke pagina staat. Omdat hij
   `position:fixed` is, maakt het niet uit waar hij in de pagina zit.

   Geen JavaScript en geen plug-in. `href="#top"` is een afspraak in HTML
   zelf: als er geen element met dat id bestaat, springt de browser naar de
   bovenkant van de pagina. Werkt dus ook als JavaScript uitstaat.

   Hij staat altijd zichtbaar. Alleen-tonen-na-scrollen kan niet zonder
   JavaScript (of met een truc die Safari en Firefox nog niet kennen), en
   een knop die soms wel en soms niet verschijnt is verwarrender dan een
   knop die er gewoon altijd is.
   ========================================================================== */

.pct-omhoog{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:900;
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--pct-plum);
  color:#fff !important;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 18px rgba(55,16,47,.30);
  text-decoration:none !important;
  opacity:.82;
  transition:opacity .18s ease, background .18s ease, transform .18s ease;
}
.pct-omhoog::before{
  content:'';
  width:11px; height:11px;
  border-left:2.5px solid currentColor;
  border-top:2.5px solid currentColor;
  transform:rotate(45deg);
  margin-top:4px;               /* pijlpunt optisch in het midden */
}
.pct-omhoog:hover,
.pct-omhoog:focus-visible{
  opacity:1;
  background:var(--pct-plum-diep);
  transform:translateY(-2px);
  color:#fff !important;
}
.pct-omhoog:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

@media only screen and (min-width:768px){
  .pct-omhoog{ right:28px; bottom:28px; width:50px; height:50px; }
}

/* Wie liever geen bewegende dingen ziet, krijgt ze niet. */
@media (prefers-reduced-motion:reduce){
  .pct-omhoog{ transition:none; }
  .pct-omhoog:hover{ transform:none; }
}

/* --- 31f. Het "Hart-elijk welkom"-bannertje ------------------------------
   Dit is een tekstbanner, geen foto. Vandaar geen kader en geen afronding;
   die kreeg hij wel van de algemene fotoregel. */
.pct-banner{ margin:6px 0 22px; }
.pct-banner img{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  height:auto;
  max-width:100%;
}


/* ==========================================================================
   33. HET GEDICHT ONDERAAN DE JUST BREATHE-PAGINA (module 851)
   ==========================================================================
   Het hele blok komt als geheel tevoorschijn en schuift omhoog zodra je er
   tijdens het scrollen bij komt.

   Dat regelt het sjabloon zelf; niets zelf verzinnen dus:

     .animate       -> visibility:hidden            (nexus.min.css)
     Waypoints      -> zet .animated erbij op 85% van het scherm
                                                    (js/scripts.js)
     .animated      -> visibility:visible, 1,5 s    (animate.min.css)
     .fadeInUp      -> welke beweging               (animate.min.css)

   In de module staat dus gewoon:
       <div class="pct-gedicht animate zoomInUp">

   `zoomInUp` = het blok komt van onderen omhoog en schaalt tegelijk open,
   als een popup. Andere namen die het sjabloon kent, mocht je willen
   wisselen: fadeInUp (rustig omhoog schuiven), bounceInUp (met een stuiter),
   zoomIn (alleen open schalen), fadeInLeft / fadeInRight (van opzij),
   flipInX, rollIn. Er zijn er 67; ze staan in animate.min.css.
   Hieronder staat alleen nog de vormgeving van het blok.
   ========================================================================== */

.pct-gedicht{
  margin:10px 0 0;
  padding:34px 24px 38px;
  border-radius:16px;
  background:var(--pct-blush);
  box-shadow:0 14px 40px rgba(77,26,71,.13);   /* laat hem als kaartje opkomen */
  text-align:center;
}
/* Een gedicht in dezelfde schreefloze letter als de rest van de site leest
   als een opsomming. Daarom hier een schreefletter, cursief: dat leest
   rustiger en zet het gedicht apart van de zakelijke tekst eromheen.
   Bewust GEEN extra webfont -- dit zijn letters die op vrijwel elk apparaat
   al staan, dus het kost geen enkele extra download. */
.pct-gedicht__in{
  max-width:600px;
  margin:0 auto;
  font-family:Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-style:italic;
  font-size:19px;
  line-height:1.95;
  color:var(--pct-paars-tekst);
}

/* De kop blijft in de huisletter: die hoort bij de site, niet bij het vers. */
.pct-gedicht__titel{
  font-family:Nunito, Arial, sans-serif;
  font-style:normal;
  font-weight:700;
  font-size:15px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pct-paars);
  margin-bottom:2px;
}
.pct-gedicht__label{
  font-family:Nunito, Arial, sans-serif;
  font-style:normal;
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--pct-grijs-licht);
  margin-bottom:24px;
}
.pct-gedicht__slot{
  margin-top:22px;
  font-style:normal;
  font-family:Nunito, Arial, sans-serif;
  font-size:15px;
  color:var(--pct-paars);
}

/* GEEN vangnet-animatie hier, en dat is met opzet.
   Ik had er eerst een staan (`.pct-gedicht.animate{ animation: ... }`) om het
   gedicht na zes seconden alsnog te tonen als het script niet zou draaien.
   Die regel is specifieker dan `.zoomInUp{ animation-name:zoomInUp }` uit
   animate.css en overschreef dus de animatie: er gebeurde niets meer.
   Wie hier iets aan `animation` zet, zet het effect uit. Doe dat niet. */

/* Wie geen bewegende beelden wil, krijgt het gedicht meteen. */
@media (prefers-reduced-motion:reduce){
  .pct-gedicht.animate{ visibility:visible !important; animation:none !important; }
}

@media only screen and (min-width:768px){
  .pct-gedicht{ padding:46px 30px 50px; }
  .pct-gedicht__in{ font-size:21px; }
}

/* --- 31g. Klein keurmerk in de tekst -------------------------------------
   Bijvoorbeeld het TTC-facilitatorlogo. Geen paginafoto: op ware grootte,
   zonder kader, en het wit eruit met multiply. */
.pct-keurmerk{
  height:78px;
  width:auto;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  mix-blend-mode:multiply;
}


/* ==========================================================================
   34. DE CONTACTFORMULIEREN (Convert Forms)
   ==========================================================================
   De formulieren van "Mail naar Paula" en "Mail naar Peter" stonden nog in
   de standaardopmaak van de plug-in: een lichtpaarse knop van 3 px rond in
   Raleway, en velden met een grijs randje. Dat wijkt af van alle andere
   knoppen op de site.

   Hieronder krijgt `.cf-btn` exact dezelfde vorm als `.pct-btn--primary` en
   sluiten de velden aan bij de rest: 10 px rond, de huislijnkleur, en een
   duidelijke paarse focusring voor wie met het toetsenbord invult.
   De plug-in zelf is niet aangeraakt; dit is alleen opmaak.
   ========================================================================== */

.cf-form .cf-btn,
.cf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:700 !important;
  font-size:16px !important;
  line-height:1.2 !important;
  padding:14px 22px !important;
  border-radius:10px !important;
  border:2px solid transparent !important;
  background:var(--pct-plum) !important;
  color:#fff !important;
  text-decoration:none !important;
  transition:background-color .15s ease, transform .15s ease;
}
.cf-btn:hover,
.cf-btn:focus-visible{
  background:var(--pct-plum-diep) !important;
  transform:translateY(-1px);
}
.cf-btn:focus-visible{ outline:2px solid var(--pct-paars); outline-offset:3px; }

.cf-input,
.cf-form input[type="text"],
.cf-form input[type="email"],
.cf-form input[type="tel"],
.cf-form textarea,
.cf-form select{
  border-radius:10px !important;
  border:1px solid var(--pct-lijn) !important;
  background:#fff !important;
  font-family:Raleway, Arial, sans-serif;
  font-size:16px;
  padding:12px 14px !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cf-input:focus,
.cf-form input:focus,
.cf-form textarea:focus,
.cf-form select:focus{
  border-color:var(--pct-paars) !important;
  box-shadow:0 0 0 3px rgba(153,102,153,.18) !important;
  outline:none;
}
.cf-label{
  font-family:Nunito, Arial, sans-serif;
  font-weight:600;
  color:var(--pct-paars-tekst);
}


/* ==========================================================================
   35. DE AGENDAPAGINA (iCagenda, menu-item 683)
   ==========================================================================
   De agendapagina zag er heel anders uit dan het agendablok op de homepage:
   grijze kaartjes met 4 px ronding, het datumblok 204 px breed op grijs
   #ddd, het jaartal en de tijd in WIT op dat grijs (dus onleesbaar), en de
   titel in Raleway 16 px grijs in plaats van Nunito paars.

   Hoe deze regels op de pagina komen: het menu-item heeft als paginaklasse
   ` pct-agenda` gekregen. Joomla zet die op de component-wrapper
   (`.ic-list-view`), zodat dezelfde naam werkt als bij het blok op de
   homepage. Er is dus niets aan de plug-in of aan overrides veranderd.

   LET OP: de kleur van het datumblok komt uit iCagenda zelf (inline stijl
   per activiteit). Vandaar `!important` op de achtergrond hier, anders
   blijft het grijs.
   ========================================================================== */

/* --- de kop van de lijst ------------------------------------------------- */
.pct-agenda .ic-header-title{
  font-family:Nunito, Arial, sans-serif;
  font-weight:800;
  color:var(--pct-plum);
}
.pct-agenda .ic-header-subtitle{
  color:var(--pct-grijs-licht);
  font-size:14px;
}

/* --- de kaartjes --------------------------------------------------------- */
.pct-agenda .ic-list-event{
  background:#fff !important;
  border:1px solid var(--pct-lijn);
  border-radius:14px !important;
  padding:20px 22px !important;
  margin-bottom:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pct-agenda .ic-list-event:hover{
  border-color:var(--pct-paars);
  box-shadow:0 8px 22px rgba(77,26,71,.08);
}

/* --- het datumblok ------------------------------------------------------- */
.pct-agenda .ic-box-date{
  width:88px !important;
  min-width:88px;
  margin:0 22px 10px 0 !important;
  padding:12px 6px !important;
  border-radius:12px !important;
  background:var(--pct-blush) !important;
  text-align:center;
}
.pct-agenda .ic-box-date .ic-day{
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:800 !important;
  font-size:26px !important;
  line-height:1.1 !important;
  color:var(--pct-plum) !important;
}
.pct-agenda .ic-box-date .ic-month{
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:700 !important;
  font-size:12px !important;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--pct-paars-tekst) !important;
}
/* Jaartal en tijd stonden in WIT op een lichte achtergrond: onzichtbaar. */
.pct-agenda .ic-box-date .ic-year{
  font-family:Nunito, Arial, sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--pct-paars-tekst) !important;
}
.pct-agenda .ic-box-date .ic-time{
  font-size:12.5px !important;
  color:var(--pct-grijs) !important;
}

/* --- titel en tekst ------------------------------------------------------ */
.pct-agenda .ic-event-title,
.pct-agenda .ic-title-header,
.pct-agenda .ic-event-title a,
.pct-agenda .ic-title-header a{
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:800 !important;
  font-size:19px !important;
  line-height:1.3 !important;
  color:var(--pct-plum) !important;
}
.pct-agenda .ic-place,
.pct-agenda .ic-next-date{
  font-size:14px;
  color:var(--pct-grijs-licht);
}
.pct-agenda .ic-descshort{
  font-size:15px;
  color:var(--pct-grijs);
  line-height:1.6;
}

/* --- knoppen en paginering ----------------------------------------------
   De paginering stond in een blauw (#49AFCD) dat nergens anders op de site
   voorkomt. */
.pct-agenda .ic-btn{
  border-radius:8px !important;
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:700 !important;
}
.pct-agenda .ic-btn-info,
.pct-agenda .ic-btn.ic-active{
  background:var(--pct-plum) !important;
  border-color:var(--pct-plum) !important;
  color:#fff !important;
}
.pct-agenda .ic-btn-small{
  background:#fff !important;
  border:1px solid var(--pct-lijn) !important;
  color:var(--pct-plum) !important;
}

/* De categorieknop BOVENAAN de lijst (waarmee je filtert): gevuld pruim. */
.pct-agenda .ic-header-categories .ic-title-cat-btn{
  background:var(--pct-plum) !important;
  border-color:var(--pct-plum) !important;
  color:#fff !important;
  border-radius:8px !important;
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:700 !important;
}

/* Het categorielabel BIJ ELKE ACTIVITEIT is iets heel anders: een klein
   chipje naast de titel. Dat mag niet gevuld pruim zijn -- dan staat er
   donkere tekst op een donkere achtergrond en lees je er niets van.
   iCagenda zet daar zelf een achtergrondkleur op als inline stijl (de
   categoriekleur), vandaar !important. */
.pct-agenda .ic-title-cat a.ic-title-cat-btn,
.pct-agenda .ic-title-cat .ic-title-cat-btn{
  background:var(--pct-blush) !important;
  background-color:var(--pct-blush) !important;
  color:var(--pct-paars-tekst) !important;
  border:1px solid var(--pct-lijn) !important;
  border-radius:999px !important;
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:700 !important;
  font-size:12px !important;
  letter-spacing:.04em;
  padding:4px 12px !important;
}

/* De "Details"-knop stond in de sjabloonstijl: wit op #996699, 0 px rond. */
.pct-agenda .ic-actionbar a.btn,
.pct-agenda .ic-actionbar .btn,
.pct-agenda .ic-actionbar-readmore a{
  background:var(--pct-plum) !important;
  background-color:var(--pct-plum) !important;
  color:#fff !important;
  border:2px solid transparent !important;
  border-radius:10px !important;
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:700 !important;
  font-size:14px !important;
  padding:9px 18px !important;
  text-decoration:none !important;
}
.pct-agenda .ic-actionbar a.btn:hover,
.pct-agenda .ic-actionbar .btn:hover{
  background:var(--pct-plum-diep) !important;
  background-color:var(--pct-plum-diep) !important;
}

/* --- de detailpagina van een activiteit ---------------------------------
   Daar was de rangorde omgedraaid: de naam van de activiteit stond op
   26 px in Raleway, en de categorie eronder op 35 px. */
body.view-event.itemid-683 .maincontent h1{
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:800 !important;
  font-size:36px !important;
  line-height:1.2 !important;
  color:var(--pct-plum) !important;
  margin-bottom:6px;
}
body.view-event.itemid-683 .maincontent h2{
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:600 !important;
  font-size:17px !important;
  color:var(--pct-paars-tekst) !important;
}
body.view-event.itemid-683 .maincontent h3{
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:700 !important;
  font-size:15px !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pct-paars) !important;
}
body.view-event.itemid-683 .maincontent img{
  border-radius:14px;
  border:1px solid var(--pct-lijn);
}

/* --- 35b. Het label "Volgeboekt" ----------------------------------------
   Komt uit iCagenda zelf (tabblad Registraties: "Evenement geannuleerd?"
   aan, met een eigen labeltekst). Stond eerst in de titel van de activiteit;
   nu is het een echt veld, en dat is beter: de titel blijft de titel, en
   iCagenda weet nu ook dat de activiteit vol is.

   De plug-in geeft het de bootstrap-class `btn-danger`, wat hier uitpakte
   als wit op #996699 met scherpe hoeken. Hieronder een rustig chipje dat
   opvalt zonder alarmerend te zijn. */
.pct-agenda span.ic-event-cancelled{
  display:inline-block;
  background:#FBEAEA !important;
  background-color:#FBEAEA !important;
  color:#8C2F3B !important;
  border:1px solid #F0CFCF !important;
  border-radius:999px !important;
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:700 !important;
  font-size:12px !important;
  letter-spacing:.04em;
  padding:4px 12px !important;
  text-transform:none;
  vertical-align:middle;
}


/* ==========================================================================
   36. HET AGENDABLOK OP DE HOMEPAGE GELIJK AAN DE AGENDAPAGINA
   ==========================================================================
   Het blok op de homepage (module 866, mod_ic_event_list) en de agendapagina
   (de component) gebruiken andere klassenamen voor hetzelfde ding:

       homepage        agendapagina
       .ic-date-div    .ic-box-date
       .ic-day         .ic-box-date .ic-day

   Daardoor liepen ze uit elkaar: op de homepage bleef het datumblokje 36 px
   op het blauw dat iCagenda er als inline stijl op zet, met bijna zwarte
   cijfers. Hieronder krijgen beide dezelfde maat, kleur en letter.

   Waarom !important: die achtergrondkleur staat per activiteit als inline
   stijl in de HTML. Alleen !important wint daarvan.
   ========================================================================== */

.pct-agenda .ic-date-div{
  width:88px !important;
  min-width:88px;
  padding:12px 6px !important;
  border-radius:12px !important;
  background:var(--pct-blush) !important;
  text-align:center;
}
.pct-agenda .ic-date-div .ic-day{
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:800 !important;
  font-size:26px !important;
  line-height:1.1 !important;
  color:var(--pct-plum) !important;
}
.pct-agenda .ic-date-div .ic-month{
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:700 !important;
  font-size:12px !important;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--pct-paars-tekst) !important;
}
.pct-agenda .ic-date-img-box{ width:auto !important; }

@media only screen and (min-width:768px){
  .pct-agenda .ic-event-div{ grid-template-columns:88px 1fr; }
}

/* Het label "Volgeboekt" heeft in de module andere klassen dan op de
   agendapagina (`label label-important` in plaats van `btn btn-danger`).
   Vandaar dat de regel hieronder alleen op `.ic-event-cancelled` hangt:
   die naam gebruiken ze allebei. */
.pct-agenda span.ic-event-cancelled{
  display:inline-block;
  background:#FBEAEA !important;
  background-color:#FBEAEA !important;
  color:#8C2F3B !important;
  border:1px solid #F0CFCF !important;
  border-radius:999px !important;
  font-family:Nunito, Arial, sans-serif !important;
  font-weight:700 !important;
  font-size:12px !important;
  letter-spacing:.04em;
  padding:4px 12px !important;
  margin:0 0 4px !important;
  vertical-align:middle;
}


/* ==========================================================================
   37. DE TARIEVENTABELLEN (module 818 Paula, 819 Peter)
   ==========================================================================
   Stonden als kale tabel in Raleway zonder lijnen, koprij of uitlijning; de
   bedragen liepen niet onder elkaar. Hieronder een rustige prijslijst:
   bedragen rechts uitgelijnd, een dunne lijn per regel, de koprij in de
   huisletter. De lege derde kolom van de oorspronkelijke tabel valt weg.
   ========================================================================== */

.pct-tarieven{
  width:100%;
  border-collapse:collapse;
  margin:14px 0 4px;
  font-family:Raleway, Arial, sans-serif;
  font-size:15.5px;
}
.pct-tarieven td{
  /* 7px in plaats van 10px: die paar pixels zijn nodig zodat "TTC (Talking to
     the Chakra's)" in de eerste kolom op een regel past. */
  padding:9px 7px;
  border-bottom:1px solid var(--pct-lijn);
  vertical-align:top;
}
/* De eerste rij is de kop: "Tarieven per 1-1-2026 ... BTW-vrij" */
.pct-tarieven tr:first-child td{
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pct-paars-tekst);
  border-bottom:2px solid var(--pct-lijn);
  padding-top:0;
}
.pct-tarieven tr:last-child td{ border-bottom:0; }
/* Bedragen rechts, zodat ze onder elkaar staan en je ze kunt vergelijken. */
.pct-tarieven td:nth-child(2){
  text-align:right;
  white-space:nowrap;
  /* De rechterruimte is de goot waarin "(ex BTW)" hangt. Die is voor ELKE rij
     even breed, ook voor rijen zonder ex BTW -- daardoor eindigen alle bedragen
     op precies dezelfde lijn. Verander je deze waarde, verander dan ook
     `right` bij .pct-btw hieronder. */
  position:relative;
  padding-right:56px;
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  color:var(--pct-plum);
}
/* De derde kolom is in beide tabellen leeg; die neemt alleen ruimte in. */
.pct-tarieven td:nth-child(3){ display:none; }
.pct-tarieven td:nth-child(4){
  color:var(--pct-grijs-licht);
  font-size:14px;
  white-space:nowrap;
}
/* "(ex BTW)" hoort bij het bedrag, niet bij de eenheid. Het staat daarom in
   dezelfde cel als het bedrag, maar kleiner en lichter zodat het bedrag zelf
   het eerst opvalt. Stond het eerder in de laatste kolom, dan brak het daar
   af op twee regels. */
.pct-tarieven .pct-btw{
  position:absolute;
  right:4px;
  /* Uitlijnen op de EERSTE regel van de cel, niet op het midden: bij een rij
     die twee regels hoog is (TTC) zakte "(ex BTW)" anders onder het bedrag. */
  top:9px;
  line-height:23px;
  font-family:Raleway, Arial, sans-serif;
  font-weight:400;
  font-size:11.5px;
  color:var(--pct-grijs-licht);
  white-space:nowrap;
}
/* "BTW-vrij" staat in de kop boven de BEDRAGEN, want daar gaat het over: alle
   bedragen zijn BTW-vrij, behalve de regels met "(ex BTW)" erachter. Stond het
   eerder boven de kolom "Per uur / Per 1,5 uur", en dat las nergens naar. */
.pct-tarieven tr:first-child td:nth-child(2){
  color:var(--pct-paars-tekst);
  font-family:Nunito, Arial, sans-serif;
  font-weight:700;
  font-size:13px;
}
.pct-tarieven tr:first-child td:nth-child(4){ color:var(--pct-paars-tekst); }

@media only screen and (max-width:600px){
  .pct-tarieven{ font-size:14.5px; }
  .pct-tarieven td{ padding:8px 6px; }
  .pct-tarieven td:nth-child(4){ font-size:13px; }
  /* Op een smal scherm mag "(ex BTW)" wel afbreken; anders loopt de tabel
     buiten het scherm. */
  .pct-tarieven td:nth-child(4){ white-space:normal; }
  /* Op een smal scherm is 72px goot te veel; het bedrag zou dan tegen de
     naam aan komen te staan. */
  .pct-tarieven td:nth-child(2){ padding-right:52px; }
  .pct-tarieven .pct-btw{ font-size:11px; right:2px; }
}


/* LET OP: iCagenda zet de class `ic-event-cancelled` NIET alleen op het
   labeltje, maar ook op de hele kaart van de activiteit. De regels hierboven
   gelden daarom uitsluitend voor `span.ic-event-cancelled`. Ging dat een keer
   mis, dan werd de hele kaart een grote roze pil -- dat is precies gebeurd.
   Hieronder wordt de kaart voor de zekerheid teruggezet. */
.pct-agenda .ic-list-event.ic-event-cancelled,
.pct-agenda .ic-event-div.ic-event-cancelled{
  background:#fff !important;
  border-radius:14px !important;
  border:1px solid var(--pct-lijn) !important;
  color:inherit !important;
  padding:20px 22px !important;
  font-size:inherit !important;
  letter-spacing:normal !important;
  display:block;
}


/* ------------------------------------------------------------------
   38. UITKLAPMENU -- kleur bij aanwijzen
   Het sjabloon (nexus.min.css) zet hier rgba(0,0,0,.075): een grijze
   balk die niet bij de site past. Zelfde selector, maar dan in de
   lila van de huisstijl, met de tekst in het paars.
   ------------------------------------------------------------------ */
.hornav > ul > li > ul > li:hover > a,
.hornav > ul > li ul > li > ul > li:hover > a{
  background-color:#F1E6EE;
  color:var(--pct-paars-tekst);
}


/* ------------------------------------------------------------------
   39. MOBIEL MENU

   Het sjabloon heeft wel degelijk een uitschuifmenu (slideout.min.js,
   `<div id="slideout">` met het complete menu erin), en de knop staat er
   ook: `<a class="slideout-toggle-open"><i class="fa fa-bars"></i></a>`.
   Alleen was hij op de telefoon onzichtbaar, om twee redenen tegelijk:

   1. De knop is WIT en de kop van de site is ook wit.
   2. Font Awesome wordt op deze site niet ingeladen (de geladen fonts zijn
      IcoMoon, iCicons, Raleway en Nunito). Het icoontje `fa fa-bars` heeft
      dus geen letterteken -- de knop was letterlijk leeg.

   Daarom tekenen we de streepjes en het kruisje zelf met CSS. Werkt zonder
   iconenfont en blijft scherp op elk scherm.

   1140 px is de grens die het sjabloon zelf al gebruikt om `.hornav` te
   verbergen en `.slideout-toggle-open` op display:block te zetten. Die
   grens houden we aan; verzin hier geen eigen breekpunt.
   ------------------------------------------------------------------ */
@media only screen and (max-width:1140px){

  /* --- de hamburgerknop -------------------------------------------- */
  .slideout-toggle-open{
    /* .header_main staat al op position:relative, dus hier hangt hij aan */
    position:absolute;
    top:50%;
    margin-top:-23px;          /* halve hoogte: netjes naast het logo */
    right:12px;
    width:46px;                /* 46 px = comfortabel aantikbaar */
    height:46px;
    color:var(--pct-plum);
    z-index:120;
  }
  .slideout-toggle-open i{ display:none !important; }

  /* LET OP: geen `width` op de pseudo-elementen -- die wordt door het
     sjabloon overschreven en dan krijg je drie streepjes van 6 px die
     eruitzien als een verticaal beletselteken. Gebruik left + right. */
  .slideout-toggle-open::before,
  .slideout-toggle-open::after{
    content:"";
    position:absolute;
    left:9px; right:9px;
    height:2px;
    background:currentColor;
    border-radius:2px;
  }
  /* Bovenste streepje plus, via de schaduw, het middelste erbij. */
  .slideout-toggle-open::before{ top:15px; box-shadow:0 8px 0 currentColor; }
  .slideout-toggle-open::after{  top:31px; }

  /* Staat het menu open, dan verdwijnt de hamburger. Hij zou anders een
     dode knop zijn: het sjabloon koppelt hem aan open(), niet aan toggle().
     Sluiten gaat met het kruisje in het paneel. */
  html.slideout-open .slideout-toggle-open{ opacity:0; pointer-events:none; }

  /* --- het paneel schuift OVER de pagina, vanaf links --------------- */
  /* Standaard duwt slideout.js de hele pagina opzij met een inline
     `transform: translateX(-256px)` op .slideout-panel, en staat het menu
     op `right:0` (ondanks de klassenaam `slideout-menu-left`).
     Wij zetten dat allebei stop: de pagina blijft staan en het menu komt
     eroverheen. Een inline stijl overrule je alleen met !important. */
  html.slideout-open .slideout-panel{ transform:none !important; }

  /* Verduistering over de pagina. Vangt ook de tikjes op, zodat je niet
     per ongeluk een link achter het menu aantikt. */
  html.slideout-open .slideout-panel::after{
    content:"";
    position:fixed; inset:0;
    background:rgba(0,0,0,.38);
    z-index:900;
  }

  /* Het menu staat altijd klaar (display:block), maar buiten beeld en op
     visibility:hidden. Daardoor kan het echt schuiven; met display:none
     zou er geen beginframe zijn en dus geen animatie. */
  #slideout.slideout-menu{
    display:block !important;
    left:0; right:auto;
    width:280px;
    z-index:1000;
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform .3s ease, visibility .3s;
    box-shadow:0 0 24px rgba(0,0,0,.35);
  }
  html.slideout-open #slideout.slideout-menu{
    transform:translateX(0);
    visibility:visible;
  }

  /* --- kopbalk van het paneel: "Menu" + kruisje -------------------- */
  #slideout .slideout-toggle-close{
    display:block; position:relative; height:56px; font-size:0;
    border-bottom:1px solid rgba(255,255,255,.16);
  }
  #slideout .slideout-toggle-close i{ display:none !important; }
  #slideout .slideout-toggle-close::before{
    content:"Menu";
    position:absolute; left:20px; top:50%; transform:translateY(-50%);
    font-family:Nunito, Arial, sans-serif; font-size:17px; font-weight:700;
    letter-spacing:.06em; color:#fff;
  }
  #slideout .slideout-toggle-close::after{
    content:"\00d7";                    /* × */
    position:absolute; right:18px; top:50%; transform:translateY(-50%);
    font-family:Arial, sans-serif; font-size:30px; line-height:1; color:#fff;
  }

  /* --- de menuregels: groter en ruimer ----------------------------- */
  /* Stond op 14 px; dat leest niet lekker op een telefoon. */
  #slideout ul.menu > li > a{
    display:block;
    font-size:17px; line-height:1.3;
    padding:15px 20px;
    letter-spacing:.03em;
    color:#fff;
  }
  #slideout ul.menu > li{ border-bottom:1px solid rgba(255,255,255,.12); }

  #slideout ul.mod-menu__sub > li > a{
    display:block;
    font-size:15px; line-height:1.3;
    padding:11px 20px 11px 34px;        /* ingesprongen onder het hoofditem */
    color:rgba(255,255,255,.82);
  }
  #slideout ul.mod-menu__sub > li{ border-top:1px solid rgba(255,255,255,.08); }

}


/* ------------------------------------------------------------------
   40. MEDITATIESPELERS (artikel 144, /methodieken/meditaties)

   De twee `<audio>`-spelers waren bij de verbouwing uit het artikel
   verdwenen; alleen de bijschriften stonden er nog. Ze staan er weer in,
   met `preload="none"` -- de bestanden zijn groot (ontspanning.mp3 is
   59 MB) en mogen pas laden als iemand op play drukt.

   Bijschrift onder de speler in plaats van ernaast.
   ------------------------------------------------------------------ */
/* Let op de zwaardere selector: het sjabloon zet `.item-page p` op
   display:block en wint anders van een losse class. */
.item-page p.pct-meditatie,
.pct-meditatie{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin:0 0 22px;
}
.item-page p.pct-meditatie audio,
.pct-meditatie audio{
  width:100%;
  max-width:420px;
  height:44px;
}
.item-page p.pct-meditatie span,
.pct-meditatie span{
  font-size:15px;
  color:var(--pct-grijs-licht);
}


/* ------------------------------------------------------------------
   41. LANGE WOORDEN IN KOPPEN OP DE TELEFOON

   "Klachtenreglement" is bij 44,8 px maar liefst 412 px breed. Dat past
   niet op een telefoon en het is één woord, dus het kan nergens afbreken.
   Gevolg: de hele pagina wordt breder dan het scherm en ALLE tekst valt
   rechts weg -- niet alleen de kop.

   Gemeten over 53 pagina's; dit speelt bij:
     Klachtenreglement (412 px) · cliënt-therapeut (348) ·
     Transformerend (341) · Betalingsvoorwaarden (376) ·
     Verantwoordelijkheid (356)

   Twee maatregelen samen: de H1 kleiner op smalle schermen, én lange
   woorden mogen afbreken. Dat tweede is het vangnet voor koppen en
   webadressen die we nu nog niet kennen.
   ------------------------------------------------------------------ */
@media only screen and (max-width:600px){

  .page-header h1,
  .item-page h1{
    font-size:30px;              /* "Klachtenreglement" wordt dan 276 px */
    line-height:1.15;
  }

  .item-page h1,
  .item-page h2,
  .item-page h3,
  .page-header h1,
  .item-page p,
  .item-page li{
    overflow-wrap:break-word;
    word-break:break-word;       /* vangnet voor lange woorden en urls */
    hyphens:auto;
  }

}