/* ============================================================
   Vacatures — huisstijl v2 (Inter + Plus Jakarta Sans, cream canvas)
   Tokens conform /dashboard/huisstijl/ (canonieke styleguide)
   ============================================================ */
:root{
  --brand-blue:#0071bc;--brand-blue-deep:#005a96;--brand-teal:#5acac8;--brand-teal-deep:#36b8b6;
  --coral-50:#fff5f0;--coral-100:#ffe1d6;--coral-300:#ffb39c;--coral-500:#ff8a73;--coral-600:#ee6b58;--coral-700:#ee6b58;
  --ink-100:#0a2540;--ink-90:#1a3554;--ink-80:#2f4660;
  --cream-0:#ffffff;--cream-50:#fdfaf6;--cream-100:#faf6f0;--cream-200:#f5ede1;--cream-300:#ebe0cf;--cream-400:#d8cbb5;
  --sage-50:#eef9f8;--sage-300:#a6e4e2;--sage-700:#36b8b6;
  --text-100:#0f1a2e;--text-90:#2b3550;--text-70:#445165;--text-50:#697c92;--text-30:#9aa8bc;
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;
  --shadow-xs:0 1px 2px rgba(45,30,15,.04);
  --shadow-sm:0 2px 8px rgba(45,30,15,.06),0 1px 2px rgba(45,30,15,.04);
  --shadow-md:0 8px 24px rgba(45,30,15,.08),0 2px 6px rgba(45,30,15,.05);
  --shadow-lg:0 24px 64px rgba(45,30,15,.1),0 6px 18px rgba(45,30,15,.06);
}
body{background:var(--cream-50)}
main{font-family:'Inter',system-ui,sans-serif;color:var(--text-100);font-size:15.5px;line-height:1.6}
main a{color:var(--brand-blue);text-decoration:none}
.icon{width:18px;height:18px;display:inline-block;flex-shrink:0;vertical-align:-3px;stroke:currentColor;fill:none}

/* Layout */
.vac-wrap{max-width:1440px;margin:0 auto;padding:0 32px}
.vac-narrow{max-width:1140px;margin:0 auto}
.vac-sec{padding:72px 0}
.vac-sec--white{background:var(--cream-0)}
.vac-eye{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-blue);margin-bottom:14px}
.vac-eye::before{content:"";width:32px;height:2px;background:currentColor;border-radius:2px}
.vac-h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-0.024em;line-height:1.1;margin:0 0 14px;color:var(--text-100)}
.vac-lead{font-size:17.5px;color:var(--text-70);max-width:720px;line-height:1.6;margin:0 0 8px}

/* Buttons */
.vac-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;min-height:48px;border-radius:var(--r-pill);font-family:'Inter',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .18s ease;border:1.5px solid transparent;text-decoration:none;letter-spacing:-0.005em;white-space:nowrap}
.vac-btn--coral{background:linear-gradient(135deg,var(--coral-500),var(--coral-600));color:#fff;box-shadow:0 4px 14px rgba(238,107,88,.32)}
.vac-btn--coral:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(238,107,88,.44);color:#fff}
.vac-btn--ghost{background:#fff;color:var(--text-100);border-color:var(--cream-300)}
.vac-btn--ghost:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:var(--cream-100)}
.vac-btn--white{background:#fff;color:var(--ink-100);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.vac-btn--white:hover{transform:translateY(-1px);color:var(--ink-100)}

/* Breadcrumbs */
.vac-bc{max-width:1440px;margin:20px auto 0;padding:0 32px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-50);flex-wrap:wrap}
.vac-bc a{color:var(--text-70);transition:color .15s}
.vac-bc a:hover{color:var(--brand-blue)}
.vac-bc .sep{color:var(--text-30)}
.vac-bc .current{color:var(--text-100);font-weight:600}

/* Hero (licht, cream, rust boven de vouw) */
.vac-hero{padding:56px 0 64px;background:linear-gradient(180deg,var(--cream-200) 0%,var(--cream-50) 100%)}
.vac-hero__inner{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center}
.vac-hero__tag{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--cream-300);color:var(--text-70);font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:var(--r-pill);margin-bottom:22px;box-shadow:var(--shadow-xs)}
.vac-hero__tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-blue)}
.vac-hero h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(36px,5vw,58px);font-weight:800;letter-spacing:-0.032em;line-height:1.05;margin:0 0 18px;color:var(--text-100)}
.vac-hero h1 .accent{color:var(--brand-blue)}
.vac-hero__sub{font-size:18px;line-height:1.6;color:var(--text-70);max-width:600px;margin:0 0 26px}
.vac-hero__chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.vac-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--cream-300);color:var(--text-90);font-weight:600;font-size:13.5px;padding:8px 15px;border-radius:var(--r-pill);box-shadow:var(--shadow-xs)}
.vac-chip .icon{width:15px;height:15px;color:var(--brand-blue)}
.vac-hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.vac-hero__pic{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--cream-200);aspect-ratio:4/3}
.vac-hero__pic img{width:100%;height:100%;object-fit:cover;display:block}

