/*
Theme Name: Preventie Platform Jeugd
Theme URI: https://vormfactor.com/
Template: hello-elementor
Author: VormFactor
Author URI: https://vormfactor.com/
Description: Met 20 jaar ervaring zijn we trots op onze tevreden klanten! We hebben uitgebreide ervaring in het succesvol realiseren van uiteenlopende opdrachten. In nauwe samenwerking met onze klanten bedenken we creatieve oplossingen voor diverse communicatie-middelen en zorgen we ervoor dat elk project zijn doel bereikt.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.6.1772793081
Updated: 2026-03-06 10:31:21
*/

/* =========================================================
   PPJ – WCAG 2.2 AA basislaag
========================================================= */

/* Skip link */
.ppj-skip-link{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 12px;
  background:#fff;
  color:#000;
  border:2px solid #000;
  border-radius:6px;
  z-index:99999;
  transform:translateY(-200%);
}
.ppj-skip-link:focus,
.ppj-skip-link:focus-visible{
  transform:translateY(0);
  outline:none;
}

/* Sticky header offset voor anchors */
#main{
  scroll-margin-top:120px;
}

/* Focus (WCAG 2.2) */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus,
[tabindex]:focus{
  outline:none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #0b5fff;
  outline-offset:3px;
  border-radius:6px;
}

/* Links herkenbaar (niet alleen kleur) */
.elementor a:not(.elementor-button){
  text-decoration-thickness:2px;
  text-underline-offset:0.18em;
}

/* Target size */
.elementor button,
.elementor .elementor-button,
.elementor input,
.elementor select,
.elementor textarea{
  min-height:44px;
}
.elementor input[type="checkbox"],
.elementor input[type="radio"]{
  width:20px;
  height:20px;
  cursor:pointer;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================
   Large font mode
========================================================= */

body.large-font{
  font-size:1.125rem;
}
body.large-font h1{
  font-size:2.25rem;
}
body.large-font h2{
  font-size:1.875rem;
}
body.large-font h3{
  font-size:1.5rem;
}

/* =========================================================
   Accessibility Pill
   Vereiste button classes:
   - ppj-pill-readspeaker
   - ppj-pill-contrast
   - ppj-pill-font
========================================================= */

.ppj-accessibility-pill{
  position:absolute;
  top:6px;
  right:0;
  z-index:99999;
  pointer-events:auto;

  height:30px;
  padding:0 16px;

  background:rgba(255,255,255,0.95);
  border-radius:0 0 0 18px;
  box-shadow:0 2px 10px rgba(0,0,0,0.08);

  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start !important;
  gap:16px;

  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
}

.ppj-accessibility-pill.elementor-element,
.ppj-accessibility-pill.e-con{
  width:fit-content !important;
  flex-grow:0 !important;
  flex-shrink:0 !important;
}

/* Klikbare button/link in pill */
.ppj-accessibility-pill .elementor-button,
.ppj-accessibility-pill a.elementor-button,
.ppj-accessibility-pill a.elementor-button-link,
.ppj-accessibility-pill button.elementor-button{
  display:flex !important;
  align-items:center !important;
  gap:6px;

  position:relative;
  z-index:2;

  background:transparent !important;
  border:none !important;
  min-height:auto !important;

  height:30px;
  width:auto !important;
  flex:0 0 auto !important;
  padding:0 6px !important;

  color:#000000 !important;
  font-size:14px;
  font-weight:400;
  line-height:1 !important;
  text-decoration:none;
  cursor:pointer;
  pointer-events:auto !important;

  transition:color .18s ease, text-decoration-color .18s ease;
}

/* Elementor tekst uitlijning */
.ppj-accessibility-pill .elementor-button .elementor-button-text{
  display:inline-block;
  line-height:1 !important;
  position:relative;
  z-index:2;
}

/* Verberg standaard Elementor iconen */
.ppj-accessibility-pill .elementor-button i,
.ppj-accessibility-pill .elementor-button svg{
  display:none !important;
}

/* Pseudo-icon basis */
.ppj-accessibility-pill .elementor-button::before,
.ppj-accessibility-pill a.elementor-button::before,
.ppj-accessibility-pill a.elementor-button-link::before,
.ppj-accessibility-pill button.elementor-button::before{
  content:"";
  display:block;
  width:14px;
  height:14px;
  flex:0 0 14px;
  background-repeat:no-repeat;
  background-size:14px 14px;
  opacity:0.9;
  pointer-events:none;
  position:relative;
  z-index:1;
  transition:opacity .18s ease;
}

/* Readspeaker icon */
.ppj-pill-readspeaker .elementor-button::before,
.ppj-pill-readspeaker a.elementor-button::before,
.ppj-pill-readspeaker a.elementor-button-link::before,
.ppj-pill-readspeaker button.elementor-button::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M3 10v4h4l5 4V6L7 10H3zm13.5 2c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89 1 5 3.77 5 6.71s-2.11 5.71-5 6.71v2.06c4.01-1.12 7-4.81 7-8.77s-2.99-7.65-7-8.77z'/%3E%3C/svg%3E");
}

