/**
 * 10 augustus 2026
 * Bas Martens
 * Hoofdstylesheet: design tokens, reset, typografie, layout en basis-utilities.
 */

/* ════════════════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════════════════ */
:root {
	/* ── Merkkleuren, rechtstreeks uit het logo ─────────────
	   Teal en oranje zijn de twee tekstballonnen,
	   donkerblauw is de kleur van het woordmerk. */
	--ntp-teal:         #00B5BE;
	--ntp-teal-dark:    #00939A;
	--ntp-teal-light:   #3FCBD2;
	--ntp-teal-soft:    #E4F7F8;
	--ntp-orange:       #FFAA35;
	--ntp-orange-dark:  #E8901C;
	--ntp-orange-light: #FFC470;
	--ntp-orange-soft:  #FFF3E2;
	--ntp-navy:         #061C31;
	--ntp-navy-mid:     #0E3050;
	--ntp-navy-light:   #1C476F;

	/* Aliassen voor bestaande componenten */
	--ntp-blue:         var(--ntp-teal);
	--ntp-blue-light:   var(--ntp-teal-light);
	--ntp-yellow:       var(--ntp-orange);
	--ntp-yellow-light: var(--ntp-orange-light);

	/* Neutraal */
	--ntp-white:        #ffffff;
	--ntp-off-white:    #f4f8f9;
	--ntp-surface:      #ffffff;
	--ntp-surface-alt:  #edf4f5;
	--ntp-text:         #123048;
	--ntp-text-muted:   #5f7285;
	--ntp-border:       #dbe5ea;
	--ntp-success:      #00857a;
	--ntp-error:        #dc2626;

	/* Typografie */
	--ntp-font:      system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--ntp-font-size: 1rem;
	--ntp-lh:        1.65;

	/* Spacing */
	--ntp-s-xs:  0.375rem;
	--ntp-s-sm:  0.75rem;
	--ntp-s-md:  1rem;
	--ntp-s-lg:  1.5rem;
	--ntp-s-xl:  2rem;
	--ntp-s-2xl: 3rem;
	--ntp-s-3xl: 4.5rem;

	/* Borders & shadows */
	--ntp-radius:     8px;
	--ntp-radius-sm:  8px;
	--ntp-radius-md:  14px;
	--ntp-radius-lg:  22px;
	--ntp-radius-xl:  32px;
	--ntp-shadow-sm:  0 1px 4px rgba(10, 22, 40, .07);
	--ntp-shadow-md:  0 4px 18px rgba(10, 22, 40, .10);
	--ntp-shadow-lg:  0 10px 40px rgba(10, 22, 40, .14);

	/* Layout */
	--ntp-container:      720px;
	--ntp-container-wide: 1100px;
}

/* ════════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: 16px;
	scroll-behavior: smooth;
	/* Ruimte voor de meelopende header bij het springen naar een anker. */
	scroll-padding-top: 68px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--ntp-font);
	font-size: var(--ntp-font-size);
	line-height: var(--ntp-lh);
	color: var(--ntp-text);
	background: var(--ntp-off-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0 0 var(--ntp-s-md);
	line-height: 1.25;
	color: var(--ntp-navy);
	font-weight: 700;
}

p { margin: 0 0 var(--ntp-s-md); }
p:last-child { margin-bottom: 0; }
a { color: var(--ntp-blue); text-decoration: none; }
/* Links krijgen bij hover geen streep, nergens op de site. */
a:hover { text-decoration: none; }
a:focus-visible { outline: 3px solid var(--ntp-yellow); outline-offset: 2px; border-radius: 3px; }
.ntp-btn:focus-visible { outline: 3px solid var(--ntp-yellow); outline-offset: 2px; }

img { max-width: 100%; height: auto; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { cursor: pointer; font-family: inherit; }

/* ════════════════════════════════════════════════════════
   TOEGANKELIJKHEID
   ════════════════════════════════════════════════════════ */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ntp-skip-link:focus {
	position: fixed;
	top: 0; left: 0;
	z-index: 9999;
	width: auto; height: auto;
	clip: auto;
	padding: .75rem 1.5rem;
	background: var(--ntp-yellow);
	color: var(--ntp-navy);
	font-weight: 700;
	border-radius: 0 0 var(--ntp-radius-sm) 0;
}

/* ════════════════════════════════════════════════════════
   LAYOUT UTILITIES
   ════════════════════════════════════════════════════════ */
.ntp-container {
	width: 100%;
	max-width: var(--ntp-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ntp-s-lg);
	padding-right: var(--ntp-s-lg);
}

.ntp-container--wide {
	max-width: var(--ntp-container-wide);
}

.ntp-hidden { display: none !important; }

/* ════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════ */
.ntp-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ntp-white);
	color: var(--ntp-navy);
	border-bottom: 1px solid var(--ntp-border);
	box-shadow: 0 1px 10px rgba(6, 28, 49, .06);
}

.ntp-header-inner {
	max-width: var(--ntp-container-wide);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ntp-s-md);
	height: 68px;
}

.ntp-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

/* Vaste breedte, zodat het logo in de header en de footer exact gelijk is. */
.ntp-logo img {
	display: block;
	width: 194px;
	height: auto;
}

.ntp-logo-main {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--ntp-navy);
	letter-spacing: -.02em;
}

.ntp-primary-nav ul {
	display: flex;
	gap: var(--ntp-s-lg);
}

.ntp-primary-nav a {
	position: relative;
	color: var(--ntp-navy);
	font-size: .95rem;
	font-weight: 600;
	transition: color .15s;
	text-decoration: none;
}

.ntp-primary-nav a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -6px;
	height: 2px;
	background: var(--ntp-teal);
	border-radius: 2px;
	transform: scaleX(0);
	transition: transform .18s ease;
}

.ntp-primary-nav a:hover,
.ntp-primary-nav a[aria-current="page"] { color: var(--ntp-teal-dark); }
.ntp-primary-nav a:hover::after,
.ntp-primary-nav a[aria-current="page"]::after { transform: scaleX(1); }

.ntp-header-actions {
	display: flex;
	align-items: center;
	gap: var(--ntp-s-sm);
}

/* ════════════════════════════════════════════════════════
   TAALKEUZE
   ════════════════════════════════════════════════════════ */
.ntp-lang-switcher {
	display: flex;
	gap: 2px;
	padding: 3px;
	background: var(--ntp-surface-alt);
	border-radius: 999px;
}

.ntp-lang-btn {
	font-size: .72rem;
	font-weight: 700;
	padding: .28rem .55rem;
	border-radius: 999px;
	color: var(--ntp-text-muted);
	text-decoration: none;
	transition: color .15s, background .15s;
}

.ntp-lang-btn:hover {
	color: var(--ntp-navy);
	background: rgba(0, 181, 190, .14);
	text-decoration: none;
}

.ntp-lang-btn.active {
	color: var(--ntp-white);
	background: var(--ntp-teal);
	text-decoration: none;
}

/* ════════════════════════════════════════════════════════
   MOBIEL MENU KNOP
   ════════════════════════════════════════════════════════ */
/* Zelfde kader en hoogte als de taal-pulldown ernaast. */
.ntp-mobile-menu-btn {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 38px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--ntp-border);
	border-radius: 999px;
	background: var(--ntp-surface-alt);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.ntp-mobile-menu-btn:hover { border-color: var(--ntp-teal); }

