/* Zwangerwereld: babynamen (vrolijke kant) */

.zw-namenpagina.one-container .site-content { padding: 0; }
.zw-namenpagina .inside-article { padding: 0; }

.zw-naam {
	max-width: 900px;
	margin: 0 auto;
	padding: 8px 20px 48px;
	box-sizing: border-box;
}
.zw-naam a { color: var(--cacao); }

/* Kop */
.zw-naam__kop {
	position: relative;
	overflow: hidden;
	padding: 28px 22px 24px;
	border-radius: 36px;
	background: var(--honing-licht);
}
.zw-naam__kop::after {
	content: "";
	position: absolute;
	top: -30px;
	right: -30px;
	width: 140px;
	height: 120px;
	border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
	background: var(--perzik);
	opacity: 0.9;
}
.zw-naam__kop > * { position: relative; z-index: 1; }
@media (min-width: 900px) { .zw-naam__kop { padding: 44px 48px 36px; } .zw-naam__kop::after { width: 220px; height: 190px; top: -50px; right: -40px; } }
.zw-naam__titel { margin: 0; font-size: clamp(52px, 9vw, 96px); line-height: 1; }
.zw-naam__kop .zw-golflijn { margin: 10px 0 14px; }
.zw-naam__kort { margin: 0 0 14px; font-size: 19px; }
.zw-naam__kenmerken { margin: 0 0 16px; padding: 0; list-style: none; }
.zw-naam__kenmerken li, .zw-naam .zw-pillen li { margin: 0; }
.zw-naam .zw-pillen { margin: 0; padding: 0; list-style: none; }
.zw-naam__kenmerken .zw-pil { min-height: 36px; font-size: 14px; }
.zw-naam__acties { display: flex; flex-wrap: wrap; gap: 8px; }
.zw-naam__acties button {
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--cacao);
	color: var(--room);
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
}
.zw-naam__acties button:hover { background: var(--terracotta); color: var(--wit); }
.zw-naam__acties .zw-naam__deel { background: var(--wit); color: var(--cacao); }
.zw-naam__acties .zw-naam__deel:hover { background: var(--honing); color: var(--cacao); }
.zw-naam__acties button[aria-pressed="true"] { background: var(--salie-diep); color: var(--wit); }

/* Feiten */
.zw-naam__feiten { margin: 14px 0 0; }
.zw-naam__feiten dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
@media (min-width: 900px) { .zw-naam__feiten dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zw-naam__feiten dl > div { padding: 14px 16px; border-radius: 20px; background: var(--wit); }
.zw-naam__feiten dt { margin: 0 0 2px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta); }
.zw-naam__feiten dd { margin: 0; font-family: "Young Serif", Georgia, serif; font-size: 19px; line-height: 1.3; }
.zw-naam__volgt { font-family: "Nunito", system-ui, sans-serif; font-size: 15px; color: var(--cacao-zacht); }

/* Secties */
.zw-naam__sectie { margin: 40px 0 0; }
.zw-naam__sectie h2 { margin: 0 0 14px; font-size: 28px; line-height: 1.2; }
@media (min-width: 900px) { .zw-naam__sectie h2 { font-size: 32px; } }
.zw-naam p.zw-naam-bron, .zw-naam-bron { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--cacao-zacht); }

/* Grafiek */
.zw-naam-plek { margin: 0 0 10px; font-size: 17px; }
.zw-naam-grafiek__svg { display: block; width: 100%; height: auto; padding: 16px 14px 8px; box-sizing: border-box; border-radius: 24px; background: var(--wit); }
.zw-naam-grafiek__balk { fill: var(--perzik); }
.zw-naam-grafiek__balk:hover { fill: var(--terracotta); }
.zw-naam-grafiek__gat { fill: var(--lijn); }
.zw-naam-grafiek__as { stroke: var(--lijn); stroke-width: 1; }
.zw-naam-grafiek__jaar, .zw-naam-grafiek__max { fill: var(--cacao-zacht); font-family: "Nunito", system-ui, sans-serif; font-size: 12px; }
.zw-naam-grafiek__leeg { padding: 18px; border-radius: 20px; background: var(--wit); }
.zw-naam-regios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.zw-naam-regios li { margin: 0; padding: 12px 14px; border-radius: 18px; background: var(--honing-licht); }
.zw-naam-regios span { display: block; font-size: 13px; color: var(--cacao-zacht); }
.zw-naam-regios strong { font-family: "Young Serif", Georgia, serif; font-size: 20px; font-weight: 400; }

