/**
 * Frontend-stijl voor wp-baby-names.
 *
 * Alles binnen .wpbn-root. Geen resets, geen !important, geen selector die
 * buiten die scope reikt, zodat de plugin nooit het thema van de koper raakt.
 * Kleuren en maten komen uit custom properties die class-wpbn-styles.php per
 * preset uitschrijft.
 */

.wpbn-root {
	color: var(--wpbn-ink);
	font-family: var(--wpbn-font);
}

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

/* Geen opsommingstekens.
   list-style op de ul zetten is niet genoeg: veel thema's zetten het op de li
   zelf, en een eigen regel op het kind wint van overerving. Bij Salient stonden
   er daardoor bolletjes voor elke letter, elke afkomst en elk kruimelpad. De
   marker wordt er apart bij uitgezet, want Safari en Firefox tekenen die soms
   ook zonder list-style. */
.wpbn-root ul,
.wpbn-root ol,
.wpbn-root li {
	list-style: none;
}

.wpbn-root li::marker {
	content: "";
}

/* Een thema kan een afbeelding als opsommingsteken zetten. */
.wpbn-root ul,
.wpbn-root ol,
.wpbn-root li {
	list-style-image: none;
}

/* De plugin mag nooit breder worden dan zijn omgeving. Zonder dit duwt een
   raster met brede kaarten de hele container uit het scherm.

   Standaard is die grens de omgeving zelf. De plugin rendert in het
   paginasjabloon van het thema, dus de container van het thema bepaalt de
   breedte, precies zoals bij elke andere pagina. Vult de koper de instelling
   Content width, dan geldt die in plaats daarvan; zie
   WPBN_Styles::content_width(). Een eigen getal als standaard zou de inhoud
   smaller maken dan de rest van de site, en dat is precies wat het niet moet
   doen. */
.wpbn-root {
	max-width: var(--wpbn-content-width, 100%);
	min-width: 0;
	margin-inline: auto;
}

/* De kop die de plugin zelf toevoegt als het thema er geen afdrukt. Erft de
   opmaak van het thema; alleen de ruimte eronder wordt geregeld, want die valt
   anders weg tegen het kruimelpad. */
.wpbn-title {
	margin-block: 0 0.4em;
}

/* --- wegwijzers op een naampagina --------------------------------------- */

.wpbn-crumbs {
	margin: 0 0 0.2rem;
	font-size: 0.85rem;
	color: var(--wpbn-muted);
}

.wpbn-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Het scheidingsteken in CSS en niet in de HTML: het is decoratie en hoort
   niet voorgelezen te worden door een schermlezer. */
.wpbn-crumbs li + li::before {
	margin-inline-end: 0.5rem;
	content: "/";
	color: var(--wpbn-line);
}

.wpbn-crumbs a {
	color: inherit;
	text-decoration: none;
}