.ntp-mobile-menu-btn span {
	display: block;
	width: 16px; height: 2px;
	background: var(--ntp-navy);
	border-radius: 2px;
	transition: transform .2s, opacity .2s;
}

/* ════════════════════════════════════════════════════════
   OFFCANVAS MENU (mobiel, schuift van rechts en duwt de pagina mee)
   ════════════════════════════════════════════════════════ */
:root {
	--ntp-offcanvas-w: min(300px, 80vw);
}

.ntp-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.ntp-offcanvas[hidden] { display: none; }

/* De hele pagina schuift naar links terwijl het paneel binnenkomt. */
.ntp-site-header,
main,
.ntp-site-footer {
	transition: transform .28s cubic-bezier(.4, 0, .2, 1),
	            filter .28s ease;
}

body.ntp-menu-open .ntp-site-header,
body.ntp-menu-open main,
body.ntp-menu-open .ntp-site-footer {
	transform: translateX(calc(-1 * var(--ntp-offcanvas-w)));
	filter: blur(2px) brightness(.8);
}

.ntp-offcanvas__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 28, 49, .55);
	opacity: 0;
	transition: opacity .25s ease;
}

.ntp-offcanvas__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: var(--ntp-offcanvas-w);
	display: flex;
	flex-direction: column;
	background: var(--ntp-white);
	box-shadow: -14px 0 40px rgba(6, 28, 49, .25);
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ntp-offcanvas.is-open .ntp-offcanvas__backdrop { opacity: 1; }
.ntp-offcanvas.is-open .ntp-offcanvas__panel { transform: translateX(0); }

.ntp-offcanvas__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
	padding: 0 var(--ntp-s-md);
	border-bottom: 1px solid var(--ntp-border);
}

.ntp-offcanvas__logo img {
	display: block;
	height: 28px;
	width: auto;
}

.ntp-offcanvas__close {
	position: relative;
	width: 32px; height: 32px;
	background: transparent;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.ntp-offcanvas__close span {
	position: absolute;
	top: 50%; left: 50%;
	width: 14px; height: 1.5px;
	background: var(--ntp-navy);
	border-radius: 2px;
}

.ntp-offcanvas__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.ntp-offcanvas__close span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

.ntp-offcanvas__nav {
	flex: 1;
	padding: 0;
}

.ntp-offcanvas__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ntp-s-sm);
	width: 100%;
	padding: .7rem var(--ntp-s-md);
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--ntp-border);
	color: var(--ntp-navy);
	font-family: inherit;
	font-size: .92rem;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.ntp-offcanvas__link:hover { background: var(--ntp-surface-alt); text-decoration: none; }
.ntp-offcanvas__link.is-current { color: var(--ntp-teal-dark); }

.ntp-offcanvas__account {
	display: flex;
	gap: var(--ntp-s-sm);
	padding: var(--ntp-s-sm) var(--ntp-s-md);
	border-bottom: 1px solid var(--ntp-border);
}

.ntp-offcanvas__account .ntp-btn {
	flex: 1;
}

.ntp-offcanvas__account .ntp-btn--outline {
	color: var(--ntp-navy);
	border-color: var(--ntp-border);
}

.ntp-offcanvas__account .ntp-btn--outline:hover {
	background: var(--ntp-teal);
	border-color: var(--ntp-teal);
	color: var(--ntp-white);
}

/* ════════════════════════════════════════════════════════
   TAAL-PULLDOWN (naast de menuknop op smalle schermen)
   ════════════════════════════════════════════════════════ */
.ntp-lang-dropdown {
	position: relative;
	display: none;
}

.ntp-lang-dropdown__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	height: 36px;
	padding: 0 .6rem 0 .75rem;
	border: 1px solid var(--ntp-border);
	border-radius: 999px;
	background: var(--ntp-surface-alt);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.ntp-lang-dropdown__btn:hover { border-color: var(--ntp-teal); }

.ntp-lang-dropdown__code {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ntp-navy);
}

.ntp-lang-dropdown__chevron {
	width: 6px; height: 6px;
	border-right: 1.5px solid var(--ntp-text-muted);
	border-bottom: 1.5px solid var(--ntp-text-muted);
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform .2s ease;
}

.ntp-lang-dropdown__btn[aria-expanded="true"] .ntp-lang-dropdown__chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.ntp-lang-dropdown__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 120;
	min-width: 168px;
	padding: .25rem;
	background: var(--ntp-white);
	border: 1px solid var(--ntp-border);
	border-radius: var(--ntp-radius-sm);
	box-shadow: 0 10px 28px rgba(6, 28, 49, .16);
}

.ntp-lang-dropdown__list[hidden] { display: none; }

.ntp-lang-dropdown__item {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .5rem;
	border-radius: var(--ntp-radius-sm);
	color: var(--ntp-text);
	font-size: .85rem;
	text-decoration: none;
}

.ntp-lang-dropdown__item:hover { background: var(--ntp-surface-alt); text-decoration: none; }

.ntp-lang-dropdown__item.is-current {
	color: var(--ntp-teal-dark);
	font-weight: 700;
}

.ntp-lang-dropdown__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	padding: .12rem .35rem;
	border-radius: 999px;
	background: var(--ntp-surface-alt);
	font-size: .62rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ntp-text-muted);
}

.ntp-lang-dropdown__item.is-current .ntp-lang-dropdown__badge {
	background: var(--ntp-teal);
	color: var(--ntp-white);
}

/* Achtergrond niet meescrollen zolang het menu open staat. */
body.ntp-menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.ntp-offcanvas__panel,
	.ntp-offcanvas__backdrop,
	.ntp-lang-dropdown__chevron { transition: none; }
}

/* ════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════ */
.ntp-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ntp-navy) 0%, var(--ntp-navy-mid) 60%, #0F4460 100%);
	color: var(--ntp-white);
	padding: var(--ntp-s-3xl) 0;
}

/* Twee zachte kleurvlekken die de tekstballonnen uit het logo echoën. */
.ntp-hero::before,
.ntp-hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .35;
	pointer-events: none;
}

.ntp-hero::before {
	width: 320px; height: 320px;
	top: -120px; left: -80px;
	background: var(--ntp-teal);
}

.ntp-hero::after {
	width: 280px; height: 280px;
	bottom: -140px; right: -60px;
	background: var(--ntp-orange);
}

.ntp-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 680px;
}

/* Twee kolommen: claim links, de vraag van vandaag als kaart rechts. */
.ntp-hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ntp-s-2xl);
	align-items: center;
}

@media (min-width: 900px) {
	.ntp-hero-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--ntp-s-3xl);
	}
	.ntp-hero-grid--single { grid-template-columns: 1fr; max-width: 680px; }
}

.ntp-hero-title {
	font-size: clamp(2rem, 4.6vw, 3.1rem);
	font-weight: 700;
	line-height: 1.08;
	color: var(--ntp-white);
	letter-spacing: -.03em;
	margin-bottom: var(--ntp-s-md);
}

.ntp-hero-lead {
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
	margin-bottom: var(--ntp-s-lg);
	max-width: 34em;
}

.ntp-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ntp-s-md);
	margin-bottom: var(--ntp-s-lg);
}

.ntp-hero-link {
	color: var(--ntp-orange);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
}

.ntp-hero-link:hover { color: var(--ntp-orange-light); }

/* Kleine notitie met accentstreep, onder de knoppen. */
.ntp-hero-note {
	border-left: 3px solid var(--ntp-orange);
	padding-left: var(--ntp-s-sm);
	font-size: .9rem;
	color: rgba(255, 255, 255, .65);
	margin: 0;
}

