@charset "UTF-8";
/*
 * pages.scss — opmaak voor de ontworpen paginatemplates + het nieuwsdetail.
 * Los SCSS-entry-point (net als main.scss / shop.scss); compileert naar
 * ../css/pages.css, dat na main.css wordt ingeladen (zie functions.php).
 *
 * Alleen CSS-custom-properties (var(--tj-*)), dus geen @use nodig.
 * Wat hier NIET hoort: per-pagina :root-kleurthema's van
 * page-managementinformatie.php en page-urgentiedienstverlening.php.
 */
/* ------------------------------------------------------------------ gedeeld */
.footer-widget .title {
  color: var(--tj-color-theme-primary);
}

/* Full-width pijl-knop (sidebar-CTA's): tekst tegen links, pijlbol tegen
   rechts i.p.v. de standaard center-justify die bij 100% breedte een
   vreemd gat tussen tekst en bol laat vallen. */
.tj-primary-btn.w-100 {
  justify-content: space-between;
}

/* Eyebrow-pill in sec-heading: paarse tekst op de lila achtergrond,
   net als het huisje-icoon ernaast (main.css zet 'm op donkergrijs). */
.sec-heading .sub-title {
  color: var(--tj-color-theme-primary);
}

/* Tag-cloud op detailpagina's: paarse tekst in de niet-gehoverde staat
   i.p.v. de standaard donkergrijze tekstkleur. */
.tagcloud a {
  color: var(--tj-color-theme-primary);
}

/* -------------------------------------------------------------- front-page */
/* Homepage-banner draait met effect:"fade" (gestapelde slides). Naast
   fadeEffect.crossFade:true in main.js laten we elke slide-afbeelding een
   paar px/% buiten de container lopen, zodat er tijdens de crossfade nooit
   een rand van een andere slide doorschemert (licht-voor / donker-achter).
   object-fit:cover -> alleen iets meer crop; verschuift niets in de layout. */
.tj-banner-section .banner-img .swiper-slide img {
  top: -8%;
  height: 116%;
  /* radius komt van de container-clip hieronder; de eigen radius van de
     (nu verticaal overlopende) afbeelding gaf afgekapte hoeken. */
  border-radius: 0;
}

/* Eigen compositing-laag zodat de afgeronde overflow-clip ook geldt voor de
   getransformeerde slide-afbeeldingen (ScrollSmoother data-speed). */
.tj-banner-section .banner-img {
  transform: translateZ(0);
}