/* Contrast icon */
.ppj-pill-contrast .elementor-button::before,
.ppj-pill-contrast a.elementor-button::before,
.ppj-pill-contrast a.elementor-button-link::before,
.ppj-pill-contrast button.elementor-button::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18V4a8 8 0 010 16z'/%3E%3C/svg%3E");
}

/* Font icon */
.ppj-pill-font .elementor-button::before,
.ppj-pill-font a.elementor-button::before,
.ppj-pill-font a.elementor-button-link::before,
.ppj-pill-font button.elementor-button::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M5 20h2l1.2-3h7.6l1.2 3h2L13 4h-2L5 20zm4-5l3-8 3 8H9z'/%3E%3C/svg%3E");
}

/* Hover */
.ppj-accessibility-pill .elementor-button:hover,
.ppj-accessibility-pill a.elementor-button:hover,
.ppj-accessibility-pill a.elementor-button-link:hover,
.ppj-accessibility-pill button.elementor-button:hover{
  color:#E54822 !important;
  text-decoration:underline;
  text-underline-offset:0.20em;
}

/* Focus */
.ppj-accessibility-pill .elementor-button:focus-visible,
.ppj-accessibility-pill a.elementor-button:focus-visible,
.ppj-accessibility-pill a.elementor-button-link:focus-visible,
.ppj-accessibility-pill button.elementor-button:focus-visible{
  color:#E54822 !important;
  text-decoration:underline;
  text-underline-offset:0.20em;
  outline:3px solid #0b5fff;
  outline-offset:2px;
  border-radius:8px;
}

/* Oranje iconen bij hover/focus */
.ppj-pill-readspeaker .elementor-button:hover::before,
.ppj-pill-readspeaker a.elementor-button:hover::before,
.ppj-pill-readspeaker a.elementor-button-link:hover::before,
.ppj-pill-readspeaker button.elementor-button:hover::before,
.ppj-pill-readspeaker .elementor-button:focus-visible::before,
.ppj-pill-readspeaker a.elementor-button:focus-visible::before,
.ppj-pill-readspeaker a.elementor-button-link:focus-visible::before,
.ppj-pill-readspeaker button.elementor-button:focus-visible::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E54822' d='M3 10v4h4l5 4V6L7 10H3zm13.5 2c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89 1 5 3.77 5 6.71s-2.11 5.71-5 6.71v2.06c4.01-1.12 7-4.81 7-8.77s-2.99-7.65-7-8.77z'/%3E%3C/svg%3E");
}
.ppj-pill-contrast .elementor-button:hover::before,
.ppj-pill-contrast a.elementor-button:hover::before,
.ppj-pill-contrast a.elementor-button-link:hover::before,
.ppj-pill-contrast button.elementor-button:hover::before,
.ppj-pill-contrast .elementor-button:focus-visible::before,
.ppj-pill-contrast a.elementor-button:focus-visible::before,
.ppj-pill-contrast a.elementor-button-link:focus-visible::before,
.ppj-pill-contrast button.elementor-button:focus-visible::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E54822' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18V4a8 8 0 010 16z'/%3E%3C/svg%3E");
}
.ppj-pill-font .elementor-button:hover::before,
.ppj-pill-font a.elementor-button:hover::before,
.ppj-pill-font a.elementor-button-link:hover::before,
.ppj-pill-font button.elementor-button:hover::before,
.ppj-pill-font .elementor-button:focus-visible::before,
.ppj-pill-font a.elementor-button:focus-visible::before,
.ppj-pill-font a.elementor-button-link:focus-visible::before,
.ppj-pill-font button.elementor-button:focus-visible::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E54822' d='M5 20h2l1.2-3h7.6l1.2 3h2L13 4h-2L5 20zm4-5l3-8 3 8H9z'/%3E%3C/svg%3E");
}

