/* ── Niche Radar — main.css ─────────────────────────────────────────────────── */

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

/* ── Mobile padding ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.wp-site-blocks,
	.wp-block-group.is-layout-constrained > *,
	.is-layout-constrained > * {
		padding-left: 3px !important;
		padding-right: 3px !important;
	}

	/* Hoofd content padding */
	main.wp-block-group {
		padding-left: 3px !important;
		padding-right: 3px !important;
	}

	/* Header padding mobile — logo mag niet tegen rand zitten */
	.site-header .wp-block-group {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* ── Mobile menu overlay fix ─────────────────────────────────────────────────── */

/* Zorg dat mobile nav overlay boven alles staat */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 999 !important;
	padding: 16px !important;
}

/* Post niet onder open menu */
.wp-block-navigation__responsive-container.is-menu-open ~ * {
	visibility: hidden;
}

/* Menu hamburger en sluitknop */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	padding: 8px !important;
}

/* Vetter sluitkruis */
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
	stroke-width: 3px !important;
	width: 28px !important;
	height: 28px !important;
	stroke: #000 !important;
}

.wp-block-navigation__responsive-container-close {
	font-size: 28px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
}

/* Mobile menu volledig scherm — content eronder verbergen */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 9999 !important;
	background: #fff !important;
	overflow-y: auto !important;
	padding: 16px !important;
}

/* Verberg body scroll als menu open */
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
	overflow: hidden !important;
}

/* Mobile menu padding */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	padding: 20px 16px !important;
}


/* ── Header ──────────────────────────────────────────────────────────────────── */

:root {
	--header-height: 72px;
}

/* Header fixed — WordPress admin-bar bewust mee-optellen via CSS var */
.site-header {
	position: fixed !important;
	top: var(--wp-admin--admin-bar--height, 0px) !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 200 !important;
	background: rgba(255,255,255,0.97) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 rgba(0,0,0,0.08);
	transition: background 0.4s ease, box-shadow 0.4s ease;
	min-height: var(--header-height);
}

/* Alle pagina's: content niet achter header + admin-bar */
body {
	padding-top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px)) !important;
	background-color: #f3f4f7 !important;
}

/* Hero-pagina's: geen padding-top */
body:has(.nr-hero) {
	padding-top: 0 !important;
}

/* Verwijder WordPress block-gap boven de hero */
body:has(.nr-hero) .wp-site-blocks,
body:has(.nr-hero) .wp-site-blocks > *:first-child + * {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body:has(.nr-hero) .nr-hero {
	margin-top: 0 !important;
}

/* ── Transparante staat boven hero ─────────────────────────────────────────── */

body:has(.nr-hero) .site-header:not(.is-scrolled) {
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,0.52) 0%,
		rgba(0,0,0,0.12) 75%,
		transparent 100%
	) !important;
	background-color: transparent !important;
	border-bottom: none !important;
	border-bottom-width: 0 !important;
	border-bottom-color: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Top-level nav links: wit */
body:has(.nr-hero) .site-header:not(.is-scrolled)
> * .wp-block-navigation > ul > li > a,
body:has(.nr-hero) .site-header:not(.is-scrolled)
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: #fff !important;
}

/* Submenu-pijl wit */
body:has(.nr-hero) .site-header:not(.is-scrolled) .wp-block-navigation__submenu-icon svg {
	stroke: #fff !important;
}

/* Zoek- en hamburger-icoon wit */
body:has(.nr-hero) .site-header:not(.is-scrolled) .wp-block-navigation-item button svg,
body:has(.nr-hero) .site-header:not(.is-scrolled) .wp-block-navigation__responsive-container-open svg {
	stroke: #fff !important;
}

/* Zoekknop (nr-search-toggle) wit boven hero */
body:has(.nr-hero) .site-header:not(.is-scrolled) .nr-search-toggle,
body:has(.nr-hero) .site-header:not(.is-scrolled) .nr-search-toggle svg {
	color: #fff !important;
	stroke: #fff !important;
}

/* ── Mobile overlay: altijd donkere tekst, ongeacht hero/scroll staat ────────── */
/* Basis regel */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	color: #111827 !important;
	stroke: #111827 !important;
}
/* Extra specificiteit voor hero-pagina's (0,6,1 = gelijk aan hero-regel, later → wint):
   .site-header:not(.is-scrolled) meenemen zodat specificiteit matcht */
body:has(.nr-hero) .site-header:not(.is-scrolled) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
body:has(.nr-hero) .site-header:not(.is-scrolled) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content a,
body:has(.nr-hero) .site-header:not(.is-scrolled) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	color: #111827 !important;
	stroke: #111827 !important;
}

/* ── Submenu dropdown — altijd wit met donkere tekst ────────────────────────── */

.wp-block-navigation__submenu-container {
	background: #fff !important;
	box-shadow: 0 12px 40px rgba(0,0,0,0.16) !important;
	border-top: 2px solid var(--wp--preset--color--primary) !important;
	min-width: 200px !important;
}

/* Submenu items: zwarte tekst — overschrijft de witte nav-regel */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #111827 !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item:hover
.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary) !important;
}

/* ── Gescrold: wit ──────────────────────────────────────────────────────────── */