@media (max-width: 575px) {
  .banner-content .banner-title {
    font-size: clamp(22px, 7.5vw, 34px);
  }
  .banner-left-box {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .banner-left-box::after {
    bottom: -10px;
    background-size: auto 60px;
  }
  h1 img[src*="25-jaar-label"] {
    width: 45px !important;
    margin-top: 0 !important;
    margin-inline-start: 0 !important;
  }
}
/* ------------------------------------------------- paginering nieuwsoverzicht (paars) */
.tj-pagination ul li .page-numbers {
  border-color: var(--tj-color-theme-primary);
  color: var(--tj-color-theme-primary);
}

.tj-pagination ul li .page-numbers.current,
.tj-pagination ul li .page-numbers.prev,
.tj-pagination ul li .page-numbers.next {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}

.tj-pagination ul li .page-numbers.prev i,
.tj-pagination ul li .page-numbers.next i {
  color: var(--tj-color-common-white);
}

/* "Lees verder"-pijltje op de nieuwskaarten paars i.p.v. donker */
.blog-item .text-btn .btn-icon {
  background-color: var(--tj-color-theme-primary);
}

/* Hele nieuwskaart klikbaar i.p.v. alleen titel + knop: .stretched-link
   op de titel-link (homepage) dekt de hele kaart. De "Lees meer"-knop
   blijft zelf ook een aparte, focusbare link — staat met z-index erboven. */
.blog-item {
  position: relative;
}

.blog-item .text-btn {
  position: relative;
  z-index: 2;
}

/* De globale reset is maar `img{max-width:100%}`, zonder height:auto. Dat
   is genoeg zolang een <img> geen width/height-attributen heeft (zoals bij
   de vaste pagina's), maar the_post_thumbnail() zet die er wél op — zodra
   de breedte dan terugschaalt naar de kolombreedte blijft de hoogte op
   z'n oorspronkelijke pixelwaarde staan, en wordt de foto ingedrukt. */
.single .post-details-wrapper .blog-images img {
  width: 100%;
  height: auto;
}

.blog-category-two .cate-text .title,
.blog-category-two .cate-text .text {
  color: var(--tj-color-theme-primary);
}

.tj-sidebar-widget.tj-recent-posts .post-thumb {
  width: 100px;
  height: 64px;
}

.tj-sidebar-widget.tj-recent-posts .post-thumb a {
  display: block;
  height: 100%;
}

.tj-sidebar-widget.tj-recent-posts .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------ footer strak (geen overloop) */
/* body-klasse `footer-flush` via functions.php: nieuwsoverzicht, zoekresultaten,
   archieven en de contactpagina hebben geen sectie die in de footer overloopt. */
.footer-flush .tj-footer-section {
  padding-top: 0;
}

/* "algemene voorwaarden"-link in het nieuwsbriefblok volgt het footer-accent */
.tj-footer-section .subscribe-form label a {
  color: var(--tj-color-theme-primary);
}

/* --------------------------------------------------------------- contact */
.post-details-wrapper .blog-text .row .content-card {
  margin-bottom: 0;
  padding: 32px;
}

@media (max-width: 575.98px) {
  .post-details-wrapper .blog-text .row .content-card {
    padding: 24px 20px;
  }
}
.blog-text .contact-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.blog-text .contact-line > i {
  color: var(--tj-color-theme-primary);
  font-size: 18px;
  position: relative;
  top: 3px;
}

.blog-text .contact-line a {
  color: inherit;
}

.blog-text .contact-line .note {
  display: block;
  color: var(--tj-color-theme-primary);
  font-size: 14px;
  margin-top: 2px;
}

.blog-text .contact-callout {
  margin-top: 24px;
  padding: 22px 24px;
  background: var(--tj-color-theme-bg-lila);
  border-radius: 12px;
}

.blog-text .contact-callout h4 {
  margin-bottom: 8px;
}

.blog-text .contact-callout p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------ over ons / missie en visie */
.post-details-wrapper .blog-text .content-card {
  padding: 26px;
}

@media (max-width: 575.98px) {
  .post-details-wrapper .blog-text .content-card {
    padding: 20px 18px;
  }
}
.tj-figure {
  margin: 0 0 30px;
}

.tj-figure .image-box {
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 0;
}

.tj-figure .image-box img {
  width: 100%;
  height: auto;
  display: block;
}

.tj-figure-caption {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  line-height: 1.4;
}

.tj-figure-caption .name {
  font-weight: 600;
  font-size: 18px;
}

.tj-figure-caption .role {
  color: var(--tj-color-text-body);
  font-size: 15px;
}

.post-details-wrapper .blog-text ul.uitgangspunten-list {
  columns: 2;
}

.post-details-wrapper .blog-text ul.uitgangspunten-list li {
  margin-bottom: 12px;
  font-weight: 400;
}

.post-details-wrapper .blog-text ul.uitgangspunten-list li strong {
  font-weight: 600;
}

/* Zelfde tji-check-bolletjes als bij de trainingsteksten (zie
   .blog-text.training-body hieronder) i.p.v. de platte disc-bullets die
   enserve_content_css_front() sitebreed aan losse WYSIWYG-lijstjes geeft.
   Bolletje komt via li::before, geen span+icoon-markup nodig in de body —
   dat werd toch overschreven door diezelfde gedeelde content-CSS
   (li > span:first-child{background:none}, 3 klassen diep, dus specifieker
   dan wat híer met evenveel klassen omschreven kon worden). 1 kolom i.p.v.
   de standaard 2, anders knippen de langere zinnen lelijk af. */
.single .post-details-wrapper .blog-text.vacature-body ul {
  list-style: none;
  padding-inline-start: 0;
  columns: 1;
}

.single .post-details-wrapper .blog-text.vacature-body li {
  position: relative;
  padding-inline-start: 30px;
}

.single .post-details-wrapper .blog-text.vacature-body li::before {
  content: "\e911";
  font-family: "bexon-icons";
  position: absolute;
  inset-inline-start: 0;
  top: 0.3em;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  line-height: 1;
  color: var(--tj-color-common-white);
  background: var(--tj-color-theme-primary);
  border-radius: 50%;
}

/* Zijbalk-lijstjes op de vacaturepagina in dezelfde stijl als de
   Praktisch-widget bij trainingen: geen witte kaart/padding op de ul,
   dunne effen lijntjes i.p.v. de gestippelde border-1, geen iconen. */
.tj-careers-details .project_catagory ul {
  background-color: transparent;
  padding: 0;
}

.tj-careers-details .project_catagory ul li:first-child {
  padding-top: 0;
}

.tj-careers-details .project_catagory ul li {
  border-bottom: 1px solid rgba(105, 45, 86, 0.12);
}

.tj-careers-details .project_catagory ul li span {
  font-size: 14px;
  line-height: 1.4;
}

.tj-careers-details .project_catagory ul li span.first-child {
  font-weight: var(--tj-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tj-color-theme-primary);
}

/* Kernwaarden als badges op een rij i.p.v. de standaard 2-koloms vinklijst,
   die met een oneven aantal korte woorden scheef oogt. */
.post-details-wrapper .blog-text ul.kernwaarden-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.post-details-wrapper .blog-text ul.kernwaarden-list li {
  margin-bottom: 0;
  padding: 10px 20px 10px 14px;
  background: var(--tj-color-theme-bg-lila);
  border-radius: 999px;
  font-weight: 600;
  color: var(--tj-color-theme-primary);
}

/* ---------------------------------------------------------- blockquote (opmaakpagina's) */
.blog-text blockquote {
  background: var(--tj-color-theme-bg-lila);
  border: none;
}

.blog-text blockquote p,
.blog-text blockquote cite {
  color: var(--tj-color-theme-primary);
}

/* ------------------------------------------------------------- werken bij */
/* Compacte kaart: icoon links naast de titel i.p.v. erboven. Grid met twee
   kolommen (icoon / tekst) en twee rijen (kop / knop); de knop staat over de
   volle breedte en wordt onderlangs uitgelijnd zodat een rij kaarten even hoog
   blijft. */
.tj-functiegroep {
  position: relative;
  height: 100%;
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  align-items: center;
}

/* Hele kaart klikbaar i.p.v. alleen titel + knop: .stretched-link (echte
   Bootstrap-class, via bootstrap.min.css) op de titel-link dekt de hele
   kaart (.tj-functiegroep is hierboven al position:relative). De knop
   blijft zelf ook een normale, focusbare link — staat met z-index erboven. */
.tj-functiegroep .tj-careers-btn {
  position: relative;
  z-index: 2;
}

.tj-functiegroep .tj-careers-icon {
  grid-column: 1;
  grid-row: 1;
  width: 56px;
  height: 56px;
  margin-bottom: 0;
  background-color: var(--tj-color-theme-primary);
}

/* Functiegroep met een openstaande vacature: icoon-cirkel oranje i.p.v.
   paars, zodat in één oogopslag te zien is welke kaarten "actief" zijn. */
.tj-functiegroep:not(.tj-functiegroep-empty) .tj-careers-icon {
  background-color: var(--tj-color-theme-primary-2);
}

/* Zelfde basisstijl als bij de trainingskaarten: paarse cirkel met wit
   icoon (overschrijft de algemene .tj-careers-icon .enserve-icon hieronder,
   die standaard paars is). Bij hover van de kaart draait dit om naar witte
   cirkel + paars icoon (zie .tj-functiegroep:hover hieronder). */
.tj-functiegroep .tj-careers-icon .enserve-icon {
  color: var(--tj-color-common-white);
}

.tj-functiegroep .tj-careers-title {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  font-size: 20px;
  line-height: 1.3;
}

.tj-functiegroep .tj-careers-bottom {
  grid-column: 1/-1;
  grid-row: 2;
  align-self: end;
  margin-top: 18px;
  padding-top: 0;
}

.tj-functiegroep .tj-careers-title a,
.tj-functiegroep .tj-careers-btn,
.tj-functiegroep .tj-careers-btn .btn-text {
  color: var(--tj-color-theme-primary);
}

.tj-functiegroep:hover {
  border-color: var(--tj-color-theme-primary);
  background-color: var(--tj-color-theme-primary);
}

.tj-functiegroep:hover .tj-careers-icon {
  background-color: var(--tj-color-common-white);
}

.tj-functiegroep:hover .tj-careers-icon .enserve-icon {
  color: var(--tj-color-theme-primary);
}

.tj-functiegroep:hover .tj-careers-title a,
.tj-functiegroep:hover .tj-careers-btn,
.tj-functiegroep:hover .tj-careers-btn .btn-text,
.tj-functiegroep:hover .tj-careers-btn .btn-icon i {
  color: var(--tj-color-common-white);
}

/* Actieve kaart (met vacature): icoon blijft oranje op hover i.p.v. mee
   te draaien naar wit-cirkel/paars-icoon. */
.tj-functiegroep:not(.tj-functiegroep-empty):hover .tj-careers-icon {
  background-color: var(--tj-color-theme-primary-2);
}

.tj-functiegroep:not(.tj-functiegroep-empty):hover .tj-careers-icon .enserve-icon {
  color: var(--tj-color-common-white);
}

/* Titel zonder link (lege functiegroep) blijft dezelfde kleur als een titel
   mét link — alleen de kaart zelf wordt niet klikbaar. */
.tj-functiegroep .tj-careers-title {
  color: var(--tj-color-theme-primary);
}

/* Lege functiegroep (geen openstaande vacature): geen hover-omkering, want
   er valt niks te klikken — herhaalt gewoon de standaardkleuren onder :hover. */
.tj-functiegroep-empty:hover {
  border-color: var(--tj-color-border-3);
  background-color: var(--tj-color-common-white);
}

.tj-functiegroep-empty:hover .tj-careers-icon {
  background-color: var(--tj-color-theme-primary);
}

.tj-functiegroep-empty:hover .tj-careers-icon .enserve-icon {
  color: var(--tj-color-common-white);
}

.tj-functiegroep-empty:hover .tj-careers-title {
  color: var(--tj-color-theme-primary);
}

.tj-careers-btn-disabled {
  display: inline-flex;
  align-items: center;
  color: var(--tj-color-text-body);
  opacity: 0.7;
  cursor: default;
}

/* Intro-blok boven de functiegroepen */
.enserve-werkenbij-intro .sec-heading > p {
  margin-bottom: 14px;
}

.enserve-werkenbij-intro .sec-heading-btn {
  margin-top: 32px;
}

/* Verhaal-blokken (cultuur / "wij zijn Enserve") — beeld naast tekst */
.enserve-story .enserve-story-row + .enserve-story-row {
  margin-top: 80px;
}

@media (max-width: 991px) {
  .enserve-story .enserve-story-row + .enserve-story-row {
    margin-top: 48px;
  }
}
/* Cultuur-sectie: about-img-area/about-content-area (Bexon "over ons"-stijl)
   i.p.v. de vlakke media+tekst-opzet die hier eerst stond. */
.about-img-area .about-img img {
  aspect-ratio: 16/11;
}

/* .about-img-area .about-img heeft in main.css height:100%, wat alleen een
   echte hoogte oplevert vanaf 992px (via een flex-kolom die desktop-breed
   gelijke hoogtes afdwingt). Onder 992px heeft de wrapper geen hoogtebron
   meer en klapt de foto te kort in — hier een eigen, vaste verhouding voor
   die breedtes zodat de foto altijd hoog genoeg blijft. */
@media (max-width: 991px) {
  .about-img-area .about-img {
    height: auto;
    aspect-ratio: 16/11;
  }
}
.enserve-culture-card .sub-title {
  margin-bottom: 12px;
}

.enserve-culture-card p {
  margin-bottom: 16px;
}

.enserve-culture-card p:last-child {
  margin-bottom: 0;
}

/* Kernwaarden als accent-chips */
.enserve-values {
  list-style: none;
  margin: 22px 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.enserve-values li {
  padding: 7px 16px;
  border-radius: 999px;
  background-color: var(--tj-color-theme-bg-lila);
  color: var(--tj-color-theme-primary);
  font-weight: var(--tj-fw-medium);
  font-size: 15px;
  line-height: 1.3;
}

.enserve-values-note {
  font-size: 15px;
  color: var(--tj-color-text-body);
}

/* CIA / arbeidsvoorwaarden / stage-traineeship als accordion onder de
   functiegroepen (tj-faq-section, zoals about.html). De toggle-pijl (+)
   staat in main.css standaard op de groen-accentkleur (enige bestaande
   gebruik was de groene homepage-agenda) — hier terug naar paars. */
.tj-faq-werkenbij .accordion-item .faq-title::after {
  color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}

/* .contact-form heeft zelf ook een witte kaart met padding; binnen het
   open accordion-paneel is dat prima als eigen "formulierkaart". De
   border-bottom-color is niet meer expliciet nodig: --tj-color-border-1
   zelf is inmiddels sitewide lila (zie de globale kleurwijziging). */
.tj-faq-werkenbij .contact-form .form-input textarea::placeholder,
.tj-faq-werkenbij .contact-form .form-input input[type=tel]::placeholder,
.tj-faq-werkenbij .contact-form .form-input input[type=text]::placeholder,
.tj-faq-werkenbij .contact-form .form-input input[type=email]::placeholder {
  color: var(--tj-color-theme-accent-lila);
}

/* ------------------------------------------- terugblik inspiratiedag (opmaakpagina) */
.tj-gallery-wrap .image-box {
  margin-bottom: 0;
}

.tj-gallery-wrap .gallery-tile-lg .image-box,
.tj-gallery-wrap .gallery-tile-lg .gallery {
  height: 340px;
}

.tj-gallery-wrap .gallery-tile-sm .image-box,
.tj-gallery-wrap .gallery-tile-sm .gallery {
  height: 260px;
}

.tj-gallery-wrap .image-box,
.tj-gallery-wrap .gallery {
  display: block;
}

.tj-gallery-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 992px) {
  .tj-gallery-wrap .gallery-tile-lg .image-box,
  .tj-gallery-wrap .gallery-tile-lg .gallery {
    height: 460px;
  }
}
.details-content-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  column-gap: 20px;
  row-gap: 20px;
}