/* Separators */
.ppj-accessibility-pill .elementor-button:not(:last-child)::after,
.ppj-accessibility-pill a.elementor-button:not(:last-child)::after,
.ppj-accessibility-pill a.elementor-button-link:not(:last-child)::after,
.ppj-accessibility-pill button.elementor-button:not(:last-child)::after{
  content:"|";
  margin-left:12px;
  opacity:0.45;
  pointer-events:none;
}

/* Mobile */
@media (max-width: 767px){
  .ppj-accessibility-pill{
    position:static;
    height:auto;
    border-radius:0;
    box-shadow:none;
    padding:8px 12px;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:10px;
  }

  .ppj-accessibility-pill .elementor-button,
  .ppj-accessibility-pill a.elementor-button,
  .ppj-accessibility-pill a.elementor-button-link,
  .ppj-accessibility-pill button.elementor-button{
    height:auto;
    padding:6px 8px !important;
    line-height:1.2 !important;
    font-size:14px;
  }

  .ppj-accessibility-pill .elementor-button:not(:last-child)::after,
  .ppj-accessibility-pill a.elementor-button:not(:last-child)::after,
  .ppj-accessibility-pill a.elementor-button-link:not(:last-child)::after,
  .ppj-accessibility-pill button.elementor-button:not(:last-child)::after{
    content:"";
    margin:0;
    opacity:0;
  }
}

/* =========================================
   Zoekbalk focus fix
========================================= */

/* Reset rare focusstijlen op Elementor search onderdelen */
.elementor-search-form,
.elementor-search-form__container,
.elementor-search-form__input,
.elementor-search-form__submit,
.elementor-widget-search-form,
.elementor-widget-search-form .elementor-widget-container{
  outline:none !important;
  box-shadow:none !important;
}

/* Focus op de hele zoekbalk wanneer het invoerveld actief is */
.elementor-search-form:focus-within,
.elementor-search-form__container:focus-within{
  box-shadow:0 0 0 3px #0b5fff !important;
  border-radius:8px !important;
}

/* Input zelf geen losse blauwe lijn meer */
.elementor-search-form__input:focus,
.elementor-search-form__input:focus-visible,
input[type="search"]:focus,
input[type="search"]:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

/* Zoekknop krijgt wel een duidelijke focus */
.elementor-search-form__submit:focus,
.elementor-search-form__submit:focus-visible{
  outline:3px solid #0b5fff !important;
  outline-offset:2px !important;
  border-radius:8px !important;
  box-shadow:none !important;
}

/* =========================================================
   HIGH CONTRAST MODE
   Behoud huisstijl, verbeter leesbaarheid
========================================================= */

body.high-contrast{
  color:#000 !important;
}

/* Header blijft in huisstijl */
body.high-contrast header,
body.high-contrast nav,
body.high-contrast .site-header{
  background:#f5a623 !important;
  color:#000 !important;
}

body.high-contrast .elementor-nav-menu a{
  color:#000 !important;
}

/* Accessibility pill behouden */
body.high-contrast .ppj-accessibility-pill{
  background:rgba(255,255,255,0.98) !important;
}
body.high-contrast .ppj-accessibility-pill .elementor-button,
body.high-contrast .ppj-accessibility-pill a.elementor-button,
body.high-contrast .ppj-accessibility-pill a.elementor-button-link,
body.high-contrast .ppj-accessibility-pill button.elementor-button{
  background:transparent !important;
  color:#000 !important;
  border:none !important;
}

/* Algemene tekst op lichte vlakken zwart */
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6,
body.high-contrast p,
body.high-contrast li,
body.high-contrast span,
body.high-contrast label{
  color:#000 !important;
}

/* Links iets duidelijker, maar niet schreeuwerig */
body.high-contrast a{
  color:#005fcc !important;
  text-decoration:underline;
}

/* Zoekbalk in huisstijl houden */
body.high-contrast .elementor-search-form,
body.high-contrast .elementor-search-form__container{
  background:transparent !important;
  box-shadow:none !important;
}

body.high-contrast .elementor-search-form__input{
  background:#f3eadb !important;
  color:#000 !important;
  border:3px solid #000 !important;
}

body.high-contrast .elementor-search-form__input::placeholder{
  color:#000 !important;
  opacity:0.9;
}

body.high-contrast .elementor-search-form__submit{
  background:#0f5f35 !important;
  color:#fff !important;
  border:3px solid #0f5f35 !important;
}

/* Formuliervelden algemeen: licht houden, donkerder rand */
body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select{
  background:#f3eadb !important;
  color:#000 !important;
  border:2px solid #000 !important;
}

