/**
 * 112 Vacatures — frontend (112nieuws.net)
 *
 * Light is de standaard, precies zoals de rest van de site. Zet de bezoeker
 * Jannah in dark mode (html/body.dark-skin), dan kantelen alle kleuren mee via
 * de custom properties onderaan dit bestand — zelfde aanpak als 112 Files.
 */

.n112v {
	--n112v-blue: #00256a;
	--n112v-blue-mid: #005a87;
	--n112v-blue-soft: #eef3fb;
	--n112v-red: #cf2e2e;
	--n112v-green: #157347;
	--n112v-amber: #b45309;
	--n112v-text: #1f2024;
	--n112v-heading: #10131a;
	--n112v-muted: #5a5f6a;
	--n112v-line: #e2e5eb;
	--n112v-bg: #f4f6f9;
	--n112v-surface: #fff;
	--n112v-input-bg: var(--n112v-surface);
	--n112v-input-line: var(--n112v-line);
	--n112v-radius: 8px;
	--n112v-shadow: 0 1px 2px rgba(16, 19, 26, .06), 0 8px 24px rgba(16, 19, 26, .05);

	color: var(--n112v-text);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 100%;
	/* Jannah geeft de artikelinhoud links en rechts 30px maar bovenaan niets
	   (`.post-layout-1 div.entry-content`), waardoor de kop tegen de rand van het
	   kader plakte. Die ruimte komt hiervandaan. */
	margin: 1.5rem 0 2rem;
}

.n112v *,
.n112v *::before,
.n112v *::after {
	box-sizing: border-box;
}

/* ===============================
   Tegenwicht voor het thema
   ===============================
   De shortcode komt op 112nieuws.net in `<div class="entry-content entry">`, en
   Jannah stijlt daar de losse elementen:

     .entry p            { margin-bottom: 25px; line-height: 1.7 }
     .entry p:last-child { margin: 0 }
     .entry h1 … h6      { margin: 0 0 .5em }
     .entry ol, .entry ul{ margin-bottom: 20px; padding-left: 15px; margin-left: 20px }
     .entry li           { margin: 0 0 5px }
     .entry a            { color: <themakleur> }

   Klasse + element weegt zwaarder dan een klasse alleen, dus onze eigen maten
   verloren het op de site: kaarten rekten uit, de meta-chips schoven in, de
   knoptekst kreeg de themakleur en een `margin: 0 auto` viel weg. Het id van de
   wrapper weegt zwaarder dan elke klasse en is daarom het aangrijpingspunt:
   hieronder gaat alles wat het thema aanraakt terug naar nul, en de regels die
   er daarna zelf ruimte of kleur geven beginnen om dezelfde reden met
   `#n112-vacatures`. Blijft dat weg, dan wint het thema weer. */
#n112-vacatures p {
	margin: 0;
	line-height: inherit;
}

#n112-vacatures h1,
#n112-vacatures h2,
#n112-vacatures h3,
#n112-vacatures h4 {
	margin: 0;
}

#n112-vacatures ul,
#n112-vacatures ol {
	margin: 0;
	padding: 0;
}

#n112-vacatures li {
	margin: 0;
}

/* ===============================
   Kop
   =============================== */
.n112v-header {
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--n112v-blue);
}

#n112-vacatures .n112v-header__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--n112v-blue);
}

/* Loopt bewust over de volle breedte van de pagina, net als de lijn eronder. */
#n112-vacatures .n112v-header__lead {
	margin: 0 0 .7rem;
	color: var(--n112v-muted);
	font-size: .95rem;
	line-height: 1.65;
}

#n112-vacatures .n112v-header__lead:last-child {
	margin-bottom: 0;
}

#n112-vacatures .n112v-count {
	margin: 0 0 1rem;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--n112v-muted);
}

/* ===============================
   Vacaturelijst
   =============================== */
.n112v-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.n112v-card {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: 1.25rem 1.35rem 1.35rem;
	background: var(--n112v-surface);
	border: 1px solid var(--n112v-line);
	border-left: 3px solid var(--n112v-blue-mid);
	border-radius: 0 var(--n112v-radius) var(--n112v-radius) 0;
	box-shadow: var(--n112v-shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.n112v-card:hover {
	transform: translateY(-2px);
	border-left-color: var(--n112v-red);
	box-shadow: 0 2px 4px rgba(16, 19, 26, .08), 0 14px 32px rgba(16, 19, 26, .09);
}

.n112v-card__title {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}

#n112-vacatures .n112v-card__title a {
	color: var(--n112v-heading);
	text-decoration: none;
}

#n112-vacatures .n112v-card__title a:hover,
#n112-vacatures .n112v-card__title a:focus-visible {
	color: var(--n112v-blue-mid);
	text-decoration: underline;
}