.details-content-box .service-details-item {
  max-width: none;
  width: 100%;
  padding: 35px 30px 30px;
}

.details-content-box .service-details-item .number {
  width: 42px;
  height: 42px;
  font-size: 18px;
}

@media (max-width: 767px) {
  .details-content-box {
    grid-template-columns: 1fr;
  }
}
.tj-faq.accordion-purple .accordion-item .faq-title::after {
  color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}

.demo-chart-card {
  height: 100%;
  text-align: center;
}

.demo-chart-title {
  color: var(--tj-color-theme-primary);
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 25px;
}

.demo-chart-donut {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--tj-color-theme-primary) 0% 65%, var(--tj-color-theme-primary-2) 65% 90%, var(--tj-color-grey-1) 90% 100%);
}

.demo-chart-donut-hole {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--tj-color-common-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--tj-fw-sbold);
  font-size: 22px;
  color: var(--tj-color-theme-primary);
}

.demo-chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: start;
}

.demo-chart-legend li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--tj-color-text-body);
  margin-bottom: 10px;
}

.demo-chart-legend li:last-child {
  margin-bottom: 0;
}

.demo-chart-legend li strong {
  color: var(--tj-color-heading-primary);
}

.demo-chart-legend .dot {
  margin-top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.demo-chart-legend li > .dot-primary {
  background: var(--tj-color-theme-primary) !important;
}

.demo-chart-legend li > .dot-secondary {
  background: var(--tj-color-theme-primary-2) !important;
}

.demo-chart-legend li > .dot-muted {
  background: var(--tj-color-grey-1) !important;
}

.demo-chart-legend-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 6px;
  row-gap: 4px;
  text-align: center;
}