.ntp-hero-note strong { color: var(--ntp-white); font-weight: 700; }

.ntp-hero-cta {
	color: rgba(255, 255, 255, .6);
	font-size: .95rem;
}

/* ── De poll-kaart in de hero ─────────────────────────── */
.ntp-hero-poll .ntp-poll-card {
	margin: 0;
	text-align: left;
	box-shadow: 0 18px 45px rgba(6, 28, 49, .35);
}

/* Op mobiel eerst de vraag, daarna pas de uitleg. */
@media (max-width: 899px) {
	.ntp-hero-grid { text-align: left; }
	.ntp-hero-text { order: 2; }
	.ntp-hero-poll { order: 1; }
}

/* ════════════════════════════════════════════════════════
   KNOPPEN
   ════════════════════════════════════════════════════════ */
.ntp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	/* 1px extra ruimte bovenin: het lettertype laat onder de baseline meer
	   ruimte over, waardoor de tekst anders optisch te hoog in de knop staat. */
	padding: .5rem 1rem;
	border-radius: var(--ntp-radius-lg);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.15;
	border: 2px solid transparent;
	transition: background .2s, color .2s, border-color .2s, transform .1s;
	cursor: pointer;
	text-decoration: none !important;
	white-space: nowrap;
}

.ntp-btn:active { transform: scale(.97); }

.ntp-btn--primary {
	background: var(--ntp-blue);
	color: var(--ntp-white);
	border-color: var(--ntp-blue);
}

.ntp-btn--primary:hover {
	background: var(--ntp-blue-light);
	border-color: var(--ntp-blue-light);
	color: var(--ntp-white);
}

.ntp-btn--primary:disabled {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

.ntp-btn--outline {
	background: transparent;
	color: var(--ntp-blue);
	border-color: var(--ntp-blue);
}

.ntp-btn--outline:hover {
	background: var(--ntp-blue);
	color: var(--ntp-white);
}

/* Header variant: compacte outline op lichte achtergrond */
.ntp-site-header .ntp-btn {
	padding: .35rem 1rem .35rem;
}

.ntp-site-header .ntp-btn--outline {
	color: var(--ntp-navy);
	border-color: var(--ntp-border);
	font-size: .82rem;
	padding: .35rem 1rem .35rem;
}

.ntp-site-header .ntp-btn--outline:hover {
	background: var(--ntp-teal);
	border-color: var(--ntp-teal);
	color: var(--ntp-white);
}

.ntp-btn--sm { padding: .28rem .8rem; font-size: .78rem; }

.ntp-btn--ghost {
	background: transparent;
	color: var(--ntp-navy);
	border-color: transparent;
	padding-left: .5rem;
	padding-right: .5rem;
}
.ntp-btn--ghost:hover { background: rgba(6,28,49,.07); }

/* Stemknop: oranje accent met witte tekst, zelfde compacte maat als de headerknop. */
.ntp-btn--vote,
.ntp-vote-submit-btn {
	background: var(--ntp-orange);
	border-color: var(--ntp-orange);
	color: var(--ntp-white);
}

.ntp-btn--vote:hover:not(:disabled),
.ntp-vote-submit-btn:hover:not(:disabled) {
	background: var(--ntp-orange-dark, #f09420);
	border-color: var(--ntp-orange-dark, #f09420);
	color: var(--ntp-white);
}

/* ════════════════════════════════════════════════════════
   SECTIES
   ════════════════════════════════════════════════════════ */
.ntp-poll-section {
	padding: var(--ntp-s-2xl) 0;
}

.ntp-poll-container {
	max-width: 640px;
}

.ntp-section-title {
	font-size: 1.3rem;
	margin-bottom: var(--ntp-s-lg);
}

.ntp-archive-section {
	padding: var(--ntp-s-3xl) 0;
}

.ntp-archive-preview {
	background: var(--ntp-off-white);
	padding: var(--ntp-s-3xl) 0;
}

.ntp-archive-preview__more {
	text-align: center;
	margin-top: var(--ntp-s-xl);
	margin-bottom: 0;
	padding-bottom: 0;
}

.ntp-about-section {
	background: var(--ntp-surface);
	padding: var(--ntp-s-3xl) 0;
}

/* Op mobiel staat de afbeelding boven de tekst, vanaf tablet ernaast. */
.ntp-about-inner {
	display: grid;
	gap: var(--ntp-s-lg);
	max-width: var(--ntp-container-wide);
	align-items: start;
}

.ntp-about-media {
	margin: 0;
	border-radius: var(--ntp-radius-lg, 14px);
	overflow: hidden;
}

.ntp-about-media img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 800px) {
	.ntp-about-inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--ntp-s-3xl);
		align-items: center;
	}
}

/* ════════════════════════════════════════════════════════
   PAGINA HEADING
   ════════════════════════════════════════════════════════ */
.ntp-page-heading {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	margin: var(--ntp-s-xl) 0 var(--ntp-s-lg);
}

.ntp-archive-section .ntp-page-heading {
	margin-top: 0;
}

/* ════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════ */
.ntp-site-footer {
	background: var(--ntp-navy);
	color: rgba(255, 255, 255, .85);
	padding: var(--ntp-s-3xl) 0 0;
	margin-top: 0;
}

/* Kolommen: merk met uitleg, navigatie en juridisch. */
.ntp-footer-inner {
	max-width: var(--ntp-container-wide);
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--ntp-s-xl);
	align-items: start;
	padding-bottom: var(--ntp-s-2xl);
}

.ntp-footer-logo {
	display: inline-block;
	margin-bottom: var(--ntp-s-md);
}

.ntp-footer-logo img {
	display: block;
	width: 194px;
	height: auto;
}

.ntp-footer-about {
	font-size: .9rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .85);
	max-width: 42ch;
	margin: 0;
}

.ntp-footer-heading {
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ntp-white);
	margin: 0 0 var(--ntp-s-md);
}

.ntp-footer-list {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ntp-footer-list a {
	color: rgba(255, 255, 255, .85);
	font-size: .9rem;
	text-decoration: none;
	transition: color .15s;
}

.ntp-footer-list a:hover,
.ntp-footer-list a:focus-visible { color: var(--ntp-orange); }

/* Social kanalen onder de uitlegtekst. */
/* Socials onder elkaar: icoon met de naam ernaast. */
.ntp-footer-social a {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
}

.ntp-social-icon {
	flex-shrink: 0;
	opacity: .9;
}

.ntp-social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: var(--ntp-white);
	transition: background .15s, color .15s;
}

.ntp-social-btn:hover,
.ntp-social-btn:focus-visible {
	background: var(--ntp-orange);
	color: var(--ntp-navy);
}

.ntp-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .15);
	padding: var(--ntp-s-md) 0;
}