.n112v-card__summary {
	font-size: .93rem;
	color: var(--n112v-muted);
}

/* De knop hoort onderaan de kaart, ook als de ene samenvatting langer is dan de
   andere: `margin-top: auto` duwt hem naar beneden in de flexkolom. */
#n112-vacatures .n112v-card__cta {
	margin: auto 0 0;
	padding-top: .35rem;
}

/* ===============================
   Meta-chips
   =============================== */
.n112v-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .5rem;
	list-style: none;
}

/* `.entry ul li` zet er anders een bolletje bij; dat blijft nu weg, ook als deze
   chips ooit een ander display krijgen. */
#n112-vacatures .n112v-meta__item {
	display: inline-flex;
	align-items: center;
	list-style: none;
	gap: .35rem;
	padding: .25rem .6rem;
	border-radius: 999px;
	background: var(--n112v-blue-soft);
	color: var(--n112v-blue);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.4;
}

.n112v-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* ===============================
   Knoppen
   =============================== */
/* Met het id erbij, anders geeft `.entry a` uit het thema de knoptekst zijn
   eigen kleur — op de donkerblauwe knop leverde dat blauw op blauw op. */
#n112-vacatures .n112v-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .6rem 1.1rem;
	border: 1px solid var(--n112v-line);
	border-radius: var(--n112v-radius);
	background: var(--n112v-surface);
	color: var(--n112v-blue);
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}

#n112-vacatures .n112v-btn:hover,
#n112-vacatures .n112v-btn:focus-visible {
	border-color: var(--n112v-blue-mid);
	color: var(--n112v-blue-mid);
	text-decoration: none;
}

#n112-vacatures .n112v-btn--primary {
	background: var(--n112v-blue);
	border-color: var(--n112v-blue);
	color: #fff;
}

#n112-vacatures .n112v-btn--primary:hover,
#n112-vacatures .n112v-btn--primary:focus-visible {
	background: var(--n112v-blue-mid);
	border-color: var(--n112v-blue-mid);
	color: #fff;
}

.n112v-btn--lg {
	padding: .8rem 1.6rem;
	font-size: 1rem;
}

#n112-vacatures .n112v-btn:focus-visible {
	outline: 2px solid var(--n112v-blue-mid);
	outline-offset: 2px;
}

.n112v-btn[disabled] {
	opacity: .6;
	cursor: progress;
}

/* ===============================
   Detail
   =============================== */
#n112-vacatures .n112v-back {
	margin: 0 0 1rem;
	font-size: .88rem;
}

#n112-vacatures .n112v-back a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--n112v-blue-mid);
	font-weight: 600;
	text-decoration: none;
}

.n112v-back a::before {
	content: "\2190";
}

.n112v-back a:hover {
	text-decoration: underline;
}

.n112v-detail {
	padding: 1.5rem 1.6rem;
	background: var(--n112v-surface);
	border: 1px solid var(--n112v-line);
	border-radius: var(--n112v-radius);
	box-shadow: var(--n112v-shadow);
	margin: 0 0 1.5rem;
}

#n112-vacatures .n112v-detail__title {
	margin: 0 0 .8rem;
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--n112v-heading);
}

.n112v-detail__body {
	margin-top: 1.25rem;
	font-size: 1rem;
	line-height: 1.7;
}

/* Eerste en laatste element in de vacaturetekst plat tegen de rand. Ook hier het
   id, anders winnen de maten per element hieronder. */
#n112-vacatures .n112v-detail__body > *:first-child {
	margin-top: 0;
}

#n112-vacatures .n112v-detail__body > *:last-child {
	margin-bottom: 0;
}

/* De vacaturetekst komt als losse HTML uit het intranet, dus dit zijn precies de
   elementen waar het thema ook op mikt: allemaal met het id ervoor. */
#n112-vacatures .n112v-detail__body h2,
#n112-vacatures .n112v-detail__body h3,
#n112-vacatures .n112v-detail__body h4 {
	margin: 1.6rem 0 .6rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--n112v-heading);
}

.n112v-detail__body h2 { font-size: 1.3rem; }
.n112v-detail__body h3 { font-size: 1.15rem; }
.n112v-detail__body h4 { font-size: 1.02rem; }

#n112-vacatures .n112v-detail__body p {
	margin: 0 0 1rem;
}

#n112-vacatures .n112v-detail__body ul,
#n112-vacatures .n112v-detail__body ol {
	margin: 0 0 1rem;
	padding-left: 1.35rem;
}

#n112-vacatures .n112v-detail__body li {
	margin-bottom: .35rem;
}

#n112-vacatures .n112v-detail__body a {
	color: var(--n112v-blue-mid);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-word;
}

