/* Taak 39 · Werken bij + vacatures T11 (mockups WerkenBij + Vacature op het canvas). Hero: contentpagina.css. */

.eo-cp-hero__knoppen{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:24px 0 0}
.eo-wb__in{max-width:var(--eo-container);margin-inline:auto}
.eo-wb .eo-wb__in{padding-inline:20px}

/* Lijst vacatures */
.eo-wb-lijst{background:#fff;padding:72px 0}
.eo-wb-lijst__kop{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.eo-wb-lijst__kop h2{margin:0}
.eo-wb-filter{display:flex;gap:8px;flex-wrap:wrap}
.eo-wb-filter[hidden]{display:none}
.eo-wb .eo-wb-filter__knop,.eo-wb .eo-wb-filter__knop:hover{border:1px solid var(--eo-navy);padding:8px 14px;font:600 .8125rem var(--eo-font);background:#fff;color:var(--eo-navy);min-height:44px;cursor:pointer;border-radius:0}
.eo-wb .eo-wb-filter__knop[aria-pressed="true"]{background:var(--eo-navy);color:#fff}
.eo-wb-filter__knop:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}
.eo-wb-vacs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.eo-wb-vac[hidden]{display:none}
.eo-wb-vac a{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)) auto;gap:24px;align-items:center;background:var(--eo-off);padding:20px 24px;text-decoration:none;color:inherit;border-left:4px solid var(--eo-green);transition:box-shadow .2s var(--eo-ease)}
.eo-wb-vac a:hover{box-shadow:0 8px 24px rgba(30,34,47,.12)}
.eo-wb-vac a:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}
.eo-wb-vac__kop .eo-eyebrow{display:block;margin:0}
.eo-wb-vac__titel{display:block;font-family:var(--eo-font-kop);font-size:1.375rem;line-height:1.2;color:var(--eo-navy)}
.eo-wb-vac__feit{font-size:.875rem;color:var(--eo-blue)}
.eo-wb-vac__knop{min-height:44px;padding:10px 18px;font-size:.875rem;pointer-events:none}
.eo-wb-leeg{margin:0;font-size:1rem}
.eo-wb-open{margin-top:24px;padding:24px;border:1px dashed var(--eo-line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.eo-wb-open h3{margin:0 0 4px}
.eo-wb-open p{margin:0;font-size:.9375rem}
.eo-wb-btn-o{background:transparent;color:var(--eo-navy);border:1px solid var(--eo-navy)}
.eo-wb-btn-o:hover{background:var(--eo-navy);color:#fff}

/* Open sollicitatie */
.eo-wb-form{padding:72px 0}
.eo-wb-form__in{max-width:780px}

/* Vacaturepagina */
.eo-vac__feiten{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;font-weight:600;font-size:.875rem;color:var(--eo-off)}
.eo-vac__feiten li::before{content:"";display:inline-block;width:8px;height:8px;background:var(--eo-accent);margin-right:8px}
.eo-vac__split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start;padding-block:72px}
.eo-vac__gegevens{background:var(--eo-off);border-left:4px solid var(--eo-green);padding:16px 24px;margin:0 0 24px;font-size:.9375rem;display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.eo-vac__gegevens dt{font-weight:700;color:var(--eo-navy)}
.eo-vac__gegevens dd{margin:0}
.eo-vac__intro{font-size:1.125rem;color:var(--eo-navy)}
.eo-vac__tekst h2{font-size:1.75rem}
.eo-vac__tekst ul{margin:0 0 24px;padding:0;list-style:none}
.eo-vac__tekst li{padding:6px 0 6px 24px;position:relative;border-top:1px solid #e1ddd3}
.eo-vac__tekst li::before{content:"\2713";position:absolute;left:0;color:var(--eo-green);font-weight:700}
.eo-vac__gesloten{background:var(--eo-off);border-left:4px solid var(--eo-danger);padding:12px 16px}
.eo-vac__solliciteer{position:static} /* Taak 117: de flow wisselt van hoogte, dus niet meer sticky. */
.eo-vac__andere{background:#fff;padding:56px 0}
.eo-vac__andere-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.eo-vac__ander{display:flex;gap:16px;align-items:center;background:var(--eo-off);padding:12px;text-decoration:none;color:inherit;min-height:90px}
.eo-vac__ander img{width:120px;height:90px;object-fit:cover;flex:none}
.eo-vac__ander .eo-eyebrow{display:block;margin:0}
.eo-vac__ander:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}

@media (max-width:900px){
	.eo-wb-vac a{grid-template-columns:1fr 1fr}
	.eo-wb-vac__kop{grid-column:1 / -1}
	.eo-vac__split{grid-template-columns:1fr;gap:32px;padding-block:48px}
	.eo-vac__solliciteer{position:static}
}
@media (max-width:600px){
	.eo-vac__andere-grid{grid-template-columns:1fr}
	.eo-wb-lijst,.eo-wb-form{padding:48px 0}
}

/* Taak 117 · Sollicitatieflow (inc/sollicitatie.php + js/sollicitatie.js). Basis: .eo-form uit formulier.css.
   Zonder JS staan alle stappen onder elkaar; met JS (.eo-soll--js) één stap tegelijk. */
.eo-soll{--eo-soll-knop:#6D724D;--eo-soll-knop-hover:#384021;--eo-soll-staal:#4E5D68;--eo-soll-grijs:#B7BFC2;--eo-soll-beige:#E5E2DB;
	background:#fff;border:1px solid var(--eo-soll-beige);max-width:100%}
.eo-soll .eo-form__titel{font-size:clamp(1.5rem,2.6vw,2rem)}
.eo-soll__form{display:grid;gap:24px;min-width:0}
.eo-soll__stap{display:grid;gap:14px;min-width:0}
.eo-soll__stap[hidden],.eo-soll__voortgang[hidden],.eo-soll__sub[hidden],.eo-soll__knop[hidden]{display:none}
.eo-soll:not(.eo-soll--js) .eo-soll__stap + .eo-soll__stap{border-top:1px solid var(--eo-soll-beige);padding-top:24px}
.eo-soll .eo-soll__kop{margin:0;font-family:var(--eo-font-kop);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:1.25rem;line-height:1.2;color:var(--eo-navy)}
.eo-soll .eo-soll__kop:focus{outline:none}
.eo-soll .eo-soll__kop:focus-visible{outline:2px solid var(--eo-focus);outline-offset:4px}
/* De vraag zelf leesbaar: geen hoofdletters (huisstijlkop alleen voor korte koppen). */
.eo-soll .eo-soll__vraag{text-transform:none;letter-spacing:0;font-size:clamp(1.35rem,2.2vw,1.6rem);line-height:1.3}
.eo-soll__nr{margin:0;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--eo-soll-staal)}
.eo-soll--js .eo-soll__nr{display:none} /* Met JS staat de teller in de voortgang. */
.eo-soll__hint,.eo-soll__tijd,.eo-soll__privacy{margin:0;font-size:.9rem;color:var(--eo-soll-staal)}
.eo-soll__privacy a{color:var(--eo-green-dark)}
.eo-soll__uitleg{margin:0;padding:0 0 0 1.4em;display:grid;gap:6px}
.eo-soll__uitleg li{padding-left:4px}
.eo-soll__uitleg li::marker{color:var(--eo-soll-knop);font-weight:700}
.eo-soll textarea{min-height:150px}
.eo-soll__tekens{margin:0;justify-self:end;font-size:.8125rem;color:var(--eo-soll-staal);font-variant-numeric:tabular-nums}
.eo-soll__tekens.is-bijna{color:var(--eo-danger)}

/* Voortgang */
.eo-soll__voortgang{display:grid;gap:8px;margin:0 0 20px}
.eo-soll__teller{margin:0;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--eo-soll-staal)}
.eo-soll__balk{height:6px;background:var(--eo-soll-beige);border-radius:999px;overflow:hidden}
.eo-soll__balk span{display:block;height:100%;width:0;background:var(--eo-soll-knop);border-radius:999px;transition:width .3s var(--eo-ease)}

/* Keuzes */
.eo-soll__keuzes{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.eo-soll__keuzes legend{padding:0;margin:0 0 6px;font-weight:600}
.eo-soll__rij{display:flex;flex-wrap:wrap;gap:10px}
.eo-soll__keuze{display:flex;gap:12px;align-items:center;min-height:48px;padding:10px 16px;background:#F1F0EC;border:1px solid var(--eo-soll-beige);border-radius:12px;font-weight:400!important;cursor:pointer}
.eo-soll__rij .eo-soll__keuze{flex:1 1 120px}
.eo-soll__keuze:hover{border-color:var(--eo-soll-grijs)}
.eo-soll__keuze:has(input:checked){border-color:var(--eo-soll-knop);background:#fff;box-shadow:inset 0 0 0 1px var(--eo-soll-knop)}
.eo-soll__keuze input{width:20px;height:20px;margin:0;accent-color:var(--eo-soll-knop);flex:none}
.eo-soll__keuze:focus-within{outline:2px solid var(--eo-focus);outline-offset:2px}
.eo-soll__sub{padding-left:4px}
.eo-soll input[type=date]{width:100%;max-width:260px;min-height:48px;padding:10px 14px;font:400 1rem/1.4 var(--eo-font);color:var(--eo-navy);background:var(--eo-off);border:1px solid var(--eo-line);border-radius:var(--eo-radius)}
.eo-soll input[type=file]{width:100%;max-width:100%;min-height:48px;padding:10px;font:400 .9375rem var(--eo-font);color:var(--eo-navy);background:var(--eo-off);border:1px dashed var(--eo-soll-grijs);border-radius:12px;cursor:pointer}
.eo-soll input[type=file]::file-selector-button{margin-right:12px;padding:8px 16px;border:0;border-radius:999px;background:var(--eo-navy);color:#fff;font:600 .875rem var(--eo-font);cursor:pointer}
.eo-soll input[type=file][aria-invalid=true]{border-color:var(--eo-danger)}

/* Knoppen: rond, olijf, hover donkergroen */
.eo-soll__nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:4px}
.eo-soll__knop{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border-radius:999px;border:1px solid var(--eo-soll-knop);background:var(--eo-soll-knop);color:#fff;font:600 .9375rem/1.2 var(--eo-font);cursor:pointer;transition:background .15s var(--eo-ease),border-color .15s var(--eo-ease)}
.eo-soll__knop:hover{background:var(--eo-soll-knop-hover);border-color:var(--eo-soll-knop-hover);color:#fff}
.eo-soll__knop:focus-visible{outline:2px solid var(--eo-focus);outline-offset:3px}
.eo-soll__knop:disabled{opacity:.6;cursor:wait}
.eo-soll__knop--terug{background:transparent;color:var(--eo-navy);border-color:var(--eo-soll-grijs)}
.eo-soll__knop--terug:hover{background:var(--eo-off);color:var(--eo-navy);border-color:var(--eo-navy)}
.eo-soll__knop--verder,.eo-soll__knop--verstuur{margin-left:auto}
.eo-soll__stap--start .eo-soll__knop--verder{margin-left:0}
.eo-soll__bedankt{border-left-color:var(--eo-soll-knop)}
.eo-soll__bedankt p{font-weight:400}
.eo-soll.is-verzonden .eo-form__intro{display:none}

@media (max-width:600px){
	.eo-soll{padding:24px 18px}
	.eo-soll__nav{flex-direction:column-reverse;align-items:stretch}
	.eo-soll__knop,.eo-soll__knop--verder,.eo-soll__knop--verstuur{width:100%;margin-left:0}
}
@media (prefers-reduced-motion:reduce){.eo-soll__balk span{transition:none}}