.ntp-footer-bottom p {
	font-size: .8rem;
	color: rgba(255, 255, 255, .6);
	margin: 0;
	text-align: center;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
/* Onder 900px verhuizen navigatie, taalkeuze en account naar het offcanvas. */
@media (max-width: 899px) {
	.ntp-primary-nav,
	.ntp-lang-switcher,
	.ntp-header-actions > .ntp-btn { display: none; }

	.ntp-mobile-menu-btn,
	.ntp-lang-dropdown { display: flex; }
}

@media (min-width: 900px) {
	.ntp-offcanvas { display: none; }
}

@media (max-width: 900px) {
	.ntp-footer-inner { grid-template-columns: 1fr 1fr; }

	.ntp-footer-col--brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
	.ntp-footer-inner {
		grid-template-columns: 1fr;
		gap: var(--ntp-s-lg);
	}

	.ntp-hero,
	.ntp-archive-section,
	.ntp-archive-preview,
	.ntp-about-section { padding: var(--ntp-s-2xl) 0 var(--ntp-s-2xl); }

	.ntp-site-footer { padding: var(--ntp-s-2xl) 0 0; }
}

@media (max-width: 480px) {
	/* Minder zijdelingse ruimte op smalle schermen. */
	.ntp-container {
		padding-left: var(--ntp-s-md);
		padding-right: var(--ntp-s-md);
	}

	/* Auth-formulier: minder marge bovenaan op kleine schermen. */
	.ntp-auth-wrap {
		margin-top: var(--ntp-s-2xl);
		margin-bottom: var(--ntp-s-2xl);
	}

	/* Profielpagina: avatar en naam stapelen verticaal op kleine schermen. */
	.ntp-profile__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ntp-s-md);
	}

	/* Reactieformulier: "ingelogd als" en knop stapelen verticaal. */
	.ntp-comment-form__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ntp-s-sm);
	}

	/* Subcomment minder ver ingesprongen op smalle schermen. */
	.ntp-comment-item--reply {
		margin-left: -1.25rem;
	}

	/* Paginatitel wat kleiner op heel kleine schermen. */
	.ntp-page-heading {
		font-size: 1.4rem;
	}
}

/* ─── Milestone B: auth-formulieren ──────────────────────────────────────── */

.ntp-auth-wrap {
	max-width: 440px;
	margin: var(--ntp-s-3xl) auto;
	padding: 0 var(--ntp-s-md);
}

.ntp-auth-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--ntp-navy);
	margin-bottom: var(--ntp-s-xl);
	text-align: center;
}

.ntp-auth-intro {
	color: var(--ntp-text);
	margin-bottom: var(--ntp-s-lg);
}

.ntp-auth-notice {
	padding: .85rem 1.1rem;
	border-radius: 6px;
	margin-bottom: var(--ntp-s-lg);
	font-size: .95rem;
	font-weight: 500;
}

.ntp-auth-notice--success {
	background: #e8f7f0;
	color: #1a6644;
	border: 1px solid #b6e3cc;
}

.ntp-auth-notice--error {
	background: #fdecea;
	color: #8b1a1a;
	border: 1px solid #f5c6c6;
}

.ntp-auth-form { display: flex; flex-direction: column; gap: var(--ntp-s-md); }

.ntp-auth-switch {
	text-align: center;
	font-size: .92rem;
	color: var(--ntp-text);
	margin-top: var(--ntp-s-lg);
}

.ntp-auth-switch a {
	color: var(--ntp-teal);
	font-weight: 600;
	text-decoration: none;
}

.ntp-auth-switch a:hover { text-decoration: underline; }

.ntp-form-field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.ntp-form-field label {
	font-size: .9rem;
	font-weight: 600;
	color: var(--ntp-navy);
}

.ntp-form-field input,
.ntp-form-field select,
.ntp-form-field textarea {
	width: 100%;
	padding: .65rem .9rem;
	border: 1.5px solid #c8d3dc;
	border-radius: 6px;
	font-size: 1rem;
	color: var(--ntp-text);
	background: #fff;
	transition: border-color .18s;
	box-sizing: border-box;
}

.ntp-form-field input:focus,
.ntp-form-field select:focus,
.ntp-form-field textarea:focus {
	outline: 2px solid var(--ntp-teal);
	outline-offset: 2px;
	border-color: var(--ntp-teal);
	box-shadow: 0 0 0 3px rgba(0,181,190,.15);
}

.ntp-form-field textarea { resize: vertical; min-height: 80px; }

.ntp-form-field--toggle {
	flex-direction: row;
	align-items: center;
	gap: .75rem;
	font-size: .9rem;
	color: var(--ntp-text-muted);
}

.ntp-form-hint {
	font-size: .8rem;
	color: #6b7a87;
}

.ntp-btn--full { width: 100%; text-align: center; }

/* ─── Profielpagina ──────────────────────────────────────────────────────── */

.ntp-profile {
	width: 100%;
	max-width: var(--ntp-container-wide);
	margin: var(--ntp-s-3xl) auto;
	padding: 0 var(--ntp-s-lg);
}

.ntp-profile__head {
	display: flex;
	align-items: flex-start;
	gap: var(--ntp-s-xl);
}

.ntp-profile__avatar {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--ntp-teal);
	color: #fff;
	font-size: 1.75rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ntp-profile__name {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ntp-navy);
	margin: 0 0 .3rem;
}

.ntp-profile__meta {
	flex: 1;
	min-width: 0;
}

.ntp-profile__wijk,
.ntp-profile__since,
.ntp-profile__count {
	font-size: .92rem;
	color: #5a6b78;
	margin: .25rem 0 0;
}

.ntp-profile__streak {
	font-size: .92rem;
	color: #5a6b78;
	margin: .5rem 0 0;
}

.ntp-profile__streak-best {
	font-size: .8rem;
	opacity: .7;
}

.ntp-profile__badges {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .75rem;
}

.ntp-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .78rem;
	font-weight: 600;
	color: var(--ntp-navy);
	background: #e8f7f8;
	border: 1px solid #b2e4e7;
	border-radius: 999px;
	padding: .2rem .65rem;
	white-space: nowrap;
}

.ntp-profile__unverified {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: var(--ntp-s-sm) 0 0;
	padding: .4rem .75rem;
	background: #fff8e1;
	border: 1px solid #ffe082;
	border-radius: var(--ntp-radius-sm);
	font-size: .85rem;
	color: #7a5c00;
}

.ntp-profile__visibility-form {
	margin-top: var(--ntp-s-xl);
	padding-top: var(--ntp-s-lg);
	border-top: 1px solid var(--ntp-border);
}

.ntp-setting-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ntp-s-lg);
}

.ntp-setting-row__info {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.ntp-setting-row__label {
	font-size: .95rem;
	font-weight: 600;
	color: var(--ntp-navy);
}

.ntp-setting-row__sub {
	font-size: .82rem;
	color: var(--ntp-text-muted);
}

.ntp-profile__actions {
	margin-top: var(--ntp-s-md);
	padding-top: var(--ntp-s-lg);
	border-top: 1px solid var(--ntp-border);
	display: flex;
	align-items: center;
	gap: var(--ntp-s-md);
	flex-wrap: wrap;
}

.ntp-link-btn {
	background: none;
	border: none;
	padding: 0;
	font-size: .85rem;
	color: var(--ntp-text-muted);
	cursor: pointer;
	text-decoration: underline;
}

.ntp-link-btn:hover {
	color: var(--ntp-error);
}

.ntp-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.ntp-modal[hidden] { display: none; }

.ntp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}

.ntp-modal__box {
	position: relative;
	background: #fff;
	border-radius: 12px;
	padding: 2rem;
	max-width: 420px;
	width: 100%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
}

.ntp-modal__text {
	font-size: .95rem;
	color: var(--ntp-error);
	margin: 0 0 1.5rem;
	line-height: 1.5;
}

.ntp-modal__actions {
	display: flex;
	gap: .75rem;
	justify-content: flex-start;
	align-items: center;
}

.ntp-delete-account-confirm p {
	font-size: .9rem;
	color: var(--ntp-error);
	margin: 0;
}