.site-header.is-scrolled {
	background: rgba(255,255,255,0.97) !important;
	box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
}

/* ── Tekst-logo ───────────────────────────────────────────────────────────── */

.nr-text-logo {
	display: inline-flex;
	flex-direction: column;
	text-decoration: none;
	line-height: 1;
	flex-shrink: 0;
	gap: 3px;
}

.nr-text-logo__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.nr-text-logo__padel { color: #8a8f9a; }
.nr-text-logo__radar { color: #e8834a; }
.nr-text-logo__tld   { color: #8a8f9a; font-size: 1rem; font-weight: 700; }

.nr-text-logo__tagline {
	font-size: 0.58rem;
	font-weight: 500;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: #a0a4ad;
	padding-left: 2px;
}

/* Kleuren aanpassen in transparante header (donkere hero) */
body:has(.nr-hero) .site-header:not(.is-scrolled) .nr-text-logo__padel { color: #c8ccd4; }
body:has(.nr-hero) .site-header:not(.is-scrolled) .nr-text-logo__radar { color: #f4a06e; }
body:has(.nr-hero) .site-header:not(.is-scrolled) .nr-text-logo__tld   { color: #c8ccd4; }
body:has(.nr-hero) .site-header:not(.is-scrolled) .nr-text-logo__tagline { color: #9ea3ac; }

/* ── Navigatie ───────────────────────────────────────────────────────────────── */

.site-header .wp-block-navigation__container {
	flex-wrap: nowrap !important;
}

.site-header .wp-block-navigation-item__content {
	white-space: nowrap;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	transition: color 0.2s ease;
}

/* Placeholder kaart stijl */
.nr-card__image-placeholder {
	background: linear-gradient(135deg, #f0f4ff 0%, #e8edf5 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--border);
	font-size: 2rem;
}

.nr-card__image-placeholder::after {
	content: '📷';
	opacity: 0.3;
}

/* ── Filter bar ──────────────────────────────────────────────────────────────── */

.nr-filter-bar {
	margin-bottom: var(--wp--preset--spacing--lg);
}

.nr-filter-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nr-filter-btn {
	padding: 7px 16px;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.18s ease;
	white-space: nowrap;
}

.nr-filter-btn:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.nr-filter-btn.active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

/* ── Grid ────────────────────────────────────────────────────────────────────── */

.nr-grid {
	display: grid;
	gap: var(--wp--preset--spacing--md);
}

.nr-grid--3col {
	grid-template-columns: repeat(3, 1fr);
}

.nr-grid--2col {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
	.nr-grid--3col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.nr-grid--3col,
	.nr-grid--2col { grid-template-columns: 1fr; }
}

/* ── Card ────────────────────────────────────────────────────────────────────── */

.nr-card {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}

.nr-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.nr-card__image-link {
	display: block;
	overflow: hidden;
	aspect-ratio: 16/9;
}

.nr-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.nr-card:hover .nr-card__image {
	transform: scale(1.04);
}

.nr-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--surface);
}

.nr-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.nr-card__image-wrap {
	position: relative;
}

.nr-card__cat {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	background: var(--wp--preset--color--primary);
	text-decoration: none;
	padding: 3px 10px;
	border-radius: 4px;
}

.nr-card__cat--img {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 2;
}

.nr-card__cat:hover { opacity: 0.85; }

.nr-card__title {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
	margin: 0;
}

.nr-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.nr-card__title a:hover {
	color: var(--wp--preset--color--primary);
}

.nr-card__excerpt {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
	margin: 0;
}

.nr-card__date {
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
	margin-top: auto;
	padding-top: 8px;
}

/* ── Laad meer ────────────────────────────────────────────────────────────────── */

.nr-load-more-wrap {
	text-align: center;
	margin-top: var(--wp--preset--spacing--lg);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.nr-load-more-btn {
	padding: 12px 32px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s ease;
}

.nr-load-more-btn:hover {
	background: var(--wp--preset--color--primary-dark);
}

.nr-load-more-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Spinner ──────────────────────────────────────────────────────────────────── */

.nr-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--wp--preset--color--border);
	border-top-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	animation: nr-spin 0.7s linear infinite;
}

@keyframes nr-spin { to { transform: rotate(360deg); } }

/* ── Geen resultaten ──────────────────────────────────────────────────────────── */

.nr-no-results {
	text-align: center;
	padding: var(--wp--preset--spacing--xl);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lg);
}

/* ── Zoek overlay ─────────────────────────────────────────────────────────────── */

.nr-search-toggle {
	cursor: pointer;
	padding: 8px;
	border-radius: 6px;
	color: var(--wp--preset--color--contrast);
	transition: background 0.15s ease;
	display: flex;
	align-items: center;
}

.nr-search-toggle:hover {
	background: var(--wp--preset--color--surface);
}

.nr-search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background: rgba(10,10,10,0.95);
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60px 16px 20px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Body scroll blokkeren als search open */
body:has(.nr-search-overlay:not([style*="display:none"]):not([style*="display: none"])) {
	overflow: hidden !important;
}

.nr-search-box {
	position: relative;
	width: 100%;
	max-width: 680px;
	flex-shrink: 0;
}

.nr-search-input {
	width: 100%;
	padding: 16px 56px 16px 20px;
	font-size: 1.1rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 12px;
	outline: none;
	box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.nr-search-close {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	font-size: 1.2rem;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	padding: 4px 8px;
}

/* ── Autocomplete ─────────────────────────────────────────────────────────────── */

.nr-autocomplete {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	z-index: 10;
	overflow: hidden;
}

.nr-autocomplete__item {
	padding: 12px 16px;
	cursor: pointer;
	font-size: 0.9rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	display: block;
	transition: background 0.1s;
}

.nr-autocomplete__item:last-child { border-bottom: none; }

.nr-autocomplete__item:hover,
.nr-autocomplete__item.focused {
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary);
}

/* ── Zoekresultaten grid ──────────────────────────────────────────────────────── */

.nr-search-results {
	width: 100%;
	max-width: 1100px;
	margin-top: 24px;
}

.nr-search-results .nr-grid {
	grid-template-columns: repeat(3, 1fr);
}

.nr-search-results .nr-card {
	background: rgba(255,255,255,0.95);
}

.nr-search-meta {
	color: rgba(255,255,255,0.7);
	font-size: 0.85rem;
	margin-bottom: 12px;
	text-align: center;
}

@media (max-width: 900px) {
	.nr-search-results .nr-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 600px) {
	.nr-search-results .nr-grid { grid-template-columns: 1fr; }
	.nr-search-overlay { padding: 60px 12px 12px; }
}

/* ── Single post typografie ──────────────────────────────────────────────────── */

/* Post titel (buiten content — alleen op single/standalone, niet in cards) */
.wp-block-post-title:not(.nr-card *) {
	font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	font-family: var(--wp--preset--font-family--heading) !important;
}

.nr-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--md) !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.01em !important;
	font-family: var(--wp--preset--font-family--heading) !important;
}

.wp-block-post-content h1 {
	font-size: clamp(2rem, 4vw, 3rem) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	margin-top: 2em !important;
	margin-bottom: 0.5em !important;
}

.wp-block-post-content h2 {
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	margin-top: 1.8em !important;
	margin-bottom: 0.5em !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	clear: both !important;
	max-width: 100% !important;
}

.wp-block-post-content h3 {
	font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin-top: 1.5em !important;
	margin-bottom: 0.4em !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	clear: both !important;
	max-width: 100% !important;
}

/* Alle paragrafen en blokken ook links uitlijnen */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}

/* Optie 3: image + eerste alinea naast elkaar */
.nr-intro-flex {
	display: flex;
	gap: 28px;
	align-items: stretch;
	margin-bottom: 2em;
}
.nr-intro-flex .seowiz-lightbox {
	flex: 0 0 48%;
	border-radius: 8px;
	overflow: hidden;
}
.nr-intro-flex .pr-image-wrapper {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}
.nr-intro-flex .seowiz-lightbox img,
.nr-intro-flex .pr-image-wrapper img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 8px;
	display: block;
}
.nr-intro-flex > p {
	flex: 1 1 0;
	min-width: 0;
	margin: 0 !important;
	font-size: 1.05em;
	line-height: 1.75;
}