.n112v-detail__body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.3rem 0;
	border-radius: var(--n112v-radius);
}

.n112v-detail__body figure {
	margin: 1.3rem 0;
}

.n112v-detail__body figcaption {
	margin-top: .4rem;
	font-size: .82rem;
	color: var(--n112v-muted);
}

.n112v-detail__body blockquote {
	margin: 1.3rem 0;
	padding: .1rem 0 .1rem 1rem;
	border-left: 3px solid var(--n112v-blue-mid);
	color: var(--n112v-muted);
	font-style: italic;
}

.n112v-detail__body hr {
	margin: 1.6rem 0;
	border: 0;
	border-top: 1px solid var(--n112v-line);
}

.n112v-detail__body table {
	width: 100%;
	margin: 1.3rem 0;
	border-collapse: collapse;
	font-size: .92rem;
}

.n112v-detail__body th,
.n112v-detail__body td {
	padding: .5rem .65rem;
	border: 1px solid var(--n112v-line);
	text-align: left;
	vertical-align: top;
}

.n112v-detail__body th {
	background: var(--n112v-bg);
	font-weight: 600;
}

#n112-vacatures .n112v-detail__closes {
	margin: 1.4rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--n112v-line);
	font-size: .88rem;
	font-weight: 600;
	color: var(--n112v-amber);
}

/* ===============================
   Formulier
   =============================== */
.n112v-apply {
	padding: 1.5rem 1.6rem 1.7rem;
	background: var(--n112v-bg);
	border: 1px solid var(--n112v-line);
	border-radius: var(--n112v-radius);
}

#n112-vacatures .n112v-apply__title {
	margin: 0 0 .35rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--n112v-heading);
}

#n112-vacatures .n112v-apply__lead {
	margin: 0 0 1.35rem;
	max-width: 60ch;
	font-size: .9rem;
	color: var(--n112v-muted);
}

.n112v-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0 1rem;
}

/* De velden zijn `<p>`-elementen, dus ook deze ruimte heeft het id nodig. */
#n112-vacatures .n112v-field {
	margin: 0 0 1.1rem;
}

.n112v-field--wide {
	grid-column: 1 / -1;
}

.n112v-field__label {
	display: block;
	margin-bottom: .35rem;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--n112v-text);
}

.n112v-req {
	color: var(--n112v-red);
}

.n112v-field__hint {
	display: block;
	margin-top: .35rem;
	font-size: .8rem;
	color: var(--n112v-muted);
}

.n112v-field__hint.is-error {
	color: var(--n112v-red);
	font-weight: 600;
}

.n112v-input {
	width: 100%;
	padding: .65rem .8rem;
	border: 1px solid var(--n112v-input-line);
	border-radius: var(--n112v-radius);
	background: var(--n112v-input-bg);
	color: var(--n112v-text);
	font: inherit;
	/* 16px voorkomt dat iOS Safari bij focus inzoomt. */
	font-size: 1rem;
	line-height: 1.4;
}

.n112v-input:focus {
	outline: 2px solid var(--n112v-blue-mid);
	outline-offset: 1px;
	border-color: var(--n112v-blue-mid);
}

/* Pas rood maken nadat de bezoeker het veld zelf heeft aangeraakt: een leeg
   verplicht veld mag er bij het openen van de pagina niet als fout uitzien. */
.n112v-input:user-invalid {
	border-color: var(--n112v-red);
}

.n112v-textarea {
	min-height: 8rem;
	resize: vertical;
}

.n112v-input--file {
	padding: .5rem .6rem;
	font-size: .9rem;
}

.n112v-check {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-size: .92rem;
	line-height: 1.5;
	cursor: pointer;
}

.n112v-check input {
	width: 1.1rem;
	height: 1.1rem;
	margin: .15rem 0 0;
	flex-shrink: 0;
	accent-color: var(--n112v-blue);
}

/* Honeypot: weg uit het zicht, maar niet display:none — sommige bots slaan
   verborgen velden over en dan werkt de val niet. */
.n112v-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

#n112-vacatures .n112v-form__privacy {
	margin: 0 0 1.1rem;
	font-size: .8rem;
	color: var(--n112v-muted);
}


/* ===============================
   Meldingen
   =============================== */
.n112v-notice {
	padding: 1.15rem 1.3rem;
	border: 1px solid var(--n112v-line);
	border-left: 3px solid var(--n112v-blue-mid);
	border-radius: 0 var(--n112v-radius) var(--n112v-radius) 0;
	background: var(--n112v-surface);
	margin: 0 0 1.5rem;
	font-size: .93rem;
}

#n112-vacatures .n112v-notice p {
	margin: 0 0 .5rem;
}

#n112-vacatures .n112v-notice p:last-child {
	margin-bottom: 0;
}