.ntp-btn--danger {
	background: var(--ntp-error);
	color: #fff;
	border-color: var(--ntp-error);
}

.ntp-btn--danger:hover {
	background: #b91c1c;
	border-color: #b91c1c;
}

/* ─── Reacties ───────────────────────────────────────────────────────────── */

.ntp-comments {
	background: var(--ntp-off-white);
	padding: var(--ntp-s-3xl) 0;
}

@media (max-width: 768px) {
	.ntp-comments { padding: var(--ntp-s-2xl) 0 var(--ntp-s-2xl); }
}

.ntp-comments__inner {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ntp-s-lg);
	padding-right: var(--ntp-s-lg);
}

@media (max-width: 480px) {
	.ntp-comments__inner {
		padding-left: var(--ntp-s-md);
		padding-right: var(--ntp-s-md);
	}
}

.ntp-comments__lead {
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ntp-teal);
	margin: 0 0 .35rem;
}

.ntp-comments__title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--ntp-navy);
	margin: 0 0 var(--ntp-s-lg);
	line-height: 1.3;
}

.ntp-comments__list-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ntp-navy);
	margin: var(--ntp-s-lg) 0 var(--ntp-s-sm);
	display: flex;
	align-items: center;
	gap: .5rem;
}

.ntp-comments__count {
	background: var(--ntp-teal);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	border-radius: 999px;
	padding: .1em .55em;
	line-height: 1.5;
}

.ntp-comments__gate {
}

div.ntp-comments__gate {
	background: #f9fbfc;
	border: 1px solid #dde5ec;
	border-radius: 10px;
	overflow: hidden;
	padding: 1rem 1.25rem;
}

.ntp-comments__gate p {
	margin: 0 0 .75rem;
	color: var(--ntp-text);
}

.ntp-comments__gate-actions {
	display: flex;
	gap: var(--ntp-s-sm);
	flex-wrap: wrap;
}

.ntp-comments__gate-actions .ntp-btn--outline {
	color: var(--ntp-navy);
	border-color: var(--ntp-border);
}

.ntp-comments__gate-actions .ntp-btn--outline:hover {
	background: var(--ntp-teal);
	border-color: var(--ntp-teal);
	color: var(--ntp-white);
}

.ntp-comments__gate {
	color: var(--ntp-text);
	font-size: .95rem;
	margin-bottom: 0;
}

.ntp-comment-form {
	background: #f9fbfc;
	border: 1px solid #dde5ec;
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin-bottom: var(--ntp-s-xl);
}

.ntp-comment-form textarea {
	width: 100%;
	border: 1.5px solid #c8d3dc;
	border-radius: 6px;
	padding: .6rem .85rem;
	font-size: .95rem;
	color: var(--ntp-text);
	resize: vertical;
	min-height: 70px;
	box-sizing: border-box;
	font-family: inherit;
}

.ntp-comment-form textarea:focus {
	outline: 2px solid var(--ntp-teal);
	outline-offset: 2px;
	border-color: var(--ntp-teal);
	box-shadow: 0 0 0 3px rgba(0,181,190,.15);
}

.ntp-comment-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: .6rem;
	gap: .5rem;
}

.ntp-comment-form__as {
	font-size: .85rem;
	color: #6b7a87;
}

.ntp-comment-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: #f9fbfc;
	border: 1px solid #dde5ec;
	border-radius: 10px;
	overflow: hidden;
}

.ntp-comment-list__loading {
	display: flex;
	justify-content: center;
	padding: 2rem 1.25rem;
}

.ntp-comment-list__empty {
	padding: 1rem 1.25rem;
	font-size: .95rem;
	color: var(--ntp-text);
}

.ntp-comment-item {
	display: flex;
	gap: .85rem;
	padding: 1rem 1.25rem;
	position: relative;
}

.ntp-comment-item:not(.ntp-comment-item--reply) {
	border-top: 1px solid #dde5ec;
}

.ntp-comment-item:not(.ntp-comment-item--reply):first-child {
	border-top: none;
}

/* Verticale draadlijn: loopt van onder de parent avatar naar de hoogte van de subcomment avatar.
   bottom wordt via JS ingesteld via --ntp-thread-bottom zodat de lijn stopt bij de horizontale connector. */
.ntp-comment-item:not(.ntp-comment-item--reply):has(.ntp-comment-replies .ntp-comment-item--reply)::after {
	content: '';
	position: absolute;
	left: calc(1.25rem + 18px - 1px);
	top: calc(1rem + 36px);
	bottom: var(--ntp-thread-bottom, calc(1rem + .75rem + 18px));
	width: 2px;
	background: #dde5ec;
	pointer-events: none;
}

.ntp-comment-item--reply {
	margin-left: 0;
	padding-top: .75rem;
	position: relative;
}

/* Horizontale connector: loopt van de verticale lijn (parent avatar center) naar de subcomment avatar. */
.ntp-comment-item--reply::before {
	content: '';
	position: absolute;
	left: calc(-18px - 0.85rem);
	top: calc(.75rem + 18px - 1px);
	width: calc(18px + 0.85rem + 1.25rem);
	height: 2px;
	background: #dde5ec;
	pointer-events: none;
}

.ntp-comment-avatar {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ntp-navy);
	color: #fff;
	font-size: .9rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ntp-comment-body { flex: 1; min-width: 0; }

.ntp-comment-header {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin-bottom: .3rem;
}

.ntp-comment-author {
	font-weight: 700;
	font-size: .9rem;
	color: var(--ntp-navy);
	text-decoration: none;
}


.ntp-comment-time {
	font-size: .8rem;
	color: #8a9aaa;
}

.ntp-comment-content {
	font-size: .95rem;
	color: var(--ntp-text);
	line-height: 1.55;
	margin: 0 0 .5rem;
	word-break: break-word;
}

.ntp-comment-actions {
	display: flex;
	gap: .85rem;
	align-items: center;
}

.ntp-comment-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: .82rem;
	color: #8a9aaa;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	transition: color .18s;
}

.ntp-comment-btn:hover { color: var(--ntp-teal); }

.ntp-comment-btn--liked { color: var(--ntp-teal); font-weight: 600; }

.ntp-comment-replies {
	margin-top: var(--ntp-s-md);
	display: flex;
	flex-direction: column;
	gap: var(--ntp-s-sm);
}

.ntp-reply-form-wrap {
	margin-top: var(--ntp-s-sm);
	padding: .7rem .9rem;
	background: #f0f5f8;
	border-radius: 8px;
}

.ntp-reply-form-wrap textarea {
	width: 100%;
	border: 1.5px solid #c8d3dc;
	border-radius: 6px;
	padding: .5rem .75rem;
	font-size: .9rem;
	resize: vertical;
	min-height: 60px;
	box-sizing: border-box;
	font-family: inherit;
}

.ntp-reply-form-wrap textarea:focus {
	outline: 2px solid var(--ntp-teal);
	outline-offset: 2px;
	border-color: var(--ntp-teal);
}

.ntp-reply-form__footer {
	display: flex;
	justify-content: flex-end;
	margin-top: .4rem;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ── Cookie-consent ─────────────────────────────────────────────────────── */

/* Balk */
#ntp-cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9000;
	background: var(--ntp-surface);
	border-top: 1.5px solid var(--ntp-border);
	box-shadow: 0 -4px 24px rgba(6,28,49,.1);
	padding: 1.25rem 1.5rem;
	transition: transform .3s ease, opacity .3s ease;
}
#ntp-cookie-banner[aria-hidden="true"]  { transform: translateY(110%); opacity: 0; pointer-events: none; }
#ntp-cookie-banner[aria-hidden="false"] { transform: translateY(0);    opacity: 1; }