.wpbn-crumbs a:hover,
.wpbn-crumbs a:focus-visible {
	color: var(--wpbn-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* De huidige stap mag niet even grijs zijn als de links ervoor. Stond op
   var(--wpbn-text), en dat token bestaat niet, dus het viel terug op dezelfde
   kleur als de rest. */
.wpbn-crumbs [aria-current="page"] {
	color: var(--wpbn-accent);
}

/* Vorige en volgende naam. Twee kolommen zodat "volgende" rechts uitlijnt,
   ook als er geen vorige is. */
.wpbn-siblings {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin: var(--wpbn-gap) 0 0;
}

.wpbn-siblings__link {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	padding: 0.7rem 0.9rem;
	color: inherit;
	text-decoration: none;
	background: var(--wpbn-card-bg);
	border: var(--wpbn-border-width) solid var(--wpbn-line);
	border-radius: var(--wpbn-radius);
	transition: border-color 0.12s ease;
}

.wpbn-siblings__link:hover,
.wpbn-siblings__link:focus-visible {
	border-color: var(--wpbn-accent);
}

.wpbn-siblings__link--next {
	grid-column: 2;
	justify-content: flex-end;
	text-align: end;
}

.wpbn-siblings__link small {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wpbn-muted);
}

.wpbn-siblings__link strong {
	font-size: 1rem;
	font-weight: 600;
}

/* De pijl van "vorige" wijst terug. */
.wpbn-siblings__link--prev .wpbn-icon {
	transform: scaleX(-1);
}

@media (max-width: 30rem) {
	.wpbn-siblings {
		grid-template-columns: 1fr;
	}

	.wpbn-siblings__link--next {
		grid-column: 1;
	}
}

/* --- kop van een naampagina --------------------------------------------- */

/* Een enkele regel chips onder de naam: geslacht, aantal letters, uitspraak.

   Eerder stond hier een cirkelbadge van drie rem met daarnaast een kolom met een
   p en een ul erin. Salient zet padding-bottom op een p, en die padding blies de
   regel op tot 91 pixels hoog: de badge liep uit het lood en er viel een gat
   onder het woord Boy. Drie chips op een rij kunnen dat niet meer, gebruiken
   dezelfde vormtaal als de rest van de plugin, en het is minder opmaak.

   De padding moet van de ul af omdat een thema die daarop zet; opsommingstekens
   staan al uit in de reset bovenaan. */
.wpbn-single__hero {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin: 0.85rem 0 0;
	padding: 0;
}

.wpbn-single__hero > li {
	display: inline-flex;
	gap: 0.4em;
	align-items: center;
	margin: 0;
	padding: 0.3em 0.8em;
	color: var(--wpbn-muted);
	background: var(--wpbn-chip-bg);
	border: var(--wpbn-border-width) solid transparent;
	border-radius: 999px;
}

.wpbn-single__hero .wpbn-icon {
	width: 1em;
	height: 1em;
	max-width: 1em;
	max-height: 1em;
}

/* Als kind geschreven, want .wpbn-single__hero > li weegt zwaarder dan een
   losse class en overschreef anders de tint en de padding hieronder.

   De rand is niet decoratief. De unisex-tint is #fdfcfe en dat is op een witte
   pagina niets: "Unisex" zweefde als losse tekst naast twee grijze chips. Met de
   lijnkleur van het geslacht erbij heeft elke variant een rand. */
.wpbn-single__hero > .wpbn-single__hero-gender {
	color: var(--wpbn-hero-accent, inherit);
	font-weight: 600;
	background: var(--wpbn-hero-bg, var(--wpbn-chip-bg));
	border-color: var(--wpbn-hero-line, transparent);
}

/* De uitspraakknop is zelf al een chip, dus deze li mag geen tweede worden. */
.wpbn-single__hero > .wpbn-single__hero-speak {
	padding: 0;
	background: none;
	border-color: transparent;
}

.wpbn-single__hero--girl {
	--wpbn-hero-bg: var(--wpbn-girl-bg);
	--wpbn-hero-line: var(--wpbn-girl-line);
	--wpbn-hero-accent: var(--wpbn-girl-accent);
}

.wpbn-single__hero--boy {
	--wpbn-hero-bg: var(--wpbn-boy-bg);
	--wpbn-hero-line: var(--wpbn-boy-line);
	--wpbn-hero-accent: var(--wpbn-boy-accent);
}

.wpbn-single__hero--unisex {
	--wpbn-hero-bg: var(--wpbn-unisex-bg);
	--wpbn-hero-line: var(--wpbn-unisex-line);
	--wpbn-hero-accent: var(--wpbn-unisex-accent);
}

/* --- uitspraakknop ------------------------------------------------------ */

/* Een echte button, want dit doet iets in plaats van ergens heen te gaan.
   Hij staat op hidden in de HTML en wordt pas door JavaScript getoond zodra
   blijkt dat het apparaat een stem heeft. */
.wpbn-speak {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	margin: 0;
	padding: 0.3em 0.8em;
	color: inherit;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
	background: none;
	border: var(--wpbn-border-width) solid var(--wpbn-line);
	border-radius: 999px;
	transition: color 0.12s ease, border-color 0.12s ease;
}

.wpbn-speak[hidden] {
	display: none;
}

/* Omlijnd en niet gevuld, want dit is een actie en de chips ernaast zijn
   feiten. Zo zijn er drie leesbare niveaus: getint gevuld voor het kernfeit,
   grijs gevuld voor een feit, omlijnd voor iets dat je kunt doen. */
.wpbn-speak:hover,
.wpbn-speak:focus-visible {
	color: var(--wpbn-accent);
	border-color: var(--wpbn-accent);
}

.wpbn-speak.is-speaking {
	color: var(--wpbn-accent);
	border-color: var(--wpbn-accent);
}

/* Terwijl hij praat pulseert het icoon zachtjes, zodat zichtbaar is dat er
   iets gebeurt ook als het geluid uit staat. */
.wpbn-speak.is-speaking .wpbn-icon {
	animation: wpbn-speak-pulse 1s ease-in-out infinite;
}

@keyframes wpbn-speak-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.wpbn-speak.is-speaking .wpbn-icon {
		animation: none;
	}
}