.demo-chart-line + .demo-chart-legend-row {
  grid-template-columns: repeat(3, 1fr);
}

.demo-chart-legend-row li {
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--tj-color-text-body);
  justify-content: center;
}

.demo-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  height: 150px;
  margin-bottom: 20px;
}

.demo-bar {
  width: 34px;
  height: var(--h);
  background: var(--tj-color-theme-primary);
  border-radius: 6px 6px 0 0;
  position: relative;
}

.demo-bar-alt {
  background: var(--tj-color-theme-primary-2);
}

.demo-bar-value {
  position: absolute;
  top: -22px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-heading-primary);
  white-space: nowrap;
}

.demo-chart-line {
  width: 100%;
  height: 150px;
  margin-bottom: 15px;
}

/* --------------------------------------------------------------------- 404 */
.error404 .error-title {
  line-height: 1;
  margin-bottom: 8px;
}

/* Het oranje huisje op z'n kop en een tikje scheef — als grapje. */
.error404 .error-img .tj-404-huisje {
  width: 130px;
  height: auto;
  transform: rotate(194deg);
  transform-origin: 50% 45%;
}

@media (prefers-reduced-motion: no-preference) {
  .error404 .error-img .tj-404-huisje {
    animation: enserve-404-wiebel 4s ease-in-out infinite;
  }
}
@keyframes enserve-404-wiebel {
  0%, 100% {
    transform: rotate(190deg);
  }
  50% {
    transform: rotate(198deg);
  }
}
.error404 .error-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------- privacyverklaring */
/* Juridische leespagina (page-privacybeleid.php): ingetogen paarse
   tussenkoppen i.p.v. de 56px <h2>, en gewone opsommingen i.p.v. de
   2-koloms vinklijst die .post-details-wrapper .blog-text ul oplegt. */
