:root {
    --vj-magenta: #a64c85;
    --vj-magenta-dark: #8a3c6e;
    --vj-teal: #93ccbf;
    --vj-text: #313131;
    --vj-cream: #faf8f6;
}

/* Duidelijkere, vloeiendere animaties op bestaande wow.js-elementen */
.wow.slideInDown,
.wow.slideInLeft,
.wow.slideInRight,
.wow.slideInUp,
.wow.fadeInUp,
.wow.fadeIn {
    animation-duration: 1s !important;
    animation-timing-function: cubic-bezier(.22, 1.1, .4, 1) !important;
}

/* Sticky header: schaduw bij scrollen */
.rd-navbar.vj-scrolled {
    box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
    transition: box-shadow .3s ease;
}

/* Onderstreping bij hover/actief menu-item */
.rd-navbar-nav > .rd-nav-item > .rd-nav-link {
    position: relative;
}
.rd-navbar-nav > .rd-nav-item > .rd-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--vj-magenta);
    transition: width .3s cubic-bezier(.22, 1.1, .4, 1);
}
.rd-navbar-nav > .rd-nav-item:hover > .rd-nav-link::after,
.rd-navbar-nav > .rd-nav-item.active > .rd-nav-link::after {
    width: 100%;
}

/* Vloeiender openen dropdown "Overig" */
.rd-navbar-dropdown {
    transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1.1, .4, 1) !important;
}

/* Knoppen iets optillen bij hover */
.button {
    transition: transform .3s cubic-bezier(.22, 1.1, .4, 1), box-shadow .3s ease;
}
.button:hover {
    transform: translateY(-4px);
}

/* Foto in "Voor Jou"-sectie: subtiele zoom bij hover */
#overons .col-lg-6.wow-outer {
    border-radius: 16px;
    overflow: hidden;
}
#overons .col-lg-6.wow-outer img {
    transition: transform .6s cubic-bezier(.22, 1.1, .4, 1);
}
#overons .col-lg-6.wow-outer:hover img {
    transform: scale(1.08);
}

/* Contact-strip iconen iets optillen bij hover */
.layout-bordered-item-inner {
    transition: transform .3s cubic-bezier(.22, 1.1, .4, 1);
}
.layout-bordered-item-inner:hover {
    transform: translateY(-6px);
}

/* Footer links en Kiwa-logo hover */
.footer-advanced a {
    transition: opacity .25s ease, transform .25s ease;
}
.footer-advanced .list-nav a:hover {
    color: var(--vj-magenta);
}
.footer-advanced .rights .brand:hover img {
    transform: scale(1.05);
}

/* ============================= */
/* KAARTEN: Doelgroep / Missie / Vacatures */
/* ============================= */
.vj-teaser-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 767px) {
    .vj-teaser-cards {
        grid-template-columns: 1fr;
    }
}
.vj-teaser-card {
    display: block;
    padding: 32px 28px;
    border-radius: 16px;
    background: linear-gradient(160deg, var(--vj-magenta) 0%, var(--vj-magenta-dark) 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(166, 76, 133, .18);
    transition: transform .35s cubic-bezier(.22, 1.1, .4, 1), box-shadow .35s cubic-bezier(.22, 1.1, .4, 1);
}
.vj-teaser-card:hover,
.vj-teaser-card:focus {
    transform: translateY(-8px);
    box-shadow: 0 16px 32px rgba(166, 76, 133, .28);
    color: #fff;
    text-decoration: none;
}
.vj-teaser-card h3 {
    color: #fff;
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    margin-bottom: 14px;
}
.vj-teaser-card p {
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Kleine pijl-link, ook gebruikt in het ISO-blok hieronder */
.vj-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    transition: gap .25s ease;
}
.vj-card-link svg {
    width: 18px;
    height: 18px;
    flex: none;
    transition: transform .25s cubic-bezier(.22, 1.1, .4, 1);
}
.vj-teaser-card:hover .vj-card-link svg,
.vj-iso-showcase a.vj-card-link:hover svg {
    transform: translateX(4px);
}

/* ============================= */
/* ISO 9001 */
/* ============================= */
.vj-iso-showcase {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px;
}
.vj-badge-frame {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.vj-badge-frame img {
    height: 160px;
    width: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    border-radius: 8px;
}
.vj-iso-showcase h2 {
    font-family: 'Libre Baskerville', serif;
    margin-bottom: 16px;
}
.vj-iso-showcase p {
    color: var(--vj-text);
    opacity: .8;
    margin-bottom: 20px;
}
.vj-iso-showcase a.vj-card-link {
    color: var(--vj-magenta);
    justify-content: center;
}

/* ============================= */
/* Checklist (o.a. Kwaliteit-pagina) */
/* ============================= */
.vj-check-list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}
.vj-check-list li {
    background: var(--vj-cream);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 10px;
    transition: transform .25s cubic-bezier(.22, 1.1, .4, 1);
}
.vj-check-list li:hover {
    transform: translateX(6px);
}

/* Minder bewegen voor wie dat wil */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Hero: compacter, en met call-to-action zoals in het ontwerp */
.swiper-container.swiper-slider-light {
    height: min(72vh, 580px) !important;
    min-height: 420px;
}
.swiper-container.swiper-slider-light .swiper-wrapper,
.swiper-container.swiper-slider-light .swiper-slide {
    height: 100% !important;
}
.decorative-box::before {
    border-radius: 12px;
}
.vj-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 28px;
    background: var(--vj-magenta);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(166, 76, 133, .28);
    transition: transform .3s cubic-bezier(.22, 1.1, .4, 1), box-shadow .3s ease;
}
.vj-hero-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(166, 76, 133, .38);
    color: #fff;
    text-decoration: none;
}
.vj-hero-cta svg {
    width: 18px;
    height: 18px;
    flex: none;
}