/* --- actieve filters ---------------------------------------------------- */

.wpbn-active {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin-bottom: 0.85rem;
}

.wpbn-active__label {
	margin-inline-end: 0.15rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wpbn-muted);
}

/* Een chip is een link die zijn eigen filter weghaalt. Daarom staat het
   kruisje erin en niet ernaast: het hele blokje is het doel, wat op een
   telefoon het verschil is tussen raak en mis. */
.wpbn-active__chip {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.3rem 0.5rem 0.3rem 0.6rem;
	color: inherit;
	font-size: 0.86rem;
	line-height: 1.3;
	text-decoration: none;
	background: var(--wpbn-chip-bg);
	border: var(--wpbn-border-width) solid transparent;
	border-radius: 999px;
	transition: background 0.12s ease, border-color 0.12s ease;
}

.wpbn-active__chip:hover,
.wpbn-active__chip:focus-visible {
	background: transparent;
	border-color: var(--wpbn-line);
}

.wpbn-active__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	font-size: 1rem;
	line-height: 1;
	color: var(--wpbn-muted);
	border-radius: 50%;
}

.wpbn-active__chip:hover .wpbn-active__x,
.wpbn-active__chip:focus-visible .wpbn-active__x {
	color: #fff;
	background: var(--wpbn-accent);
}