.privacy-legal {
  font-size: 16px;
  line-height: 1.6;
}

.privacy-legal > *:first-child {
  margin-top: 0;
}

.privacy-legal h2 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--tj-color-theme-primary);
  margin: 40px 0 12px;
}

.privacy-legal p {
  margin-bottom: 16px;
}

.privacy-legal a {
  color: var(--tj-color-theme-primary);
  font-weight: var(--tj-fw-medium);
  text-decoration: underline;
}

.post-details-wrapper .blog-text.privacy-legal ul {
  columns: auto;
  list-style: disc;
  padding-inline-start: 1.4rem;
  margin-bottom: 22px;
}

.post-details-wrapper .blog-text.privacy-legal ul li {
  display: list-item;
  column-gap: normal;
  font-weight: 400;
  margin-bottom: 8px;
}

/* --------------------------------------------------- iconen (Phosphor SVG) */
/* enserve_icon() plaatst een inline <svg fill="currentColor">; kleur volgt dus
   de tekstkleur. Basisformaat 1em, aan te passen per gebruik. */
.enserve-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
  vertical-align: middle;
}

/* --------------------------------------------------- trainingen */
/* Overzicht (archive-training.php): kaarten-grid naar het model van
   .h8-service-wrapper. Geen afbeeldingen — een lila rand en zachte schaduw
   laten de witte kaarten op de witte pagina uitkomen. */