/* Vacature-kaart (stretched-link patroon: link alleen op titel) */
.vac-card{position:relative;display:grid;grid-template-columns:340px 1fr;background:#fff;border:1px solid var(--cream-300);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:all .25s ease}
.vac-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-teal)}
.vac-card__media{position:relative;background:var(--cream-200);min-height:240px}
.vac-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vac-card__badge{position:absolute;top:16px;left:16px;background:var(--coral-50);color:var(--coral-700);font-weight:800;font-size:11.5px;padding:6px 13px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.08em;box-shadow:var(--shadow-sm)}
.vac-card__body{padding:32px 36px}
.vac-card__cat{display:inline-block;font-size:11.5px;font-weight:800;color:var(--brand-blue-deep);text-transform:uppercase;letter-spacing:.1em;background:rgba(0,113,188,.08);padding:5px 12px;border-radius:var(--r-pill);margin-bottom:14px}
.vac-card__title{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;font-weight:800;letter-spacing:-0.018em;line-height:1.2;margin:0 0 10px}
.vac-card__title a{color:var(--text-100)}
.vac-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.vac-card__desc{color:var(--text-70);font-size:15px;line-height:1.6;margin:0 0 16px;max-width:640px}
.vac-card__facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:0 0 18px;list-style:none;padding:0;max-width:560px}
.vac-card__facts li{font-size:14px;color:var(--text-70);display:flex;align-items:center;gap:10px}
.vac-card__facts li .icon{color:var(--brand-blue);width:16px;height:16px}
.vac-card__cta{display:inline-flex;align-items:center;gap:8px;color:var(--brand-blue);font-weight:700;font-size:15px}
.vac-card__cta .icon{width:16px;height:16px;transition:transform .2s ease}
.vac-card:hover .vac-card__cta .icon{transform:translateX(4px)}

/* Stappen */
.vac-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;padding:0;margin:36px 0 0;counter-reset:stap}
.vac-steps li{background:#fff;border:1px solid var(--cream-300);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--shadow-xs)}
.vac-steps li::before{counter-increment:stap;content:counter(stap);display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink-100);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:16px;margin-bottom:14px}
.vac-steps .vac-step__t{font-family:'Plus Jakarta Sans',sans-serif;font-size:16.5px;font-weight:700;color:var(--text-100);margin:0 0 6px;letter-spacing:-0.01em}
.vac-steps p{font-size:14px;color:var(--text-70);line-height:1.6;margin:0}