.ntp-cookie-inner {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}
.ntp-cookie-text { flex: 1; min-width: 220px; }
.ntp-cookie-text strong {
	display: block;
	font-weight: 700;
	margin-bottom: .3rem;
	color: var(--ntp-navy);
	font-size: .95rem;
}
.ntp-cookie-text p {
	font-size: .875rem;
	color: var(--ntp-text-muted);
	margin: 0;
	line-height: 1.5;
}
.ntp-cookie-text a {
	color: var(--ntp-teal);
	text-decoration: underline;
	margin-left: .2rem;
}
.ntp-cookie-actions {
	display: flex;
	gap: .625rem;
	flex-wrap: wrap;
	align-items: center;
}

/* Knoppen (cookie-specifiek, geen conflict met site-buttons) */
.ntp-cookie-btn-primary {
	background: var(--ntp-teal);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: .6rem 1.35rem;
	font-size: .875rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	transition: background .15s;
}
.ntp-cookie-btn-primary:hover { background: #009aa3; }
.ntp-cookie-btn-ghost {
	background: transparent;
	color: var(--ntp-navy);
	border: 1.5px solid var(--ntp-border);
	border-radius: 999px;
	padding: .575rem 1.125rem;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	transition: border-color .15s;
}
.ntp-cookie-btn-ghost:hover { border-color: var(--ntp-navy); }

/* Instellingen-overlay */
#ntp-cookie-settings {
	position: fixed;
	inset: 0;
	z-index: 9100;
	background: rgba(6,28,49,.45);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	transition: opacity .2s;
}
#ntp-cookie-settings[aria-hidden="true"]  { opacity: 0; pointer-events: none; }
#ntp-cookie-settings[aria-hidden="false"] { opacity: 1; }

.ntp-cookie-settings-box {
	background: var(--ntp-surface);
	border-radius: var(--ntp-radius-lg);
	box-shadow: 0 16px 48px rgba(6,28,49,.2);
	width: 100%;
	max-width: 480px;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.ntp-cookie-settings-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ntp-cookie-settings-head h2 {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--ntp-navy);
	margin: 0;
}
.ntp-cookie-settings-close {
	background: none;
	border: none;
	padding: .25rem;
	cursor: pointer;
	color: var(--ntp-text-muted);
	line-height: 1;
	transition: color .15s;
}
.ntp-cookie-settings-close svg { width: 20px; height: 20px; display: block; }
.ntp-cookie-settings-close:hover { color: var(--ntp-navy); }
.ntp-cookie-settings-intro {
	font-size: .875rem;
	color: var(--ntp-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* Categorie-rijen (gedeeld met balk-modal) */
.ntp-cookie-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ntp-border);
	border-radius: var(--ntp-radius-sm);
	overflow: hidden;
}
.ntp-cookie-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .875rem 1rem;
	border-bottom: 1px solid var(--ntp-border);
}
.ntp-cookie-cat:last-child { border-bottom: none; }
.ntp-cookie-cat__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.ntp-cookie-cat__info strong {
	font-size: .9rem;
	font-weight: 700;
	color: var(--ntp-navy);
}
.ntp-cookie-cat__info span {
	font-size: .8rem;
	color: var(--ntp-text-muted);
	line-height: 1.45;
}
.ntp-cookie-cat__always {
	font-size: .8rem;
	font-weight: 700;
	color: var(--ntp-teal);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Toggle-schakelaar */
.ntp-cookie-toggle {
	display: flex;
	align-items: center;
	cursor: pointer;
	flex-shrink: 0;
}
.ntp-cookie-toggle input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.ntp-cookie-toggle__track {
	width: 44px;
	height: 24px;
	background: var(--ntp-border);
	border-radius: 999px;
	position: relative;
	transition: background .2s;
}
.ntp-cookie-toggle__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
	transition: transform .2s;
}
.ntp-cookie-toggle input:checked ~ .ntp-cookie-toggle__track { background: var(--ntp-teal); }
.ntp-cookie-toggle input:checked ~ .ntp-cookie-toggle__track .ntp-cookie-toggle__thumb { transform: translateX(20px); }

.ntp-cookie-toggle--xs .ntp-cookie-toggle__track { width: 30px; height: 16px; }
.ntp-cookie-toggle--xs .ntp-cookie-toggle__thumb { width: 10px; height: 10px; top: 3px; left: 3px; }
.ntp-cookie-toggle--xs input:checked ~ .ntp-cookie-toggle__track .ntp-cookie-toggle__thumb { transform: translateX(14px); }

.ntp-profile__stat-toggle {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font-size: .82rem;
	font-family: inherit;
	color: inherit;
}

.ntp-profile__stat-toggle > span {
	font-size: .82rem;
	font-weight: 400;
	color: #5a6b78;
}

.ntp-cookie-settings-footer {
	display: flex;
	justify-content: flex-end;
	gap: .625rem;
	padding-top: .5rem;
}

@media (max-width: 540px) {
	.ntp-cookie-inner  { gap: 1rem; }
	.ntp-cookie-actions { width: 100%; justify-content: flex-end; }
	.ntp-cookie-settings-box { padding: 1.5rem; }
}

/* ─── Profielpagina — hero / stats / tabs / cards ───────────────────────── */

.ntp-profile--public .ntp-profile__avatar,
.ntp-profile--own .ntp-profile__avatar {
	width: 96px;
	height: 96px;
	font-size: 2.25rem;
}

.ntp-profile__avatar-wrap {
	position: relative;
	flex-shrink: 0;
}

.ntp-profile__online-dot {
	position: absolute;
	bottom: 5px;
	right: 5px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #22c55e;
	border: 2.5px solid #fff;
}

.ntp-profile__hero {
	padding-bottom: .5rem;
	width: 100%;
}

@media (max-width: 640px) {
	.ntp-profile__hero { width: 100%; }
}

.ntp-profile__hero-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ntp-s-md);
}

.ntp-profile__hero-body {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	flex: 1;
	min-width: 0;
}

.ntp-profile__info {
	flex: 1;
	min-width: 0;
}

.ntp-profile__location {
	font-size: .88rem;
	color: #5a6b78;
	margin: .2rem 0 0;
}

.ntp-profile__sep {
	margin: 0 .4rem;
	color: #ccc;
}

.ntp-profile__bio {
	font-size: .9rem;
	color: #5a6b78;
	margin: .5rem 0 0;
	line-height: 1.5;
}

.ntp-profile__bio--empty {
	margin: .4rem 0 0;
}

.ntp-profile__bio-edit-btn {
	background: none;
	border: none;
	padding: 2px 4px;
	cursor: pointer;
	color: #9ca3af;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .82rem;
	border-radius: 4px;
	line-height: 1;
	margin-left: .15rem;
}

.ntp-profile__bio-edit-btn:hover {
	color: var(--ntp-teal);
	background: rgba(0,181,190,.08);
}

.ntp-profile__bio-edit-btn--add {
	color: #9ca3af;
	font-size: .85rem;
}