.h8-service .sec-heading .sec-text {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.6;
}

.training-wrapper .training-item {
  height: 100%;
  margin-bottom: 0;
  border: 1px solid rgba(105, 45, 86, 0.14);
  box-shadow: 0 6px 30px rgba(105, 45, 86, 0.06);
}

.training-wrapper .training-item .title {
  max-width: none;
}

.training-wrapper .training-item .title a:hover {
  color: var(--tj-color-theme-primary);
}

/* Zelfde formaat en hover-gedrag als de functiegroep-iconen op de
   werken-bij-pagina (56px cirkel, 28px icoon, kleuromkering bij hover
   i.p.v. de geërfde .h8-service-item-wiebelanimatie). */
.training-wrapper .training-item .service-icon {
  width: 56px;
  height: 56px;
  background: var(--tj-color-theme-primary);
  border: 0;
}

.training-wrapper .training-item .service-icon .enserve-icon {
  width: 28px;
  height: 28px;
  color: var(--tj-color-common-white);
}

.training-wrapper .training-item:hover .service-icon {
  background-color: var(--tj-color-theme-primary-2);
  animation: none;
}

.training-wrapper .training-item .list-items {
  margin: 0 0 24px;
}

.training-wrapper .training-item .list-items li .enserve-icon {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  color: var(--tj-color-theme-primary);
}

