/* Onderzoekspagina (rapport als data): alleen wat cms.css niet dekt. Tokens uit basics.css. */

.cmsPage .contentWrap article p.onderzoek-label {
	margin: 0 0 4px;
	color: var(--mw-orange);
	font-family: var(--font-bold);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cmsPage .contentWrap article p.onderzoek-intro {
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 0.8rem;
}

/* Kerncijfers: tegels die een journalist direct kan overnemen */
.onderzoek-kerncijfers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	margin: 1.5rem 0 2rem;
	padding: 0;
	list-style: none;
}

	.onderzoek-kerncijfers li {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 16px;
		border-radius: var(--radius);
		background: var(--very-light-blue);
	}

	.onderzoek-kerncijfers strong {
		color: var(--primary-blue);
		font-family: var(--font-bold);
		font-size: 1.6rem;
		line-height: 1.1;
	}

	.onderzoek-kerncijfers span {
		color: var(--mw-ink);
		font-size: 0.95rem;
		line-height: 1.4;
	}

/* Conclusies: genummerd, kop vet */
.onderzoek-conclusies {
	padding-left: 1.4rem;
}

	.onderzoek-conclusies li {
		margin-bottom: 12px;
	}

	.onderzoek-conclusies p {
		margin: 4px 0 0;
	}

/* Tabellen: tot 600px stapelt cms.css de cellen (data-label); daarboven scrollen als het niet past */
.onderzoek-tabel {
	margin-bottom: 1.5rem;
}

@media (min-width: 601px) {
	/* zonder min-width 0 duwt een brede tabel de kolom groter en valt de zijbalk eronder */
	.onderzoek .contentWrap > article {
		min-width: 0;
	}

	.onderzoek-tabel {
		overflow-x: auto;
	}

		/* bedragen en percentages op één regel; namen mogen afbreken */
		.onderzoek-tabel td:not(:nth-child(2)) {
			white-space: nowrap;
		}
}

	.cmsPage .contentWrap article .onderzoek-tabel table {
		margin-bottom: 0.5rem;
		font-size: 0.95rem;
	}

	.onderzoek-tabel caption {
		padding-bottom: 6px;
		text-align: left;
		font-family: var(--font-bold);
	}

.cmsPage .contentWrap article p.onderzoek-voetnoot {
	color: var(--mw-muted);
	font-size: 0.9rem;
}

.onderzoek-knop {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	border-radius: var(--border-radius);
	background: var(--color-link);
	color: var(--text-light);
	font-family: var(--font-bold);
	text-decoration: none;
}

	.onderzoek-knop:hover {
		background: var(--primary-blue);
		color: var(--text-light);
	}

.onderzoek-knop-licht {
	background: var(--mw-linkbg);
	color: var(--color-link);
}

	.onderzoek-knop-licht:hover {
		background: var(--mw-linkbg-hover);
		color: var(--color-link);
	}

/* Jaarnavigatie */
.onderzoek-jaren ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	list-style: none;
}

.onderzoek-jaren a,
.onderzoek-jaren span {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--mw-linkbg);
	color: var(--color-link);
	text-decoration: none;
}

	.onderzoek-jaren a:hover {
		background: var(--mw-linkbg-hover);
	}

.onderzoek-jaren span[aria-current] {
	background: var(--primary-blue);
	color: var(--text-light);
	font-family: var(--font-bold);
}

@media (max-width: 600px) {
	.onderzoek-kerncijfers strong {
		font-size: 1.35rem;
	}
}

/* Persblok rechtsboven: wit met oranje rand, zodat het zich onderscheidt van de productknop eronder */
.contentSidebar .contentSidebarTool.onderzoek-pers {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--mw-card);
	border-top: 4px solid var(--mw-orange);
}

	.contentSidebar .contentSidebarTool.onderzoek-pers a.onderzoek-knop {
		height: auto;
		padding: 10px 16px;
		font-size: 1rem !important;
	}

	.contentSidebar .contentSidebarTool.onderzoek-pers a.onderzoek-knop-licht {
		background: var(--mw-linkbg);
		color: var(--color-link);
	}

	.contentSidebar .contentSidebarTool.onderzoek-pers p.onderzoek-pers-contact {
		margin: 4px 0 0;
		font-size: 0.95rem;
	}

		.contentSidebar .contentSidebarTool.onderzoek-pers p.onderzoek-pers-contact a {
			display: inline;
			height: auto;
			padding: 0;
			background: none;
			color: var(--color-link);
			font-size: inherit !important;
			text-decoration: underline;
		}

/* Overzicht (/onderzoek/ en /onderzoek/{onderwerp}/): kaarten per onderzoek, gegroepeerd per onderwerp */
.onderzoek-onderwerpen {
	margin-bottom: 1rem;
}

.onderzoek-groep {
	margin-top: 2rem;
}

	.onderzoek-groep h2 a {
		color: inherit;
		text-decoration: none;
	}

		.onderzoek-groep h2 a:hover {
			text-decoration: underline;
		}

.onderzoek-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}

	.onderzoek-kaarten a {
		display: flex;
		flex-direction: column;
		gap: 8px;
		height: 100%;
		padding: 16px;
		border: 1px solid var(--gray-dark);
		border-radius: var(--radius);
		background: var(--mw-card);
		color: var(--mw-ink);
		text-decoration: none;
		transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
	}

		.onderzoek-kaarten a:hover {
			border-color: var(--primary-blue);
			box-shadow: var(--shadow);
		}

	.onderzoek-kaarten strong {
		color: var(--color-link);
		font-family: var(--font-bold);
		line-height: 1.35;
	}

.onderzoek-kaart-kop {
	display: flex;
	align-items: center;
	gap: 8px;
}

.onderzoek-kaart-jaar {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--primary-blue);
	color: var(--text-light);
	font-family: var(--font-bold);
	font-size: 0.85rem;
}

.onderzoek-kaart-cijfer,
.onderzoek-kaart-tekst {
	color: var(--mw-muted);
	font-size: 0.92rem;
	line-height: 1.45;
}

	.onderzoek-kaart-cijfer b {
		display: block;
		color: var(--primary-blue);
		font-family: var(--font-bold);
		font-size: 1.25rem;
	}

.contentSidebar .contentPageIndex a[aria-current] {
	color: var(--mw-ink);
}

/* Onderwerplabel op een kaart: alleen nodig waar kaarten van verschillende onderwerpen door elkaar staan */
.onderzoek-kaart-onderwerp {
	color: var(--mw-muted);
	font-size: 0.85rem;
}

.onderzoek-groep .onderzoek-kaart-onderwerp {
	display: none;
}