.ntp-profile__bio-inline {
	margin-top: .5rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.ntp-profile__bio-inline[hidden] { display: none !important; }

.ntp-profile__bio-inline-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ntp-profile__bio-inline-actions {
	display: flex;
	gap: .4rem;
}


.ntp-profile__msg-btn {
	flex-shrink: 0;
}

.ntp-profile__stats {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-top: .9rem;
	flex-wrap: wrap;
	padding-left: calc(96px + 1.25rem);
}

@media (max-width: 400px) {
	.ntp-profile__stats { padding-left: 0; }
}

.ntp-profile__stat {
	display: flex;
	align-items: baseline;
	gap: .3rem;
}

.ntp-profile__stat strong {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ntp-navy);
}

.ntp-profile__stat span {
	font-size: .82rem;
	color: #5a6b78;
}

.ntp-profile__stat-sep {
	color: #d1d5db;
	font-size: .85rem;
}

.ntp-share {
	position: relative;
	margin-left: auto;
}

.ntp-share__btn {
	background: none;
	border: none;
	padding: 0;
	font-size: .82rem;
	color: var(--ntp-teal);
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}

.ntp-share__btn:hover { text-decoration: underline; }

.ntp-share__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	background: #fff;
	border: 1px solid var(--ntp-border);
	border-radius: var(--ntp-radius);
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	min-width: 160px;
	z-index: 200;
	overflow: hidden;
}

.ntp-share__option {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .55rem 1rem;
	font-size: .88rem;
	color: var(--ntp-navy);
	text-decoration: none;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 1px solid #f3f4f6;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}

.ntp-share__option:last-child { border-bottom: none; }

.ntp-share__option:hover { background: #f9fafb; }

/* ─── Tabs ──────────────────────────────────────────────────────────────── */

.ntp-profile__tabs-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin-top: var(--ntp-s-lg);
}

.ntp-profile__tabs-wrap::-webkit-scrollbar { display: none; }

.ntp-profile__tabs {
	display: flex;
	align-items: center;
	gap: 0;
	min-width: max-content;
	width: 100%;
	position: relative;
}

.ntp-profile__tabs::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ntp-border);
	z-index: 0;
}

.ntp-profile__tab-action {
	margin-left: auto;
	padding: .65rem .4rem;
	font-size: .9rem;
	font-weight: 600;
	color: #9ca3af;
	text-decoration: none;
	white-space: nowrap;
}

.ntp-profile__tab-action:hover { color: var(--ntp-teal); }

.ntp-profile__tab-delete {
	margin-left: auto;
	background: none;
	border: none;
	padding: .65rem .4rem;
	font-size: .9rem;
	font-weight: 600;
	color: #9ca3af;
	position: relative;
	z-index: 1;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.ntp-profile__tab-delete:hover {
	color: #ef4444;
}

.ntp-profile__tab {
	background: none;
	border: none;
	padding: .65rem 1.1rem;
	font-size: .9rem;
	font-weight: 600;
	color: #5a6b78;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	transition: color .15s, box-shadow .15s;
}

.ntp-profile__tab:hover { color: var(--ntp-navy); }

.ntp-profile__tab.is-active {
	color: var(--ntp-teal);
	box-shadow: inset 0 -2px 0 var(--ntp-teal);
}

.ntp-profile__tab-content { display: none; }
.ntp-profile__tab-content.is-active { display: block; margin-top: 2.5rem; }

/* ─── Cards grid ────────────────────────────────────────────────────────── */

.ntp-profile__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 1.25rem;
}

@media (max-width: 768px) {
	.ntp-profile__cards { grid-template-columns: 1fr; }
}

.ntp-profile-card {
	background: var(--ntp-surface);
	border: 1px solid var(--ntp-border);
	border-radius: var(--ntp-radius);
	padding: var(--ntp-s-lg);
	display: flex;
	flex-direction: column;
	gap: .75rem;
	transition: box-shadow .2s;
}

.ntp-profile-card:hover {
	box-shadow: var(--ntp-shadow-md);
}

.ntp-profile-card__head { display: flex; flex-direction: column; gap: .15rem; }

.ntp-profile-card__title {
	font-size: .95rem;
	font-weight: 700;
	color: var(--ntp-navy);
}

.ntp-profile-card__sub {
	font-size: .78rem;
	color: #5a6b78;
}

.ntp-profile-card__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.ntp-profile-card__list li {
	font-size: .88rem;
	color: #374151;
}

.ntp-profile-card__link {
	background: none;
	border: none;
	padding: 0;
	font-size: .82rem;
	color: var(--ntp-teal);
	cursor: pointer;
	text-align: left;
	margin-top: auto;
}

.ntp-profile-card__link:hover { text-decoration: underline; }

.ntp-profile-card__stat-btn {
	background: none;
	border: none;
	padding: 0;
	font-size: .88rem;
	color: #374151;
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	font-family: inherit;
}

.ntp-profile-card__stat-btn:hover { text-decoration: underline; }

.ntp-profile-card__empty {
	font-size: .85rem;
	color: #9ca3af;
	margin: 0;
}

/* ─── Hex badges ────────────────────────────────────────────────────────── */

.ntp-profile-card__badges {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.ntp-hex-badge {
	cursor: default;
}

.ntp-hex-badge__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	text-align: center;
}

.ntp-hex-badge__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 56px;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	background: #e8f7f8;
	transition: transform .18s, filter .18s;
}

.ntp-hex-badge__icon svg {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
}

.ntp-hex-badge:hover .ntp-hex-badge__icon {
	transform: scale(1.1);
	filter: brightness(1.07);
}

