/* Dual-Def — vacaturepagina en sollicitatieformulier.
   Bouwt voort op de variabelen van main.css, zodat een wijziging aan de
   huisstijl hier automatisch doorwerkt. */

/* Verzekering: .job-hersteld en .job-stapknoppen krijgen hieronder display:flex, wat
   normaal zou winnen van de standaard [hidden]{display:none} van de browser (auteur-CSS
   wint altijd van user-agent-CSS, los van specificiteit). Vandaag houdt bootstrap.min.css
   dat tegen met [hidden]{display:none !important} — maar de terugval-zonder-JavaScript
   van deze pagina mag daar niet stilzwijgend van afhangen. Verdwijnt Bootstrap ooit van
   deze pagina, dan blijft dit hier alsnog dicht. */
[hidden] {
  display: none !important;
}

.taalkiezer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}
.taalkiezer a { color: var(--tj-color-theme-dark-4); }
.taalkiezer a.actief,
.taalkiezer a:hover { color: var(--tj-color-theme-primary); }
.taalkiezer span { color: var(--tj-color-theme-dark-4); opacity: .4; }

/* ---------- Kop van de vacature ---------- */

.job-hero {
  background: var(--tj-color-theme-dark);
  color: #fff;
  padding: 104px 0 88px;
}
.job-label {
  display: inline-block;
  color: var(--tj-color-theme-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.job-title {
  color: #fff;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 18px;
}
/* De titel komt uit jobs.php al opgesplitst in twee <span>'s (op het gedachtestreepje):
   de functienaam en, eronder, het achtervoegsel. Vandaar geen max-width meer hierboven
   om het afbreken te forceren — de regels liggen nu expliciet vast. */
.job-title span { display: block; }
.job-subtitle {
  color: rgba(255, 255, 255, .72);
  font-size: 20px;
  line-height: 1.55;
  max-width: 58ch;
  margin: 0 0 10px;
}
/* De publicatiedatum hangt onder de subtitel, niet ernaast: kleiner, lichter, en met de
   marge van 44px die eerst op .job-subtitle stond — zo blijft de afstand tot het datablad
   met de kenmerken exact wat ze was. */
.job-gepubliceerd {
  color: rgba(255, 255, 255, .45);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 44px;
}

/* De vier kenmerken als datablad: labels boven, haarlijnen ertussen. */
.job-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 44px;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.job-spec {
  padding: 0 26px;
  border-left: 1px solid rgba(255, 255, 255, .12);
}
.job-spec:first-child { padding-left: 0; border-left: 0; }
.job-spec dt {
  color: var(--tj-color-theme-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.job-spec dd {
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  line-height: 1.45;
}

@media (max-width: 991px) {
  .job-specs { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .job-spec:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 575px) {
  .job-hero { padding: 64px 0 52px; }
  .job-specs { grid-template-columns: 1fr; gap: 20px; }
  .job-spec { padding-left: 0; border-left: 0; }
}

/* ---------- De vacaturetekst ---------- */

.job-body { background: #fff; }

.job-grid { display: block; }

@media (min-width: 1100px) {
  .job-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 72px;
    align-items: start;
  }
}

.job-inhoud { max-width: 68ch; }

.job-sectie {
  scroll-margin-top: 120px;   /* de vaste header niet over de kop laten vallen */
}
.job-sectie + .job-sectie {
  margin-top: 52px;
  padding-top: 52px;
  border-top: 1px solid rgba(12, 30, 33, .1);   /* haarlijn, geen balk */
}
.job-sectie h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(23px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--tj-color-heading-primary);
  margin: 0 0 22px;
}
.job-sectie p,
.job-sectie li {
  color: var(--tj-color-text-body);
  font-size: 17px;
  line-height: 1.72;
}
.job-sectie p { margin: 0 0 18px; }
.job-sectie ul,
.job-sectie ol { margin: 0 0 18px; padding-left: 22px; }
.job-sectie li { margin-bottom: 12px; }
.job-sectie li::marker { color: var(--tj-color-theme-primary); }
.job-sectie strong { color: var(--tj-color-heading-primary); font-weight: 600; }

/* De eerlijke sectie: dit is het stuk dat gelezen móét worden. */
.job-sectie--uitgelicht {
  border-left: 3px solid var(--tj-color-theme-primary);
  padding-left: 30px;
}
.job-sectie--uitgelicht p {
  font-size: 19px;
  line-height: 1.66;
  color: var(--tj-color-heading-primary);
}
@media (min-width: 1100px) {
  .job-sectie--uitgelicht { margin-left: -33px; }   /* streep buiten de leeskolom */
}

/* ---------- De zijbalk ---------- */

.job-zijbalk { display: none; }

@media (min-width: 1100px) {
  .job-zijbalk {
    display: block;
    /* Sticky hoort op het grid-item zelf. Zet je het op een kind, dan krimpt het
       grid-item door align-items:start tot de hoogte van dat kind, en is er geen
       ruimte meer om in te plakken — dan scrolt de zijbalk gewoon weg. */
    position: sticky;
    top: 110px;
    /* Mocht de zijbalk ooit hoger worden dan het scherm, dan blijft ze scrollbaar
       in plaats van dat de knop onderaan onbereikbaar wordt. */
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
}

.job-zijbalk-feiten {
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid rgba(12, 30, 33, .1);
}
.job-zijbalk-feiten > div + div { margin-top: 14px; }
.job-zijbalk-feiten dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tj-color-theme-primary);
  margin-bottom: 3px;
}
.job-zijbalk-feiten dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tj-color-text-body);
}

.job-inhoudsopgave ol {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  counter-reset: none;
}
.job-inhoudsopgave a {
  display: flex;
  gap: 12px;
  padding: 8px 0 8px 14px;
  border-left: 2px solid rgba(12, 30, 33, .1);
  color: var(--tj-color-text-body);
  font-size: 14px;
  line-height: 1.4;
  transition: color .18s ease, border-color .18s ease;
}
.job-inhoudsopgave a:hover { color: var(--tj-color-heading-primary); }
.job-inhoudsopgave a.actief {
  color: var(--tj-color-theme-primary);
  border-left-color: var(--tj-color-theme-primary);
  font-weight: 600;
}

.job-zijbalk-knop { width: 100%; justify-content: center; }

/* ---------- Het formulier ---------- */

.job-formulier { background: var(--tj-color-theme-bg); }
.job-formulier .container { max-width: 860px; }

.job-form-kop { margin-bottom: 36px; }
.job-form-kop h2 {
  font-size: clamp(27px, 3vw, 36px);
  letter-spacing: -.015em;
  color: var(--tj-color-heading-primary);
  margin: 0 0 10px;
}
.job-form-kop p {
  color: var(--tj-color-text-body);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  max-width: 62ch;
}

.job-stap {
  background: #fff;
  border: 1px solid rgba(12, 30, 33, .08);
  border-radius: 12px;
  padding: 32px 34px 28px;
  margin: 0 0 20px;
}
/* Een <legend> wordt standaard óp de bovenrand van het fieldset getekend, waardoor
   een grote kop half boven de witte kaart uitsteekt. float:left + width:100% haalt
   de legend uit die speciale positionering en zet hem als gewoon blok binnen de
   padding van de kaart. De subtitel eronder clear't de float. */
.job-stap legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 6px;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--tj-color-heading-primary);
}
.job-stap-uitleg {
  clear: both;
  margin: 0 0 26px;
  color: var(--tj-color-text-body);
  font-size: 15px;
  line-height: 1.55;
  max-width: 60ch;
}