.n112v-notice__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--n112v-heading);
}

#n112-vacatures .n112v-notice__actions {
	margin-top: .9rem;
}

.n112v-notice--ok {
	border-left-color: var(--n112v-green);
	background: rgba(21, 115, 71, .06);
}

.n112v-notice--error {
	border-left-color: var(--n112v-red);
	background: rgba(207, 46, 46, .07);
}

.n112v-notice--warn {
	border-left-color: var(--n112v-amber);
	background: rgba(180, 83, 9, .07);
}

/* Centreren via flexbox in plaats van `margin: 0 auto`: het thema zet de marges
   van alinea's naar nul en daarmee viel die automatische marge weg, waardoor het
   smalle tekstblok links bleef plakken. Uitlijning van de container kan het niet
   afpakken. De ruimte tussen de regels komt van `gap`, om dezelfde reden. */
.n112v-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: 2.5rem 1.5rem;
	border: 1px dashed var(--n112v-line);
	border-radius: var(--n112v-radius);
	background: var(--n112v-bg);
	text-align: center;
}

.n112v-empty__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--n112v-heading);
}

.n112v-empty__text {
	max-width: 48ch;
	font-size: .95rem;
	color: var(--n112v-muted);
}

#n112-vacatures .n112v-empty__cta {
	margin-top: .7rem;
}

/* ===============================
   Mobiel
   =============================== */
@media (max-width: 640px) {
	.n112v-list {
		grid-template-columns: 1fr;
	}

	.n112v-card,
	.n112v-detail,
	.n112v-apply {
		padding: 1.1rem 1.1rem 1.2rem;
	}

	.n112v-card__cta .n112v-btn,
	.n112v-form__actions .n112v-btn,
	.n112v-notice__actions .n112v-btn {
		width: 100%;
	}

	.n112v-detail__body table {
		display: block;
		overflow-x: auto;
	}
}

/* ===============================
   Jannah dark mode (html/body.dark-skin)
   =============================== */
html.dark-skin .n112v,
body.dark-skin .n112v {
	/* Laat de browser ook de native onderdelen (bestandskiezer, dropdownlijst,
	   scrollbars) donker tekenen in plaats van standaard lichtgrijs. */
	color-scheme: dark;

	--n112v-blue: #7eb6ff;
	--n112v-blue-mid: #93c5fd;
	--n112v-blue-soft: rgba(126, 182, 255, .12);
	--n112v-red: #f87171;
	--n112v-green: #4ade80;
	--n112v-amber: #fdba74;
	--n112v-text: #e8eefc;
	--n112v-heading: #fff;
	--n112v-muted: #9fb0d0;
	--n112v-line: rgba(255, 255, 255, .13);
	--n112v-bg: rgba(255, 255, 255, .05);
	--n112v-surface: #151b28;
	--n112v-input-bg: #121826;
	--n112v-input-line: rgba(255, 255, 255, .16);
	--n112v-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .28);
	color: var(--n112v-text);
}

html.dark-skin .n112v-header,
body.dark-skin .n112v-header {
	border-bottom-color: rgba(126, 182, 255, .45);
}

html.dark-skin .n112v-card:hover,
body.dark-skin .n112v-card:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, .38), 0 16px 36px rgba(0, 0, 0, .34);
}

/* Het id staat er ook hier bij: de lichte knopregels hebben het inmiddels nodig
   tegen het thema, en zonder id zou dark mode het van hen verliezen. */
html.dark-skin #n112-vacatures .n112v-btn--primary,
body.dark-skin #n112-vacatures .n112v-btn--primary {
	background: #31579c;
	border-color: #31579c;
	color: #fff;
}

html.dark-skin #n112-vacatures .n112v-btn--primary:hover,
body.dark-skin #n112-vacatures .n112v-btn--primary:hover,
html.dark-skin #n112-vacatures .n112v-btn--primary:focus-visible,
body.dark-skin #n112-vacatures .n112v-btn--primary:focus-visible {
	background: #3d68b8;
	border-color: #3d68b8;
}

html.dark-skin .n112v-input::placeholder,
body.dark-skin .n112v-input::placeholder {
	color: rgba(159, 176, 208, .75);
}

html.dark-skin .n112v-notice--ok,
body.dark-skin .n112v-notice--ok {
	background: rgba(74, 222, 128, .12);
}

html.dark-skin .n112v-notice--error,
body.dark-skin .n112v-notice--error {
	background: rgba(248, 113, 113, .14);
}

html.dark-skin .n112v-notice--warn,
body.dark-skin .n112v-notice--warn {
	background: rgba(253, 186, 116, .13);
}

html.dark-skin .n112v-detail__body th,
body.dark-skin .n112v-detail__body th {
	background: rgba(255, 255, 255, .06);
}