/* ============================================================
   TOEVOEGING aan build/voorjou-transities.css
   Plak dit ONDERAAN het bestaande bestand (niet vervangen, alleen aanvullen)
   ============================================================ */

/* ============================= */
/* Paginabanner (kicker + titel) op subpagina's */
/* ============================= */
.vj-page-header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 24px 8px;
}
.vj-page-kicker {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    color: var(--vj-magenta);
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}
.vj-page-header h1 {
    font-size: clamp(30px, 4vw, 44px);
    margin: 0;
    font-weight: 700;
    color: var(--vj-text);
}
.vj-page-header h1 em,
.vj-page-header h1 i {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    color: var(--vj-magenta-dark);
    font-weight: 400;
}

/* ============================= */
/* Content-tekst op subpagina's */
/* ============================= */
.vj-content p.opacity-75 {
    font-size: 15.5px;
    line-height: 1.9;
    color: #4a4a4a;
}

/* Checklijst met vinkjes (Doelgroep, Werkwijze, Kwaliteit) */
.vj-check-list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vj-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--vj-cream);
    border-radius: 12px;
    padding: 16px 20px;
    transition: transform .35s cubic-bezier(.22, 1.1, .4, 1), background .35s ease, box-shadow .35s ease;
}
.vj-check-list li:hover {
    transform: translateX(10px);
    background: #f6ebf2;
    box-shadow: 0 12px 30px rgba(49, 49, 49, .08);
}
.vj-check-list svg {
    flex: none;
    width: 18px;
    height: 18px;
    stroke: var(--vj-magenta);
    margin-top: 2px;
}

/* Losse divider tussen tekstblokken */
.vj-divider {
    max-width: 820px;
    margin: 20px auto;
    height: 1px;
    background: #ececec;
    border: none;
}

/* ============================= */
/* Vacatures: job-card */
/* ============================= */
.vj-job-card {
    max-width: 820px;
    margin: 10px auto 40px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 38px;
    box-shadow: 0 20px 50px rgba(49, 49, 49, .08);
    transition: transform .45s cubic-bezier(.22, 1.1, .4, 1), box-shadow .45s ease;
}
.vj-job-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 36px 70px rgba(49, 49, 49, .16);
}
.vj-job-tag {
    display: inline-block;
    background: rgba(166, 76, 133, .1);
    color: var(--vj-magenta-dark);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
    transition: background .35s ease;
}
.vj-job-card:hover .vj-job-tag {
    background: rgba(166, 76, 133, .18);
}
.vj-job-card .career-classic-title {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    margin: 0 0 8px;
}
.vj-job-card .career-classic-title a {
    color: var(--vj-text);
}
.vj-job-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    color: #6b6b6b;
    font-size: 13.5px;
    margin-bottom: 22px;
    list-style: none;
    padding: 0;
}
.vj-job-meta span,
.vj-job-meta li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.vj-job-meta svg {
    width: 15px;
    height: 15px;
    stroke: var(--vj-teal);
}
.vj-job-card > p {
    font-size: 15px;
    line-height: 1.9;
    color: #4a4a4a;
    margin: 0 0 26px;
}
.vj-job-card .card-group-custom {
    margin-bottom: 26px;
}
.vj-job-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--vj-magenta);
    color: #fff;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background .4s ease, transform .4s cubic-bezier(.22, 1.1, .4, 1), box-shadow .4s ease;
    box-shadow: 0 10px 24px rgba(166, 76, 133, .25);
}
.vj-job-apply:hover {
    background: var(--vj-magenta-dark);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 22px 38px rgba(166, 76, 133, .4);
    color: #fff;
}