.training-wrapper .training-item .list-items li span {
  color: var(--tj-color-text-body);
}

/* Hele kaart klikbaar: .stretched-link op de titel dekt de .training-item
   (die is al position:relative via .service-item). De "Bekijk training"-knop
   blijft er bovenop staan zodat z'n hover-animatie werkt. */
.training-wrapper .training-item .text-btn {
  position: relative;
  z-index: 2;
  margin-top: 0;
}

/* "Bekijk training"-pijltje paars i.p.v. donker (net als de nieuwskaarten). */
.training-wrapper .training-item .text-btn .btn-icon {
  background-color: var(--tj-color-theme-primary);
}

/* Detail (single-training.php) */
.training-payoff {
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
  color: var(--tj-color-theme-primary);
  margin: 0 0 30px;
}

/* Body-koppen kleiner dan de 32px van de gedeelde bericht-opmaakregels
   (enserve_content_css_rules) — een training heeft veel tussenkopjes. */
.single .post-details-wrapper .blog-text.training-body h2,
.single .post-details-wrapper .blog-text.training-body h3 {
  font-size: 20px;
  line-height: 1.3;
  margin: 1.7em 0 0.5em;
}

.single .post-details-wrapper .blog-text.training-body h4 {
  font-size: 16px;
  line-height: 1.35;
  margin: 1.4em 0 0.4em;
}

/* Zelfde tji-check-bolletjes als de handgeschreven vacature-checklists
   i.p.v. platte disc-bullets — editors typen gewone <ul><li>, geen
   span+icoon-markup, dus het bolletje komt via li::before. */
.single .post-details-wrapper .blog-text.training-body ul {
  list-style: none;
  padding-inline-start: 0;
}

.single .post-details-wrapper .blog-text.training-body li {
  position: relative;
  padding-inline-start: 30px;
}

.single .post-details-wrapper .blog-text.training-body li::before {
  content: "\e911";
  font-family: "bexon-icons";
  position: absolute;
  inset-inline-start: 0;
  top: 0.3em;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  line-height: 1;
  color: var(--tj-color-common-white);
  background: var(--tj-color-theme-primary);
  border-radius: 50%;
}

.training-aanmeld-cta {
  margin-top: 20px;
}

@media (min-width: 768px) {
  .training-aanmeld-cta {
    margin-top: 40px;
  }
}
.widget-training-facts .training-facts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget-training-facts .training-facts li {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 12px;
  row-gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(105, 45, 86, 0.12);
}

.widget-training-facts .training-facts li .enserve-icon {
  grid-row: 1/span 2;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--tj-color-theme-primary);
}

.widget-training-facts .training-facts li:first-child {
  padding-top: 0;
}

.widget-training-facts .training-facts li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.widget-training-facts .training-facts .fact-label {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: var(--tj-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tj-color-theme-primary);
}

.widget-training-facts .training-facts .fact-value {
  display: block;
  color: var(--tj-color-text-body);
  line-height: 1.45;
}

.widget-training-facts .tj-primary-btn {
  display: flex;
  width: 100%;
  /* Volledig label ("Aanmelden voor deze training") mag in de smalle
     zijbalk over twee regels breken. Padding niet overschrijven, dan
     blijft de knop even hoog als de andere pijl-knoppen. */
  white-space: normal;
  text-align: center;
}