/* Float afbeeldingen meer spacing */
.wp-block-post-content .wp-block-image.alignleft,
.wp-block-post-content figure.alignleft {
	margin-right: 32px !important;
	margin-bottom: 24px !important;
	margin-top: 8px !important;
}

.wp-block-post-content .wp-block-image.alignright,
.wp-block-post-content figure.alignright {
	margin-left: 32px !important;
	margin-bottom: 24px !important;
	margin-top: 8px !important;
}

/* Media & text blok */
.wp-block-post-content .wp-block-media-text {
	margin-top: 2em !important;
	margin-bottom: 2em !important;
	gap: 48px !important;
	align-items: start !important;
	grid-template-columns: 44% 1fr !important;
	overflow: visible !important;
}

.wp-block-post-content .wp-block-media-text .wp-block-media-text__media {
	border-radius: 10px;
	overflow: hidden;
	align-self: start !important;
}

.wp-block-post-content .wp-block-media-text .wp-block-media-text__media img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
}

.wp-block-post-content .wp-block-media-text .wp-block-media-text__content {
	padding: 0 !important;
	align-self: start !important;
	min-width: 0 !important;
	overflow: hidden !important;
	overflow-wrap: break-word !important;
	word-break: break-word !important;
}

.wp-block-post-content .wp-block-media-text .wp-block-media-text__content > * {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Tekst loopt NOOIT buiten grid */
.wp-block-post-content .wp-block-media-text {
	contain: layout !important;
}

/* Verberg "Klik om te vergroten" caption — alle varianten */
.wp-block-post-content figcaption,
.wp-block-post-content .wp-element-caption,
.wp-block-post-content .wp-block-media-text figcaption,
.seowiz-lb-tekst,
.pr-image-wrapper p {
	display: none !important;
}

/* SEOWiz float afbeelding — meer ruimte rechts */
.pr-image-wrapper {
	margin-right: 40px !important;
	margin-bottom: 24px !important;
	margin-top: 8px !important;
}

/* ── Table of Contents Plus (#toc_container) ────────────────────────────────── */

#toc_container {
	display: block !important;
	width: auto !important;
	max-width: 480px !important;
	float: none !important;
	clear: both !important;
	margin: 1.5em 0 2em 0 !important;
	padding: 16px 20px !important;
	background: var(--wp--preset--color--surface) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-left: 4px solid #4a7fa5 !important;
	border-radius: 0 8px 8px 0 !important;
}