/* ============================= */
/* Financiering: info pills */
/* ============================= */
.vj-info-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 28px 0 6px;
}
.vj-info-pill {
    background: var(--vj-cream);
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 14px;
    color: #4a4a4a;
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform .4s cubic-bezier(.22, 1.1, .4, 1), background .4s ease;
}
.vj-info-pill:hover {
    transform: translateY(-6px);
    background: #f6ebf2;
}
.vj-info-pill svg {
    width: 20px;
    height: 20px;
    stroke: var(--vj-magenta);
    flex: none;
}

/* ============================= */
/* Werkwijze: Jeugdstem-kaart */
/* ============================= */
.vj-jeugdstem-card {
    max-width: 820px;
    margin: 20px auto 40px;
    padding: 34px;
    background: var(--vj-cream);
    border-radius: 18px;
    transition: transform .45s cubic-bezier(.22, 1.1, .4, 1), box-shadow .45s ease;
}
.vj-jeugdstem-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(49, 49, 49, .1);
}
.vj-jeugdstem-card svg#Laag_1 {
    display: block;
    max-width: 220px;
    height: auto;
    margin-bottom: 18px;
    float: none !important;
}
.vj-jeugdstem-card h6 {
    font-weight: 700;
    margin: 0 0 10px;
}
.vj-jeugdstem-card p {
    font-size: 14.5px;
    line-height: 1.85;
    color: #4a4a4a;
}
.vj-jeugdstem-card .vj-check-list li {
    background: #fff;
}
.vj-contact-mini {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
    color: var(--vj-magenta-dark);
    font-weight: 600;
}
.vj-contact-mini li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vj-contact-mini svg {
    width: 16px;
    height: 16px;
    stroke: var(--vj-teal);
    flex: none;
}

/* ============================================================
   TOEVOEGING #2 aan build/voorjou-transities.css
   Plak dit ONDERAAN het bestaande bestand (dus na alles wat er al staat,
   inclusief de vorige toevoeging) — niet vervangen, alleen aanvullen.
   ============================================================ */

/* Minder lege ruimte boven/onder de content op subpagina's
   (Doelgroep, Vacatures, Financiering, Werkwijze, Missie en visie, Kwaliteit) */
section.section-lg:has(.vj-content) {
    padding-top: 64px;
    padding-bottom: 48px;
}

/* "Visie"-kop op Missie en visie: was een kale, ongestylede h3.
   Zelfde stijl als de rest van de site (cursieve accentkleur). */
.vj-content article h3 {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(24px, 3vw, 30px);
    color: var(--vj-magenta-dark);
    margin: 0 0 16px;
}

/* ============================================================
   TOEVOEGING #3 aan build/voorjou-transities.css
   Plak dit ONDERAAN het bestaande bestand (dus na de vorige twee
   toevoegingen) — niet vervangen, alleen aanvullen.
   ============================================================ */
 
/* "Missie"-blok (foto + tekst) op Missie en visie: compacter maken
   en dezelfde merk-typografie geven, zodat het beter aansluit bij
   de rest van de pagina in plaats van een zware, volle sectie te zijn. */
.section-halfscreen.bg-color-3.context-dark .section-halfscreen-inner {
    min-height: 0 !important;
    padding: 64px 0 !important;
}
.section-halfscreen.bg-color-3.context-dark .section-halfscreen-content h3 {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.2;
    margin-bottom: 18px !important;
}
.section-halfscreen.bg-color-3.context-dark .section-halfscreen-content p {
    font-size: 15.5px !important;
    line-height: 1.9 !important;
}

/* ============================================================
   TOEVOEGING #4 aan build/voorjou-transities.css
   Plak dit ONDERAAN het bestaande bestand (dus na de vorige drie
   toevoegingen) — niet vervangen, alleen aanvullen.
   ============================================================ */

/* ============================= */
/* Contact: kaart voor de kaart (Google Maps) */
/* ============================= */
section:has(> .container > iframe[src*="google.com/maps"]) .container {
    max-width: 1100px;
}
section:has(> .container > iframe[src*="google.com/maps"]) iframe {
    width: 100% !important;
    height: 440px !important;
    border: 0;
    display: block;
    border-radius: 20px;
    box-shadow: 0 28px 60px rgba(49, 49, 49, .16);
}

/* Contact: de balk met telefoon / e-mail / adres wordt een gecentreerde,
   afgeronde kaart met schaduw in plaats van een volle-breedte balk */
#contact.section.section-sm.bg-color-3 {
    background: transparent;
}
#contact.section.section-sm.bg-color-3 .container {
    max-width: 1100px;
}
#contact.section.section-sm.bg-color-3 .layout-bordered {
    background: var(--vj-teal);
    border-radius: 20px;
    box-shadow: 0 28px 60px rgba(49, 49, 49, .16);
    overflow: hidden;
}