.wpbn-active__clear {
	margin-inline-start: 0.15rem;
	color: var(--wpbn-muted);
	font-size: 0.82rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wpbn-active__clear:hover {
	color: var(--wpbn-accent);
}

/* --- vlaggen ------------------------------------------------------------ */

.wpbn-root .wpbn-flag,
.wpbn-flag {
	/* Zelfde verdediging als bij de iconen: twee selectors en een harde max,
	   want een thema met svg { width: 100% } maakt er anders een banner van.
	   De ronde vorm zit hier en niet in de SVG, zodat kses er niet bij hoeft. */
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	max-width: 1.05em;
	max-height: 1.05em;
	vertical-align: -0.16em;
	border-radius: 50%;
	/* Lichte vlaggen als Japan en Polen vallen zonder rand weg op wit. */
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}

/* In het zoekveld neemt de vlag de plek van de wereldbol over. */
.wpbn-field--icon > .wpbn-flag {
	position: absolute;
	inset-inline-start: 0.75em;
	pointer-events: none;
}

/* Op een kaart staan meerdere afkomsten naast elkaar; die moeten kunnen
   afbreken zonder dat een vlag van zijn label loskomt. */
.wpbn-card__origins {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.55rem;
	align-items: center;
}

.wpbn-card__origin {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	white-space: nowrap;
}

/* De vlag naast de archiefkop mag groter, daar is hij het onderwerp. */
.wpbn-archive-flag {
	display: inline-flex;
	margin-inline-end: 0.4em;
	vertical-align: baseline;
}

.wpbn-archive-flag .wpbn-flag {
	width: 0.82em;
	height: 0.82em;
	max-width: 0.82em;
	max-height: 0.82em;
}

/* --- iconen ------------------------------------------------------------- */

.wpbn-root .wpbn-icon,
.wpbn-icon {
	/* Veel thema's hebben een regel als svg { width: 100% }. Twee selectors en
	   een expliciete max houden onze iconen klein zonder !important. */
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	max-width: 1.1em;
	max-height: 1.1em;
	vertical-align: -0.16em;
	color: currentColor;
}

/* --- zoekformulier ------------------------------------------------------- */

.wpbn-search {
	position: relative;
	margin: 0 0 calc(var(--wpbn-gap) * 1.25);
}

.wpbn-search__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

/* De maten van de bedieningselementen staan in em en niet in rem.
   rem hangt aan de wortel van de pagina en dus aan 16 pixels, terwijl de TEKST
   erin het thema volgt. Bij Salient is dat 16,8 pixels, en dan paste "Any
   gender" niet meer in een vakje van 11,5 rem: de tekst schaalde wel mee, het
   vakje niet. Met em schaalt de doos mee met zijn eigen tekst. Deze elementen
   zetten font: inherit en geen eigen font-size, dus er kan niets opstapelen. */
.wpbn-field {
	position: relative;
	display: flex;
	flex: 1 1 12em;
	min-width: 0;
	align-items: center;
}

.wpbn-field--grow {
	flex: 2 1 16em;
}

/* Het icoon staat in het veld, niet ervoor, zodat de rij een hoogte houdt. */
.wpbn-field--icon > .wpbn-icon {
	position: absolute;
	inset-inline-start: 0.75em;
	opacity: 0.55;
	pointer-events: none;
}

.wpbn-root input[type="search"],
.wpbn-root select {
	width: 100%;
	min-width: 0;
	height: 2.85em;
	padding: 0 0.85em;
	color: inherit;
	font: inherit;
	line-height: 1.2;
	background: var(--wpbn-card-bg);
	border: var(--wpbn-border-width) solid var(--wpbn-line);
	border-radius: var(--wpbn-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}

.wpbn-field--icon input[type="search"],
.wpbn-field--icon select {
	padding-inline-start: 2.6em;
}

/* Eigen pijl, want appearance:none haalt de systeempijl weg. */
.wpbn-root select {
	padding-inline-end: 2.2em;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.05em) 1.28em, calc(100% - 0.75em) 1.28em;
	background-size: 0.3em 0.3em, 0.3em 0.3em;
	background-repeat: no-repeat;
}

.wpbn-root input[type="search"]::placeholder {
	color: var(--wpbn-muted);
	opacity: 1;
}

.wpbn-root input[type="search"]:hover,
.wpbn-root select:hover {
	border-color: var(--wpbn-accent);
}

.wpbn-root input[type="search"]:focus-visible,
.wpbn-root select:focus-visible,
.wpbn-root a:focus-visible,
.wpbn-root button:focus-visible {
	outline: 2px solid var(--wpbn-accent);
	outline-offset: 2px;
}

.wpbn-btn {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 0.45em;
	align-items: center;
	height: 2.85em;
	padding: 0 1.25em;
	color: var(--wpbn-card-bg);
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
	background: var(--wpbn-accent);
	border: var(--wpbn-border-width) solid transparent;
	border-radius: var(--wpbn-radius);
	cursor: pointer;
	transition: filter 0.15s ease;
}

.wpbn-btn:hover {
	filter: brightness(1.12);
}

@media (max-width: 34rem) {
	.wpbn-field,
	.wpbn-field--grow,
	.wpbn-btn {
		flex: 1 1 100%;
	}

	.wpbn-btn {
		justify-content: center;
	}
}

/* --- autocomplete ------------------------------------------------------- */

.wpbn-suggest {
	position: absolute;
	z-index: 20;
	top: calc(100% + 0.25rem);
	left: 0;
	width: min(100%, 26rem);
	overflow: hidden;
	background: var(--wpbn-card-bg);
	border: var(--wpbn-border-width) solid var(--wpbn-line);
	border-radius: var(--wpbn-radius);
	box-shadow: var(--wpbn-shadow);
}

.wpbn-suggest[hidden] {
	display: none;
}

.wpbn-suggest a {
	display: block;
	padding: 0.5rem 0.75rem;
	color: inherit;
	text-decoration: none;
}

.wpbn-suggest a:hover,
.wpbn-suggest a.is-active {
	background: var(--wpbn-chip-bg);
}

/* --- browse --------------------------------------------------------------- */

.wpbn-browse {
	margin: 0 0 calc(var(--wpbn-gap) * 1.25);
	background: var(--wpbn-card-bg);
	border: var(--wpbn-border-width) solid var(--wpbn-line);
	border-radius: var(--wpbn-radius);
}

/* De samenvatting is de klikbare balk. Zonder eigen marker, want de standaard
   driehoek van de browser staat op een andere plek per platform. */
.wpbn-browse__summary {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.75rem 1rem;
	font-size: 0.88rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.wpbn-browse__summary::-webkit-details-marker {
	display: none;
}

.wpbn-browse__summary::after {
	width: 0.45rem;
	height: 0.45rem;
	margin-inline-start: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.1em);
	opacity: 0.5;
	content: "";
	transition: transform 0.15s ease;
}

.wpbn-browse[open] > .wpbn-browse__summary::after {
	transform: rotate(-135deg) translateY(-0.1em);
}

.wpbn-browse__summary:hover {
	color: var(--wpbn-accent);
}

.wpbn-browse__body {
	padding: 0 1rem 1rem;
}

.wpbn-browse__title {
	display: flex;
	gap: 0.45rem;
	align-items: center;
	margin: var(--wpbn-gap) 0 0.5rem;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wpbn-muted);
}

