/* Begrippenlijst: tabel met Begrip, Uitleg, Bron. Zoekveld en letterfilter erboven. */

.ga-begr {
	--begr-navy: var(--wp--preset--color--navy, #14213D);
	--begr-amber: var(--wp--preset--color--amber, #FFA600);
	--begr-zacht: var(--wp--preset--color--amber-zacht, #FFF1D6);
	--begr-mist: var(--wp--preset--color--mist, #EEF1F6);
	--begr-grijs: var(--wp--preset--color--grijs, #4A5468);
	--begr-veld: #6B7489;
	--ga-focus: var(--begr-navy);
	color: var(--begr-navy);
}

/* ---------- Filter ---------- */

.ga-begr__filter {
	display: grid;
	gap: 10px;
	margin-bottom: 20px;
}

.ga-begr__label {
	font-weight: 700;
}

.ga-begr__zoek {
	width: 100%;
	max-width: 420px;
	font: inherit;
	font-size: 1.0625rem;
	color: var(--begr-navy);
	background: #fff;
	border: 1.5px solid var(--begr-veld);
	border-radius: 6px;
	padding: 10px 12px;
	min-height: 46px;
}

.ga-begr__zoek:focus-visible {
	outline: 3px solid var(--ga-focus);
	outline-offset: 2px;
}

.ga-begr__letters {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.ga-begr__letter {
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	min-width: 36px;
	min-height: 36px;
	padding: 0 8px;
	border: 0;
	border-radius: 6px;
	background: var(--begr-mist);
	color: var(--begr-navy);
	cursor: pointer;
	transition: background-color var(--dur-exit, 200ms) var(--ease-enter, ease-out), transform var(--dur-exit, 200ms) var(--ease-enter, ease-out);
}

.ga-begr__letter:hover {
	background: var(--begr-zacht);
}

.ga-begr__letter:active {
	transform: scale(var(--press-scale, 0.97));
}

.ga-begr__letter[aria-pressed="true"] {
	background: var(--begr-navy);
	color: #fff;
}

.ga-begr__letter:focus-visible {
	outline: 3px solid var(--ga-focus);
	outline-offset: 2px;
}

/* Letters zonder begrippen: zichtbaar maar niet te kiezen. #6B7489 op wit haalt 4,7:1. */
.ga-begr__letter.is-leeg {
	display: inline-grid;
	place-items: center;
	background: transparent;
	color: var(--begr-veld);
	font-weight: 400;
	cursor: default;
}

.ga-begr__teller {
	margin: 0 !important;
	font-size: 0.875rem;
	color: var(--begr-grijs);
}

/* ---------- Tabel ---------- */

.ga-begr__tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.55;
}

.ga-begr__tabel thead th {
	text-align: left;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--begr-grijs);
	padding: 8px 12px;
	background: var(--begr-mist);
}

.ga-begr__tabel thead th:first-child {
	border-radius: 6px 0 0 6px;
}

.ga-begr__tabel thead th:last-child {
	border-radius: 0 6px 6px 0;
}

.ga-begr__tabel tbody th,
.ga-begr__tabel tbody td {
	text-align: left;
	vertical-align: top;
	padding: 14px 12px;
}

.ga-begr__tabel tbody tr + tr > * {
	box-shadow: inset 0 1px 0 var(--begr-mist);
}

.ga-begr__tabel tbody th {
	width: 24%;
	font-weight: 700;
}

.ga-begr__tabel tbody td:nth-child(2) {
	width: 56%;
}

.ga-begr__tabel td p {
	margin: 0 !important;
}

.ga-begr__tabel td p + p {
	margin-top: 6px !important;
}

.ga-begr__formule span {
	font-weight: 700;
}

.ga-begr__meer a,
.ga-begr__bron a {
	color: var(--begr-navy);
	text-decoration-color: var(--begr-amber);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ga-begr__bron {
	font-size: 0.9375rem;
	color: var(--begr-grijs);
	overflow-wrap: anywhere;
}

.ga-begr__tabel tr[hidden],
.ga-begr__tabel[hidden],
.ga-begr__leeg[hidden],
.ga-begr__filter[hidden] {
	display: none;
}

.ga-begr__leeg {
	background: var(--begr-mist);
	border-radius: 8px;
	padding: 14px 16px;
}

/* ---------- Telefoon: elke rij als blok, kolomnaam alleen bij de bron ---------- */

@media (max-width: 640px) {
	.ga-begr__tabel thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.ga-begr__tabel,
	.ga-begr__tabel tbody,
	.ga-begr__tabel tr,
	.ga-begr__tabel tbody th,
	.ga-begr__tabel tbody td {
		display: block;
		width: auto !important;
	}

	.ga-begr__tabel tbody tr {
		padding: 14px 0;
	}

	.ga-begr__tabel tbody tr + tr {
		box-shadow: inset 0 1px 0 var(--begr-mist);
	}

	.ga-begr__tabel tbody tr + tr > * {
		box-shadow: none;
	}

	.ga-begr__tabel tbody th,
	.ga-begr__tabel tbody td {
		padding: 0;
	}

	.ga-begr__tabel tbody th {
		font-size: 1.0625rem;
		margin-bottom: 4px;
	}

	.ga-begr__bron {
		margin-top: 6px;
	}

	.ga-begr__bron::before {
		content: "Bron: ";
	}
}

@media (prefers-reduced-motion: reduce) {
	.ga-begr__letter {
		transition: none;
	}
}