.widget-training-facts .tj-primary-btn .btn-text {
  line-height: 1.3;
}

.training-other-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

/* De widget-container is `.tj-recent-posts`, die zijn <li>'s als flexrij zet
   (miniatuur + tekst). Hier geen miniatuur: titel bóven de pay-off zetten. */
.tj-sidebar-widget.tj-recent-posts .training-other-list li {
  display: block;
  column-gap: 0;
  margin-bottom: 0;
  padding: 14px 0;
  border-bottom: 1px solid rgba(105, 45, 86, 0.12);
}

.training-other-list li:first-child {
  padding-top: 0;
}

.training-other-list li:last-child {
  border-bottom: 0;
}

.training-other-list .post-title {
  margin: 0 0 5px;
  font-size: 16px;
  line-height: 1.3;
}

.training-other-list .post-title a:hover {
  color: var(--tj-color-theme-primary);
}

.training-other-list .desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tj-color-text-body);
}

/* --------------------------------------------------- werken bij: functiegroepen */
/* De 9 functiegroep-iconen (page-werken-bij-enserve.php) zijn nu Phosphor-SVG's
   i.p.v. de Bexon-glyphs. .tj-careers-icon is (in de functiegroep-kaart) een
   cirkel van 56px, met het icoon links van de titel. Kleur (paars) wordt
   verderop overschreven voor de functiegroep-variant: standaard wit icoon
   op paarse cirkel (zelfde als de trainingskaarten), bij hover van de
   kaart omgekeerd naar paars icoon op witte cirkel. */
.tj-careers-icon .enserve-icon {
  width: 28px;
  height: 28px;
  color: var(--tj-color-theme-primary);
}

/* --------------------------------------------------- homepage: "Agenda"-blok */
/* De datumbox links van elk accordion-item is vervangen door het trainings-
   icoon (Phosphor SVG). .faq-date levert de groene box + plaatsing; hier
   alleen de SVG schalen en wit maken. */
.tj-faq.tj-faq-agenda .faq-date--icon .enserve-icon {
  width: 34px;
  height: 34px;
  color: var(--tj-color-common-white);
}

@media (max-width: 991px) {
  .tj-faq.tj-faq-agenda .faq-date--icon .enserve-icon {
    width: 26px;
    height: 26px;
  }
}
/* --------------------------------------------------- teampagina: portretten */
/* De foto's komen nu uit de mediabibliotheek (berichttype `teamlid`), dus
   WordPress zet er `width`/`height`-attributen op. Met de Bexon-basisregel
   `img { max-width: 100% }` (zonder `height: auto`) rekt dat de portretten
   in de hoogte uit. De .team-img-inner krijgt daarom een vaste 1:1-verhouding
   en de foto vult die met object-fit — meteen ook een nette, gelijke uitsnede
   voor toekomstige uploads van de klant. */
.team-grid .team-item .team-img-inner {
  aspect-ratio: 1/1;
}

.team-grid .team-item .team-img-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Checklist-bolletjes en footer-contact-iconen op managementinformatie
   oranje i.p.v. de standaard paarse kleur. */
.page-managementinformatie .post-details-wrapper .blog-text ul li > span:first-child {
  background: var(--tj-color-theme-primary-2);
}

.page-managementinformatie .copyright-content-area .footer-contact ul li a .icon {
  background-color: var(--tj-color-theme-primary-2);
}

.page-managementinformatie .cta-area {
  background-color: var(--tj-color-theme-primary-2);
}

.page-managementinformatie .cta-area.style-compact .tj-primary-btn .btn-text {
  color: var(--tj-color-theme-primary-2);
}

.page-managementinformatie .cta-area.style-compact .tj-primary-btn .btn-icon {
  background-color: var(--tj-color-theme-primary-2);
}

.page-managementinformatie .copyright-content-area .social-links ul li a {
  background-color: var(--tj-color-theme-primary-2);
}

.page-managementinformatie .footer-widget .title {
  color: var(--tj-color-theme-primary-2);
}

.page-managementinformatie .widget-nav-menu ul li a .badge {
  background-color: var(--tj-color-theme-primary-2);
}