#toc_container .toc_title {
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: var(--wp--preset--color--contrast) !important;
	text-align: left !important;
	margin: 0 0 8px !important;
}

#toc_container .toc_list {
	margin: 0 !important;
	padding-left: 18px !important;
}

#toc_container .toc_list li {
	margin: 4px 0 !important;
	font-size: 0.875rem !important;
}

#toc_container .toc_list a {
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none !important;
}

#toc_container .toc_list a:hover {
	color: var(--wp--preset--color--primary) !important;
	text-decoration: underline !important;
}

#toc_container .toc_number {
	color: var(--wp--preset--color--muted) !important;
	margin-right: 4px !important;
}

/* ── Card fade-in animatie ────────────────────────────────────────────────────── */

@keyframes nr-fade-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.nr-card {
	animation: nr-fade-in 0.3s ease both;
}

/* ── Magazine grid ───────────────────────────────────────────────────────────── */

.nr-mag {
	margin-bottom: var(--wp--preset--spacing--xl);
}

.nr-mag__header { display: flex; align-items: center; margin-bottom: 16px; }

.nr-mag__section-label {
	font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
	letter-spacing: 0.1em; color: var(--wp--preset--color--contrast);
	display: flex; align-items: center; gap: 8px;
}

.nr-mag__section-label::before {
	content: ''; display: inline-block; width: 4px; height: 20px;
	background: var(--wp--preset--color--primary); border-radius: 2px;
}

.nr-mag__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	grid-template-rows: 620px;
	gap: 12px;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.nr-mag__stack {
	display: flex; flex-direction: column; gap: 12px; height: 620px;
}

.nr-mag__card {
	position: relative; border-radius: 12px; overflow: hidden;
	text-decoration: none; display: block;
	transition: transform 0.3s ease;
}

.nr-mag__card:hover { transform: scale(1.01); cursor: pointer; }

.nr-mag__card--large { height: 620px; }

.nr-mag__card--small { flex: 1; min-height: 0; }

.nr-mag__img-link {
	position: absolute; inset: 0; display: block; z-index: 1;
}

.nr-mag__card img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block; transition: transform 0.4s ease;
}

.nr-mag__card:hover img { transform: scale(1.05); }

.nr-mag__card-overlay {
	position: absolute; inset: 0;
	z-index: 2;
	background: linear-gradient(to top, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.7) 35%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0.0) 100%);
	pointer-events: none;
}

.nr-mag__card-nothumb {
	position: absolute; inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-dark) 100%);
}

.nr-mag__card-content {
	position: absolute; bottom: 0; left: 0; right: 0;
	z-index: 3; padding: 20px 22px;
}

.nr-mag__labels { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.nr-mag__label {
	display: inline-block; color: #fff; font-size: 0.65rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: 0.06em;
	padding: 4px 10px; border-radius: 4px; text-decoration: none;
}

.nr-mag__label { position: relative; z-index: 2; }

.nr-mag__label:hover { opacity: 0.85; }

/* Stretched link — maakt hele card klikbaar via de titel-<a> */
.nr-mag__card-link {
	color: #fff;
	text-decoration: none;
}

.nr-mag__card-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.nr-mag__card-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800; color: #fff; line-height: 1.2; margin: 0 0 8px;
}

.nr-mag__card--large .nr-mag__card-title { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }

.nr-mag__card--small .nr-mag__card-title { font-size: clamp(0.9rem, 1.4vw, 1.1rem); }

.nr-mag__card-meta {
	display: flex; gap: 6px; font-size: 0.72rem;
	color: rgba(255,255,255,0.75); align-items: center; flex-wrap: nowrap;
}

@media (max-width: 768px) {
	.nr-mag__grid { grid-template-columns: 1fr; grid-template-rows: auto; }
	.nr-mag__card--large { height: 300px; }
	.nr-mag__stack { height: auto; }
	.nr-mag__card--small { height: 200px; flex: none; }
}

/* ── Query Loop Grid — categorie/archief ─────────────────────────────────────── */

/* Post-template grid: 3 kolommen */
.wp-block-post-template.nr-grid {
	grid-template-columns: repeat(3, 1fr) !important;
	gap: var(--wp--preset--spacing--md) !important;
}

@media (max-width: 900px) {
	.wp-block-post-template.nr-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
	.wp-block-post-template.nr-grid { grid-template-columns: 1fr !important; }
}

/* Featured image in card: geen extra marge, afgeronde hoeken boven */
.nr-card .wp-block-post-featured-image {
	margin: 0;
	line-height: 0;
}

.nr-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
	border-radius: 10px 10px 0 0;
}

.nr-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* Post terms (categorie label) */
.nr-card .wp-block-post-terms {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
}

.nr-card .wp-block-post-terms a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.nr-card .wp-block-post-terms a:hover { text-decoration: underline; }