.zw-naam-tabel { margin: 16px 0 0; }
.zw-naam-tabel summary { min-height: 44px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.zw-naam-tabel__scroll { overflow-x: auto; }
.zw-naam-tabel table { width: 100%; margin: 8px 0 0; border-collapse: collapse; font-size: 15px; background: var(--wit); border-radius: 16px; }
.zw-naam-tabel th, .zw-naam-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--lijn); text-align: right; white-space: nowrap; }
.zw-naam-tabel th:first-child { text-align: left; }

/* Achternaam */
.zw-naam-achternaam__form label { display: block; margin: 0 0 6px; font-weight: 700; }
.zw-naam-achternaam__rij { display: flex; flex-wrap: wrap; gap: 8px; }
.zw-naam-achternaam__rij input {
	flex: 1 1 200px;
	min-width: 0;
	height: 52px;
	box-sizing: border-box;
	padding: 0 18px;
	border: 1.5px solid #8C7B73;
	border-radius: 999px;
	background: var(--wit);
	color: var(--cacao);
	font: inherit;
}
.zw-naam-achternaam__rij .zw-btn { width: auto; flex: 0 0 auto; }
.zw-naam-achternaam__uit { margin: 12px 0 0; font-family: "Young Serif", Georgia, serif; font-size: 24px; }
.zw-naam-achternaam__uit:empty { display: none; }

/* Verder kijken */
.zw-naam__verder { display: grid; gap: 8px; margin: 40px 0 0; }
.zw-naam__verder a, .zw-knop-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 52px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--wit);
	font-weight: 800;
	text-decoration: none;
}
.zw-knop-link { display: inline-flex; gap: 8px; background: var(--cacao); color: var(--room) !important; }
.zw-naam__verder a:hover { background: var(--honing-licht); }

