/* werkenbijunit.nl – same look as the old site: Titillium Web, navy and red */
:root{
  --navy:#0B102D; --rood:#E61E25; --groen:#3F9D4A; --tekst:#0c0c0c; --zacht:#5b5f73;
  --pagina:#ffffff; --kaart:#ffffff; --veld:#ffffff; --rand:#c9cbd4; --voet:#151515; --voet-onder:#0a0a0a;
  --f:"Titillium Web", "Segoe UI", Roboto, Arial, sans-serif; --f2:"Poppins", "Segoe UI", Arial, sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--pagina);color:var(--tekst);font:300 18px/1.5 var(--f);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--rood)}
:focus-visible{outline:3px solid var(--rood);outline-offset:3px}
.sr,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.overslaan{position:absolute;left:-9999px;top:8px;z-index:50;padding:10px 14px;background:#fff;color:var(--navy)}
.overslaan:focus{left:8px}

/* Header, transparent over the photo */
.kop{position:absolute;inset:0 0 auto;z-index:10;padding:0 7%}
.kop__in{max-width:1140px;margin:0 auto;min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:block;width:210px;line-height:0}
.nav{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:40px 14px;color:#fff;text-decoration:none;font:600 17px/1 var(--f)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--rood)}
.menuknop{display:none;background:none;border:0;color:#fff;padding:10px;cursor:pointer}

/* Home hero */
.held{position:relative;background:#0B102D url(/img/held-home.webp) center/cover no-repeat;padding:200px 50px 260px;color:#fff}
.held::before,.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(43,43,43,.82) 0%,rgba(43,43,43,.35) 55%,rgba(66,54,54,0) 100%)}
.held__in,.banner__in{position:relative;max-width:1140px;margin:0 auto}
.held h1,.banner h1{margin:0;max-width:700px;padding-left:20px;border-left:8px solid var(--rood);font:700 49px/62px var(--f)}
.voordelen{list-style:none;margin:28px 0 0;padding:0;font:300 20px/1.4 var(--f)}
.voordelen li{display:flex;align-items:center;gap:16px;margin-bottom:13px}
.voordelen svg{flex:none;width:18px;height:18px}
.knop{display:inline-block;margin-top:14px;padding:12px 24px;background:#ff0000;color:#fff;font:600 15px/1 var(--f);text-decoration:none}
.knop:hover{background:#c40000}

/* Inner page banner */
.banner{position:relative;background:#0B102D var(--beeld) center/cover no-repeat;padding:190px 50px 190px;color:#fff}
.banner::before{background:linear-gradient(140deg,rgba(11,16,45,.9) 0%,rgba(11,16,45,.6) 60%,rgba(11,16,45,.35) 100%)}
.banner h1{font-size:44px;line-height:1.25}

/* Content card */
.inhoud{position:relative;padding:0 20px 90px;background:var(--pagina) url(/img/patroon.webp) right top/700px auto no-repeat}
.kaart{position:relative;max-width:1140px;margin:-120px auto 0;background:var(--kaart);border-radius:12px;box-shadow:0 0 10px rgba(111,111,111,.5);display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:40px 50px 50px}
.kaart--tekst{grid-template-columns:1fr;max-width:900px}
.vacature .intro,.tekst .intro{margin:0 0 30px;font:500 30px/1.3 var(--f);color:var(--navy)}
.intro strong{font-weight:700}
.vacature h2,.form h2,.tekst h2{margin:28px 0 10px;padding-left:15px;border-left:5px solid var(--rood);font:600 25px/1.25 var(--f);color:var(--navy)}
.vacature > h2:first-of-type{margin-top:0}
.vacature p,.tekst p{margin:0 0 10px}
.vacature ul,.tekst ul{margin:0 0 10px;padding-left:22px}
.vacature li,.tekst li{margin:2px 0}
.tekst{max-width:760px}
.tekst .knop{margin-top:10px}

/* Form */
.form{align-self:start;position:sticky;top:24px}
.form h2{margin-top:0;font-size:22px;line-height:1.4}
.form form{display:grid;gap:12px;margin-top:22px}
.veld{width:100%;padding:11px 14px;border:1px solid var(--rand);border-radius:6px;background:var(--veld);color:var(--tekst);font:400 16px/1.4 var(--f)}
.veld::placeholder{color:var(--zacht)}
textarea.veld{min-height:120px;resize:vertical}
fieldset{border:0;margin:6px 0 0;padding:0}
legend{padding:0;margin-bottom:6px;font:400 16px/1.4 var(--f);color:var(--zacht)}
.keuze{display:flex;align-items:flex-start;gap:8px;margin:4px 0;font:400 15px/1.4 var(--f)}
.keuze input{margin-top:4px;accent-color:var(--rood)}
.cv{display:grid;gap:6px;margin-top:4px;font:400 15px/1.4 var(--f)}
.cv label{font-weight:600;color:var(--navy)}
.cv label span{font-weight:400;color:var(--zacht)}
.cv input{font:400 14px var(--f);max-width:100%}
.cv__uitleg{margin:0;font-size:13px;color:var(--zacht)}
.ts:empty{display:none}
.verstuur{justify-self:start;margin-top:6px;padding:12px 28px;border:0;border-radius:4px;background:var(--groen);color:#fff;font:600 16px/1 var(--f);cursor:pointer}
.verstuur:hover{filter:brightness(.92)}
.verstuur[disabled]{opacity:.6;cursor:wait}
.melding{margin:4px 0 0;padding:12px 14px;border-left:4px solid var(--groen);background:rgba(63,157,74,.1);font:400 15px/1.5 var(--f)}
.melding.fout{border-color:var(--rood);background:rgba(230,30,37,.08)}
.privacyregel{margin:0;font:400 13px/1.5 var(--f);color:var(--zacht)}
form.klaar > :not(.melding){display:none}
.naarform{display:none;margin:-14px 0 26px;font:600 16px/1.4 var(--f)}

/* Share */
.delen{margin-top:30px}
.delen a{display:inline-block;margin:0 8px 8px 0;padding:8px 14px;border:1px solid var(--rand);border-radius:4px;color:var(--navy);font:600 14px/1 var(--f);text-decoration:none}
.delen a:hover{border-color:var(--rood);color:var(--rood)}

/* Vacancy cards */
.inhoud--lijst{padding-top:0}
.lijst__intro{position:relative;max-width:760px;margin:-80px auto 40px;padding:26px 30px;background:var(--kaart);border-radius:12px;box-shadow:0 0 10px rgba(111,111,111,.5);text-align:center;font:500 22px/1.45 var(--f);color:var(--navy)}
.kaarten{list-style:none;margin:0 auto;padding:0;max-width:1140px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.vkaart a{display:flex;flex-direction:column;height:100%;background:var(--kaart);border-radius:10px;overflow:hidden;box-shadow:0 0 10px rgba(111,111,111,.35);color:var(--tekst);text-decoration:none}
.vkaart a:hover .vkaart__titel{color:var(--rood)}
.vkaart img{aspect-ratio:3/2;object-fit:cover;width:100%}
.vkaart__tekst{display:flex;flex-direction:column;gap:6px;padding:18px 22px 22px;flex:1}
.vkaart__label{align-self:flex-start;padding:3px 8px;border-radius:3px;background:var(--navy);color:#fff;font:600 12px/1.4 var(--f)}
.vkaart__titel{font:700 22px/1.25 var(--f);color:var(--navy)}
.vkaart__feit{font:400 15px/1.4 var(--f);color:var(--zacht)}
.vkaart__sam{font:300 16px/1.5 var(--f);margin-top:4px}
.vkaart__meer{margin-top:auto;padding-top:8px;font:600 15px/1 var(--f);color:var(--rood)}

/* Footer */
.voet{position:relative;background:var(--voet);color:#fff;text-align:center;padding:110px 7% 90px}
.voet::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);border-left:28px solid transparent;border-right:28px solid transparent;border-top:28px solid var(--pagina)}
.voet .logo{width:260px;margin:0 auto}
.voet__onder{background:var(--voet-onder);color:#fff;padding:0 7%}
.voet__onder div{max-width:1140px;margin:0 auto;min-height:99px;display:flex;align-items:center;justify-content:space-between;gap:20px;font:400 14px/1.4 var(--f2);text-transform:uppercase}
.voet__onder a{color:#fff;text-decoration:none}
.voet__onder a:hover{color:var(--rood)}

@media (max-width:1024px){
  .held{padding:170px 30px 220px}
  .held h1{font-size:40px;line-height:1.25}
  .banner{padding:160px 30px 170px}
  .banner h1{font-size:36px}
  .kaart{padding:34px 34px 40px}
  .kaarten{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .menuknop{display:block}
  .nav{display:none;position:absolute;top:80px;left:0;right:0;flex-direction:column;gap:0;background:#fff;padding:6px 0;box-shadow:0 6px 18px rgba(0,0,0,.2)}
  .nav.open{display:flex}
  .nav a{padding:14px 7%;color:#263238}
  .kaart{grid-template-columns:1fr;gap:34px}
  .form{position:static}
  .naarform{display:inline-block}
}
@media (max-width:600px){
  .kop{padding:0 20px}
  .logo{width:160px}
  .held{padding:130px 20px 190px}
  .banner{padding:130px 20px 150px}
  .held h1,.banner h1{font-size:30px;line-height:1.25;padding-left:14px;border-left-width:6px}
  .voordelen{font-size:17px}
  .inhoud{padding:0 12px 60px}
  .kaart{padding:26px 20px 30px;margin-top:-110px}
  .held + .inhoud .kaart{margin-top:-140px}
  .vacature .intro,.tekst .intro{font-size:23px}
  .vacature h2,.form h2,.tekst h2{font-size:21px}
  body{font-size:16px}
  .lijst__intro{margin-top:-90px;padding:20px;font-size:18px}
  .kaarten{grid-template-columns:1fr;gap:22px}
  .voet{padding:80px 20px 60px}
  .voet .logo{width:200px}
  .voet__onder div{flex-direction:column;justify-content:center;padding:22px 0;font-size:12px}
}

/* Keep the card margin from falling through .inhoud */
.inhoud{display:flow-root}