/* ── Vacaturesectie ──
   Geen formulier maar een gesprek. Het blauwe hoofd met de butler blijft staan,
   in de witte kaart eronder wisselt telkens één vraag. Daardoor ziet niemand
   negen vragen tegelijk, en voelt elke tik als vooruitgang.

   Grote raakvlakken (minstens 44px), kleuren en fonts uit brand.css.
   Elke beweging start onzichtbaar en valt weg bij "beperk beweging": onderaan
   zet één mediaquery alles stil, en wat dan overblijft is de gewone kaart. */

.vacature { background: var(--bg-soft, #f4f3ff); }

.vac__kop { text-align: center; max-width: 34rem; margin: 0 auto 1.8rem; }

.vac__kaart {
    max-width: 34rem;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radius, 20px);
    overflow: hidden;
    box-shadow: var(--shadow, 0 18px 50px rgba(20, 10, 120, .18));
}

/* ── Het blauwe hoofd ── */
.vac__hoofd {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .9rem;
    padding: 1.3rem 1.4rem .9rem;
    background: var(--verloop, linear-gradient(135deg, #3010ea, #1c3cd6));
}

.vac__butler { width: clamp(62px, 17%, 92px); flex: none; }
.vac__adem { transform-origin: 50% 100%; animation: vacAdem 3.4s ease-in-out infinite; }
.vac__mascotte {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 14px rgba(5, 2, 60, .38));
}

/* De butler knikt kort mee zodra er een nieuwe vraag staat. */
.vac__kaart--knikt .vac__adem { animation: vacKnik .55s cubic-bezier(.34, 1.56, .64, 1); }

.vac__ballon {
    position: relative;
    flex: 1 1 12rem;
    margin: 0 0 .4rem;
    padding: .7rem 1rem;
    border-radius: 18px 18px 18px 5px;
    background: #fff;
    color: var(--brand, #2d17e8);
    font-family: var(--font-head);
    font-size: clamp(1rem, 3.4vw, 1.2rem);
    line-height: 1.2;
    box-shadow: 0 10px 24px rgba(5, 2, 60, .28);
}
.vac__kaart--praat .vac__ballon { animation: vacBallon .42s cubic-bezier(.34, 1.56, .64, 1); }

.vac__voortgang { flex: 0 0 100%; display: flex; align-items: center; gap: .6rem; }
.vac__balk {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .26);
    overflow: hidden;
}
.vac__balkvulling {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--accent, #ffc700);
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.vac__teller {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-family: var(--font-head);
    font-size: .8rem;
    letter-spacing: .04em;
}

/* ── De witte kaart met de vraag ──
   De hoogte wordt door het script even vastgezet en dan naar de nieuwe hoogte
   getild; zonder dat springt de pagina bij elke stap. */
.vac__body {
    padding: 1.5rem 1.4rem 1.4rem;
    overflow: hidden;
    transition: height .32s cubic-bezier(.4, 0, .2, 1);
}

.vac__stap {
    border: 0;
    margin: 0;
    padding: 0;
    animation: vacIn .4s cubic-bezier(.34, 1.56, .64, 1) both;
}
.vac__stap:focus { outline: none; }
.vac__body[data-richting="terug"] .vac__stap { animation-name: vacInTerug; }

.vac__vraag {
    font-family: var(--font-head);
    font-size: clamp(1.15rem, 4vw, 1.4rem);
    font-weight: 400;
    color: var(--ink, #0f0c45);
    margin: 0 0 .9rem;
    padding: 0;
}

.vac__stap--start { text-align: center; }
.vac__aanzet { color: var(--muted, #5b5980); margin: 0 0 1.2rem; }
.vac__starten { width: 100%; }

.vac__keuzes { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Een keuze is een knop, geen bolletje: sneller te raken met een duim. Het
   bolletje zelf blijft bestaan voor de toetsenbord- en schermlezerkant. */
.keuze { position: relative; display: inline-flex; animation: vacKeuze .34s ease both; }
.vac__keuzes .keuze:nth-child(1) { animation-delay: .05s; }
.vac__keuzes .keuze:nth-child(2) { animation-delay: .09s; }
.vac__keuzes .keuze:nth-child(3) { animation-delay: .13s; }
.vac__keuzes .keuze:nth-child(4) { animation-delay: .17s; }
.vac__keuzes .keuze:nth-child(5) { animation-delay: .21s; }
.vac__keuzes .keuze:nth-child(6) { animation-delay: .25s; }
.vac__keuzes .keuze:nth-child(7) { animation-delay: .29s; }
.vac__keuzes .keuze:nth-child(8) { animation-delay: .33s; }

.keuze__input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.keuze__tekst {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: .55rem 1.05rem;
    border: 2px solid var(--line, #e4e2f7);
    border-radius: 999px;
    background: #fff;
    color: var(--ink, #0f0c45);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.25;
    transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.keuze:hover .keuze__tekst { border-color: var(--brand, #2d17e8); transform: translateY(-2px); }
.keuze__input:checked + .keuze__tekst {
    background: var(--brand, #2d17e8);
    border-color: var(--brand, #2d17e8);
    color: #fff;
    animation: vacTik .35s cubic-bezier(.34, 1.56, .64, 1);
}
.keuze__input:checked + .keuze__tekst::before { content: '\2713\00a0'; }
.keuze__input:focus-visible + .keuze__tekst {
    outline: 3px solid var(--accent, #ffc700);
    outline-offset: 2px;
}

.vac__extra { margin-top: 1rem; animation: vacIn .32s ease both; }

.vac__veld { display: grid; gap: .3rem; margin-top: .9rem; }
.vac__vraag + .vac__veld { margin-top: 0; }
.vac__label { font-size: .85rem; font-weight: 700; color: var(--muted, #5b5980); }
.vac__hint { font-size: .8rem; color: var(--muted, #5b5980); margin: .15rem 0 0; }
.vac__invoer {
    width: 100%;
    min-height: 48px;
    padding: .7rem .9rem;
    border: 2px solid var(--line, #e4e2f7);
    border-radius: 12px;
    font: inherit;
    color: var(--ink, #0f0c45);
    background: #fff;
}
.vac__invoer:focus { outline: none; border-color: var(--brand, #2d17e8); }
.vac__invoer[aria-invalid="true"] { border-color: #d33a2c; }

.vac__fout { color: #d33a2c; font-size: .86rem; font-weight: 700; margin: .5rem 0 0; }
.vac__status { min-height: 1.2em; margin: .6rem 0 0; font-size: .9rem; }
.vac__status.form-status--err { color: #d33a2c; font-weight: 700; }

.vac__acties { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; }
.vac__terug {
    padding: .6rem .1rem;
    border: 0;
    background: none;
    color: var(--muted, #5b5980);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.vac__terug:hover { color: var(--brand, #2d17e8); }
.vac__verder, .vac__knop { margin-left: auto; }

.vac__privacy { font-size: .8rem; color: var(--muted, #5b5980); margin: 1rem 0 0; }
.vac__privacy a { color: var(--brand, #2d17e8); }

/* Honeypot: onzichtbaar voor mensen, zichtbaar voor bots. */
.vac__honing {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Bedankt ── */
.vac__bedankt { position: relative; text-align: center; padding: .5rem 0 .3rem; animation: vacIn .4s ease both; }
.vac__bedankt-titel {
    font-family: var(--font-head);
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    color: var(--brand, #2d17e8);
    margin: 0 0 .5rem;
}
.vac__bedankt-titel:focus { outline: none; }
.vac__bedankt-tekst { color: var(--muted, #5b5980); margin: 0; }

/* Confetti: het script maakt de stukjes en geeft elk een eigen richting. */
.vac__feest { position: absolute; top: 0; left: 50%; width: 0; height: 0; }
.vac__stuk {
    position: absolute;
    width: var(--grootte, 9px);
    height: var(--grootte, 9px);
    border-radius: 2px;
    background: var(--kleur, #ffc700);
    animation: vacConfetti 1.2s cubic-bezier(.1, .8, .3, 1) forwards;
}

@keyframes vacIn {
    from { opacity: 0; transform: translate3d(26px, 0, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes vacInTerug {
    from { opacity: 0; transform: translate3d(-26px, 0, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes vacKeuze {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes vacTik {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.07); }
    100% { transform: scale(1); }
}
@keyframes vacBallon {
    0%   { transform: scale(.94) translateY(4px); }
    100% { transform: none; }
}
@keyframes vacAdem {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.02); }
}
@keyframes vacKnik {
    0%   { transform: none; }
    35%  { transform: translateY(-7px) rotate(-3deg); }
    100% { transform: none; }
}
@keyframes vacConfetti {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translate3d(var(--x, 0), var(--y, 90px), 0) rotate(var(--draai, 180deg)); }
}

@media (max-width: 600px) {
    .vac__body { padding: 1.3rem 1.1rem 1.2rem; }
    .vac__hoofd { padding: 1.1rem 1.1rem .8rem; }
    .keuze__tekst { font-size: .92rem; padding: .5rem .9rem; }
}

/* Beperkte beweging: alles staat stil, niets blijft onzichtbaar hangen. */
@media (prefers-reduced-motion: reduce) {
    .vac__adem,
    .vac__kaart--knikt .vac__adem,
    .vac__kaart--praat .vac__ballon,
    .vac__stap,
    .vac__extra,
    .keuze,
    .keuze__input:checked + .keuze__tekst,
    .vac__bedankt,
    .vac__stuk { animation: none; }
    .vac__stuk { display: none; }
    .vac__body, .vac__balkvulling, .keuze__tekst { transition: none; }
    .keuze:hover .keuze__tekst { transform: none; }
}

/* ── De vacature elders op de pagina ──
   Wie werk zoekt, leest de peiling niet uit. Daarom staat er bovenaan een
   link, halverwege een band en in de vragen een antwoord dat hierheen wijst. */

.site-header__werken {
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--accent, #ffc700);
}
.site-header__werken:hover { color: var(--accent, #ffc700); }

.werkband { padding: 1.1rem 0; background: var(--accent, #ffc700); }
.werkband__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .9rem 1.2rem;
    text-align: center;
}
.werkband__tekst {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(1.05rem, 3.4vw, 1.35rem);
    color: var(--ink, #0f0c45);
}

.faq__naar { margin: .7rem 0 0; }
.faq__naar a { font-weight: 700; color: var(--brand, #2d17e8); }

@media (max-width: 600px) {
    .site-header__werken { font-size: .78rem; }
    .werkband__inner { flex-direction: column; gap: .7rem; }
}

/* De verwijzing onderaan de pagina, in het blauwe slotblok. */
.afsluiter__werken { margin: .9rem 0 0; }
.afsluiter__werken a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.afsluiter__werken a:hover { color: var(--accent, #ffc700); }