/* Letters en letterpagina */
.zw-letters ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.zw-letters li { margin: 0; }
.zw-letters a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--wit);
	color: var(--cacao);
	font-family: "Young Serif", Georgia, serif;
	font-size: 19px;
	text-decoration: none;
}
.zw-letters a:hover { background: var(--honing); color: var(--cacao); }
.zw-letters a[aria-current="page"] { background: var(--cacao); color: var(--room); }
.zw-letter .zw-naam__titel { margin: 0 0 18px; font-size: clamp(40px, 6vw, 64px); }
.zw-letter__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.zw-pil--actief { background: var(--cacao); color: var(--room) !important; }
.zw-letter__sort { margin-left: auto; }
.zw-letter__lijst {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 16px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 600px) { .zw-letter__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .zw-letter__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zw-letter__lijst li { margin: 0; }
.zw-letter__naam { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 17px; text-decoration: none; }
.zw-letter__naam::before { content: ""; flex: 0 0 10px; height: 10px; border-radius: 999px; background: var(--honing); }
.zw-letter__naam--m::before { background: var(--hemel); }
.zw-letter__naam--v::before { background: var(--perzik); }
.zw-letter__naam:hover { text-decoration: underline; }

/* Toplijsten */
.zw-top { padding: 22px 20px; border-radius: 28px; background: var(--wit); }
.zw-top__titel { margin: 0 0 12px; font-size: 22px; }
.zw-top__titel span { color: var(--cacao-zacht); font-family: "Nunito", system-ui, sans-serif; font-size: 16px; }
.zw-top__lijst { margin: 0; padding: 0; list-style: none; }
.zw-top__lijst li { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; border-bottom: 1px solid var(--lijn); }
.zw-top__lijst li:last-child { border-bottom: 0; }
.zw-top__rang { flex: 0 0 28px; font-family: "Young Serif", Georgia, serif; color: var(--terracotta); }
.zw-top__lijst a { flex: 1; font-weight: 800; text-decoration: none; }
.zw-top__lijst a:hover { text-decoration: underline; }
.zw-top__aantal { font-size: 14px; color: var(--cacao-zacht); }
.zw-top__trend { flex: 0 0 52px; font-size: 12px; font-weight: 800; text-align: right; }
.zw-top__trend--op { color: var(--salie-diep); }
.zw-top__trend--neer { color: var(--terracotta); }
.zw-top__trend--nieuw { color: var(--zeeblauw); }
.zw-tops { display: grid; gap: 16px; }
@media (min-width: 900px) { .zw-tops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.zw-namen-zoek { max-width: 640px; }
.zw-namen-zoek__uit { margin: 14px 0 0; }

/* Correcties (staan voorlopig ook in Extra CSS) */
.zw-naam-grafiek__svg { overflow: visible; }
.zw-naam-grafiek__svg .zw-naam-grafiek__jaar, .zw-naam-grafiek__svg .zw-naam-grafiek__max { font-size: 22px; }
.zw-naam-grafiek__svg text.zw-naam-grafiek__jaar:first-of-type { text-anchor: start; }
.zw-naam-grafiek__svg text.zw-naam-grafiek__jaar:nth-last-of-type(2) { text-anchor: end; }
.zw-naam .zw-naam-achternaam__rij input[type="text"] { border-radius: 999px; border: 1.5px solid #8C7B73; padding: 0 18px; }
.zw-naam__feiten dl { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.zw-top__lijst li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 56px; gap: 10px; }
.zw-pil.zw-pil--actief { background: var(--cacao); color: var(--room); }

/* Uitgebreide betekenis en kenmerken */
.zw-naam-uitleg p { margin: 0 0 14px; font-size: 18px; line-height: 1.7; max-width: 40em; }
.zw-naam-kenmerken ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.zw-naam-kenmerken li { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 18px 20px; border-radius: 24px; background: var(--honing-licht); }
.zw-naam-kenmerken li:nth-child(3n+2) { background: var(--salie); }
.zw-naam-kenmerken li:nth-child(3n) { background: #FBD9CC; }
.zw-naam-kenmerken__label { font-family: "Young Serif", Georgia, serif; font-size: 22px; line-height: 1.2; }
.zw-naam-kenmerken__tekst { font-size: 16px; line-height: 1.5; }

/* Naamdag en bekende naamgenoten */
.zw-naam__sub { display: block; margin-top: 4px; font-family: "Nunito", system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--cacao-zacht); }
.zw-naam-bekenden ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lijn); }
.zw-naam-bekenden li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.zw-naam-bekenden__naam { font-family: "Young Serif", Georgia, serif; font-size: 20px; line-height: 1.3; }
.zw-naam-bekenden__naam a { color: inherit; text-decoration: underline; text-decoration-color: var(--perzik); text-underline-offset: 4px; }
.zw-naam-bekenden__wat { font-size: 15px; color: var(--cacao-zacht); }
.zw-naam-bekenden .zw-naam__bron { margin-top: 10px; font-size: 13px; color: var(--cacao-zacht); }
@media (max-width: 600px) { .zw-naam-uitleg p { font-size: 17px; } }

/* Automatische introductie en trend */
.zw-naam__intro { margin: 28px 0 8px; font-size: 20px; line-height: 1.6; max-width: 38em; }
.zw-naam-trend { margin: 0 0 14px; font-size: 17px; line-height: 1.6; max-width: 40em; }
@media (max-width: 600px) { .zw-naam__intro { font-size: 18px; } }

/* Populariteit per land: eigen sectie per land; wie België koos, ziet België eerst */
.zw-naam-landen { display: flex; flex-direction: column; }
html[data-zw-land="be"] .zw-naam-land--be { order: -1; }
.zw-naam-cijfers { margin-top: 0; }
.zw-naam-past p { margin: 0 0 14px; max-width: 40em; }

/* Lijstpagina's: jongensnamen, meisjesnamen, neutrale namen */
.zw-pil--hemel { background: var(--hemel); }
.zw-lijst .zw-naam__intro { max-width: 44em; }
.zw-lijst .zw-naam__intro a { font-weight: 800; }
.zw-lijst__lengtes { margin: 14px 0 0; }
.zw-lijst__lengtes .zw-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.zw-lijst__lengtes .zw-pil { min-height: 40px; font-size: 15px; background: var(--wit); }
.zw-lijst__lengtes .zw-pil:hover { background: var(--honing); }
.zw-lijst .zw-letter__filters { margin: 0; }
.zw-lijst__ingang { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.zw-lijst__ingang li { margin: 0; }
.zw-lijst__kort { margin: 14px 0 0; }

/* Lijsten met pillen: geen opsommingstekens */
ul.zw-pillen { margin: 0; padding: 0; list-style: none; }
ul.zw-pillen > li { margin: 0; }
.zw-naam .zw-naam__kenmerken { margin: 0 0 16px; }

/* Link naar het lijstje op een naampagina */
.zw-naam__acties .zw-naam__naar-lijstje { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; font-weight: 800; color: var(--cacao); text-underline-offset: 3px; }
.zw-naam__acties .zw-naam__naar-lijstje[hidden] { display: none; }

/* Ons lijstje */
.zw-lijstje { display: flex; flex-direction: column; gap: 40px; margin: 32px 0 0; }
.zw-lijstje [hidden] { display: none !important; }
.zw-lijstje h2 { margin: 0; }
.zw-lijstje__gedeeld { display: flex; flex-direction: column; gap: 14px; padding: 26px 22px; border-radius: 32px; background: var(--honing-licht); }
@media (min-width: 900px) { .zw-lijstje__gedeeld { padding: 36px 40px; } }
.zw-lijstje__samen { margin: 0; font-size: 18px; font-weight: 700; }
.zw-lijstje__eigen { display: flex; flex-direction: column; gap: 16px; }
.zw-lijstje__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.zw-lijstje__deel, .zw-lijstje__erbij, .zw-lijstje__weg {
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
}
.zw-lijstje__deel { min-height: 48px; padding: 0 24px; background: var(--cacao); color: var(--room); font-size: 16px; }
.zw-lijstje__deel:hover { background: var(--terracotta); color: var(--wit); }
.zw-lijstje__erbij { background: var(--cacao); color: var(--room); }
.zw-lijstje__erbij:hover { background: var(--terracotta); color: var(--wit); }
.zw-lijstje__weg { background: var(--room); color: var(--cacao); }
.zw-lijstje__weg:hover { background: var(--perzik); color: var(--cacao); }
.zw-lijstje__beide { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--salie); font-size: 14px; font-weight: 800; }
.zw-lijstje__achternaam { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.zw-lijstje__achternaam label { font-weight: 700; }
.zw-lijstje__achternaam input {
	height: 52px;
	box-sizing: border-box;
	padding: 0 20px;
	border: 1.5px solid #8C7B73;
	border-radius: 999px;
	background: var(--wit);
	color: var(--cacao);
	font: inherit;
	font-size: 17px;
}
.zw-lijstje__namen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.zw-lijstje__item { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 18px 18px 18px 22px; border-radius: 24px; background: var(--wit); }
.zw-lijstje__gedeeld .zw-lijstje__item { background: var(--wit); }
.zw-lijstje__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zw-lijstje__naam { font-family: "Young Serif", Georgia, serif; font-size: 26px; line-height: 1.15; color: var(--cacao); text-decoration: none; overflow-wrap: anywhere; }
.zw-lijstje__naam:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--cacao); }
.zw-lijstje__meta { font-size: 14px; color: var(--cacao-zacht); }
.zw-lijstje__vol { font-size: 15px; font-weight: 700; }
.zw-lijstje__leeg p { margin: 0 0 14px; font-size: 18px; }
.zw-lijstje__uitleg { max-width: 40em; }