.wpbn-letters,
.wpbn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpbn-letter {
	display: grid;
	place-items: center;
	min-width: 2.35rem;
	min-height: 2.35rem;
	padding: 0 0.35rem;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	background: var(--wpbn-chip-bg);
	border-radius: var(--wpbn-radius);
}

.wpbn-letter:hover {
	color: var(--wpbn-accent);
}

.wpbn-letter.is-current {
	color: var(--wpbn-card-bg);
	background: var(--wpbn-accent);
}

.wpbn-chip {
	display: inline-flex;
	gap: 0.4rem;
	/* center en niet baseline: een SVG heeft zijn basislijn onderaan, dus een
	   vlag in een chip zou anders een stukje omhoog schieten. */
	align-items: center;
	padding: 0.3rem 0.6rem;
	color: inherit;
	font-size: 0.9rem;
	text-decoration: none;
	background: var(--wpbn-chip-bg);
	border-radius: var(--wpbn-radius);
}

.wpbn-chip:hover {
	color: var(--wpbn-accent);
}

.wpbn-chip__count {
	font-size: 0.78em;
	color: var(--wpbn-muted);
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.wpbn-browse__summary::after {
		transition: none;
	}
}

/* --- resultaten --------------------------------------------------------- */

.wpbn-results__count {
	margin: 0 0 var(--wpbn-gap);
	color: var(--wpbn-muted);
	font-size: 0.92rem;
}

.wpbn-grid {
	display: grid;
	gap: var(--wpbn-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}

/* Geslachtstint. Alleen de pastel-preset vult deze tokens met een eigen kleur;
   in de andere presets verwijzen ze naar de neutrale waarden, dus daar verandert
   niets. Zo blijft de tint een keuze van de preset en niet van de opmaak. */
.wpbn-card--girl {
	--wpbn-card-bg: var(--wpbn-girl-bg);
	--wpbn-line: var(--wpbn-girl-line);
	--wpbn-accent: var(--wpbn-girl-accent);
}

.wpbn-card--boy {
	--wpbn-card-bg: var(--wpbn-boy-bg);
	--wpbn-line: var(--wpbn-boy-line);
	--wpbn-accent: var(--wpbn-boy-accent);
}

.wpbn-card--unisex {
	--wpbn-card-bg: var(--wpbn-unisex-bg);
	--wpbn-line: var(--wpbn-unisex-line);
	--wpbn-accent: var(--wpbn-unisex-accent);
}

.wpbn-card {
	display: flex;
	flex-direction: column;
	padding: var(--wpbn-pad);
	background: var(--wpbn-card-bg);
	border: var(--wpbn-border-width) solid var(--wpbn-line);
	border-radius: var(--wpbn-radius);
	box-shadow: var(--wpbn-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
	.wpbn-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--wpbn-shadow), 0 8px 20px rgba(0, 0, 0, 0.06);
	}
}

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

	.wpbn-card:hover {
		transform: none;
	}
}

/* Naam links, geslachtsteken rechts, zodat de naam altijd op dezelfde plek
   begint ongeacht hoe lang hij is. */
.wpbn-card__head {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	justify-content: space-between;
}

