/*
 * Webmolen Jobs – stijlen voor de voorkant.
 * Lettertype en tekstkleur komen van je thema. Accentkleur: Vacatures → Instellingen → Weergave.
 */
.vb {
	--vb-accent: #6cb51b;
	--vb-accent-contrast: #fff;
	--vb-line: color-mix(in srgb, currentColor 16%, transparent);
	--vb-soft: color-mix(in srgb, currentColor 5%, transparent);
	--vb-muted: color-mix(in srgb, currentColor 66%, transparent);
	--vb-radius: 8px;
	--vb-gap: 1rem;
	box-sizing: border-box;
}
.vb *, .vb *::before, .vb *::after { box-sizing: inherit; }
.vb .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.vb-icon { flex: none; width: 1.15em; height: 1.15em; color: var(--vb-accent); }

/* ---------- Invoervelden ---------- */
.vb input[type="text"], .vb input[type="email"], .vb input[type="tel"], .vb input[type="url"],
.vb input[type="search"], .vb input[type="number"], .vb input[type="date"], .vb select, .vb textarea {
	width: 100%; max-width: 100%; font: inherit; color: inherit; background: transparent;
	border: 1px solid var(--vb-line); border-radius: var(--vb-radius); padding: .6rem .75rem; line-height: 1.4; margin: 0;
}
.vb input[type="file"] { font: inherit; max-width: 100%; }
.vb [aria-invalid="true"] { border-color: #b3261e !important; outline: 1px solid #b3261e; }
.vb :is(input, select, textarea, button, a, summary):focus-visible { outline: 2px solid var(--vb-accent); outline-offset: 2px; }

/* ---------- Knoppen ---------- */
.vb-button {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	font: inherit; font-weight: 600; line-height: 1.2; padding: .75rem 1.4rem; cursor: pointer; text-decoration: none;
	border: 2px solid var(--vb-accent); border-radius: var(--vb-radius); background: var(--vb-accent); color: var(--vb-accent-contrast);
}
.vb-button:hover { filter: brightness(1.1); color: var(--vb-accent-contrast); }
.vb-button:disabled { opacity: .6; cursor: progress; }
.vb-button--quiet { background: transparent; color: var(--vb-accent); }
.vb-button--quiet:hover { background: var(--vb-accent); color: var(--vb-accent-contrast); filter: none; }
.vb-button--small { padding: .45rem .8rem; font-size: .85em; border-width: 1.5px; }

/* ---------- Meldingen ---------- */
.vb-notice { padding: 1rem 1.25rem; border-radius: var(--vb-radius); background: var(--vb-soft); margin: 0 0 1rem; border-left: 4px solid var(--vb-line); }
.vb-notice h2 { margin: 0 0 .4rem; font-size: 1.2em; }
.vb-notice p:last-child { margin-bottom: 0; }
.vb-notice--success { border-left-color: #2f7d4a; }
.vb-notice--error { border-left-color: #b3261e; }

/* ---------- Overzicht: filter links, vacatures rechts ---------- */
.vb-list--sidebar { display: grid; grid-template-columns: minmax(13rem, 16rem) 1fr; gap: 2rem; align-items: start; }
.vb-list__notice { grid-column: 1 / -1; }
@media (max-width: 800px) { .vb-list--sidebar { grid-template-columns: 1fr; gap: 1.25rem; } }
.vb-list.is-loading .vb-results { opacity: .45; transition: opacity .2s; pointer-events: none; }

.vb-sidebar { position: sticky; top: 1.5rem; }
@media (max-width: 800px) { .vb-sidebar { position: static; } }
.vb-sidebar__toggle > summary { font-weight: 700; font-size: 1.1em; cursor: pointer; list-style: none; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.vb-sidebar__toggle > summary::-webkit-details-marker { display: none; }
.vb-badge { font-size: .7em; font-weight: 600; padding: .1rem .5rem; border-radius: 1rem; background: var(--vb-accent); color: var(--vb-accent-contrast); }
@media (min-width: 801px) { .vb-sidebar__toggle > summary { pointer-events: none; } }
@media (max-width: 800px) {
	.vb-sidebar__toggle { border: 1px solid var(--vb-line); border-radius: var(--vb-radius); padding: .75rem 1rem; }
	.vb-sidebar__toggle > summary { margin: 0; }
	.vb-sidebar__toggle > summary::after { content: "+"; margin-left: auto; font-weight: 400; }
	.vb-sidebar__toggle[open] > summary { margin-bottom: 1rem; }
	.vb-sidebar__toggle[open] > summary::after { content: "−"; }
}

.vb-filters { display: flex; flex-direction: column; gap: 1.5rem; margin: 0; }
.vb-filter { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.vb-filter__title { font-weight: 700; font-size: .95em; padding: 0; margin: 0 0 .25rem; }
.vb-option { display: flex; align-items: center; gap: .55rem; cursor: pointer; margin: 0; line-height: 1.35; }
.vb-option input { margin: 0; flex: none; width: 1.05em; height: 1.05em; accent-color: var(--vb-accent); }
.vb-option__count { margin-left: auto; font-size: .82em; color: var(--vb-muted); }
.vb-filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.vb-reset { font-size: .9em; color: var(--vb-muted); }

/* Balk boven de resultaten */
.vb-results { min-width: 0; container-type: inline-size; }
.vb-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.vb-count { color: var(--vb-muted); font-size: .9em; margin: 0; }
.vb-toolbar__right { display: flex; align-items: center; gap: .75rem; }
.vb-sort { display: flex; align-items: center; gap: .5rem; font-size: .9em; margin: 0; }
.vb-sort span { color: var(--vb-muted); white-space: nowrap; }
.vb-sort select { width: auto; padding: .4rem .6rem; }
.vb-layout-toggle { display: flex; border: 1px solid var(--vb-line); border-radius: var(--vb-radius); overflow: hidden; }
.vb-layout-toggle a { display: flex; padding: .45rem .55rem; color: var(--vb-muted); }
.vb-layout-toggle a.is-active { background: var(--vb-accent); color: var(--vb-accent-contrast); }

/* Kaarten */
.vb-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.vb-grid--raster { grid-template-columns: repeat(var(--vb-cols, 3), minmax(0, 1fr)); }
.vb-grid--lijst { grid-template-columns: 1fr; gap: .75rem; }
@container (max-width: 820px) { .vb-grid--raster { grid-template-columns: repeat(min(var(--vb-cols, 3), 2), minmax(0, 1fr)); } }
@container (max-width: 480px) { .vb-grid--raster { grid-template-columns: 1fr; } }

.vb-card {
	position: relative; display: flex; flex-direction: column; gap: .6rem; margin: 0;
	padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--vb-line); border-top: 4px solid var(--vb-accent); border-radius: var(--vb-radius);
	transition: background-color .15s ease;
}
.vb-card:hover { background: var(--vb-soft); }
.vb-card--featured { border-color: var(--vb-accent); }
.vb-card__ribbon {
	position: absolute; top: .75rem; right: .75rem; font-size: .72em; font-weight: 700; letter-spacing: .02em;
	padding: .2rem .55rem; border-radius: 1rem; background: var(--vb-accent); color: var(--vb-accent-contrast);
}
.vb-card__dept { margin: 0; font-size: .85em; color: var(--vb-muted); padding-right: 5.5rem; }
.vb-card__title { margin: 0; font-size: 1.15em; line-height: 1.3; padding-right: 0; }
.vb-card--featured .vb-card__title { padding-right: 5.5rem; }
.vb-card__dept + .vb-card__title { padding-right: 0; }
.vb-card__title a { color: inherit; text-decoration: none; }
.vb-card__title a::after { content: ""; position: absolute; inset: 0; } /* hele kaart klikbaar */
.vb-card:hover .vb-card__title a { color: var(--vb-accent); }
.vb-card:focus-within { outline: 2px solid var(--vb-accent); outline-offset: 2px; }
.vb-card__title a:focus-visible { outline: none; }
.vb-card__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .92em; }
.vb-card__facts li { display: flex; align-items: flex-start; gap: .5rem; margin: 0; }
.vb-card__excerpt { margin: 0; font-size: .92em; color: var(--vb-muted); }
.vb-card__footer {
	margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--vb-line);
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; font-size: .85em;
}
.vb-card__meta { color: var(--vb-muted); }
.vb-card__actions { display: flex; align-items: center; gap: .75rem; }
.vb-card__actions .vb-button { position: relative; z-index: 1; } /* boven de klikbare kaart */
.vb-card__more { font-weight: 600; color: var(--vb-accent); white-space: nowrap; text-decoration: none; }

/* Lijstweergave */
.vb-grid--lijst .vb-card { display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; border-top-width: 1px; border-left: 4px solid var(--vb-accent); padding: 1rem 1.25rem; }
.vb-grid--lijst .vb-card > * { grid-column: 1; }
.vb-grid--lijst .vb-card__facts { flex-direction: row; flex-wrap: wrap; gap: .3rem 1.25rem; }
.vb-grid--lijst .vb-card__footer { grid-column: 2; grid-row: 1 / span 4; border: 0; padding: 0; margin: 0; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; }
.vb-grid--lijst .vb-card__ribbon { position: static; justify-self: start; grid-row: auto; }
.vb-grid--lijst .vb-card__dept, .vb-grid--lijst .vb-card--featured .vb-card__title { padding-right: 0; }
@container (max-width: 560px) {
	.vb-grid--lijst .vb-card { grid-template-columns: 1fr; }
	.vb-grid--lijst .vb-card__footer { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; justify-content: space-between; border-top: 1px solid var(--vb-line); padding-top: .75rem; margin-top: .25rem; }
}

.vb-empty { padding: 1.5rem 0; }
.vb-empty > p { color: var(--vb-muted); }
.vb-pagination { margin-top: 1.5rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.vb-pagination .page-numbers { padding: .4rem .75rem; border-radius: var(--vb-radius); text-decoration: none; border: 1px solid var(--vb-line); }
.vb-pagination .current { background: var(--vb-accent); border-color: var(--vb-accent); color: var(--vb-accent-contrast); }
.vb-pagination .dots { border: 0; }

/* ---------- Vacaturepagina ---------- */
.vb-facts {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem 1.5rem;
	margin: 0 0 2rem; padding: 1.25rem 1.5rem; background: var(--vb-soft); border-radius: var(--vb-radius);
}
.vb-fact { display: flex; gap: .65rem; align-items: flex-start; margin: 0; }
.vb-fact .vb-icon { margin-top: .15em; width: 1.3em; height: 1.3em; }
.vb-facts dt { font-size: .82em; color: var(--vb-muted); margin: 0; }
.vb-facts dd { margin: .05rem 0 0; font-weight: 600; }
.vb-contact { margin: 2rem 0 0; }
.vb-howto { display: flex; gap: .75rem; padding: 1rem 1.25rem; margin: 0 0 1.5rem; border-radius: var(--vb-radius); background: var(--vb-soft); }
.vb-howto p { margin: 0 0 .5rem; }
.vb-howto p:last-child { margin: 0; }

/* ---------- Formulieren ---------- */
.vb-apply { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--vb-line); }
.vb-apply__title { margin-top: 0; }
.vb-form { display: flex; flex-direction: column; gap: var(--vb-gap); max-width: 46rem; }
.vb-form__heading { margin: .75rem 0 0; font-size: 1.1em; }
.vb-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--vb-gap); }
.vb-field { display: flex; flex-direction: column; gap: .35rem; margin: 0; min-width: 0; }
.vb-field > span, .vb-choices > legend { font-weight: 600; }
.vb-field em, .vb-choices em { font-style: normal; font-weight: 400; font-size: .85em; color: var(--vb-muted); margin-left: .35em; }
.vb-field small { color: var(--vb-muted); }
.vb-choices { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.vb-choices > legend { padding: 0; margin-bottom: .35rem; }
.vb-check { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-weight: 400; }
.vb-check input { margin-top: .3em; flex: none; accent-color: var(--vb-accent); }
.vb-form__error { margin: 0; padding: .75rem 1rem; border-radius: var(--vb-radius); background: color-mix(in srgb, #b3261e 8%, transparent); color: inherit; border-left: 4px solid #b3261e; display: flex; flex-direction: column; gap: .2rem; }
.vb-form__error[hidden] { display: none; }
.vb-form .vb-button { align-self: flex-start; }
.vb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vb-form--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.vb-form--inline .vb-field { flex: 1 1 16rem; }

/* Tip een vriend */
.vb-refer { margin-top: 2rem; }
.vb-refer details { border: 1px solid var(--vb-line); border-radius: var(--vb-radius); padding: .9rem 1.1rem; }
.vb-refer summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.vb-refer details[open] summary { margin-bottom: 1rem; }

/* ---------- Snel solliciteren (venster) ---------- */
.vb-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 12px; color: inherit; background: var(--vb-dialog-bg, #fff); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.vb-dialog::backdrop { background: rgba(15, 23, 42, .55); }
.vb-dialog__head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: inherit; border-bottom: 1px solid var(--vb-line); }
.vb-dialog__title { margin: 0; font-size: 1.15em; }
.vb-dialog__close { font: inherit; font-size: 1.6rem; line-height: 1; background: none; border: 0; cursor: pointer; color: inherit; padding: .1rem .4rem; }
.vb-dialog__body { padding: 1.25rem; }
.vb-dialog__body .vb-apply { margin: 0; padding: 0; border: 0; }
.vb-dialog__loading { color: var(--vb-muted); }

/* ---------- Zoekvak ---------- */
.vb-searchbox { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: 1rem; border-radius: var(--vb-radius); background: var(--vb-soft); }
.vb-searchbox__field { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 10rem; margin: 0; }
.vb-searchbox__field--q { flex: 2 1 16rem; }
.vb-searchbox__field span { font-size: .85em; font-weight: 600; }

/* ---------- Recente vacatures ---------- */
.vb-recent { list-style: none; margin: 0; padding: 0; }
.vb-recent li { padding: .6rem 0; border-bottom: 1px solid var(--vb-line); margin: 0; display: flex; flex-direction: column; }
.vb-recent a { font-weight: 600; }
.vb-recent__meta { font-size: .85em; color: var(--vb-muted); }
.vb-recent__all { margin-top: .75rem; }

/* ---------- Alerts ---------- */
.vb-alert { display: flex; flex-direction: column; gap: var(--vb-gap); max-width: 46rem; }
.vb-alert .vb-button { align-self: flex-start; }

/* ---------- Mijn sollicitaties ---------- */
.vb-apps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.vb-app { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; padding: 1rem 1.25rem; border: 1px solid var(--vb-line); border-radius: var(--vb-radius); margin: 0; }
.vb-app__title { margin: 0; font-size: 1.05em; }
.vb-app__meta { margin: .15rem 0 0; font-size: .88em; color: var(--vb-muted); }
.vb-app__status { font-size: .85em; font-weight: 600; padding: .25rem .7rem; border-radius: 1rem; background: var(--vb-soft); white-space: nowrap; }
.vb-app__status.vb-status--aangenomen { background: #dcfce7; color: #14532d; }
.vb-app__status.vb-status--uitgenodigd { background: #ede9fe; color: #4c1d95; }
.vb-app__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.vb-app__actions form, .vb-dashboard__all form { margin: 0; display: inline; }
.vb-dashboard__who { color: var(--vb-muted); }

@media (prefers-reduced-motion: reduce) {
	.vb-card, .vb-list.is-loading .vb-results { transition: none; }
}

/* ---------- Vacaturearchief (/vacatures/) ---------- */
.vb-archive__inner { max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.vb-archive__title { margin: 0 0 1.5rem; }