/* Post title */
.nr-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 6px;
}

.nr-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.nr-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* Excerpt */
.nr-card .wp-block-post-excerpt {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
	margin: 0 0 auto;
}

.nr-card .wp-block-post-excerpt p { margin: 0; }

/* Date */
.nr-card .wp-block-post-date {
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
	margin-top: 8px;
}

/* Paginering */
.wp-block-query-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 4px;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-color: var(--wp--preset--color--primary);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-color: var(--wp--preset--color--primary);
}

/* ── Related posts sectie ─────────────────────────────────────────────────────── */

.nr-related {
	margin-top: 2em;
	padding-top: var(--wp--preset--spacing--lg);
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Reduceer padding-bottom van main op single posts */
body.single main.wp-block-group {
	padding-bottom: var(--wp--preset--spacing--md) !important;
}

.nr-related__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--lg);
}

.nr-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--md);
}

@media (max-width: 900px) {
	.nr-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.nr-related__grid { grid-template-columns: 1fr; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────────── */

.nr-hero {
	position: relative;
	z-index: 1; /* Expliciete stacking context — strip (z-index:10) verschijnt zeker erboven */
	min-height: 560px;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-dark) 100%);
	overflow: hidden;
	width: 100%;
}

.nr-hero--image {
	background-size: cover;
	background-position: center;
}

/* Dubbele gradient: donker boven (nav) én donker onder (tekst) */
.nr-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 30%),
		linear-gradient(to top,    rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.0) 55%);
	z-index: 1;
}

.nr-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 48px 40px 56px;
}

.nr-hero__label {
	display: inline-block;
	background: rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.9);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 16px;
	border: 1px solid rgba(255,255,255,0.2);
	text-decoration: none;
	transition: background 0.2s ease;
}

.nr-hero__label:hover { background: rgba(255,255,255,0.25); color: #fff; }

.nr-hero__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
	margin: 0 0 16px;
}

.nr-hero__sub {
	font-size: 1.05rem;
	color: rgba(255,255,255,0.8);
	line-height: 1.6;
	margin: 0 0 32px;
	max-width: 480px;
}

/* ── Gutenberg blocks in hero — automatisch hero-stijl ──────────────────── */
.nr-hero__content h1,
.nr-hero__content h2,
.nr-hero__content .wp-block-heading {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(2rem, 5vw, 3.5rem) !important;
	font-weight: 800 !important;
	color: inherit;
	line-height: 1.1;
	margin: 0 0 16px;
	max-width: none !important;
	width: 100%;
}

.nr-hero__content h3 {
	font-size: clamp(1.2rem, 3vw, 2rem) !important;
	font-weight: 700 !important;
	color: inherit;
	line-height: 1.2;
	margin: 0 0 12px;
}

.nr-hero__content p,
.nr-hero__content .wp-block-paragraph {
	font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
	color: rgba(255,255,255,0.85);
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 560px;
}

.nr-hero__content .wp-block-buttons {
	margin-top: 8px;
}
/* ── Einde hero Gutenberg stijlen ───────────────────────────────────────── */

.nr-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.nr-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s ease;
}

.nr-hero__btn--primary { background: #fff; color: var(--wp--preset--color--primary); }

.nr-hero__btn--primary:hover {
	background: var(--wp--preset--color--primary-light);
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.nr-hero__btn--ghost {
	background: transparent;
	color: #fff !important;
	border: 2px solid rgba(255,255,255,0.5);
}

#nr-hero-search svg {
	stroke: #fff;
}

.nr-hero__btn--ghost:hover {
	border-color: #fff;
	background: rgba(255,255,255,0.1);
	transform: translateY(-2px);
}

@media (max-width: 768px) {
	.nr-hero { min-height: 420px; }
	.nr-hero__content { padding: 40px 16px !important; }
	.nr-hero__actions { flex-direction: column; }
	.nr-hero__btn { justify-content: center; }
}

/* ── Categorie strips ─────────────────────────────────────────────────────────── */

.nr-strip {
	margin-top: var(--wp--preset--spacing--xl);
}

.nr-strip__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: var(--wp--preset--spacing--md);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--wp--preset--color--primary);
}

.nr-strip__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	margin: 0;
}

.nr-strip__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.nr-strip__title a:hover { color: var(--wp--preset--color--primary); }

.nr-strip__more {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.nr-strip__more:hover { text-decoration: underline; }

.nr-strip__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--md);
}