.wpbn-card__title {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.wpbn-card__title a {
	color: inherit;
	text-decoration: none;
}

.wpbn-card__title a:hover {
	color: var(--wpbn-accent);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.wpbn-card__badge {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-top: 0.1rem;
	color: var(--wpbn-accent);
	background: var(--wpbn-chip-bg);
	border-radius: 999px;
}

.wpbn-card--girl .wpbn-card__badge,
.wpbn-card--boy .wpbn-card__badge {
	/* Op een getinte kaart valt de neutrale chipkleur weg, dus daar een
	   doorschijnend vlak dat met elke tint werkt. */
	background: rgba(255, 255, 255, 0.55);
}

.wpbn-card__origins {
	margin: 0.35rem 0 0.6rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wpbn-muted);
}

/* Drie regels, dan afkappen. Zo blijven kaarten in een raster ongeveer even
   hoog, ook bij een naam met een lange betekenis. De volledige tekst staat op
   de naampagina. */
.wpbn-card__meaning {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 0.93rem;
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.wpbn-card__variants {
	margin: auto 0 0;
	padding-top: 0.7rem;
	font-size: 0.78rem;
	color: var(--wpbn-muted);
}

/* --- paginering --------------------------------------------------------- */

.wpbn-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: calc(var(--wpbn-gap) * 1.5);
}

.wpbn-page {
	display: grid;
	place-items: center;
	min-width: 2.3rem;
	min-height: 2.3rem;
	padding: 0 0.6rem;
	color: inherit;
	text-decoration: none;
	background: var(--wpbn-chip-bg);
	border-radius: var(--wpbn-radius);
	font-variant-numeric: tabular-nums;
}

.wpbn-page.is-current {
	color: var(--wpbn-card-bg);
	font-weight: 600;
	background: var(--wpbn-accent);
}

/* --- uitgelicht --------------------------------------------------------- */

.wpbn-highlight {
	padding: var(--wpbn-pad);
	background: var(--wpbn-chip-bg);
	border-radius: var(--wpbn-radius);
}

.wpbn-highlight__label {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wpbn-muted);
}

.wpbn-highlight__name {
	margin: 0.2rem 0 0.35rem;
	font-size: 1.5rem;
	line-height: 1.15;
}

.wpbn-highlight__name a {
	color: inherit;
	text-decoration: none;
}

.wpbn-highlight__meaning {
	margin: 0;
	color: var(--wpbn-muted);
}

/* --- naampagina --------------------------------------------------------- */

.wpbn-single__header {
	margin-bottom: var(--wpbn-gap);
}

.wpbn-single__name {
	margin: 0;
	line-height: 1.1;
}

.wpbn-single__facts {
	/* Het raster zit op de BUITENSTE laag en niet per regel. Zo delen alle
	   regels een kolombreedte en is die breedte tegelijk niet groter dan het
	   langste label. Stond het raster per regel, dan moest er een vaste
	   minimumbreedte staan om ze uit te lijnen, en bij een naam met een enkele
	   korte afkomst gaapte er een gat van tien rem tussen label en betekenis. */
	display: grid;
	grid-template-columns: fit-content(13rem) 1fr;
	gap: 0.7rem 1.25rem;
	margin: var(--wpbn-gap) 0;
	padding: var(--wpbn-pad);
	background: var(--wpbn-card-bg);
	border: var(--wpbn-border-width) solid var(--wpbn-line);
	border-radius: var(--wpbn-radius);
}

/* De regel zelf verdwijnt uit het raster; zijn twee kinderen worden de cellen. */
.wpbn-fact {
	display: contents;
}

@media (max-width: 30rem) {
	.wpbn-single__facts {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}

	/* Onder elkaar hoort er lucht tussen de regels, niet tussen label en tekst. */
	.wpbn-fact + .wpbn-fact .wpbn-fact__label {
		margin-top: 0.55rem;
	}
}

.wpbn-fact__label {
	display: flex;
	gap: 0.35rem;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wpbn-muted);
}

/* De afkomsten van een betekenisregel. Elk paar vlag-en-naam blijft bij elkaar
   en breekt als geheel af naar de volgende regel. */
.wpbn-fact__origins {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.5rem;
	align-items: center;
}

.wpbn-origin {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	color: inherit;
	white-space: nowrap;
	text-decoration: none;
}

/* Alleen onderstrepen bij hover. Deze labels staan in kleinkapitaal en een
   vaste onderstreping zou de hele kolom onrustig maken. */
a.wpbn-origin:hover,
a.wpbn-origin:focus-visible {
	color: var(--wpbn-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wpbn-chips-inline {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.wpbn-section-title {
	margin: calc(var(--wpbn-gap) * 1.75) 0 var(--wpbn-gap);
	font-size: 1.1rem;
}