/* Belona Vacatures: componentstijlen. Kleuren komen uit het thema (Mooodi Merk); hier staan alleen fallbacks. */
:root {
	--bv-primary: var(--wp--preset--color--primary, #ef7f19);
	--bv-secondary: var(--wp--preset--color--secondary, #45266b);
	--bv-accent: var(--wp--preset--color--accent, #0a7bc2);
	--bv-ink: var(--wp--preset--color--contrast, #2e2d2c);
	--bv-base: var(--wp--preset--color--base, #fff);
	--bv-surface: var(--wp--preset--color--surface, #f6f4f0);
	--bv-ink-2: color-mix(in oklab, var(--bv-ink) 72%, var(--bv-base));
	--bv-line: color-mix(in oklab, var(--bv-ink) 14%, var(--bv-base));
	--bv-primary-soft: color-mix(in oklab, var(--bv-primary) 14%, var(--bv-base));
	--bv-secondary-soft: color-mix(in oklab, var(--bv-secondary) 10%, var(--bv-base));
	--bv-ok: #1e7b46;
	--bv-fout: #b42318;
	--bv-radius: var(--wp--custom--radius, 6px);
	--bv-radius-kaart: calc(var(--bv-radius) + 6px);
	--bv-ribbon: linear-gradient(90deg, #e5007e, #ef7f19, #ffd400, #3aaa35, #009fe3, #45266b);
	--bv-schaduw: 0 10px 30px color-mix(in oklab, var(--bv-ink) 12%, transparent);
	--bv-dur: 220ms;
	--bv-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
	:root { --bv-dur: 0ms; }
}
.bv-icon { inline-size: 1.15em; block-size: 1.15em; flex: none; vertical-align: -0.2em; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Knoppen ---------- */
.bv-btn {
	display: inline-flex; align-items: center; gap: .5em; justify-content: center;
	padding: .8em 1.5em; border-radius: var(--bv-radius); border: 2px solid transparent;
	font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
	transition: background-color var(--bv-dur) var(--bv-ease), color var(--bv-dur) var(--bv-ease), border-color var(--bv-dur) var(--bv-ease), transform var(--bv-dur) var(--bv-ease);
}
.bv-btn--primary { background: var(--bv-primary); color: #fff; }
.bv-btn--primary:hover, .bv-btn--primary:focus-visible { background: var(--bv-secondary); color: #fff; }
.bv-btn--secondary { background: transparent; color: var(--bv-ink); border-color: currentColor; }
.bv-btn--secondary:hover, .bv-btn--secondary:focus-visible { background: var(--bv-surface); }
.bv-btn--groot { padding: 1em 1.75em; font-size: 1.05em; }
.bv-btn .bv-icon--arrow { transition: translate var(--bv-dur) var(--bv-ease); }
.bv-btn:hover .bv-icon--arrow { translate: 4px 0; }
.bv-btn[disabled], .bv-btn[aria-busy="true"] { opacity: .6; cursor: progress; }

/* ---------- Badges (etiketvorm) ---------- */
.bv-badge {
	display: inline-flex; align-items: center; padding: .25em .75em .25em .95em;
	font-size: .8rem; font-weight: 600; letter-spacing: .01em; line-height: 1.4; text-transform: none;
	background: var(--bv-surface); color: var(--bv-ink-2); border-radius: 4px;
	clip-path: polygon(0 50%, .5em 0, 100% 0, 100% 100%, .5em 100%);
}
.bv-badge--vakgebied { background: var(--bv-secondary-soft); color: var(--bv-secondary); }
.bv-badge--nieuw { background: var(--bv-primary-soft); color: color-mix(in oklab, var(--bv-primary) 70%, var(--bv-ink)); }
.bv-badge--uitgelicht { background: var(--bv-ink); color: var(--bv-base); }
.bv-badge--gesloten { background: var(--bv-line); color: var(--bv-ink-2); }

/* ---------- Overzicht en filters ---------- */
.bv-overzicht { container-type: inline-size; }
.bv-filters { display: block; margin-block-end: 1.5rem; }
.bv-filters__form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.bv-filters__zoek { position: relative; flex: 1 1 18rem; display: flex; align-items: center; }
.bv-filters__zoek .bv-icon { position: absolute; inset-inline-start: 1rem; color: var(--bv-ink-2); pointer-events: none; }
.bv-filters__zoek input {
	inline-size: 100%; min-block-size: 3.25rem; padding: .75rem 1rem .75rem 2.9rem;
	border: 1px solid var(--bv-line); border-radius: var(--bv-radius); background: var(--bv-base); color: var(--bv-ink); font: inherit;
}
.bv-filters__zoek input:focus-visible, .bv-filters__select select:focus-visible, .bv-form :is(input, textarea, select):focus-visible {
	outline: 2px solid var(--bv-accent); outline-offset: 2px; border-color: var(--bv-accent);
}
.bv-filters__toggle { position: relative; min-block-size: 3.25rem; }
.bv-filters__badge { display: inline-grid; place-items: center; min-inline-size: 1.4em; block-size: 1.4em; border-radius: 999px; background: var(--bv-primary); color: #fff; font-size: .75em; }
.bv-filters__paneel {
	inline-size: min(92vw, 34rem); padding: 1.5rem; margin: auto; border: 1px solid var(--bv-line); border-radius: var(--bv-radius-kaart);
	background: var(--bv-base); color: var(--bv-ink); box-shadow: var(--bv-schaduw);
	display: grid; gap: 1rem;
}
.bv-filters__paneel::backdrop { background: color-mix(in oklab, var(--bv-ink) 45%, transparent); backdrop-filter: blur(2px); }
.bv-filters__paneel:popover-open { opacity: 1; translate: 0 0; }
@starting-style { .bv-filters__paneel:popover-open { opacity: 0; translate: 0 12px; } }
.bv-filters__paneel { transition: opacity var(--bv-dur) var(--bv-ease), translate var(--bv-dur) var(--bv-ease), display var(--bv-dur) allow-discrete, overlay var(--bv-dur) allow-discrete; opacity: 0; translate: 0 12px; }
.bv-filters__select { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.bv-filters__select select {
	min-block-size: 3rem; padding: .5rem 2.5rem .5rem .9rem; border: 1px solid var(--bv-line); border-radius: var(--bv-radius);
	background: var(--bv-base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e2d2c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9rem center / 1.1rem;
	color: var(--bv-ink); font: inherit; font-weight: 400; appearance: none;
}
.bv-filters__acties { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.bv-filters__reset { color: var(--bv-ink-2); }
/* Op brede schermen staan de filters gewoon in de balk, zonder popover. */
@container (min-width: 60rem) {
	.bv-filters__toggle { display: none; }
	.bv-filters__paneel { display: contents; }
	.bv-filters__paneel:popover-open { display: contents; }
	.bv-filters__select { flex: 1 1 11rem; }
	.bv-filters__select > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.bv-filters__acties .bv-btn { display: none; }
}
.bv-overzicht__count { margin: 0 0 1rem; color: var(--bv-ink-2); font-size: .95rem; }
.bv-overzicht__resultaten[aria-busy="true"] { opacity: .55; transition: opacity var(--bv-dur); }
.bv-overzicht__alle { margin-block-start: 2rem; text-align: center; }

/* ---------- Grid en kaarten ---------- */
.bv-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@container (min-width: 36rem) { .bv-grid { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 60rem) { .bv-grid { grid-template-columns: repeat(var(--bv-kolommen, 3), 1fr); } }
.bv-card { margin: 0; display: flex; min-inline-size: 0; }
.bv-card__inner {
	position: relative; display: flex; flex-direction: column; gap: .75rem; flex: 1 1 auto; inline-size: 100%;
	padding: 1.5rem 1.5rem 1.4rem; background: var(--bv-surface); border: 1px solid var(--bv-line); border-radius: var(--bv-radius-kaart);
	overflow: clip; transition: transform var(--bv-dur) var(--bv-ease), box-shadow var(--bv-dur) var(--bv-ease), border-color var(--bv-dur) var(--bv-ease);
}
.bv-card__inner::before { content: ""; position: absolute; inset: 0 0 auto 0; block-size: 4px; background: var(--bv-ribbon); opacity: 0; transition: opacity var(--bv-dur) var(--bv-ease); }
.bv-card__inner:has(a:hover), .bv-card__inner:has(a:focus-visible) { transform: translateY(-3px); box-shadow: var(--bv-schaduw); border-color: transparent; }
.bv-card__inner:has(a:hover)::before, .bv-card__inner:has(a:focus-visible)::before { opacity: 1; }
.bv-card--uitgelicht .bv-card__inner { background: var(--bv-base); border-color: var(--bv-ink); }
.bv-card__badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.bv-card__titel { margin: 0; font-size: 1.3rem; line-height: 1.2; text-wrap: balance; }
.bv-card .bv-card__titel a { color: var(--bv-ink); text-decoration: none; transition: color var(--bv-dur) var(--bv-ease); }
.bv-card .bv-card__titel a:hover, .bv-card .bv-card__titel a:focus-visible { color: var(--bv-primary); }
.bv-card__titel a::after { content: ""; position: absolute; inset: 0; }
.bv-card__excerpt { margin: 0; color: var(--bv-ink-2); font-size: .95rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bv-card__link { margin-block-start: auto; display: inline-flex; align-items: center; gap: .4em; color: var(--bv-primary); font-weight: 600; }
.bv-card__inner:has(a:hover) .bv-card__link .bv-icon { translate: 4px 0; }
.bv-card__link .bv-icon { transition: translate var(--bv-dur) var(--bv-ease); }
.bv-feiten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--bv-ink-2); font-size: .92rem; }
.bv-feiten li { display: inline-flex; align-items: center; gap: .35em; }
.bv-feiten .bv-icon { color: var(--bv-primary); }
.bv-leeg { padding: 2.5rem 1.5rem; text-align: center; background: var(--bv-surface); border-radius: var(--bv-radius-kaart); display: grid; gap: 1rem; justify-items: center; }
.bv-leeg p { margin: 0; max-inline-size: 42ch; text-wrap: pretty; }

/* Verschijnen bij scrollen, alleen als de browser het kan en de bezoeker beweging toestaat. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.bv-card { animation: bv-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 28%; }
	}
}
@keyframes bv-reveal { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Paginering ---------- */
.bv-paginering { margin-block-start: 2rem; }
.bv-paginering ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 0; padding: 0; }
.bv-paginering .page-numbers { display: inline-flex; align-items: center; gap: .3em; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0 .9rem; border-radius: var(--bv-radius); border: 1px solid var(--bv-line); text-decoration: none; color: var(--bv-ink); justify-content: center; }
.bv-paginering .page-numbers.current { background: var(--bv-ink); color: var(--bv-base); border-color: var(--bv-ink); }
.bv-paginering a.page-numbers:hover { border-color: var(--bv-ink); }
.bv-paginering .prev .bv-icon { rotate: 180deg; }

/* ---------- Details ---------- */
.bv-details { display: grid; gap: 1.5rem; padding: 1.75rem; background: var(--bv-surface); border-radius: var(--bv-radius-kaart); border: 1px solid var(--bv-line); }
.bv-details__lijst { margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.bv-details__item dt { display: flex; align-items: center; gap: .4em; font-size: .8rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--bv-ink-2); }
.bv-details__item dt .bv-icon { color: var(--bv-primary); }
.bv-details__item dd { margin: .25rem 0 0; font-weight: 600; font-size: 1.05rem; }
.bv-details .bv-btn--groot { inline-size: 100%; }
.bv-details__gesloten { margin: 0; display: flex; align-items: center; gap: .6rem; color: var(--bv-ink-2); }
.bv-delen { display: grid; gap: .5rem; }
.bv-delen__label { font-size: .85rem; font-weight: 600; color: var(--bv-ink-2); }
.bv-delen__knoppen { display: flex; flex-wrap: wrap; gap: .5rem; }
.bv-delen__knop { display: inline-flex; align-items: center; gap: .35em; padding: .5em .9em; border: 1px solid var(--bv-line); border-radius: 999px; background: var(--bv-base); color: var(--bv-ink); font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.bv-delen__knop:hover { border-color: var(--bv-ink); }
.bv-contact { padding-block-start: 1.25rem; border-block-start: 1px solid var(--bv-line); display: grid; gap: .35rem; }
.bv-contact__kop { margin: 0; font-weight: 700; }
.bv-contact__naam { margin: 0; }
.bv-contact__naam span { color: var(--bv-ink-2); font-size: .9rem; }
.bv-contact__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.bv-contact__lijst a { display: inline-flex; align-items: center; gap: .45em; color: var(--bv-ink); text-decoration: none; font-weight: 600; }
.bv-contact__lijst a:hover { color: var(--bv-primary); }
.bv-contact__lijst .bv-icon { color: var(--bv-primary); }

/* ---------- Meldingen ---------- */
.bv-notice { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: var(--bv-radius); background: var(--bv-surface); border-inline-start: 4px solid var(--bv-ink-2); margin-block-end: 1.5rem; }
.bv-notice p { margin: 0; }
.bv-notice .bv-icon { margin-block-start: .2em; }
.bv-notice--ok { border-color: var(--bv-ok); background: color-mix(in oklab, var(--bv-ok) 10%, var(--bv-base)); }
.bv-notice--ok .bv-icon { color: var(--bv-ok); }
.bv-notice--fout { border-color: var(--bv-fout); background: color-mix(in oklab, var(--bv-fout) 8%, var(--bv-base)); }
.bv-notice--gesloten { border-color: var(--bv-secondary); }

/* ---------- Formulier ---------- */
.bv-form-sectie { padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--bv-base); border: 1px solid var(--bv-line); border-radius: var(--bv-radius-kaart); position: relative; overflow: clip; }
.bv-form-sectie::before { content: ""; position: absolute; inset: 0 0 auto 0; block-size: 5px; background: var(--bv-ribbon); }
.bv-form-sectie__titel { margin: 0 0 .5rem; text-wrap: balance; }
.bv-form-sectie__intro { margin: 0 0 1.75rem; color: var(--bv-ink-2); max-inline-size: 60ch; text-wrap: pretty; }
.bv-form-sectie__recruiters { margin: 1.5rem 0 0; font-size: .8rem; color: var(--bv-ink-2); }
.bv-form { display: grid; gap: 1.25rem; }
.bv-form__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.bv-veld { display: grid; gap: .4rem; }
.bv-veld label { font-weight: 600; }
.bv-veld__optioneel, .bv-veld__hint { font-weight: 400; color: var(--bv-ink-2); font-size: .9em; }
.bv-veld :is(input:not([type="checkbox"]):not([type="file"]), textarea) {
	inline-size: 100%; min-block-size: 3.25rem; padding: .8rem 1rem; border: 1px solid var(--bv-line); border-radius: var(--bv-radius);
	background: var(--bv-base); color: var(--bv-ink); font: inherit; transition: border-color var(--bv-dur);
}
.bv-veld textarea { min-block-size: 8rem; resize: vertical; field-sizing: content; }
.bv-veld--fout :is(input, textarea), .bv-veld--fout .bv-upload { border-color: var(--bv-fout); }
.bv-veld__fout { margin: 0; color: var(--bv-fout); font-size: .9rem; font-weight: 600; min-block-size: 0; }
.bv-veld__fout:empty { display: none; }
.bv-upload { position: relative; display: grid; place-items: center; padding: 1.5rem; border: 2px dashed var(--bv-line); border-radius: var(--bv-radius); background: var(--bv-surface); text-align: center; transition: border-color var(--bv-dur), background-color var(--bv-dur); }
.bv-upload:hover, .bv-upload--over { border-color: var(--bv-primary); background: var(--bv-primary-soft); }
.bv-upload--gekozen { border-style: solid; border-color: var(--bv-ok); background: color-mix(in oklab, var(--bv-ok) 8%, var(--bv-base)); }
.bv-upload input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.bv-upload__tekst { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; pointer-events: none; }
.bv-upload__tekst .bv-icon { color: var(--bv-primary); }
.bv-check { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400 !important; cursor: pointer; }
.bv-check input { inline-size: 1.35rem; block-size: 1.35rem; margin: .15rem 0 0; accent-color: var(--bv-primary); flex: none; }
.bv-hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.bv-form__status { margin: 0; font-weight: 600; }
.bv-form__status:empty { display: none; }
.bv-form__status--fout { color: var(--bv-fout); }
.bv-form__acties { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.bv-form__veilig { font-size: .85rem; color: var(--bv-ink-2); max-inline-size: 32ch; }
.bv-placeholder { padding: 1rem; background: var(--bv-surface); border-radius: var(--bv-radius); color: var(--bv-ink-2); }