@media (max-width: 900px) {
	.nr-strip__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.nr-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ── Footer ───────────────────────────────────────────────────────────────────── */

.site-footer .footer-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .footer-nav-list li {
	margin-bottom: 10px;
}

.site-footer .footer-nav-list a:hover {
	color: #ffffff !important;
}

/* Footer kolommen stapelen op mobiel */
@media (max-width: 768px) {
	.site-footer .wp-block-columns {
		flex-direction: column !important;
	}

	.site-footer .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* ── Racket Finder CTA ────────────────────────────────────────────────────────── */

.nr-finder-cta {
	background: #f0f5ff !important;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.nr-finder-cta:hover {
	border-color: #1a56db !important;
	box-shadow: 0 4px 16px rgba(26, 86, 219, 0.08);
}

/* Op smal mobiel: stapel verticaal, knop vol-breed */
@media (max-width: 600px) {
	.nr-finder-cta.wp-block-group {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px;
	}

	.nr-finder-cta .nr-btn-wrap {
		width: 100%;
	}

	.nr-finder-cta .nr-btn {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* ── Hero CTA Strip ───────────────────────────────────────────────────────── */
.nr-cta-strip {
	position: relative;
	z-index: 10; /* Hoog genoeg om boven hero-compositing te verschijnen in Safari */
	background: transparent;
	padding: 0 24px 40px;
	display: flex;
	column-gap: 16px; /* Flexbox gap fallback voor Safari < 14.1 */
	gap: 16px;
	justify-content: center;
	/* Blokkeer WordPress block-gap interference (margin-block-start reset) */
	margin-block-start: 0;
}

.nr-cta-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #ffffff;
	border-radius: 14px;
	padding: 18px 22px;
	flex: 1;
	max-width: 340px;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 4px 24px rgba(0,0,0,0.18);
	border: 1px solid rgba(255,255,255,0.9);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.nr-cta-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(0,0,0,0.14);
	text-decoration: none;
	color: inherit;
}

.nr-cta-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.nr-cta-icon svg {
	width: 26px;
	height: 26px;
}

.nr-cta-card--rackets .nr-cta-icon { background: #e8f0fe; }
.nr-cta-card--rackets .nr-cta-icon svg { color: #1a56db; }
.nr-cta-card--finder  .nr-cta-icon { background: #fff3e0; }
.nr-cta-card--finder  .nr-cta-icon svg { color: #ea580c; }
.nr-cta-card--dna     .nr-cta-icon { background: #f0fdf4; }
.nr-cta-card--dna     .nr-cta-icon svg { color: #16a34a; }

.nr-cta-body {
	flex: 1;
	min-width: 0;
}

.nr-cta-label {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	color: #1a1a2e;
	line-height: 1.3;
}

.nr-cta-sub {
	display: block;
	font-size: 0.78rem;
	color: #6b7280;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nr-cta-arrow {
	width: 18px;
	height: 18px;
	color: #9ca3af;
	flex-shrink: 0;
	transition: transform 0.18s ease, color 0.18s ease;
}

.nr-cta-card:hover .nr-cta-arrow {
	transform: translateX(4px);
	color: #ea580c;
}

@media (max-width: 680px) {
	.nr-cta-strip {
		flex-direction: column;
		align-items: stretch;
		/* !important nodig om de inline margin-top/-block-start te overschrijven op mobiel */
		margin-top: 0 !important;
		margin-block-start: 0 !important;
		padding: 24px 16px 32px;
	}
	.nr-cta-card {
		max-width: 100%;
	}
}
/* ── Einde Hero CTA Strip ────────────────────────────────────────────────── */

/* ── Newsletter / Nieuwsbrief pagina ────────────────────────────────────── */
.page-id-4526 .wp-block-post-title,
.page-id-2920 .wp-block-post-title {
	text-align: center;
}
#pr-newsletter-form {
	margin: 0 auto;
}
#pr-newsletter-form > div {
	margin: 0 auto;
}
/* ── Einde Newsletter ────────────────────────────────────────────────────── */


/* ── Yoast breadcrumb ────────────────────────────────────────────────────── */
.nr-breadcrumb,
.yoast-breadcrumbs {
	font-size: 0.8em;
	color: var(--wp--preset--color--muted, #888);
	margin-bottom: 0.75em;
	line-height: 1.4;
}
.nr-breadcrumb a,
.yoast-breadcrumbs a {
	color: var(--wp--preset--color--muted, #888);
	text-decoration: none;
}
.nr-breadcrumb a:hover,
.yoast-breadcrumbs a:hover {
	text-decoration: underline;
}
.nr-breadcrumb span.breadcrumb_last,
.yoast-breadcrumbs span.breadcrumb_last {
	color: var(--wp--preset--color--foreground, #222);
}
/* ── Einde Yoast breadcrumb ─────────────────────────────────────────────── */

/* ── Leestijd + TOC flex-rij ─────────────────────────────────────────────── */
.nr-toc-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 0 !important;
	margin-bottom: 1rem;
}

.wp-block-post-content > .nr-toc,
.wp-block-post-content > .nr-meta-row {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

.nr-meta-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 5px;
}
.nr-toc-wrap > .nr-toc {
	margin: 0 !important;
}
.nr-leestijd {
	flex: 0 0 auto;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border, #e5e7eb);
	border-radius: 10px;
	padding: 10px 16px;
	text-align: center;
	font-size: 0.82em;
	color: var(--wp--preset--color--muted, #888);
	line-height: 1.3;
	align-self: flex-start;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}
.nr-leestijd__icon { font-size: 1.4em; line-height: 1; flex-shrink: 0; }
.nr-leestijd__label { font-weight: 600; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.05em; color: #aaa; line-height: 1; }
.nr-leestijd__tijd { font-size: 1.25em; font-weight: 700; color: var(--wp--preset--color--foreground, #111); line-height: 1; }
.nr-leestijd__woorden { font-size: 0.78em; color: #bbb; }

/* ── Niveau badge ────────────────────────────────────────────────────────── */
.nr-niveau-badge {
	flex: 0 0 auto;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border, #e5e7eb);
	border-radius: 10px;
	padding: 10px 16px;
	text-align: center;
	font-size: 0.82em;
	line-height: 1.3;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.nr-niveau-badge__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
.nr-niveau-badge__label {
	font-weight: 600;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #aaa;
	line-height: 1;
}
.nr-niveau-badge__waarde {
	font-size: 1.1em;
	font-weight: 700;
	color: var(--wp--preset--color--foreground, #111);
	line-height: 1;
}


/* ── Leesvoortgang balk ──────────────────────────────────────────────────── */
.site-header { position: relative; }
#nr-progress-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: #4a7fa5;
	transition: width 0.12s linear;
	pointer-events: none;
	z-index: 1;
}
#nr-progress-pill {
	position: absolute;
	right: -1px;
	bottom: 4px;
	background: #4a7fa5;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 20px;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
/* ── Einde leestijd ──────────────────────────────────────────────────────── */

/* ── Hero layout: featured image links, H2 + hook rechts ────────────────── */
.nr-hero-layout {
	display: flex;
	gap: 2em;
	align-items: stretch;
	margin-bottom: 2em;
}
.nr-hero-image {
	flex: 0 0 45%;
	max-width: 45%;
	border-radius: 10px;
	overflow: hidden;
	min-height: 250px;
}
.nr-hero-image {
	display: flex;
	flex-direction: column;
	position: relative;
}
.nr-hero-image > div {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.nr-hero-image > div > a {
	flex: 1;
	min-height: 0;
	display: block;
}
/* Caption onderaan de afbeelding */
.nr-hero-image .seowiz-lb-tekst,
.nr-hero-image .nr-caption {
	flex-shrink: 0;
	font-size: 0.72em;
	color: #888;
	text-align: center;
	padding: 4px 0 3px;
	background: #fff;
}
.nr-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.nr-hero-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: 0;
	margin-top: 0;
}
.nr-hero-text > .nr-intro-hook {
	margin-top: 0 !important;
}
@media (max-width: 680px) {
	.nr-hero-layout { flex-direction: column; }
	.nr-hero-image  { flex: none; max-width: 100%; width: 100%; }
}

/* ── Intro hook alinea (eerste P naast featured image) ───────────────────── */
.nr-intro-hook {
	border-left: 4px solid #ea580c;
	background: #fff8f3;
	padding: 14px 18px;
	border-radius: 0 6px 6px 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin-top: 0 !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */

.nr-sidebar__inner {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #f8fafc;
	border-radius: 12px;
	padding: 16px;
}

/* Share box */
.nr-share-box {
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
}

.nr-share-box__label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #94a3b8;
	margin: 0 0 10px;
}

.nr-share-box__btns {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nr-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background .18s, color .18s;
	width: 100%;
}

.nr-share-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.nr-share-btn--wa {
	background: #f0fdf4;
	color: #16a34a;
}

.nr-share-btn--wa:hover {
	background: #16a34a;
	color: #fff;
	text-decoration: none;
}

.nr-share-btn--copy {
	background: #f8fafc;
	color: #475569;
}

.nr-share-btn--copy:hover {
	background: #e2e8f0;
	color: #1e293b;
}

/* PadelDNA card */
.nr-dna-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #f0fdf4;
	border: 1.5px solid #bbf7d0;
	border-radius: 12px;
	padding: 16px;
	text-decoration: none;
	color: #166534;
	transition: background .18s, border-color .18s;
}

.nr-dna-card:hover {
	background: #dcfce7;
	border-color: #86efac;
	text-decoration: none;
	color: #166534;
}

.nr-dna-card__icon {
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.nr-dna-card__icon svg {
	width: 20px;
	height: 20px;
	color: #16a34a;
}

.nr-dna-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nr-dna-card__body strong {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
}

.nr-dna-card__body span {
	font-size: 0.78rem;
	opacity: .75;
}

.nr-dna-card__arrow {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* ── Terug naar boven ────────────────────────────────────────────────────────── */

#nr-back-top {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 999;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, #1a56db);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .25s, transform .25s;
	pointer-events: none;
}

#nr-back-top.nr-back-top--visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

#nr-back-top:hover {
	background: #1245b5;
}

/* ── Subcategorie chips op archief-pagina ────────────────────────────────────── */

.nr-subcat-nav__label {
	margin: 20px 0 6px;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #94a3b8;
}

.nr-subcat-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 36px;
}

.nr-subcat-nav__chip {
	--chip-color: #1a56db;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--chip-color) 10%, #fff);
	color: var(--chip-color);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid color-mix(in srgb, var(--chip-color) 30%, transparent);
	box-shadow: 0 1px 3px rgba(0,0,0,.05);
	transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
	letter-spacing: .01em;
}

.nr-subcat-nav__chip:hover {
	background: var(--chip-color);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 3px 10px color-mix(in srgb, var(--chip-color) 35%, transparent);
	text-decoration: none;
}

.nr-subcat-nav__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--chip-color) 15%, transparent);
	color: var(--chip-color);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	transition: background .18s, color .18s;
}

.nr-subcat-nav__chip:hover .nr-subcat-nav__count {
	background: rgba(255,255,255,.25);
	color: #fff;
}

.page-id-4701 .wp-block-post-title {
	display: none;
}

/* ── Taalwisselaar dropdown ──────────────────────────────────────────────────── */
.nr-lang-switcher {
	position: relative;
	z-index: 100000;
}

@media (max-width: 768px) {
	/* Zorg dat de rechter header-groep items niet afknipt */
	.site-header .wp-block-group:not(.site-header) {
		overflow: visible !important;
	}
	/* Hamburger 20px naar links */
	.site-header .wp-block-navigation__responsive-container-open {
		margin-left: -35px;
	}
	/* Taalwisselaar 20px naar links */
	.nr-lang-switcher {
		margin-left: -15px !important;
	}
	/* Taalknop compact: alleen vlag + kleine pijl, geen tekst */
	.nr-lang-toggle {
		padding: 3px 5px;
		gap: 2px;
		font-size: 0;
	}
	.nr-lang-toggle span {
		display: none;
	}
	.nr-lang-toggle svg {
		width: 8px;
		height: 5px;
	}
	.nr-lang-toggle img {
		width: 20px;
		height: 13px;
	}
	/* Zoekicon 23px naar links */
	.nr-search-wrap {
		margin-left: -26px !important;
	}
}

.nr-lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 9px;
	border-radius: 6px;
	background: rgba(255,255,255,0.92);
	border: 1px solid rgba(0,0,0,0.12);
	color: #333;
	font-size: 0.72rem;
	font-weight: 600;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background 0.15s;
	line-height: 1;
}

.nr-lang-toggle:hover { background: #fff; }

.nr-lang-toggle img, .nr-lang-option img { border-radius: 2px; display: block; }

.nr-lang-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	overflow: hidden;
	min-width: 80px;
}

.nr-lang-switcher.nr-lang--open .nr-lang-dropdown { display: block; }

.nr-lang-option {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	font-size: 0.72rem;
	font-weight: 600;
	color: #333;
	text-decoration: none;
	transition: background 0.12s;
}

.nr-lang-option:hover { background: #f5f5f5; }

.nr-lang-option--unavailable {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── TOC — Inhoudsopgave ──────────────────────────────────────────────────── */

.nr-toc {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 0;
	margin: 0 0 1rem;
	font-size: 0.875rem;
	overflow: hidden;
}

.nr-sidebar__inner .nr-toc {
	margin: 0;
	background: #fff;
}

.nr-toc__checkbox { display: none; }

.nr-toc__title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0.875rem 1.125rem;
	font-weight: 700;
	font-size: 0.875rem;
	color: #1e293b;
	cursor: pointer;
	user-select: none;
	gap: 8px;
}

.nr-toc__show-word,
.nr-toc__hide-word {
	font-size: 0.75rem;
	font-weight: 600;
	color: #64748b;
	letter-spacing: 0.04em;
}

.nr-toc__hide-word { display: none; }

.nr-toc__checkbox:checked ~ .nr-toc__title .nr-toc__show-word { display: none; }
.nr-toc__checkbox:checked ~ .nr-toc__title .nr-toc__hide-word { display: inline; }

.nr-toc__list {
	list-style: none;
	margin: 0;
	padding: 0 1.125rem 0.875rem;
	display: none;
	counter-reset: toc-h2;
}

.nr-toc__checkbox:checked ~ .nr-toc__list { display: block; }

/* TOC standaard ingeklapt op alle schermformaten */

.nr-toc__list > li {
	counter-increment: toc-h2;
	counter-reset: toc-h3;
	padding: 0.3rem 0;
	border-bottom: 1px solid #e2e8f0;
}

.nr-toc__list > li:last-child { border-bottom: none; }

.nr-toc__list > li::before {
	content: counter(toc-h2) "  ";
	color: #94a3b8;
	font-weight: 600;
	font-size: 0.8rem;
	min-width: 1.25rem;
	display: inline-block;
}

.nr-toc__list > li > a {
	color: #1a56db;
	text-decoration: none;
	transition: color 0.15s;
}

.nr-toc__list > li > a:hover { color: #1e40af; text-decoration: underline; }

.nr-toc__sub-list {
	list-style: none;
	margin: 0.2rem 0 0;
	padding: 0 0 0 1.5rem;
}

.nr-toc__sub-list > li {
	counter-increment: toc-h3;
	padding: 0.2rem 0;
}

.nr-toc__sub-list > li::before {
	content: counter(toc-h2) "." counter(toc-h3) "  ";
	color: #94a3b8;
	font-weight: 600;
	font-size: 0.8rem;
	min-width: 2rem;
	display: inline-block;
}

.nr-toc__sub-list > li > a {
	color: #334155;
	text-decoration: none;
	font-size: 0.85rem;
	transition: color 0.15s;
}

.nr-toc__sub-list > li > a:hover { color: #1e40af; text-decoration: underline; }

/* ── Header navigation right-align ─────────────────────────────────────────── */
.site-header .wp-block-navigation {
	margin-left: auto;
}
.site-header .wp-block-navigation > ul,
.site-header .wp-block-navigation__container {
	justify-content: flex-end !important;
}