/* Aanbod-kaarten */
.vac-offer{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.vac-offer__card{background:#fff;border:1px solid var(--cream-300);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-xs);transition:all .25s ease}
.vac-offer__card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.vac-offer__icon{width:48px;height:48px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--brand-blue),var(--brand-teal));color:#fff;display:grid;place-items:center;margin-bottom:16px}
.vac-offer__icon .icon{width:24px;height:24px}
.vac-offer__t{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;letter-spacing:-0.012em;margin:0 0 8px;color:var(--text-100)}
.vac-offer__card p{font-size:14.5px;color:var(--text-70);line-height:1.55;margin:0}

/* Quote */
.vac-quote{background:#fff;border:1px solid var(--cream-300);border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow-sm);max-width:840px;margin:0 auto}
.vac-quote__text{font-family:'Plus Jakarta Sans',sans-serif;font-size:21px;font-weight:600;letter-spacing:-0.014em;line-height:1.45;color:var(--text-100);margin:0 0 22px}
.vac-quote__text::before{content:"\201C";font-size:48px;line-height:0;color:var(--coral-500);font-family:Georgia,serif;margin-right:4px;vertical-align:-0.18em;font-weight:700}
.vac-quote__who{font-size:14px;color:var(--text-50);padding-top:16px;border-top:1px solid var(--cream-300)}
.vac-quote__who strong{color:var(--text-100);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;display:block;font-size:15px;margin-bottom:2px}

/* FAQ */
.vac-faq{display:flex;flex-direction:column;gap:10px;max-width:840px;margin:32px auto 0}
.vac-faq details{background:#fff;border:1px solid var(--cream-300);border-radius:var(--r-md);overflow:hidden;transition:all .2s}
.vac-faq details[open]{border-color:var(--coral-300);background:var(--coral-50);box-shadow:var(--shadow-sm)}
.vac-faq summary{cursor:pointer;padding:20px 24px;font-size:15.5px;font-weight:600;color:var(--text-100);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px}
.vac-faq summary::-webkit-details-marker{display:none}
.vac-faq summary::after{content:"";width:22px;height:22px;flex-shrink:0;background:var(--cream-100);border-radius:50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee6b58' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:center;background-size:12px;transition:transform .2s}
.vac-faq details[open] summary::after{transform:rotate(180deg);background-color:#fff}
.vac-faq details > p{padding:0 24px 22px;color:var(--text-70);line-height:1.65;font-size:14.5px;margin:0}

/* Donkere CTA-band */
.vac-cta-band{background:var(--ink-100);color:#fff;border-radius:var(--r-xl);padding:52px 56px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.vac-cta-band h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-0.02em;margin:0 0 10px;color:#fff}
.vac-cta-band p{color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.6;margin:0;max-width:640px}
.vac-cta-band__actions{display:flex;gap:12px;flex-wrap:wrap}

/* Contact-band */
.vac-contact{background:#fff;border:1px solid var(--cream-300);border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.vac-contact__icon{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--brand-blue),var(--brand-teal));color:#fff;display:grid;place-items:center;flex-shrink:0}
.vac-contact__icon .icon{width:30px;height:30px}
.vac-contact__body{flex:1;min-width:260px}
.vac-contact__t{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:800;letter-spacing:-0.014em;margin:0 0 6px;color:var(--text-100)}
.vac-contact__body p{font-size:14.5px;color:var(--text-70);line-height:1.6;margin:0}
.vac-contact__actions{display:flex;gap:10px;flex-wrap:wrap}

/* ============ Detailpagina ============ */
.vac-detail{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.vac-article{background:#fff;border:1px solid var(--cream-300);border-radius:var(--r-lg);padding:44px 48px;box-shadow:var(--shadow-sm)}
.vac-article h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:23px;font-weight:800;color:var(--text-100);margin:36px 0 12px;letter-spacing:-0.016em}
.vac-article h2:first-child{margin-top:0}
.vac-article p{color:var(--text-70);font-size:15.5px;line-height:1.7;margin:0 0 14px}
.vac-article ul{margin:8px 0 18px;padding:0;list-style:none}
.vac-article ul li{position:relative;padding:7px 0 7px 28px;color:var(--text-70);font-size:15px;line-height:1.65}
.vac-article ul li::before{content:"";position:absolute;left:2px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--brand-teal);box-shadow:0 0 0 3px var(--sage-50)}
.vac-article ul li strong,.vac-article p strong{color:var(--text-100)}
.vac-note{background:var(--cream-100);border:1px solid var(--cream-300);border-radius:var(--r-md);padding:20px 22px;margin:22px 0 0}
.vac-note p{font-size:14px;margin:0}
.vac-share{margin-top:34px;padding-top:26px;border-top:1px solid var(--cream-300);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vac-share span{font-size:14px;font-weight:700;color:var(--text-100)}
.vac-share a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;background:var(--cream-100);color:var(--text-70);border:1px solid var(--cream-300);border-radius:var(--r-pill);font-size:13.5px;font-weight:600;transition:all .2s ease}
.vac-share a:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:#fff}

.vac-aside{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px}
.vac-aside__card{background:#fff;border:1px solid var(--cream-300);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-sm)}
.vac-aside__t{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:800;color:var(--text-100);margin:0 0 16px;letter-spacing:-0.01em}
.vac-summary{list-style:none;padding:0;margin:0 0 20px}
.vac-summary li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--cream-300);font-size:14px;color:var(--text-50)}
.vac-summary li:last-child{border-bottom:none}
.vac-summary li strong{color:var(--text-100);font-weight:600;text-align:right}
.vac-aside__cta{display:flex;flex-direction:column;gap:10px}
.vac-aside__cta .vac-btn{width:100%}
.vac-aside__note{font-size:12.5px;color:var(--text-50);text-align:center;margin:10px 0 0;line-height:1.5}
.vac-back{display:inline-flex;align-items:center;gap:8px;color:var(--brand-blue);font-weight:600;font-size:14px;margin:26px 0 22px}
.vac-back .icon{width:16px;height:16px}
.vac-back:hover{color:var(--brand-blue-deep)}

/* Vakgebied-linkjes in artikel */
.vac-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 18px;padding:0;list-style:none}
.vac-fields li{padding:0}
.vac-fields li::before{display:none}
.vac-fields a{display:flex;align-items:center;gap:10px;padding:13px 16px;background:var(--cream-100);border:1px solid var(--cream-300);border-radius:var(--r-md);color:var(--text-90);font-size:14px;font-weight:600;transition:all .2s ease}
.vac-fields a:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:#fff}
.vac-fields .icon{width:16px;height:16px;color:var(--brand-blue)}

/* Responsief */
@media (max-width:1024px){
  .vac-detail{grid-template-columns:1fr}
  .vac-aside{position:static}
  .vac-offer{grid-template-columns:1fr 1fr}
  .vac-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .vac-wrap{padding:0 20px}
  .vac-bc{padding:0 20px}
  .vac-sec{padding:52px 0}
  .vac-hero{padding:36px 0 48px}
  .vac-hero__inner{grid-template-columns:1fr;gap:32px}
  .vac-hero__pic{aspect-ratio:16/10}
  .vac-card{grid-template-columns:1fr}
  .vac-card__media{min-height:200px;aspect-ratio:16/9}
  .vac-card__body{padding:24px 22px 28px}
  .vac-card__facts{grid-template-columns:1fr}
  .vac-article{padding:30px 22px}
  .vac-cta-band{padding:36px 26px}
  .vac-contact{padding:28px 22px}
}
@media (max-width:560px){
  .vac-offer{grid-template-columns:1fr}
  .vac-steps{grid-template-columns:1fr}
  .vac-fields{grid-template-columns:1fr}
  .vac-hero__cta .vac-btn,.vac-cta-band__actions .vac-btn,.vac-contact__actions .vac-btn{width:100%}
  .vac-cta-band__actions,.vac-contact__actions{width:100%}
}