/* ============================= */
/* Site-brede scroll-animatie (vervangt wow.js, dat onbetrouwbaar bleek):
   dezelfde aanpak als in de previews — elementen krijgen een zachte,
   duidelijke beweging (vervagen + iets omhoog) zodra ze in beeld komen
   tijdens het scrollen. Gebruikt de bestaande wow/data-wow-delay
   opmaak die al overal in de pagina's staat; er hoeft dus niets in de
   .php-bestanden te veranderen. */
.wow {
    opacity: 0;
    visibility: visible !important;
    transform: translateY(32px);
    filter: blur(3px);
    transition: opacity .8s cubic-bezier(.22, 1.1, .4, 1),
                transform .8s cubic-bezier(.22, 1.1, .4, 1),
                filter .8s cubic-bezier(.22, 1.1, .4, 1);
}
.wow.vj-in {
    opacity: 1;
    transform: none;
    filter: none;
}
/* Zet de oude wow.js-animatie (indien die ooit alsnog draait) volledig uit,
   zodat er nooit twee animaties tegelijk spelen */
.wow.animated {
    animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .wow {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* ============================================================
   TOEVOEGING #5 aan build/voorjou-transities.css
   Plak dit ONDERAAN het bestaande bestand (na de vorige vier
   toevoegingen) — niet vervangen, alleen aanvullen.
   ============================================================ */

/* Contactbalk (telefoon / e-mail / adres): nieuwe achtergrondkleur
   en tekst verticaal + horizontaal gecentreerd */
#contact.section.section-sm.bg-color-3 .layout-bordered {
    background: #EAD1DC;
}
#contact .layout-bordered-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
#contact .layout-bordered-item-inner {
    width: 100%;
}
#contact .link-default-2 {
    color: var(--vj-text);
}
#contact .link-default-2:hover {
    color: var(--vj-magenta-dark);
}
/* ============================================================
   TOEVOEGING #6 aan build/voorjou-transities.css
   Plak dit ONDERAAN het bestaande bestand (na de vorige vijf
   toevoegingen) — niet vervangen, alleen aanvullen.
   ============================================================ */

/* Vacatures gebruikt geen .vj-content (die pagina heeft een los job-card
   in plaats van lopende tekst), waardoor de ruimte-fix van eerder deze
   pagina miste. Nu ook hier de ruimte onder de vacature-kaart verkleinen. */
section.section-lg:has(.vj-job-card) {
    padding-top: 64px;
    padding-bottom: 48px;
}

/* Foto's krijgen een duidelijkere, eigen intocht (langzaam inzoomen +
   vervagen) in plaats van dezelfde kleine beweging als tekst — daardoor
   voelde het alsof foto's "in één keer" verschenen terwijl tekst
   geleidelijk kwam. */
img.wow,
.section-halfscreen-image.wow {
    transform: scale(1.08);
    transition: opacity 1.1s cubic-bezier(.22, 1.1, .4, 1),
                transform 1.1s cubic-bezier(.22, 1.1, .4, 1);
}
img.wow.vj-in,
.section-halfscreen-image.wow.vj-in {
    transform: scale(1);
}

/* BELANGRIJK: dit lost ook de "grote lege ruimte"/"onzichtbare tekst"
   op die je zag. De oorzaak: de vervaag-in-beeld-animatie gebruikte ook
   een blur-effect (wazig -> scherp). Chrome tekent dat blur-effect in
   sommige gevallen niet op tijd opnieuw, waardoor tekst en foto's na het
   laden onzichtbaar/wazig bleven staan totdat er iets anders op de
   pagina een hertekening afdwong (zoals scrollen) — dat verklaart zowel
   de "lege ruimtes" als de foto's die dan alsnog in één keer "poppen".
   Onderstaande regel zet het blur-effect overal uit en houdt alleen de
   betrouwbare vervagen + iets-omhoog-bewegen animatie over. */
.wow {
    filter: none !important;
    transition: opacity .8s cubic-bezier(.22, 1.1, .4, 1),
                transform .8s cubic-bezier(.22, 1.1, .4, 1) !important;
}

/* ============================================================
   TOEVOEGING #7 aan build/voorjou-transities.css
   Plak dit ONDERAAN het bestaande bestand (na de vorige zes
   toevoegingen) — niet vervangen, alleen aanvullen.
   ============================================================ */

/* Algemene regel voor ALLE grote secties (section-lg) op de hele site —
   dus niet meer per pagina apart geregeld. Dit dekt nu ook de
   hoofdpagina (het "Voor Jou"-blok met de foto), die de eerdere,
   pagina-specifieke fixes miste. */
.section.section-lg {
    padding-top: 64px !important;
    padding-bottom: 48px !important;
}