/* Kleur per badge-type */
.ntp-hex-badge[data-badge="first_vote"]   .ntp-hex-badge__icon { background: linear-gradient(145deg, #fde68a, #f59e0b); }
.ntp-hex-badge[data-badge="streak_3"]     .ntp-hex-badge__icon { background: linear-gradient(145deg, #fca5a5, #ef4444); }
.ntp-hex-badge[data-badge="streak_7"]     .ntp-hex-badge__icon { background: linear-gradient(145deg, #93c5fd, #3b82f6); }
.ntp-hex-badge[data-badge="streak_30"]    .ntp-hex-badge__icon { background: linear-gradient(145deg, #c4b5fd, #7c3aed); }
.ntp-hex-badge[data-badge="commenter_1"]  .ntp-hex-badge__icon { background: linear-gradient(145deg, #6ee7b7, #059669); }
.ntp-hex-badge[data-badge="commenter_10"] .ntp-hex-badge__icon { background: linear-gradient(145deg, #5eead4, #0d9488); }

.ntp-hex-badge__label {
	font-size: .68rem;
	color: var(--ntp-navy);
	font-weight: 600;
	line-height: 1.2;
}

/* ─── Streak widget ─────────────────────────────────────────────────────── */

.ntp-streak {
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.ntp-streak__current {
	font-size: .88rem;
	color: #374151;
	margin: 0;
}

.ntp-streak__current strong {
	font-weight: 700;
	color: var(--ntp-navy);
}

.ntp-streak__week {
	display: flex;
	gap: .4rem;
	align-items: flex-start;
}

.ntp-streak__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	min-width: 0;
}

.ntp-streak__dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #e5e7eb;
	transition: background .2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ntp-streak__day.is-active .ntp-streak__dot {
	background: transparent;
}

.ntp-streak__dot span {
	font-size: 30px;
	line-height: 1;
	display: block;
}

.ntp-streak__dot img.emoji {
	height: 30px !important;
	width: 30px !important;
	margin: 0 !important;
	vertical-align: middle !important;
}

.ntp-streak__day.is-today .ntp-streak__dot {
	border-color: var(--ntp-navy);
}

.ntp-streak__day span {
	font-size: .68rem;
	font-weight: 700;
	color: #9ca3af;
}

.ntp-streak__day.is-active span { color: var(--ntp-teal); }

.ntp-streak__encourage {
	font-size: .78rem;
	color: #9ca3af;
	margin: 0;
	font-style: italic;
}

/* ─── Reacties tab ──────────────────────────────────────────────────────── */

.ntp-profile__reaction-list {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

@media (max-width: 860px) {
	.ntp-profile__reaction-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
	.ntp-profile__reaction-list { grid-template-columns: 1fr; }
}

/* ─── Reactie-kaart ─────────────────────────────────────────────────────── */

.ntp-reaction-card {
	background: var(--ntp-surface);
	border: 1px solid var(--ntp-border);
	border-radius: var(--ntp-radius);
	padding: var(--ntp-s-lg);
	display: flex;
	flex-direction: column;
	gap: .65rem;
	transition: box-shadow .2s;
}

.ntp-reaction-card:hover { box-shadow: var(--ntp-shadow-md); }

.ntp-reaction-card__question {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ntp-reaction-card__q-title {
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--ntp-navy);
	line-height: 1.4;
	margin: var(--ntp-s-xs) 0 0;
}

.ntp-reaction-card__question:hover .ntp-reaction-card__q-title {
	text-decoration: underline;
}

/* Tekstballon (directe reactie op vraag) */
.ntp-reaction-card__bubble {
	position: relative;
	background: #edf7f8;
	border: 1px solid #c9e8eb;
	border-radius: 0 var(--ntp-radius-sm) var(--ntp-radius-sm) var(--ntp-radius-sm);
	padding: .75rem 1rem;
	font-size: .88rem;
	color: var(--ntp-text);
	line-height: 1.5;
}

/* Pijl omhoog naar de vraagtitel */
.ntp-reaction-card__bubble::before {
	content: '';
	position: absolute;
	top: -20px;
	left: 12px;
	border: 10px solid transparent;
	border-bottom-color: #c9e8eb;
}

.ntp-reaction-card__bubble::after {
	content: '';
	position: absolute;
	top: -17px;
	left: 13px;
	border: 9px solid transparent;
	border-bottom-color: #edf7f8;
}

/* Thread-structuur: bovenliggende reactie + eigen reply met lijnen */
.ntp-reaction-card__thread {
	position: relative;
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

/* Verticale lijn links */
.ntp-reaction-card__thread::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 22px;
	width: 2px;
	background: var(--ntp-border);
	border-radius: 1px;
}

.ntp-reaction-card__parent-text {
	margin: 0;
	font-size: .82rem;
	color: var(--ntp-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Reply-ballon: horizontale lijn vanuit de verticale lijn */
.ntp-reaction-card__bubble--reply {
	border-radius: var(--ntp-radius-sm);
	background: #edf7f8;
	border: 1px solid #c9e8eb;
	position: relative;
}

.ntp-reaction-card__bubble--reply::before {
	content: '';
	position: absolute;
	left: -18px;
	top: 50%;
	width: 14px;
	height: 2px;
	background: var(--ntp-border);
	border: none;
}

.ntp-reaction-card__bubble--reply::after { display: none; }

.ntp-reaction-card__date {
	font-size: .75rem;
	color: #9ca3af;
}

.ntp-profile__empty {
	margin: 1.5rem 0;
	font-size: .9rem;
	color: #9ca3af;
}

/* ─── Succesmelding na opslaan ─────────────────────────────────────────── */

@keyframes ntpNoticeFade {
	0%   { opacity: 1; }
	60%  { opacity: 1; }
	100% { opacity: 0; }
}

.ntp-saved-notice-wrap {
	height: 22px;
	display: flex;
	align-items: center;
	padding-left: calc(96px + 1.25rem);
}

@media (max-width: 400px) {
	.ntp-saved-notice-wrap { padding-left: 0; }
}

.ntp-saved-notice {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .25rem .65rem;
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: var(--ntp-radius-sm);
	font-size: .78rem;
	font-weight: 600;
	color: #166534;
	animation: ntpNoticeFade 1.8s ease forwards;
}

/* ─── Bio-sectie (instellingen-tab) ────────────────────────────────────── */

.ntp-profile__bio-form {
	margin-top: var(--ntp-s-xl);
	padding-top: var(--ntp-s-lg);
	border-top: 1px solid var(--ntp-border);
}

.ntp-profile__bio-label {
	display: block;
	font-size: .88rem;
	font-weight: 600;
	color: var(--ntp-navy);
	margin-bottom: .4rem;
}

.ntp-profile__bio-field {
	width: 100%;
	padding: .6rem .75rem;
	border: 1px solid var(--ntp-border);
	border-radius: var(--ntp-radius-sm);
	font-size: .88rem;
	font-family: inherit;
	resize: vertical;
	line-height: 1.5;
	color: var(--ntp-navy);
	background: #fff;
}

.ntp-profile__bio-field:focus {
	outline: none;
	border-color: var(--ntp-teal);
	box-shadow: 0 0 0 3px rgba(0,181,190,.12);
}

.ntp-profile__bio-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: .5rem;
}

.ntp-profile__bio-count {
	font-size: .75rem;
	color: #9ca3af;
}

/* ─── Mijn mening tab ───────────────────────────────────────────────────── */

.ntp-opinion-list {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

@media (max-width: 860px) {
	.ntp-opinion-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
	.ntp-opinion-list { grid-template-columns: 1fr; }
}

.ntp-opinion-card {
	background: var(--ntp-surface);
	border: 1px solid var(--ntp-border);
	border-radius: var(--ntp-radius);
	padding: var(--ntp-s-lg);
	display: flex;
	flex-direction: column;
	gap: .75rem;
	transition: box-shadow .2s;
}

.ntp-opinion-card:hover { box-shadow: var(--ntp-shadow-md); }

.ntp-opinion-card__question {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ntp-opinion-card__q-title {
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--ntp-navy);
	line-height: 1.4;
	margin: var(--ntp-s-xs) 0 0;
}

.ntp-opinion-card__question:hover .ntp-opinion-card__q-title {
	text-decoration: underline;
}

.ntp-opinion-card__results {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.ntp-opinion-card__answer {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.ntp-opinion-card__bar-wrap {
	height: 6px;
	background: #e5e7eb;
	border-radius: 3px;
	overflow: hidden;
}

.ntp-opinion-card__bar {
	height: 100%;
	background: #b8c5cc;
	border-radius: 3px;
	transition: width .4s ease;
}

.ntp-opinion-card__answer.is-voted .ntp-opinion-card__bar {
	background: var(--ntp-orange);
}

.ntp-opinion-card__answer-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .5rem;
}

.ntp-opinion-card__answer-text {
	font-size: .82rem;
	font-weight: 500;
	color: var(--ntp-text);
	flex: 1;
}

.ntp-opinion-card__answer.is-voted .ntp-opinion-card__answer-text {
	font-weight: 700;
	color: var(--ntp-orange);
}

.ntp-opinion-card__answer-pct {
	font-size: .78rem;
	font-weight: 700;
	color: var(--ntp-text-muted);
	flex-shrink: 0;
}

.ntp-opinion-card__answer.is-voted .ntp-opinion-card__answer-pct {
	color: var(--ntp-orange);
}

.ntp-opinion-card__date {
	font-size: .75rem;
	color: #9ca3af;
	margin-top: auto;
}