.veld-rij { display: flex; flex-wrap: wrap; gap: 0 22px; }
.veld-rij .veld { flex: 1 1 260px; }

.veld { margin-bottom: 24px; }
.veld.breed { width: 100%; }
.veld:last-child { margin-bottom: 0; }

.veld > label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--tj-color-heading-primary);
  line-height: 1.5;
  margin-bottom: 8px;
}
.verplicht { color: #c0392b; }

.veld .hint {
  display: block;
  font-size: 13px;
  color: var(--tj-color-text-body-3, #67787a);
  line-height: 1.5;
  margin: -4px 0 10px;
}
.veld .fout {
  display: block;
  font-size: 13px;
  color: #c0392b;
  margin-top: 6px;
}
.veld.heeft-fout input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.veld.heeft-fout select,
.veld.heeft-fout textarea,
.veld.heeft-fout .sleepzone {
  border-color: #c0392b;
}

.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld input[type="url"],
.veld select,
.veld textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  border: 1px solid rgba(12, 30, 33, .16);
  border-radius: 7px;
  background: #fff;
  color: var(--tj-color-heading-primary);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.veld textarea { resize: vertical; min-height: 140px; }
.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  outline: none;
  border-color: var(--tj-color-theme-primary);
  box-shadow: 0 0 0 3px rgba(30, 138, 138, .12);
}

.keuzes { display: flex; flex-direction: column; gap: 2px; }
.keuze {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 12px;
  margin: 0 -12px;
  border-radius: 7px;
  font-size: 16px;
  color: var(--tj-color-text-body);
  line-height: 1.55;
  cursor: pointer;
  transition: background-color .14s ease;
}
.keuze:hover { background: rgba(216, 229, 229, .5); }
.keuze input { margin-top: 4px; flex: 0 0 auto; accent-color: var(--tj-color-theme-primary); }
.keuze.akkoord { font-size: 14px; line-height: 1.6; }

.spamval { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.job-fout-blok {
  background: #fdecea;
  border: 1px solid #f0b6b0;
  border-left: 3px solid #c0392b;
  color: #922b21;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 15px;
}
/* Bij een algemene fout zet jobs.js hier de focus op (tabindex="-1"): een zichtbare
   rand laat ook een ziende toetsenbordgebruiker zien waar de focus terechtkwam. */
.job-fout-blok:focus {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}
/* De regel over kwijtgeraakte bestanden staat in hetzelfde blok, maar is geen titel:
   een gewone alinea eronder, zelfde kleur, iets kleiner. */
.job-fout-blok p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Samenvatting van vergeten velden, bovenaan één stap van de wizard (jobs.js,
   stapIsGeldig()). Zelfde "technisch dossier"-stijl als .job-fout-blok hierboven
   — haarlijn, teal-thema, #c0392b voor fouten — maar een eigen klasse: dit blok
   hoort bij één stap, niet bij het hele formulier, en wordt door jobs.js zelf
   ingevoegd vóór de stap en weer verwijderd zodra dat nodig is. */
.job-samenvatting-fout {
  background: #fdecea;
  border: 1px solid #f0b6b0;
  border-left: 3px solid #c0392b;
  color: #922b21;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 15px;
}
/* jobs.js geeft dit blok de focus zodra er iets ontbreekt (tabindex="-1"): een
   zichtbare rand laat ook een ziende toetsenbordgebruiker zien waar de focus
   terechtkwam. */
.job-samenvatting-fout:focus {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}

.job-verzend { margin-top: 8px; }

/* ---------- Bedankt ---------- */

.job-bedankt {
  background: #fff;
  border: 1px solid rgba(12, 30, 33, .08);
  border-radius: 12px;
  padding: 64px 44px;
  text-align: center;
}
.job-bedankt .vinkje {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--tj-color-theme-primary);
  color: #fff;
  font-size: 20px;
  margin-bottom: 24px;
}
.job-bedankt h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -.015em;
  color: var(--tj-color-heading-primary);
  margin: 0 0 12px;
}
.job-bedankt p {
  color: var(--tj-color-text-body);
  font-size: 17px;
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 auto 28px;
}