body.high-contrast input::placeholder,
body.high-contrast textarea::placeholder{
  color:#000 !important;
  opacity:0.9;
}

/* Nieuwskaarten uiterlijk behouden */
body.high-contrast .elementor-post,
body.high-contrast .elementor-card,
body.high-contrast .news-card,
body.high-contrast .nieuws-card,
body.high-contrast .elementor-widget-posts .elementor-post__card,
body.high-contrast .elementor-loop-container .e-loop-item,
body.high-contrast .elementor-loop-container article{
  background:#f1f1f1 !important;
  color:#000 !important;
  border:none !important;
  box-shadow:0 0 0 2px #00000022 !important;
}

/* Titel en tekst in kaarten zwart */
body.high-contrast .elementor-post__title,
body.high-contrast .elementor-post__title a,
body.high-contrast .elementor-post__excerpt,
body.high-contrast .elementor-post__excerpt p,
body.high-contrast .news-card h3,
body.high-contrast .news-card p,
body.high-contrast .nieuws-card h3,
body.high-contrast .nieuws-card p{
  color:#000 !important;
}

/* Buttons in kaarten en pagina behouden in huisstijl */
body.high-contrast .elementor-button,
body.high-contrast button,
body.high-contrast input[type="submit"],
body.high-contrast input[type="button"]{
  background:#237B73 !important;
  color:#fff !important;
  border:2px solid #237B73 !important;
}

/* Hover/focus buttons duidelijker */
body.high-contrast .elementor-button:hover,
body.high-contrast button:hover,
body.high-contrast input[type="submit"]:hover,
body.high-contrast input[type="button"]:hover{
  filter:brightness(0.9);
}

body.high-contrast .elementor-button:focus-visible,
body.high-contrast button:focus-visible,
body.high-contrast input[type="submit"]:focus-visible,
body.high-contrast input[type="button"]:focus-visible{
  outline:3px solid #000 !important;
  outline-offset:2px !important;
}

/* Afbeeldingen iets rustiger, niet te zwaar */
body.high-contrast img{
  filter:contrast(115%) saturate(0.9);
}

/* Footer / echt donkere secties */
body.high-contrast footer,
body.high-contrast .site-footer,
body.high-contrast .dark-section,
body.high-contrast .elementor-section.dark-section{
  background:#111 !important;
  color:#fff !important;
}

body.high-contrast footer p,
body.high-contrast footer h2,
body.high-contrast footer h3,
body.high-contrast footer a,
body.high-contrast .site-footer p,
body.high-contrast .site-footer h2,
body.high-contrast .site-footer h3,
body.high-contrast .site-footer a{
  color:#fff !important;
}
body.high-contrast img{
  filter:grayscale(100%) contrast(120%);
}

/* =========================================
PPJ Breadcrumbs – definitieve styling
========================================= */

/* Wrapper */
nav.ppj-breadcrumbs {
background: transparent !important;
margin: 0 0 10px 0;
padding: 0;
font-size: 15px;
line-height: 1.4;
color: #666;
}

/* Uitlijning gelijk aan content (Elementor container) */
nav.ppj-breadcrumbs .ppj-breadcrumbs__list {
max-width: 1200px;   /* pas aan naar jouw container breedte */
margin: 0 auto;
padding: 0 20px;     /* match met je site padding */
}

/* Lijst reset */
nav.ppj-breadcrumbs ol.ppj-breadcrumbs__list {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none !important;
}

nav.ppj-breadcrumbs li.ppj-breadcrumbs__item {
display: inline-flex;
align-items: center;
list-style: none !important;
}

nav.ppj-breadcrumbs li::marker {
content: "";
}

/* Separator */
nav.ppj-breadcrumbs li:not(:last-child)::after {
content: "›";
margin: 0 8px;
color: #999;
font-size: 15px;
}

/* Links */
.ppj-breadcrumbs__link {
color: #000;
text-decoration: none;
}

.ppj-breadcrumbs__link:hover {
text-decoration: underline;
}

/* Actieve pagina (duidelijker) */
.ppj-breadcrumbs__current {
color: #000;
font-weight: 600;
}

/* Home iets subtieler */
.ppj-breadcrumbs__item:first-child .ppj-breadcrumbs__link {
opacity: 0.75;
}

/* Mobiel */
@media (max-width: 767px) {
nav.ppj-breadcrumbs {
font-size: 14px;
}

nav.ppj-breadcrumbs li:not(:last-child)::after {
margin: 0 6px;
}

nav.ppj-breadcrumbs .ppj-breadcrumbs__list {
padding: 0 15px;
}
}