/* Deze media-query bundelt ook de mobiele regels van eerdere secties
   (kop en vacaturetekst) — die stonden hier al vóór deze taak en horen
   niet bij het formulier, maar staan hier bewust bij elkaar. */
@media (max-width: 767px) {
  .job-hero { padding: 60px 0 50px; }
  .job-title { font-size: 34px; }
  .job-subtitle { font-size: 18px; }
  .job-sectie h2 { font-size: 25px; }
  .job-stap { padding: 24px 20px 20px; }
  .job-bedankt { padding: 44px 24px; }
}

/* ---------- De stappenwizard ---------- */

/* Zonder JavaScript blijft alles staan: .job-voortgang en .job-stapknoppen hebben
   het hidden-attribuut in de HTML en jobs.js haalt dat pas weg. */

.job-voortgang ol {
  display: flex;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  gap: 0;
  border-bottom: 1px solid rgba(12, 30, 33, .12);
}
.job-voortgang li { flex: 1 1 0; min-width: 0; }
.job-voortgang button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0 6px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--tj-color-text-body-3, #67787a);
  transition: color .18s ease, border-color .18s ease;
}
.job-voortgang button:disabled { cursor: default; opacity: .45; }
.job-voortgang .nr {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.job-voortgang .tekst {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-voortgang button.gedaan { color: var(--tj-color-heading-primary); }
.job-voortgang button.gedaan .nr { color: var(--tj-color-theme-primary); }
.job-voortgang button.actief {
  color: var(--tj-color-theme-primary);
  border-bottom-color: var(--tj-color-theme-primary);
}

/* Zelfde reset uit main.css, zelfde herstel: met Tab bereikbaar, dus moet ook
   zichtbaar zijn waar de focus staat. */
.job-voortgang button:focus-visible {
  outline: 2px solid var(--tj-color-theme-primary);
  outline-offset: -2px;   /* naar binnen: de knoppen staan er strak naast elkaar */
}

.job-stap legend:focus { outline: none; }

.job-stapknoppen {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.job-vorige {
  padding: 12px 22px;
  border: 1px solid rgba(12, 30, 33, .18);
  border-radius: 6px;
  background: none;
  color: var(--tj-color-heading-primary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s ease;
}
.job-vorige:hover { border-color: var(--tj-color-theme-primary); }
.job-vorige:focus-visible {
  outline: 2px solid var(--tj-color-theme-primary);
  outline-offset: 2px;
}

/* "Volgende" hoort rechts te staan, ook op stap 1 waar "Vorige" (hidden) niet meetelt
   in de flex-flow: margin-left:auto duwt de knop naar rechts ongeacht of zijn buur
   aanwezig is, in tegenstelling tot justify-content, dat van de aan- of afwezigheid
   van "Vorige" zou afhangen. */
.job-volgende {
  margin-left: auto;
}

/* .job-volgende en .job-verzend (de submitknop) zijn allebei .tj-primary-btn: één
   regel herstelt de focusrand voor beide op deze pagina. jobs.css laadt enkel op
   jobs.php, dus dit raakt de rest van de site niet. */
.tj-primary-btn:focus-visible {
  outline: 2px solid var(--tj-color-theme-primary);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  /* Op mobiel passen zes labels nooit naast elkaar: toon alleen de nummers. */
  .job-voortgang .tekst { display: none; }
  .job-voortgang button { align-items: center; padding: 0 2px 12px; }
}

/* ---------- Sleepzone ---------- */

.sleepzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 116px;
  padding: 20px;
  border: 1px dashed rgba(12, 30, 33, .28);
  border-radius: 8px;
  background: rgba(216, 229, 229, .3);
  transition: border-color .18s ease, background-color .18s ease;
}
.sleepzone:hover { border-color: var(--tj-color-theme-primary); }

/* De echte input ligt onzichtbaar over de hele zone: zo blijft klikken,
   tabben en de bestandskiezer gewoon werken, ook zonder JavaScript. */
.sleepzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.sleepzone input[type="file"]:focus-visible + .sleepzone-uitnodiging {
  outline: 2px solid var(--tj-color-theme-primary);
  outline-offset: 6px;
}
/* De regel hierboven werkt alleen in de lege toestand: zodra er een bestand gekozen
   is, staat .sleepzone-uitnodiging op display:none en is er niets meer om een rand
   op te tekenen (de input zelf is opacity:0). :has() zet de rand op de zone zelf,
   ongeacht welke toestand zichtbaar is — dat dekt zowel leeg als gekozen. Browsers
   zonder :has()-steun vallen terug op de regel hierboven (dus enkel zichtbaar in de
   lege toestand — beter dan helemaal niets). */
.sleepzone:has(input[type="file"]:focus-visible) {
  outline: 2px solid var(--tj-color-theme-primary);
  outline-offset: 2px;
}

.sleepzone.sleept {
  border-color: var(--tj-color-theme-primary);
  border-style: solid;
  background: rgba(30, 138, 138, .08);
}
.sleepzone.heeft-bestand {
  border-style: solid;
  border-color: var(--tj-color-theme-primary);
  background: #fff;
}

.sleepzone-uitnodiging {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tj-color-text-body);
  font-size: 15px;
  pointer-events: none;   /* klikken gaat naar de input eronder */
}
.sleepzone-uitnodiging i { color: var(--tj-color-theme-primary); font-size: 13px; }

.sleepzone-gekozen {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}
.sleepzone-naam {
  font-size: 15px;
  font-weight: 600;
  color: var(--tj-color-heading-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sleepzone-grootte {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--tj-color-text-body-3, #67787a);
  font-variant-numeric: tabular-nums;
}
.sleepzone-weg {
  position: relative;   /* boven de input, anders vangt die de klik */
  z-index: 1;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 30, 33, .08);
  color: var(--tj-color-heading-primary);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease;
}
.sleepzone-weg:hover { background: rgba(192, 57, 43, .14); color: #c0392b; }

/* Waarschuwing dat een eerder gekozen bestand niet overleefde. Bewust geen rood: dit is
   geen nieuwe fout op dit veld (die staat al in .sleepzone-fout hierboven), maar een
   mededeling — dezelfde teal-haarlijnstijl als .job-hersteld verderop. */
.sleepzone-kwijt {
  display: flex;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--tj-color-theme-primary);
  border-left-width: 3px;
  border-radius: 6px;
  background: rgba(30, 138, 138, .06);
  color: var(--tj-color-heading-primary);
  font-size: 13px;
  line-height: 1.5;
}

/* main.css zet de focusrand van élke knop op de site uit. Voor een knop die je met
   Tab kan bereiken is dat een toegankelijkheidsfout: je ziet niet waar je staat.
   Hier zetten we hem terug — enkel voor deze knop. */
.sleepzone-weg:focus-visible {
  outline: 2px solid var(--tj-color-theme-primary);
  outline-offset: 2px;
}

/* ---------- Herstelde antwoorden ---------- */

.job-hersteld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--tj-color-theme-primary);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.job-hersteld p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tj-color-text-body);
}
.job-wis-opslag {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid rgba(12, 30, 33, .18);
  border-radius: 6px;
  background: none;
  color: var(--tj-color-heading-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.job-wis-opslag:hover { border-color: #c0392b; color: #c0392b; }
/* main.css zet de focusrand van élke knop op de site uit (zie de toelichting bij
   .sleepzone-weg hierboven). Deze knop was daarbij vergeten. */
.job-wis-opslag:focus-visible {
  outline: 2px solid var(--tj-color-theme-primary);
  outline-offset: 2px;
}