/* ==========================================================================
   ProductIP Kennisbank — Frontend styles
   Alle kleuren via CSS custom properties zodat org-theming automatisch werkt
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens — fallback defaults (overschreven door PIP_Styling)
   -------------------------------------------------------------------------- */
:root {
	--pip-primary:     #F55522;
	--pip-secondary:   #ffffff;
	--pip-primary-rgb: 245, 85, 34;
	--pip-dark:        #1a1a2e;
	--pip-text:        #1f2937;
	--pip-muted:       #6b7280;
	--pip-border:      #e5e7eb;
	--pip-bg:          #f9fafb;
	--pip-radius:      10px;
	--pip-radius-sm:   6px;
	--pip-shadow:      0 1px 3px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.04);
	--pip-shadow-md:   0 4px 20px rgba(0,0,0,.10);
}

/* --------------------------------------------------------------------------
   Basis-lettertype voor alle shortcode-output: Figtree (globaal in Elementor).
   Staat bewust bovenaan zodat latere, specifiekere font-family-declaraties
   blijven winnen: 'inherit' bij formuliervelden (hieronder) en bv. 'Inter'
   in de path-list. Elementen zonder eigen font-family krijgen zo Figtree.
   -------------------------------------------------------------------------- */
[class^="pip-"],
[class*=" pip-"] {
	font-family: 'Figtree', sans-serif;
}

/* --------------------------------------------------------------------------
   Formuliervelden erven het thema-/Elementor-lettertype.
   Browsers geven input/button/select van zichzelf een eigen systeemfont;
   deze regel forceert overname van het actieve thema-lettertype.
   -------------------------------------------------------------------------- */
.pip-search-input,
.pip-search-submit,
.pip-searchbar__input,
.pip-input,
.pip-btn,
.pip-login-input,
.pip-version-history__select,
.pip-helpful__btn {
	font-family: inherit;
}

/* --------------------------------------------------------------------------
   Full-width breakout — breekt uit het max-width containertje van het thema.
   Werkt ongeacht welk thema actief is.
   -------------------------------------------------------------------------- */
.pip-hero,
.pip-breadcrumb-bar,
.pip-home-categories,
.pip-home-popular,
.pip-archive-hero,
.pip-category-nav,
.pip-archive-content,
.pip-single-wrap,
.pip-login-body,
.pip-403-page {
	width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	box-sizing: border-box;
}

/* Voorkom horizontale scroll door scrollbar-breedte */
body.pip-kb-page {
	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.pip-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.pip-kb-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.pip-hero {
	background: linear-gradient(135deg, var(--pip-primary) 0%, #c0392b 100%);
	color: #fff;
	padding: 72px 24px 80px;
	text-align: center;
}

.pip-hero--small {
	padding: 40px 24px 48px;
}

.pip-hero__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .75;
	margin: 0 0 12px;
}

.pip-hero__title {
	font-size: clamp(26px, 4vw, 46px);
	font-weight: 800;
	color: #fff;
	margin: 0 0 28px;
	line-height: 1.2;
}

.pip-hero__subtitle {
	font-size: 18px;
	opacity: .85;
	margin: -18px 0 28px;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Search bar
   -------------------------------------------------------------------------- */
.pip-search-wrap {
	position: relative;
	max-width: 580px;
	margin: 0 auto;
}

.pip-search-input {
	width: 100%;
	padding: 13px 52px 13px 20px;
	border: 2px solid var(--pip-border);
	border-radius: 999px;
	font-size: 15px;
	box-sizing: border-box;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
	background: #fff;
	color: var(--pip-text);
}

.pip-search-input:focus {
	border-color: var(--pip-primary);
	box-shadow: 0 0 0 4px rgba(var(--pip-primary-rgb), .12);
}

.pip-search-submit {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--pip-primary);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 9px 20px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: opacity .2s;
	white-space: nowrap;
}

.pip-search-submit:hover { opacity: .88; }

/* Hero search overrides */
.pip-search-wrap--hero .pip-search-input {
	height: 56px;
	padding: 0 150px 0 24px;
	font-size: 16px;
	border: none;
	box-shadow: 0 4px 28px rgba(0,0,0,.18);
}

.pip-search-wrap--hero .pip-search-submit {
	height: 44px;
	padding: 0 24px;
	right: 6px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 999px;
}

/* Breadcrumb bar search overrides */
.pip-breadcrumb-bar .pip-search-wrap {
	max-width: 300px;
	margin: 0;
}

.pip-breadcrumb-bar .pip-search-input {
	height: 36px;
	padding: 0 44px 0 16px;
	font-size: 13px;
	border-radius: 999px;
	border: none;
	background: rgba(255,255,255,.2);
	color: #fff;
}

.pip-breadcrumb-bar .pip-search-input::placeholder { color: rgba(255,255,255,.65); }

.pip-breadcrumb-bar .pip-search-input:focus {
	background: rgba(255,255,255,.3);
	box-shadow: none;
	outline: none;
}

.pip-breadcrumb-bar .pip-search-submit {
	background: rgba(255,255,255,.25);
	padding: 6px 12px;
	height: 28px;
}

/* --------------------------------------------------------------------------
   Homepage search bar with quick links ([pip_searchbar])
   -------------------------------------------------------------------------- */
.pip-searchbar {
	width: 100%;
}

.pip-searchbar__form {
	display: flex;
	min-height: 44px;
	padding: 0 20px 0 10px;
	align-items: center;
	gap: 8px;
	align-self: stretch;
	background: #fff;
	border: none;
	border-radius: 12px;
	box-shadow: 0 4px 28px rgba(0,0,0,.18);
}

.pip-searchbar__form:focus-within {
	box-shadow: 0 0 0 4px rgba(var(--pip-primary-rgb), .18), 0 4px 28px rgba(0,0,0,.18);
}

.pip-searchbar__icon {
	color: #2D2D2D;
	display: flex;
	flex-shrink: 0;
	pointer-events: none;
}

.pip-searchbar__input {
	flex: 1;
	min-width: 0;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	font-size: 16px;
	box-sizing: border-box;
	outline: none;
	color: var(--pip-text);
	padding: 0;
}

.pip-searchbar__input:focus {
	border: none !important;
	box-shadow: none !important;
	outline: none;
}

.pip-searchbar__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.pip-searchbar__link {
	display: flex;
	padding: 10px 16px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	border: 1px solid var(--Mist-150, #E6E6E6);
	background: transparent;
	color: #fff;
	font-family: 'Figtree', sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	text-decoration: none;
	transition: background .2s, border-color .2s, color .2s;
}

.pip-searchbar__link:hover {
	border-radius: 8px;
	border-color: var(--Mist-150, #E6E6E6);
	background: var(--Primary-White, #FFF);
	color: #000;
}

/* --------------------------------------------------------------------------
   Live search dropdown
   JS sets position:fixed + top/left/width via getBoundingClientRect so the
   dropdown escapes any overflow:hidden or stacking-context in the theme.
   -------------------------------------------------------------------------- */
.pip-ls-dropdown {
	position: fixed;   /* overridden by JS inline style */
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
	z-index: 999999;
	overflow: hidden;
	min-width: 280px;
}

.pip-ls-item {
	display: flex;
	flex-direction: column;
	padding: 10px 16px;
	text-decoration: none;
	color: #1f2937;
	border-bottom: 1px solid #e5e7eb;
	transition: background 0.1s;
	line-height: 1.4;
}

.pip-ls-item:last-of-type { border-bottom: none; }

.pip-ls-item:hover,
.pip-ls-item--active {
	background: #f9fafb;
	color: #1f2937;
	text-decoration: none;
}

.pip-ls-item__cat {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--pip-primary, #e85c2e);
	margin-bottom: 2px;
}

.pip-ls-item__title {
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
}

.pip-ls-item__excerpt {
	font-size: 12px;
	color: #6b7280;
	margin-top: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pip-ls-all {
	display: block;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pip-primary, #e85c2e);
	text-decoration: none;
	background: #f9fafb;
	border-top: 1px solid #e5e7eb;
}

.pip-ls-all:hover,
.pip-ls-all--active {
	background: #f1f5f9;
	text-decoration: none;
}

.pip-ls-loading,
.pip-ls-empty {
	padding: 14px 16px;
	font-size: 13px;
	color: #6b7280;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Breadcrumb bar
   -------------------------------------------------------------------------- */
.pip-breadcrumb-bar {
	background: var(--pip-primary);
	padding: 14px 0;
}

.pip-breadcrumb-bar .pip-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* Basis: standalone kruimelpad (Elementor / lichte achtergrond) — matcht design */
.pip-breadcrumb {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%; /* 23.8px */
	color: var(--mist-600636363, var(--Mist-600, #636363));
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: nowrap;
	max-width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* Links en scheidingstekens blijven heel; alleen de titel breekt af. */
.pip-breadcrumb a,
.pip-breadcrumb__sep {
	flex: 0 0 auto;
	white-space: nowrap;
}

.pip-breadcrumb a {
	color: var(--mist-600636363, var(--Mist-600, #636363));
	text-decoration: none;
}

.pip-breadcrumb a:hover {
	color: var(--pip-primary);
	text-decoration: underline;
}

.pip-breadcrumb__sep {
	color: var(--pip-primary);
	margin: 0 6px;
	display: inline-flex;
	align-items: center;
}

.pip-breadcrumb__sep svg {
	width: 6px;
	height: 10px;
	display: block;
}

.pip-breadcrumb__current {
	flex: 0 1 auto;
	min-width: 3ch;
	max-width: 260px;
	color: var(--mist-7503-c-3-c-3-c, var(--Mist-750, #3C3C3C));
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 170%; /* 23.8px */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Kruimelpad binnen de oranje balk (oude plugin-template) — witte variant */
.pip-breadcrumb-bar .pip-breadcrumb { color: rgba(255,255,255,.8); }
.pip-breadcrumb-bar .pip-breadcrumb a { color: rgba(255,255,255,.85); }
.pip-breadcrumb-bar .pip-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.pip-breadcrumb-bar .pip-breadcrumb__sep { color: inherit; opacity: .5; margin: 0 2px; }
.pip-breadcrumb-bar .pip-breadcrumb__current { color: #fff; }

/* --------------------------------------------------------------------------
   Homepage: category cards
   -------------------------------------------------------------------------- */
.pip-home-categories {
	padding: 56px 0;
	background: #fff;
}

.pip-home-categories .pip-container {}

.pip-section-heading {
	font-size: 22px;
	font-weight: 700;
	color: var(--pip-text);
	margin: 0 0 28px;
}

.pip-section-heading--center { text-align: center; }

.pip-cat-grid {
	display: grid;
	/* Max 4 per rij: kolom is min. 260px, maar op brede schermen min. een kwart
	   (100% - 3×gap)/4 zodat er nooit meer dan 4 naast elkaar passen. */
	grid-template-columns: repeat(auto-fill, minmax(max(260px, (100% - 60px) / 4), 1fr));
	gap: 20px;
}

.pip-cat-card {
	display: flex;
	padding: 24px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
	align-self: stretch;
	grid-row: span 1;
	grid-column: span 1;
	justify-self: stretch;
	border-bottom: 1px solid var(--Primary-Orange, #F55522);
	background: #fff;
	text-decoration: none;
	color: var(--pip-text);
	transition: background-color .2s;
}

.pip-cat-card:hover {
	color: var(--pip-text);
	text-decoration: none;
	background: #F8F8F8;
}

/* Categoriepagina-variant [pip_category_cards variant="plain"]:
   geen achtergrond + grijze onderlijn → wit + oranje lijn bij hover. */
.pip-cat-grid--plain .pip-cat-card {
	background: transparent;
	border-bottom-color: #BDBDBD;
	transition: background-color .2s, border-color .2s;
}

.pip-cat-grid--plain .pip-cat-card:hover {
	background: #FFFFFF;
	border-bottom-color: var(--pip-primary);
}

.pip-cat-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pip-primary);
	flex-shrink: 0;
}

.pip-cat-card__icon svg,
.pip-cat-card__icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.pip-cat-card__title {
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: 'Figtree', sans-serif;
	font-size: var(--Typography-Size-H5, 20px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-h-5110, 22px); /* 110% */
	letter-spacing: var(--typography-letter-spacing-h-51, -0.2px);
	margin: 0;
}

.pip-cat-card__desc {
	color: var(--Mist-600, #636363);
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px; /* 128.571% */
	letter-spacing: 0;
	margin: 0;
}

.pip-cat-card__desc:empty { display: none; }

.pip-cat-card__footer {
	margin-top: auto;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pip-cat-card__count {
	font-size: 13px;
	color: var(--pip-muted);
}

.pip-cat-card__arrow {
	display: inline-flex;
	color: var(--pip-text);
	transition: transform .2s, color .2s;
}

.pip-cat-card__arrow svg {
	width: 8.91px;
	height: 6.75px;
	transform: rotate(-45deg);
}

.pip-cat-card:hover .pip-cat-card__arrow { transform: translate(2px, -2px); color: #F55522; /* Primary-Orange */ }

/* --------------------------------------------------------------------------
   Homepage: popular articles
   -------------------------------------------------------------------------- */
.pip-home-popular {
	padding: 56px 0 64px;
	background: var(--pip-bg);
}

.pip-popular-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.pip-popular-col {
	background: #fff;
	border-radius: var(--pip-radius);
	padding: 24px;
	border: 1px solid var(--pip-border);
}

.pip-popular-col__cat {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pip-primary);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--pip-primary);
	display: block;
	text-decoration: none;
}

.pip-popular-col__cat:hover { opacity: .8; }

.pip-popular-col__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pip-popular-col__item {
	padding: 6px 0;
	border-bottom: 1px solid var(--pip-border);
}

.pip-popular-col__item:last-child { border-bottom: none; }

.pip-popular-col__link {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	color: var(--pip-text);
	text-decoration: none;
	line-height: 1.4;
	transition: color .15s;
}

.pip-popular-col__link::before {
	content: '→';
	color: var(--pip-primary);
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 1px;
}

.pip-popular-col__link:hover { color: var(--pip-primary); }

.pip-popular-col__all {
	display: block;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pip-primary);
	text-decoration: none;
}

.pip-popular-col__all:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Archive hero
   -------------------------------------------------------------------------- */
.pip-archive-hero {
	padding: 44px 0 36px;
	background: var(--pip-bg);
	border-bottom: 1px solid var(--pip-border);
}

.pip-archive-hero__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.pip-archive-hero__text {}

.pip-archive-hero__title {
	font-size: 30px;
	font-weight: 800;
	color: var(--pip-text);
	margin: 0 0 6px;
}

.pip-archive-hero__desc {
	font-size: 15px;
	color: var(--pip-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Category navigation pills
   -------------------------------------------------------------------------- */
.pip-category-nav {
	background: #fff;
	border-bottom: 1px solid var(--pip-border);
	padding: 0;
	overflow-x: auto;
}

.pip-category-nav .pip-container {
	display: flex;
	gap: 6px;
	padding-top: 14px;
	padding-bottom: 14px;
	flex-wrap: nowrap;
}

.pip-category-pill {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	background: var(--pip-bg);
	color: var(--pip-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s, color .2s;
	border: 1.5px solid transparent;
	flex-shrink: 0;
}

.pip-category-pill:hover {
	background: rgba(var(--pip-primary-rgb), .08);
	color: var(--pip-primary);
}

.pip-category-pill--active {
	background: var(--pip-primary);
	color: #fff;
	border-color: var(--pip-primary);
}

.pip-category-pill--active:hover {
	background: var(--pip-primary);
	color: #fff;
	opacity: .9;
}

.pip-category-pill--parent {
	background: transparent;
	border-color: var(--pip-border);
}

/* --------------------------------------------------------------------------
   Archive: grouped sections (top-level category view)
   -------------------------------------------------------------------------- */
.pip-archive-content {
	padding: 36px 0 56px;
	background: var(--pip-bg);
	min-height: 300px;
}

.pip-archive-section {
	background: #fff;
	border-radius: var(--pip-radius);
	border: 1px solid var(--pip-border);
	margin-bottom: 24px;
	overflow: hidden;
}

.pip-archive-section__header {
	padding: 18px 24px;
	border-bottom: 1px solid var(--pip-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pip-archive-section__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--pip-text);
	margin: 0;
	text-decoration: none;
}

.pip-archive-section__title:hover { color: var(--pip-primary); }

.pip-archive-section__count {
	font-size: 12px;
	color: var(--pip-muted);
	white-space: nowrap;
}

.pip-archive-section__body {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.pip-archive-subsection {
	padding: 20px 24px;
	border-right: 1px solid var(--pip-border);
}

.pip-archive-subsection:last-child,
.pip-archive-subsection:nth-child(3n) { border-right: none; }

.pip-archive-subsection__name {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pip-muted);
	margin: 0 0 10px;
	text-decoration: none;
	display: block;
}

.pip-archive-subsection__name:hover { color: var(--pip-primary); }

.pip-archive-subsection__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pip-archive-subsection__item { padding: 5px 0; }

.pip-archive-subsection__link {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 14px;
	color: var(--pip-text);
	text-decoration: none;
	line-height: 1.4;
	transition: color .15s;
}

.pip-archive-subsection__link::before {
	content: '→';
	color: var(--pip-primary);
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 1px;
	font-size: 12px;
}

.pip-archive-subsection__link:hover { color: var(--pip-primary); }

.pip-archive-subsection__all {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pip-primary);
	text-decoration: none;
}

.pip-archive-subsection__all:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Articles grid (category/search listing)
   -------------------------------------------------------------------------- */
.pip-articles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	margin: 0;
}

.pip-articles-grid--compact .pip-article-card { padding: 18px 20px; }

.pip-article-card {
	background: #fff;
	border: 1.5px solid var(--pip-border);
	border-radius: var(--pip-radius);
	padding: 24px;
	transition: border-color .2s, box-shadow .2s, transform .2s;
	display: flex;
	flex-direction: column;
}

.pip-article-card:hover {
	border-color: var(--pip-primary);
	box-shadow: var(--pip-shadow-md);
	transform: translateY(-2px);
}

.pip-article-card__category {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pip-primary);
	margin-bottom: 8px;
}

.pip-article-card__category a {
	color: inherit;
	text-decoration: none;
}

.pip-article-card__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--pip-text);
	margin: 0 0 10px;
	line-height: 1.4;
}

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

.pip-article-card__title a:hover { color: var(--pip-primary); }

.pip-article-card__excerpt {
	font-size: 14px;
	color: var(--pip-muted);
	line-height: 1.6;
	flex: 1;
	margin: 0;
}

.pip-article-card__meta {
	margin-top: 16px;
	font-size: 12px;
	color: #9ca3af;
	border-top: 1px solid var(--pip-border);
	padding-top: 12px;
}

/* Featured articles strip */
.pip-articles-featured {
	background: rgba(var(--pip-primary-rgb), .04);
	border-left: 4px solid var(--pip-primary);
	padding: 20px 24px;
	border-radius: 0 var(--pip-radius) var(--pip-radius) 0;
	margin: 32px 0;
}

.pip-articles-featured__heading {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pip-primary);
	margin: 0 0 14px;
}

/* --------------------------------------------------------------------------
   No results
   -------------------------------------------------------------------------- */
.pip-no-results {
	padding: 56px 24px;
	text-align: center;
	color: var(--pip-muted);
}

.pip-no-results p { margin: 0 0 12px; font-size: 16px; }

.pip-no-results a { color: var(--pip-primary); }

/* --------------------------------------------------------------------------
   Single article
   -------------------------------------------------------------------------- */
.pip-single-wrap {
	background: var(--pip-bg);
	min-height: 60vh;
	padding-bottom: 64px;
}

.pip-single-inner {
	display: grid;
	grid-template-columns: 1fr 272px;
	gap: 32px;
	padding-top: 36px;
	align-items: start;
}

.pip-article-main { min-width: 0; }

.pip-article-sidebar {
	position: sticky;
	top: 28px;
}

/* Artikeltitel (H1) alleen op single-artikelpagina's: regelhoogte gelijk aan de fontsize. */
body.single-pip_article h1 {
	line-height: 60px !important; /* 100% */
}

.pip-article-single {
	background: #fff;
	border-radius: var(--pip-radius);
	border: 1px solid var(--pip-border);
	padding: 40px 48px;
}

.pip-article-single__header {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 2px solid var(--pip-primary);
}

.pip-article-single__category {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pip-primary);
	margin: 0 0 12px;
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

.pip-article-single__category a {
	color: inherit;
	text-decoration: none;
}

.pip-article-single__category a:hover { text-decoration: underline; }

.pip-article-single__title {
	font-size: 28px;
	font-weight: 800;
	color: var(--pip-text);
	margin: 0 0 12px;
	line-height: 1.25;
}

.pip-version-info {
	font-size: 13px;
	color: var(--pip-muted);
	margin-top: 4px;
}

.pip-version-info__author {
	font-weight: 600;
	color: var(--pip-text);
}

.pip-version-info__link {
	color: var(--pip-primary);
	text-decoration: none;
	font-size: 12px;
}

.pip-article-single__content,
.pip-prose {
	font-size: 16px;
	line-height: 1.8;
	color: #374151;
}

.pip-article-single__content h2,
.pip-prose h2 {
	font-size: 21px;
	font-weight: 700;
	color: var(--pip-text);
	margin: 40px 0 14px;
}

.pip-article-single__content h3,
.pip-prose h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--pip-text);
	margin: 32px 0 10px;
}

.pip-article-single__content a { color: var(--pip-primary); }

.pip-article-single__content p,
.pip-prose p { margin-bottom: 18px; }

.pip-article-single__content ul,
.pip-article-single__content ol,
.pip-prose ul,
.pip-prose ol {
	padding-left: 24px;
	margin-bottom: 18px;
}

.pip-article-single__content li,
.pip-prose li { margin-bottom: 6px; }

.pip-article-single__content img,
.pip-prose img {
	max-width: 100%;
	border-radius: var(--pip-radius-sm);
	margin: 16px 0;
}

.pip-article-single__content blockquote,
.pip-prose blockquote {
	border-left: 4px solid var(--pip-primary);
	padding: 12px 20px;
	background: rgba(var(--pip-primary-rgb), .05);
	margin: 24px 0;
	font-style: italic;
	color: var(--pip-muted);
	border-radius: 0 var(--pip-radius-sm) var(--pip-radius-sm) 0;
}

.pip-article-single__content code,
.pip-prose code {
	background: #f1f5f9;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: .875em;
	font-family: ui-monospace, SFMono-Regular, monospace;
}

.pip-article-single__content pre,
.pip-prose pre {
	background: #1e293b;
	color: #e2e8f0;
	padding: 20px;
	border-radius: var(--pip-radius-sm);
	overflow-x: auto;
	font-size: 14px;
	margin: 20px 0;
}

.pip-article-single__content pre code,
.pip-prose pre code {
	background: none;
	padding: 0;
	color: inherit;
}

/* Tags */
.pip-article-single__tags {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--pip-border);
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.pip-article-single__tags-label {
	font-size: 13px;
	color: var(--pip-muted);
	font-weight: 600;
}

.pip-tag-pill {
	display: inline-block;
	padding: 4px 12px;
	background: var(--pip-bg);
	border: 1px solid var(--pip-border);
	border-radius: 999px;
	font-size: 12px;
	color: var(--pip-muted);
	text-decoration: none;
	transition: background .2s, border-color .2s, color .2s;
}

.pip-tag-pill:hover {
	background: var(--pip-primary);
	border-color: var(--pip-primary);
	color: #fff;
}

/* Sidebar card */
.pip-sidebar-card {
	background: #fff;
	border: 1.5px solid var(--pip-border);
	border-radius: var(--pip-radius);
	padding: 20px;
	margin-bottom: 20px;
}

.pip-sidebar-card__title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pip-muted);
	margin: 0 0 14px;
}

.pip-sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pip-sidebar-list li + li { margin-top: 8px; }

.pip-sidebar-list a {
	display: flex;
	gap: 7px;
	font-size: 14px;
	color: var(--pip-text);
	text-decoration: none;
	line-height: 1.4;
}

.pip-sidebar-list a::before {
	content: '→';
	color: var(--pip-primary);
	flex-shrink: 0;
	font-weight: 700;
	font-size: 12px;
	margin-top: 2px;
}

.pip-sidebar-list a:hover { color: var(--pip-primary); }

/* Related articles */
.pip-related {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 2px solid var(--pip-primary);
}

.pip-related__heading {
	font-size: 18px;
	font-weight: 700;
	color: var(--pip-text);
	margin: 0 0 20px;
}

/* --------------------------------------------------------------------------
   Video embed (Wistia)
   -------------------------------------------------------------------------- */
.pip-video-wrap {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--pip-radius);
	margin: 28px 0;
	background: #000;
}

.pip-video-wrap iframe,
.pip-video-wrap .wistia_embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------------
   Helpful votes widget
   -------------------------------------------------------------------------- */
.pip-helpful {
	width: 100%;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--pip-primary);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 20px;
	text-align: center;
}

.pip-helpful__question {
	margin: 0;
	color: #000;
	font-family: var(--Typography-Figtree, Figtree);
	font-size: var(--Typography-Size-H4, 25px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-h-4120, 30px); /* 120% */
	letter-spacing: var(--typography-letter-spacing-h-41, -0.25px);
}

.pip-helpful__buttons {
	display: inline-flex;
	gap: 12px;
	justify-content: center;
}

.pip-helpful__btn {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 24px;
	border: 1px solid var(--pip-border);
	border-radius: 999px;
	background: #fff;
	color: var(--pip-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

/* Text-roll: bij hover schuift het label naar beneden weg en komt een kopie
   van boven naar beneden naar binnen. */
.pip-helpful__btn-label {
	display: inline-block;
	overflow: hidden;      /* knipt de kopie boven/onder weg */
	line-height: 1.2;
}

.pip-helpful__btn-label__t {
	position: relative;
	display: block;
	transition: transform .3s ease;
}

.pip-helpful__btn-label__t::before {
	content: attr(data-text);
	position: absolute;
	left: 0;
	bottom: 100%; /* kopie zit direct boven de tekst, buiten de clip */
	width: 100%;
	text-align: center;
}

.pip-helpful__btn:hover .pip-helpful__btn-label__t,
.pip-helpful__btn--active .pip-helpful__btn-label__t {
	transform: translateY(100%);
}

/* Dit design toont geen duim-iconen. */
.pip-helpful__btn svg {
	display: none;
}

/* Yes = groen, No = oranje. */
.pip-helpful__btn--up {
	border-color: #34a853;
	color: #2e9e4f;
}

.pip-helpful__btn--down {
	border-color: var(--pip-primary, #F55522);
	color: var(--pip-primary, #F55522);
}

/* Hover/actief: oranje achtergrond + oranje rand + witte tekst (beide knoppen). */
.pip-helpful__btn:hover,
.pip-helpful__btn--active {
	background: var(--pip-primary);
	border-color: var(--pip-primary);
	color: #fff;
}

.pip-helpful__btn--voted {
	opacity: .6;
	cursor: default;
	pointer-events: none;
}

.pip-helpful__comment {
	flex: 0 0 100%;
	width: 100%;
	max-width: 560px;
	margin: 10px auto 0;
	text-align: left;
}

.pip-helpful__comment[hidden] { display: none; }

.pip-helpful__comment-label {
	display: block;
	margin-bottom: 8px;
	color: var(--pip-text);
	font-size: 14px;
	font-weight: 600;
}

.pip-helpful__comment-label span {
	color: var(--pip-muted);
	font-weight: 400;
}

.pip-helpful__comment-field {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 112px;
	resize: vertical;
	padding: 12px 14px;
	border: 1px solid var(--pip-border);
	border-radius: 8px;
	background: #fff;
	color: var(--pip-text);
	font: inherit;
	line-height: 1.5;
}

.pip-helpful__comment-field:focus {
	outline: none;
	border-color: var(--pip-primary);
	box-shadow: 0 0 0 2px rgba(var(--pip-primary-rgb), .14);
}

.pip-helpful .pip-helpful__comment-submit {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	min-height: 44px;
	padding: 11px 22px !important;
	border: 1px solid var(--pip-primary) !important;
	border-radius: 999px !important;
	background: var(--pip-primary) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .2s ease, transform .2s ease;
}

.pip-helpful .pip-helpful__comment-submit:hover {
	opacity: .88;
	transform: translateY(-1px);
}

.pip-helpful .pip-helpful__comment-submit:focus-visible {
	outline: 2px solid var(--pip-primary);
	outline-offset: 3px;
}

.pip-helpful .pip-helpful__comment-submit:disabled { opacity: .6; cursor: default; transform: none; }

.pip-helpful__comment-status {
	min-height: 20px;
	margin: 8px 0 0;
	color: #b42318;
	font-size: 13px;
}

.pip-helpful__thankyou {
	flex: 0 0 100%;
	margin: 4px 0 0;
	color: var(--pip-muted);
	font-size: 13px;
}

.pip-helpful__thankyou.is-error { color: #b42318; }

/* Score-percentage en bedankje niet tonen na het stemmen. */
.pip-helpful__score {
	display: none;
}

.pip-helpful__feedback-link {
	display: none; /* "Leave a comment"-knop verborgen op verzoek */
	margin-top: 14px;
	font-size: 13px;
	color: var(--pip-muted);
	text-decoration: none;
	border-bottom: 1px dashed var(--pip-border);
	transition: color .2s, border-color .2s;
	cursor: pointer;
	background: none;
	border-top: none;
	border-left: none;
	border-right: none;
	padding: 0;
	font-family: inherit;
}

.pip-helpful__feedback-link:hover {
	color: var(--pip-primary);
	border-bottom-color: var(--pip-primary);
}

/* --------------------------------------------------------------------------
   Feedback modal
   -------------------------------------------------------------------------- */
.pip-feedback-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(2px);
}

.pip-feedback-modal.is-open {
	display: flex;
}

.pip-feedback-modal__inner {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: var(--pip-radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
	padding: 36px 40px 32px;
}

.pip-feedback-modal__close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--pip-muted);
	padding: 4px;
	line-height: 1;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: color .15s, background .15s;
}

.pip-feedback-modal__close:hover {
	color: var(--pip-text);
	background: var(--pip-bg);
}

.pip-feedback-modal__title {
	font-size: 20px;
	font-weight: 800;
	color: var(--pip-text);
	margin: 0 0 6px;
	padding-right: 32px;
}

.pip-feedback-modal__sub {
	font-size: 14px;
	color: var(--pip-muted);
	margin: 0 0 24px;
	line-height: 1.6;
}

@media (max-width: 640px) {
	.pip-feedback-modal__inner {
		padding: 28px 20px 24px;
	}
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pip-pagination {
	display: flex;
	gap: 6px;
	margin-top: 40px;
	flex-wrap: wrap;
	justify-content: center;
}

.pip-pagination a,
.pip-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	border: 1.5px solid var(--pip-border);
	border-radius: var(--pip-radius-sm);
	font-size: 14px;
	color: var(--pip-text);
	text-decoration: none;
	background: #fff;
	transition: border-color .2s, color .2s;
}

.pip-pagination .current {
	background: var(--pip-primary);
	color: #fff;
	border-color: var(--pip-primary);
}

.pip-pagination a:hover {
	border-color: var(--pip-primary);
	color: var(--pip-primary);
}

/* --------------------------------------------------------------------------
   Org logo
   -------------------------------------------------------------------------- */
.pip-org-logo {
	max-height: 48px;
	width: auto;
}

/* --------------------------------------------------------------------------
   Login page
   -------------------------------------------------------------------------- */
.pip-login-body {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 24px;
	background: var(--pip-bg);
	min-height: 50vh;
}

.pip-login-wrap {
	width: 100%;
}

.pip-login-card {
	width: 100%;
	max-width: 440px;
	margin-inline: auto;
	background: #fff;
	border-radius: var(--pip-radius);
	border: 1.5px solid var(--pip-border);
	padding: 40px 40px 36px;
	box-shadow: var(--pip-shadow);
}

.pip-login-card__title {
	font-size: 22px;
	font-weight: 800;
	color: var(--pip-text);
	margin: 0 0 8px;
}

.pip-login-card__subtitle {
	font-size: 14px;
	color: var(--pip-muted);
	margin: 0 0 28px;
}

.pip-login-notice {
	padding: 12px 16px;
	border-radius: var(--pip-radius-sm);
	margin-bottom: 16px;
	font-size: 14px;
}

.pip-login-notice--error {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

.pip-login-notice--success {
	background: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}

/* Neutrale tussenstand, bijv. een aanvraag die op goedkeuring wacht. */
.pip-login-notice--info {
	background: #eff6ff;
	color: #1d4ed8;
	border: 1px solid #bfdbfe;
}

.pip-form-row { margin-bottom: 28px; }

/* Label + veld worden gedeeld door het login- en het registratieformulier.
   De .pip-login-* aliassen bestaan zodat register.php dezelfde stijl krijgt
   zonder een tweede, bijna identieke regelset. */
/* Verplicht-markering achter een label. Puur visueel: het veld zelf draagt
   al het required-attribuut, dus voor screenreaders is de asterisk hidden. */
.pip-required {
	color: var(--pip-primary);
	margin-left: 2px;
}

.pip-label,
.pip-login-label {
	display: block;
	padding: 0;
	margin: 0 0 4px;
	font-weight: 500;
	font-size: 13px;
	color: var(--pip-text);
}

/* !important is nodig omdat het thema alle velden afvangt met
   `input[type=date], input[type=email], … , select, textarea`
   (specificiteit 0,1,1) en daarmee van een enkele klasse wint. Dat blok zet
   border, border-radius, padding, transition en width — vandaar dat elk van
   die eigenschappen hier expliciet wordt teruggezet. */
.pip-input,
.pip-login-input,
input.pip-input,
input.pip-login-input {
	width: 100% !important;
	max-width: none !important;
	padding: 6px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D)) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 17px;
	line-height: 1.5;
	box-sizing: border-box;
	color: var(--pip-text);
	outline: none;
	transition: border-color .2s !important;
}

.pip-input::placeholder,
.pip-login-input::placeholder { color: var(--pip-muted); }

.pip-input:focus,
.pip-login-input:focus,
input.pip-input:focus,
input.pip-login-input:focus {
	border-bottom-color: var(--pip-primary) !important;
	box-shadow: none !important;
	outline: none;
}

.pip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border: none;
	border-radius: var(--pip-radius-sm);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .2s;
	text-decoration: none;
}

.pip-btn--primary {
	background: var(--pip-primary);
	color: #fff;
	width: 100%;
}

.pip-btn--primary:hover { opacity: .9; }

.pip-btn--outline {
	background: transparent;
	color: var(--pip-primary);
	border: 2px solid var(--pip-primary);
	padding: 11px 26px;
	width: auto;
}

.pip-btn--outline:hover {
	background: var(--pip-primary);
	color: #fff;
}

.pip-btn:disabled {
	opacity: .6;
	cursor: default;
}

.pip-login-feedback {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: var(--pip-radius-sm);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   403 page
   -------------------------------------------------------------------------- */
.pip-403-page {
	min-height: 50vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 72px 24px;
	text-align: center;
	background: var(--pip-bg);
}

.pip-403-page__code {
	font-size: 80px;
	font-weight: 900;
	color: var(--pip-primary);
	line-height: 1;
	margin: 0 0 8px;
}

.pip-403-page__title {
	font-size: 28px;
	font-weight: 800;
	color: var(--pip-text);
	margin: 0 0 16px;
}

.pip-403-page__desc {
	font-size: 16px;
	color: var(--pip-muted);
	max-width: 480px;
	margin: 0 auto 36px;
	line-height: 1.65;
}

.pip-403-page__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Version history bar + revision banner
   -------------------------------------------------------------------------- */

.pip-rev-banner {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	background: #fef9ec;
	border: 1px solid #f5d478;
	border-radius: var(--pip-radius-sm);
	padding: 10px 14px;
	font-size: 13px;
	color: #7a5a0a;
	margin-bottom: 20px;
	flex-wrap: wrap;
	line-height: 1.5;
}

.pip-rev-banner svg {
	flex-shrink: 0;
	margin-top: 1px;
}

.pip-rev-banner__current {
	color: #7a5a0a;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
	margin-left: 4px;
}

.pip-rev-banner__current:hover { opacity: .8; }

.pip-version-history {
	margin-top: 32px;
	padding-top: 18px;
	border-top: 1px solid var(--pip-border);
}

.pip-version-history__header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.pip-version-history__label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pip-muted);
	white-space: nowrap;
}

.pip-version-history__select {
	border: 1.5px solid var(--pip-border);
	border-radius: var(--pip-radius-sm);
	padding: 6px 10px;
	font-size: 13px;
	color: var(--pip-text);
	background: #fff;
	cursor: pointer;
	flex: 1;
	min-width: 0;
	max-width: 480px;
}

.pip-version-history__select:focus {
	outline: none;
	border-color: var(--pip-primary);
	box-shadow: 0 0 0 3px rgba(var(--pip-primary-rgb), .12);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.pip-single-inner {
		grid-template-columns: 1fr;
	}

	.pip-article-sidebar { position: static; }

	.pip-article-single { padding: 28px 24px; }

	.pip-archive-section__body {
		grid-template-columns: 1fr 1fr;
	}

	.pip-archive-subsection:nth-child(3n) { border-right: 1px solid var(--pip-border); }
	.pip-archive-subsection:nth-child(2n) { border-right: none; }
}

@media (max-width: 640px) {
	.pip-hero { padding: 48px 20px 56px; }

	.pip-home-categories,
	.pip-home-popular { padding: 36px 16px; }

	.pip-cat-grid,
	.pip-popular-grid,
	.pip-articles-grid { grid-template-columns: 1fr; }

	/* Populaire-artikelen-kaarten onder elkaar (overschrijft de inline columns). */
	.pip-popular-cards { grid-template-columns: 1fr !important; }

	/* Op mobiel de kaarttekst korter houden (max 4 regels). */
	.pip-popular-card__desc {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 16px; /* iets compacter op mobiel */
	}

	.pip-archive-section__body { grid-template-columns: 1fr; }

	.pip-archive-subsection { border-right: none; }

	.pip-article-single__title { font-size: 22px; }

	/* Knoppen onder de vraag i.p.v. ernaast; Yes/No blijven naast elkaar. */
	.pip-helpful {
		flex-direction: column;
	}

	.pip-login-card { padding: 28px 20px 24px; }

	.pip-403-page__code { font-size: 60px; }

	.pip-breadcrumb-bar .pip-search-wrap { display: none; }
}

/* =========================================================================
   Language switcher (WPML)
   ========================================================================= */

/* Taalwisselaar met wereldbol — de vorm die de hele site aanhoudt.
   De uitklap werkt zonder JavaScript: :hover voor de muis, :focus-within voor
   het toetsenbord. */
.pip-lang-globe {
	position: relative;
	display: inline-block;
	font-family: 'Figtree', sans-serif;
}

.pip-lang-globe__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	background: none;
	border: 1.5px solid transparent;
	border-radius: 6px;
	color: inherit;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.pip-lang-globe__toggle:hover,
.pip-lang-globe:focus-within .pip-lang-globe__toggle {
	border-color: currentColor;
}

.pip-lang-globe__icon {
	flex: 0 0 auto;
}

.pip-lang-globe__caret {
	display: flex;
	transition: transform .15s ease;
}

.pip-lang-globe:hover .pip-lang-globe__caret,
.pip-lang-globe:focus-within .pip-lang-globe__caret {
	transform: rotate(180deg);
}

.pip-lang-globe__list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 50;
	min-width: 150px;
	margin: 0;
	padding: 5px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--pip-border, #e5e7eb);
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .10);

	/* visibility i.p.v. display:none, zodat de overgang loopt en het
	   toetsenbord de links kan bereiken zodra de knop focus heeft */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.pip-lang-globe:hover .pip-lang-globe__list,
.pip-lang-globe:focus-within .pip-lang-globe__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pip-lang-globe__item a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 9px;
	border-radius: 5px;
	color: var(--pip-text, #1f2937);
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.pip-lang-globe__item a:hover,
.pip-lang-globe__item a:focus-visible {
	background: var(--pip-bg, #f9fafb);
}

.pip-lang-globe__item-code {
	min-width: 22px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--pip-muted, #6b7280);
}

.pip-lang-globe__item.is-active a {
	font-weight: 700;
}

.pip-lang-globe__item.is-active .pip-lang-globe__item-code {
	color: var(--pip-primary, #F55522);
}

.pip-lang-switcher {
	display: flex;
	gap: 4px;
	align-items: center;
}

.pip-lang-switcher__item {
	padding: 3px 9px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	color: var(--pip-primary, #1a1a2e);
	border: 1.5px solid transparent;
	transition: border-color .15s, background .15s, color .15s;
}

.pip-lang-switcher__item:hover {
	border-color: var(--pip-primary, #1a1a2e);
}

.pip-lang-switcher__item--active {
	background: var(--pip-primary, #1a1a2e);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Read-status badges (New / Updated)
   -------------------------------------------------------------------------- */
.pip-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .03em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.pip-badge--new {
	background: #dcfce7;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.pip-badge--changed {
	background: #fef9c3;
	color: #854d0e;
	border: 1px solid #fde68a;
}

.pip-badge--read {
	padding: 2px 6px;
	background: transparent;
	color: var(--pip-muted, #6b7280);
	border: 1px solid var(--pip-border, #e5e7eb);
	vertical-align: middle;
}

.pip-badge--read svg {
	display: block;
}

.pip-article-card__title .pip-badge,
.pip-article-card__badges {
	margin-left: 6px;
}

/* --------------------------------------------------------------------------
   Registration form (shortcode, embedded in a WP page)
   -------------------------------------------------------------------------- */
.pip-login-form {
	display: block;
}

/* register.php zet de velden zonder .pip-form-row-wrapper onder elkaar. */
.pip-login-input { margin-bottom: 28px; }

.pip-login-footer-link {
	margin-top: 20px;
	font-size: 13px;
	color: var(--pip-muted);
	text-align: center;
}

/* Kleur en gewicht komen uit .pip-prose a; hier alleen de underline-regie. */
.pip-login-footer-link a { text-decoration: none; }
.pip-login-footer-link a:hover { text-decoration: underline; }

/* ==========================================================================
   Paths — leerroutes ([pip_paths], [pip_path]) + voltooid-knop
   ========================================================================== */

/* Overzichtsgrid ([pip_paths]) */
.pip-paths-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.pip-path-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--pip-border);
	border-radius: var(--pip-radius);
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: var(--pip-text);
	transition: box-shadow .2s, transform .2s;
}

.pip-path-card:hover {
	box-shadow: var(--pip-shadow-md);
	transform: translateY(-2px);
}

.pip-path-card__thumb img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.pip-path-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
}

.pip-path-card__title {
	font-size: 17px;
	font-weight: 700;
}

.pip-path-card__desc {
	font-size: 14px;
	color: var(--pip-muted);
}

.pip-path-card__meta {
	font-size: 13px;
	color: var(--pip-muted);
	margin-top: 2px;
}

/* Feature-cards ([pip_paths] style="feature"): icoon + titel + tekst + pijl */
.pip-paths-grid--feature {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Slider */
.pip-paths-slider { position: relative; }

.pip-paths-slider__viewport { overflow: hidden; }

.pip-paths-slider__track {
	display: flex;
	gap: 20px;
	transition: transform .35s ease;
}

/* Kaartbreedte wordt door JS gezet; niet meekrimpen. */
.pip-paths-slider .pip-path-feature-card {
	flex: 0 0 auto;
	box-sizing: border-box;
}

/* Alles past op één pagina → geen sleep-transform. */
.pip-paths-slider--static .pip-paths-slider__track { transform: none !important; }

.pip-paths-slider__dots {
	width: fit-content;
	margin: 22px auto 0;
	display: flex;
	align-items: center;
	gap: 15px;
}

.pip-paths-slider__dots:empty { display: none; }

.pip-paths-slider__dot {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	min-width: 0 !important;
	width: 12px !important;
	height: 12px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .6) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background .2s, transform .2s;
}

.pip-paths-slider__dot:hover { transform: scale(1.15); }

.pip-paths-slider__dot--active {
	background: var(--Primary-Dark-Button, #3C3C3C) !important;
}

.pip-path-feature-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 44px;
	background: #fff;
	border: 1px solid transparent;
	border-radius: 0;
	text-decoration: none;
	color: var(--pip-text);
	transition: box-shadow .2s, transform .2s, background-color .2s, border-color .2s, color .2s;
}

.pip-path-feature-card:hover {
	box-shadow: var(--pip-shadow-md);
	transform: translateY(-2px);
	border-color: #F55522; /* Primary-Orange */
	background: #545454; /* Primary-Dark-CTA */
	color: #fff;
}

/* Tekst leesbaar houden op de donkere hover-achtergrond */
.pip-path-feature-card:hover .pip-path-feature-card__title {
	color: #fff;
}

.pip-path-feature-card:hover .pip-path-feature-card__desc {
	color: rgba(255, 255, 255, .8);
}

.pip-path-feature-card:hover .pip-path-feature-card__icon,
.pip-path-feature-card:hover .pip-path-feature-card__arrow {
	color: #F55522; /* Primary-Orange */
}

.pip-path-feature-card__icon {
	color: var(--pip-primary);
	display: inline-flex;
}

.pip-path-feature-card__icon img,
.pip-path-feature-card__icon svg {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.pip-path-feature-card__title {
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--pip-text);
	padding-bottom: 38px;
}

.pip-path-feature-card__desc {
	margin-top: auto; /* lijnt de omschrijving altijd onderaan uit */
	padding-right: 50px; /* 50px ruimte naast de tekst voor het pijltje rechtsonder */
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pip-muted);
}

.pip-path-feature-card__arrow {
	position: absolute;
	right: 44px;
	bottom: 28px;
	color: var(--pip-text);
	display: inline-flex;
	transition: transform .2s;
}

.pip-path-feature-card:hover .pip-path-feature-card__arrow {
	transform: translate(2px, -2px);
}

/* Path-lijst met artikel-voorproefje ([pip_path_list]) */
.pip-path-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

/* Desktop: kaarten cappen zodat één path niet de volle breedte vult
   (tablet/mobiel blijven ongewijzigd op auto-fit 1fr). */
@media (min-width: 1025px) {
	.pip-path-list {
		grid-template-columns: repeat(auto-fill, minmax(300px, 400px));
		justify-content: start;
	}
}

.pip-path-list__item {
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: transparent;
	border: none;
	border-left: 1px solid var(--Primary-Dark, #2D2D2D);
	border-radius: 0;
	transition: border-left-color .15s ease, border-left-width .15s ease, background-color .15s ease;
}

.pip-path-list__item:hover {
	border-left: 2px solid var(--Primary-Orange, #F55522);
	background: var(--Primary-White, #fff);
}

.pip-path-list__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}

.pip-path-list__icon {
	color: var(--pip-primary);
	display: inline-flex;
	flex-shrink: 0;
	margin-bottom: 16px;
}

.pip-path-list__icon img,
.pip-path-list__icon svg {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.pip-path-list__title {
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: 'Figtree', sans-serif;
	font-size: var(--Typography-Size-H3, 30px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-h-3110, 33px); /* 110% */
	letter-spacing: var(--typography-letter-spacing-h-31, -0.3px);
	text-decoration: none;
}

.pip-path-list__title:hover { color: var(--pip-primary); }

.pip-path-list__desc {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--pip-muted);
}

.pip-path-list__articles {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.pip-path-list__article {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
}

.pip-path-list__article a {
	color: var(--mist-600636363, var(--Mist-600, #636363));
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-size: var(--Typography-Size-Body, 17px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-body-160, 27.2px); /* 160% */
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
}

.pip-path-list__article a:hover { color: var(--pip-primary); }

.pip-path-list__check {
	flex-shrink: 0;
	width: 16px;
	color: var(--pip-primary);
	font-weight: 700;
}

.pip-path-list__article--done a { color: var(--pip-muted); }

.pip-path-list__more {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	color: var(--mist-900191919, var(--Mist-900, #191919));
	font-family: 'Inter', sans-serif;
	font-size: var(--Typography-Size-Body, 17px);
	font-style: normal;
	font-weight: 500;
	line-height: var(--typography-line-height-body-160, 27.2px); /* 160% */
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
	text-decoration: none;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.pip-path-list__more:hover {
	color: var(--pip-primary, #F55522);
	text-decoration: underline;
	background: none !important;
}

/* Voortgangsbalk */
.pip-path-progress {
	margin: 0 0 20px;
}

.pip-path-progress__bar {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--pip-border);
	overflow: hidden;
}

.pip-path-progress__fill {
	display: block;
	height: 100%;
	background: var(--pip-primary);
	border-radius: 999px;
	transition: width .3s ease;
}

.pip-path-progress__label {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--pip-muted);
}

.pip-path-progress--mini { margin: 8px 0 0; }
.pip-path-progress--mini .pip-path-progress__bar { height: 5px; }
.pip-path-progress--mini .pip-path-progress__label { font-size: 12px; }

/* Stappenlijst ([pip_path]) */
.pip-path-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: pip-path;
}

.pip-path-step {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--pip-border);
}

.pip-path-step:last-child { border-bottom: none; }

.pip-path-step__num {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--pip-bg);
	border: 1px solid var(--pip-border);
	font-size: 14px;
	font-weight: 700;
	color: var(--pip-muted);
}

.pip-path-step--done .pip-path-step__num {
	background: var(--pip-primary);
	border-color: var(--pip-primary);
	color: #fff;
}

.pip-path-step__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.pip-path-step__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--pip-text);
	text-decoration: none;
}

.pip-path-step__title:hover { color: var(--pip-primary); }

.pip-path-step__desc {
	font-size: 14px;
	color: var(--pip-muted);
}

.pip-path-step__status {
	flex-shrink: 0;
	align-self: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--pip-muted);
}

.pip-path-step--done .pip-path-step__status { color: var(--pip-primary); }

/* Voltooid-knop onder artikelen */
.pip-complete-wrap {
	margin: 32px 0 8px;
	padding-top: 24px;
	border-top: 1px solid var(--pip-border);
}

.pip-complete-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	border: 2px solid var(--pip-primary);
	background: transparent;
	color: var(--pip-primary);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s, color .2s, opacity .2s;
}

.pip-complete-btn:hover { background: rgba(var(--pip-primary-rgb), .08); }
.pip-complete-btn:disabled { opacity: .6; cursor: default; }

.pip-complete-btn--done {
	background: var(--pip-primary);
	color: #fff;
}

.pip-complete-btn--done:hover { background: var(--pip-primary); opacity: .9; }

/* -------------------------------------------------------------------------
   Artikel-navigatie onder een artikel: Previous · Mark as completed · Next
   ------------------------------------------------------------------------- */
.pip-path-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	margin-top: 48px;
}
.pip-path-nav__side--prev { justify-self: start; }
.pip-path-nav__side--mid  { justify-self: center; }
.pip-path-nav__side--next { justify-self: end; }

.pip-path-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 100px;
	font-family: var(--Typography-Inter, Inter);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Pill-radius forceren (Elementor/theme kan <a> anders platslaan) */
.pip-path-nav .pip-path-nav__btn,
.pip-path-nav .pip-complete-btn { border-radius: 100px; }

/* Standaard text-roll bij hover (zelfde effect als de pip-btn-* knoppen) */
.pip-path-nav__btn:hover .pip-btn-text__in,
.pip-path-nav .pip-complete-btn:hover .pip-btn-text__in {
	transform: translateY(100%);
}
/* Previous: outline pill met lichtgrijze rand, donkere tekst */
.pip-path-nav__prev {
	background: #fff;
	border: 1px solid var(--Primary-Dark-Button, #3C3C3C);
	color: var(--dark-2-d-2-d-2-d, #2D2D2D);
}
.pip-path-nav__prev:hover {
	background: var(--pip-primary, #F55522);
	border-color: var(--pip-primary, #F55522);
	color: #fff;
}
/* Next: donkere filled pill */
.pip-path-nav__next {
	background: var(--dark-2-d-2-d-2-d, #2D2D2D);
	border: 1px solid var(--dark-2-d-2-d-2-d, #2D2D2D);
	color: #fff;
}
.pip-path-nav__next:hover {
	background: var(--pip-primary, #F55522);
	border-color: var(--pip-primary, #F55522);
	color: #fff;
}

/* Middelste "Mark as completed" — groene outline pill binnen de nav */
.pip-path-nav .pip-complete-btn {
	border: 1px solid #43A047;
	background: #fff;
	color: #43A047;
	font-family: var(--Typography-Inter, Inter);
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
}
.pip-path-nav .pip-complete-btn:hover {
	background: var(--pip-primary, #F55522);
	border-color: var(--pip-primary, #F55522);
	color: #fff;
}
.pip-path-nav .pip-complete-btn--done {
	background: #43A047;
	color: #fff;
}
.pip-path-nav .pip-complete-btn--done:hover {
	background: var(--pip-primary, #F55522);
	border-color: var(--pip-primary, #F55522);
	color: #fff;
	opacity: 1;
}
.pip-path-nav .pip-complete-wrap { margin: 0; padding-top: 0; border-top: 0; }

@media (max-width: 600px) {
	.pip-path-nav {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 12px;
	}
	.pip-path-nav__side { justify-self: center !important; width: 100%; }
	.pip-path-nav__btn,
	.pip-path-nav .pip-complete-btn { width: 100%; }
}

/* Herbruikbare donkere pill-knop */
.pip-btn-dark,
button.pip-btn-dark,
input[type="submit"].pip-btn-dark {
	display: inline-flex;
	padding: 12px 24px 12px 16px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 100px;
	background: var(--Primary-Dark-Button, #3C3C3C);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background-color .2s;
}

.pip-btn-dark:hover,
button.pip-btn-dark:hover { background: #F55522; color: #fff; }

.pip-btn-dark:disabled {
	opacity: .6;
	cursor: default;
}

/* Elementor Button-widget: als de class op de widget staat, neutraliseer de
   wrapper en style de echte <a class="elementor-button">. */
.pip-btn-dark.elementor-widget-button,
.pip-btn-dark .elementor-button-wrapper {
	display: block !important;
	padding: 0 !important;
	background: none !important;
	border-radius: 0 !important;
}

.pip-btn-dark .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 12px 24px 12px 16px !important;
	border-radius: 100px !important;
	background: var(--Primary-Dark-Button, #3C3C3C) !important;
	border: none !important;
	transition: background-color .2s;
}

.pip-btn-dark .elementor-button:hover { background: #F55522 !important; }

/* Icoon + tekst binnen de knop: gegarandeerde ruimte voor het icoon */
.pip-btn-dark .elementor-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.pip-btn-dark .elementor-button .elementor-button-icon {
	display: inline-flex;
	margin: 0;
}

.pip-btn-dark .elementor-button .elementor-button-icon svg {
	width: 1em;
	height: 1em;
}

/* Herbruikbare oranje pill-knop (tegenhanger van pip-btn-dark) */
.pip-btn-orange {
	display: inline-flex;
	padding: 12px 24px 12px 16px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 100px;
	background: var(--pip-primary, #F55522);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}

.pip-btn-orange:hover {
	background: var(--Primary-White, #FFF);
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	border-color: transparent;
}

/* Elementor Button-widget-variant */
.pip-btn-orange.elementor-widget-button,
.pip-btn-orange .elementor-button-wrapper {
	display: block !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;        /* geen border om de widget-box (alleen op de knop) */
	border-radius: 0 !important;
}

.pip-btn-orange .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 12px 24px 12px 16px !important;
	border-radius: 100px !important;
	background: var(--pip-primary, #F55522) !important;
	border: 1px solid transparent !important;
	transition: background-color .2s, color .2s, border-color .2s;
}

.pip-btn-orange .elementor-button:hover {
	background: var(--Primary-White, #FFF) !important;
	border-color: transparent !important;
}

.pip-btn-orange .elementor-button:hover,
.pip-btn-orange .elementor-button:hover .elementor-button-text {
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D)) !important;
}

.pip-btn-orange .elementor-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.pip-btn-orange .elementor-button .elementor-button-icon {
	display: inline-flex;
	margin: 0;
}

.pip-btn-orange .elementor-button .elementor-button-icon svg {
	width: 1em;
	height: 1em;
}

/* Herbruikbare outline pill-knop (transparant + rand, hover vult donker) */
.pip-btn-outline {
	display: inline-flex;
	padding: 12px 24px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 100px;
	background: transparent;
	color: var(--Primary-Dark-Button, #3C3C3C);
	border: 1px solid var(--Mist-400, #989898);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}

.pip-btn-outline:hover {
	background: var(--pip-primary);
	border-color: var(--pip-primary);
	color: #fff;
}

/* Elementor Button-widget-variant */
.pip-btn-outline.elementor-widget-button,
.pip-btn-outline .elementor-button-wrapper {
	display: block !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;        /* geen border om de widget-box (alleen op de knop) */
	border-radius: 0 !important;
}

.pip-btn-outline .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 12px 24px !important;
	border-radius: 100px !important;
	background: transparent !important;
	border: 1px solid var(--Mist-400, #989898) !important;
	color: var(--Primary-Dark-Button, #3C3C3C) !important;
	transition: background-color .2s, color .2s, border-color .2s;
}

.pip-btn-outline .elementor-button:hover {
	background: var(--pip-primary) !important;
	border-color: var(--pip-primary) !important;
	color: #fff !important;
}

.pip-btn-outline .elementor-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.pip-btn-outline .elementor-button .elementor-button-icon {
	display: inline-flex;
	margin: 0;
}

.pip-btn-outline .elementor-button .elementor-button-icon svg {
	width: 1em;
	height: 1em;
}

/* Tekst-roll bij hover (via pip-buttons.js): tekst schuift van boven naar beneden. */
.pip-btn-dark .elementor-button,
.pip-btn-orange .elementor-button,
.pip-btn-outline .elementor-button {
	overflow: hidden;
}

.pip-btn-text {
	display: inline-block;
	overflow: hidden;
	line-height: 1.3;
	vertical-align: bottom;
}

.pip-btn-text__in {
	position: relative;
	display: block;
	transition: transform .3s ease;
}

.pip-btn-text__in::before {
	content: attr(data-text);
	position: absolute;
	left: 0;
	bottom: 100%;
	width: 100%;
}

.pip-btn-dark .elementor-button:hover .pip-btn-text__in,
.pip-btn-orange .elementor-button:hover .pip-btn-text__in,
.pip-btn-outline .elementor-button:hover .pip-btn-text__in {
	transform: translateY(100%);
}

/* Variant zonder icoon/pijl — voeg naast pip-btn-dark / pip-btn-orange / pip-btn-outline toe. */
.pip-btn-dark--no-icon .elementor-button-icon,
.pip-btn-orange--no-icon .elementor-button-icon,
.pip-btn-outline--no-icon .elementor-button-icon {
	display: none !important;
}

.pip-btn-dark--no-icon .elementor-button::after,
.pip-btn-orange--no-icon .elementor-button::after,
.pip-btn-outline--no-icon .elementor-button::after {
	content: none !important;
	display: none !important;
}

/* Zonder icoon: symmetrische padding zodat de tekst echt gecentreerd staat. */
.pip-btn-dark--no-icon,
.pip-btn-orange--no-icon,
.pip-btn-outline--no-icon,
.pip-btn-dark--no-icon .elementor-button,
.pip-btn-orange--no-icon .elementor-button,
.pip-btn-outline--no-icon .elementor-button {
	padding-left: 24px !important;
	padding-right: 24px !important;
	justify-content: center !important;
}

/* Header knoppen: login & contact.
   Deze zijn in Elementor gezet als element-ID (#...) op een Mega Menu-item.
   De styling hoort op de link (.e-n-menu-title-container) binnen dat item. */
#login-button-header .e-n-menu-title-container,
#contact-button-header .e-n-menu-title-container {
	display: flex;
	padding: 12px 24px;
	justify-content: center;
	align-items: center;
	gap: 10px;

	border-radius: 100px;
	border: 1px solid var(--Primary-Dark-Button, #3C3C3C);
}

/* Menu-typografie van Elementor kan de knoptekst extra vet maken;
   forceer de gewenste dikte (pas 500 aan naar wens). */
#login-button-header .e-n-menu-title-text,
#contact-button-header .e-n-menu-title-text {
	font-weight: 500;
}

/* Geen underline bij hover/focus op de knoppen */
#login-button-header .e-n-menu-title-container,
#login-button-header .e-n-menu-title-container:hover,
#login-button-header .e-n-menu-title-container:focus,
#login-button-header .e-n-menu-title-text,
#contact-button-header .e-n-menu-title-container,
#contact-button-header .e-n-menu-title-container:hover,
#contact-button-header .e-n-menu-title-container:focus,
#contact-button-header .e-n-menu-title-text {
	text-decoration: none;
}

/* Elementor tekent het hover-lijntje via een ::before/::after pseudo — uitzetten */
#login-button-header .e-n-menu-title-container::before,
#login-button-header .e-n-menu-title-container::after,
#contact-button-header .e-n-menu-title-container::before,
#contact-button-header .e-n-menu-title-container::after {
	display: none !important;
}

/* Elementor zet op hover een border-bottom op .e-n-menu-title (= de div met het ID) */
#login-button-header:hover,
#login-button-header:focus,
#login-button-header:focus-within,
#contact-button-header:hover,
#contact-button-header:focus,
#contact-button-header:focus-within {
	border: none !important;
}

/* Hover/focus-state: donkere vulling, witte tekst */
#login-button-header .e-n-menu-title-container:hover,
#login-button-header .e-n-menu-title-container:focus,
#contact-button-header .e-n-menu-title-container:hover,
#contact-button-header .e-n-menu-title-container:focus {
	background-color: #3C3C3C;
	border-color: #3C3C3C;
}

#login-button-header .e-n-menu-title-container:hover .e-n-menu-title-text,
#login-button-header .e-n-menu-title-container:focus .e-n-menu-title-text,
#contact-button-header .e-n-menu-title-container:hover .e-n-menu-title-text,
#contact-button-header .e-n-menu-title-container:focus .e-n-menu-title-text {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Zoek-icoon in de header vervangen door eigen SVG
   -------------------------------------------------------------------------- */
.pf-search-header .elementor-search-form__toggle svg {
	display: none !important;
}

.pf-search-header .elementor-search-form__toggle .e-font-icon-svg-container {
	display: inline-block !important;
	width: 23px !important;
	height: 23px !important;
	background-color: transparent !important;
	border: none !important;
	background-image: url('https://kbproductip.dev.peakfort.nl/wp-content/uploads/search.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* --------------------------------------------------------------------------
   Quick navigation (inhoudsopgave) — [pip_toc]
   -------------------------------------------------------------------------- */
.pip-toc {
	font-size: 14px;
}

/* .pip-toc__title: geen eigen overrides — volgt de H4-stijl van het thema. */

.pip-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pip-toc__item {
	margin: 0;
}

.pip-toc__link {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 6px 0;
	color: var(--text-black-191919, var(--Primary-TextBlack, #191919));
	text-decoration: none;
	font-family: var(--Typography-Inter, Inter);
	font-size: var(--Typography-Size-Body, 17px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-body-160, 27.2px);
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
	transition: color .15s ease;
}

.pip-toc__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	width: 17px;
	height: var(--typography-line-height-body-160, 27.2px);
	color: var(--pip-primary);
	transition: transform .15s ease;
}

.pip-toc__arrow svg {
	width: 100%;
	height: auto;
}

.pip-toc__link:hover,
.pip-toc__link.is-active {
	color: var(--pip-primary);
}

/* Hover: het pijltje springt in. */
.pip-toc__link:hover .pip-toc__arrow,
.pip-toc__link.is-active .pip-toc__arrow {
	transform: translateX(4px);
}

.pip-toc__link.is-active .pip-toc__text {
	font-weight: 600;
}

/* Sticky-header offset bij het scrollen naar een sectie (klik = JS-offset in toc.js;
   dit dekt o.a. laden met een #hash in de URL). */
.pip-article-single__content h2[id],
.elementor-widget-theme-post-content .elementor-widget-container h2[id],
.pip-prose h2[id] {
	scroll-margin-top: 120px;
}

/* Links in de artikeltekst: altijd dezelfde kleur als de tekst (#191919) met
   underline, geen aparte hover-/focus-stijl. */
.pip-article-single__content a,
.pip-article-single__content a:hover,
.pip-article-single__content a:focus,
.elementor-widget-theme-post-content .elementor-widget-container a,
.elementor-widget-theme-post-content .elementor-widget-container a:hover,
.elementor-widget-theme-post-content .elementor-widget-container a:focus {
	color: #191919 !important;
	text-decoration: underline !important;
}

/* Links in .pip-prose wijken bewust af van de artikeltekst: oranje en bold.
   Staat na het blok hierboven zodat het bij gelijke specificiteit wint, en
   met !important omdat dat blok het ook gebruikt. */
.pip-prose a,
.pip-prose a:hover,
.pip-prose a:focus {
	color: var(--orange-f-55522, var(--Primary-Orange, #F55522)) !important;
	font-family: var(--Typography-Inter, Inter);
	font-size: var(--Typography-Size-Body, 17px);
	font-style: normal;
	font-weight: 700;
	line-height: var(--typography-line-height-body-160, 27.2px);
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
}

/* Oranje pijl-bullets voor opsommingen in de artikeltekst — dezelfde pijl als de
   quick navigation. Werkt in de plugin-template én in Elementor's Post Content-widget.
   Alleen <ul>; genummerde lijsten (<ol>, bv. Step-by-Step) houden hun cijfers. */
.pip-article-single__content ul,
.elementor-widget-theme-post-content .elementor-widget-container ul,
.pip-prose ul {
	list-style: none;
	padding-left: 0;
}

.pip-article-single__content ul > li,
.elementor-widget-theme-post-content .elementor-widget-container ul > li,
.pip-prose ul > li {
	position: relative;
	padding-left: 30px;
}

.pip-article-single__content ul > li::before,
.elementor-widget-theme-post-content .elementor-widget-container ul > li::before,
.pip-prose ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 15px;
	height: 1.6em;  /* eerste regelhoogte; pijl verticaal gecentreerd op de eerste regel */
	height: 1lh;    /* exacter waar ondersteund */
	background-color: var(--pip-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2014'%20fill='none'%3E%3Cpath%20d='M10.0549%2012.25L15.85%206.625L10.0549%201M15.85%206.625H1'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 15px auto;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2014'%20fill='none'%3E%3Cpath%20d='M10.0549%2012.25L15.85%206.625L10.0549%201M15.85%206.625H1'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 15px auto;
	transition: transform .15s ease;
}

/* Hover: pijltje springt in — zelfde effect als de quick navigation. */
.pip-article-single__content ul > li:hover::before,
.elementor-widget-theme-post-content .elementor-widget-container ul > li:hover::before,
.pip-prose ul > li:hover::before {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Related articles — compacte lijstvariant [pip_related layout="list"]
   -------------------------------------------------------------------------- */
.pip-related--list {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* .pip-related-list__heading: eigen class (niet .pip-related__heading) zodat de
   grid-kopstijl niet meetelt en de kop puur de H4-stijl van het thema volgt. */

.pip-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pip-related-list__link {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 12px;
	margin: 0 -12px;
	color: var(--mist-650545454, var(--Mist-650, #545454));
	text-decoration: none;
	font-family: var(--Typography-Inter, Inter);
	font-size: var(--Typography-Size-Body, 17px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-body-160, 27.2px);
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
	border-radius: var(--pip-radius-sm);
	transition: color .15s ease, background-color .15s ease;
}

.pip-related-list__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	width: 20px;
	height: var(--typography-line-height-body-160, 27.2px);
	/* geen eigen color → erft de linkkleur (#545454), en oranje bij hover */
}

.pip-related-list__icon svg {
	width: 100%;
	height: auto;
}

/* Hover: oranje font op een lichte achtergrond met afgeronde hoeken. */
.pip-related-list__link:hover {
	color: var(--pip-primary);
	background-color: #fff;
}

.pip-related-list__link:hover .pip-related-list__icon {
	color: var(--pip-primary);
}

/* ==========================================================================
   Categoriepagina — [pip_category_title] / [pip_category_filter] / [pip_category_sections]
   ========================================================================== */

/* Compacte zoekbalk-variant [pip_searchbar variant="bordered"] */
.pip-searchbar--bordered .pip-searchbar__form {
	box-shadow: none;
	border: 1px solid var(--pip-primary);
	border-radius: 8px;
}

.pip-searchbar--bordered .pip-searchbar__form:focus-within {
	border-color: var(--pip-primary);
	box-shadow: 0 0 0 3px rgba(var(--pip-primary-rgb), .12);
}

/* Geen suggestie-pills onder de bordered variant. */
.pip-searchbar--bordered .pip-searchbar__links {
	display: none;
}

/* Titel */
.pip-cat-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--pip-text);
	margin: 0 0 24px;
}

/* Filterbalk */
.pip-cat-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.pip-cat-filter__group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pip-cat-filter__label {
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: var(--typography-line-height-buttons-100, 18px);
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
}

.pip-cat-filter__select {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border: 1px solid var(--Mist-400, #989898);
	border-radius: 8px;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-buttons-100, 18px);
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='6'%20viewBox='0%200%2010%206'%20fill='none'%3E%3Cpath%20d='M0.679688%200.679993L4.72718%204.72753L8.77472%200.679993'%20stroke='%232D2D2D'%20stroke-width='1.35994'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	/* Zelfde techniek als de updates-dropdowns: cap de breedte + kap lange
	   waardes af (de native optielijst toont bij openen vanzelf de volledige tekst). */
	max-width: 240px;
	padding-right: 40px; /* ruimte voor de chevron rechts */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pip-cat-filter__clear {
	margin-left: auto;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: var(--typography-line-height-buttons-100, 18px);
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
	text-decoration: none;
}

.pip-cat-filter__clear:hover {
	color: var(--pip-primary);
}

/* Laadstaat tijdens in-page zoeken binnen de categorie-secties */
.pip-cat-sections-wrap.is-loading .pip-cat-sections-results {
	opacity: .5;
	pointer-events: none;
	transition: opacity .15s ease;
}

/* Subcategorie-secties */
.pip-cat-sections {
	display: grid;
	grid-template-columns: repeat(var(--pip-cat-cols, 2), 1fr);
	gap: 24px;
}

.pip-cat-section {
	background: #F8F8F8;
	padding: 48px 40px;
	border-radius: 0;
	border-bottom: 2px solid var(--pip-primary);
}

.pip-cat-section__head {
	display: flex;
	align-items: center;
	gap: 0;
	text-decoration: none;
	margin-bottom: 14px;
}

.pip-cat-section__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 24px;
	margin-right: 30px;
	color: var(--pip-primary);
}

.pip-cat-section__icon svg { width: 100%; height: auto; }

.pip-cat-section__title {
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: var(--Typography-Size-H5, 20px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-h-5110, 22px); /* 110% */
	letter-spacing: var(--typography-letter-spacing-h-51, -0.2px);
}

.pip-cat-section__count {
	margin-left: 8px;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: var(--Typography-Size-H5, 20px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-h-5110, 22px); /* 110% */
	letter-spacing: var(--typography-letter-spacing-h-51, -0.2px);
}

.pip-cat-section__list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 55px;
}

.pip-cat-section__link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px;
	color: var(--mist-650545454, var(--Mist-650, #545454));
	text-decoration: none;
	font-family: var(--Typography-Inter, Inter);
	font-size: var(--Typography-Size-Body, 17px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-body-160, 27.2px); /* 160% */
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
	border-radius: var(--pip-radius-sm);
	transition: color .15s ease, background-color .15s ease;
}

.pip-cat-section__doc {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	width: 15px;
	height: var(--typography-line-height-body-160, 27.2px);
	color: var(--pip-muted);
}

.pip-cat-section__doc svg { width: 100%; height: auto; }

.pip-cat-section__link:hover {
	color: var(--pip-primary);
	background-color: #FFFFFF;
}

.pip-cat-section__link:hover .pip-cat-section__doc {
	color: var(--pip-primary);
}

.pip-cat-section__all {
	display: inline-block;
	margin-top: 12px;
	margin-left: 55px;
	color: var(--black-010101, var(--Primary-FullBlack, #010101));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: var(--Typography-Size-Button, 18px);
	font-style: normal;
	font-weight: 600;
	line-height: var(--typography-line-height-buttons-100, 18px); /* 100% */
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
	text-decoration: none;
}

.pip-cat-section__all:hover {
	color: var(--pip-primary);
}

/* Mobiel: linker-inspring van de lijst + "View all articles" weghalen. */
@media (max-width: 600px) {
	.pip-cat-section__list { padding-left: 0; }
	.pip-cat-section__all { margin-left: 0; }
}

/* -------------------------------------------------------------------------
   [pip_search_heading] — "N search results for “term”"
   ------------------------------------------------------------------------- */
.pip-search-heading {
	margin: 0;
}
/* Eerste regel: "N search results for" — H4 */
.pip-search-heading__count {
	display: block;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: var(--Typography-Size-H4, 25px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-h-4120, 30px); /* 120% */
	letter-spacing: var(--typography-letter-spacing-h-41, -0.25px);
}
/* Tweede regel: “term” — H3. Quotes in de donkere tekstkleur, term-woord oranje. */
.pip-search-heading__query {
	display: block;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: var(--Typography-Size-H3, 30px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-h-3110, 33px); /* 110% */
	letter-spacing: var(--typography-letter-spacing-h-31, -0.3px);
}
.pip-search-heading__term {
	color: var(--pip-primary, #F55522);
}

/* Zoekresultaat-titel groter dan de update-kaart (H3/30 i.p.v. H4/25). */
.pip-search .pip-update-card__title {
	font-size: var(--Typography-Size-H3, 30px);
	line-height: var(--typography-line-height-h-3110, 33px); /* 110% */
	letter-spacing: var(--typography-letter-spacing-h-31, -0.3px);
}

/* -------------------------------------------------------------------------
   [pip_link_cards] — quick-link kaartjes met linkerrand + pijl
   ------------------------------------------------------------------------- */
.pip-linkcards {
	display: grid;
	/* Kolommen niet breder dan de kaart (360px) → geen lege "gap" naast de kaart. */
	grid-template-columns: repeat(var(--pip-linkcards-cols, 3), minmax(0, 360px));
	justify-content: start;
	gap: 0;
}
.pip-linkcard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
	max-width: 360px;
	padding: 24px 30px;
	border-left: 1px solid var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	background: var(--Primary-White, #FFF);
	text-decoration: none;
	transition: border-color .15s ease, border-width .15s ease, background-color .15s ease, padding .15s ease;
}
.pip-linkcard__eyebrow {
	display: block;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: var(--Typography-Size-H5, 20px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-h-5110, 22px); /* 110% */
	letter-spacing: var(--typography-letter-spacing-h-51, -0.2px);
}
.pip-linkcard__title {
	display: block;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: var(--Typography-Size-H3, 30px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-h-3110, 33px); /* 110% */
	letter-spacing: var(--typography-letter-spacing-h-31, -0.3px);
}
/* Titel + pijl op één regel; pijl rechts, verticaal gecentreerd met de titel. */
.pip-linkcard__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}
.pip-linkcard__arrow {
	position: relative;
	flex: none;
	display: inline-block;
	width: 16px;
	height: 16px;
	overflow: hidden;
}
.pip-linkcard__arrow-icon {
	position: absolute;
	inset: 0;
	display: inline-flex;
	transition: transform .3s ease;
}
.pip-linkcard__arrow-icon svg { width: 100%; height: 100%; }
/* Rust: donkere pijl in beeld; oranje hover-pijl wacht linksonder. */
.pip-linkcard__arrow-icon--rest  { color: var(--dark-2-d-2-d-2-d, #2D2D2D); transform: translate(0, 0); }
.pip-linkcard__arrow-icon--hover { color: var(--pip-primary, #F55522);       transform: translate(-100%, 100%); }
/* Hover: rust-pijl naar rechtsboven uit beeld, oranje pijl schuift in. */
.pip-linkcard:hover .pip-linkcard__arrow-icon--rest  { transform: translate(100%, -100%); }
.pip-linkcard:hover .pip-linkcard__arrow-icon--hover { transform: translate(0, 0); }
.pip-linkcard:hover {
	border-left: 2px solid var(--Primary-Orange, #F55522);
	background: var(--Mist-100, #F8F8F8);
	padding-left: 29px; /* compenseert de +1px rand → geen sprong */
}
@media (max-width: 640px) {
	.pip-linkcards { grid-template-columns: 1fr; gap: 20px 0; }
}

/* Artikellijst met datum + horizontale oranje scheidingslijn per rij [pip_category_articles] */
.pip-cat-articles {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pip-cat-articles__item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	column-gap: 48px;
}

.pip-cat-articles__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	color: var(--mist-650545454, var(--Mist-650, #545454));
	text-decoration: none;
	font-family: var(--Typography-Inter, Inter);
	font-size: var(--Typography-Size-Body, 17px);
	font-weight: 400;
	line-height: 1.4;
	transition: color .15s ease;
}

.pip-cat-articles__doc {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	width: 20px;
	color: var(--pip-muted);
}

.pip-cat-articles__doc svg { width: 100%; height: auto; }

.pip-cat-articles__link:hover {
	color: var(--pip-primary);
}

.pip-cat-articles__link:hover .pip-cat-articles__doc {
	color: var(--pip-primary);
}

.pip-cat-articles__date {
	text-align: right;
	color: var(--pip-muted);
	font-family: var(--Typography-Inter, Inter);
	font-size: 15px;
	font-weight: 400;
}

@media (max-width: 640px) {
	.pip-cat-sections { grid-template-columns: 1fr; }
	.pip-cat-filter__clear { margin-left: 0; }

	/* Datum onder de titel op mobiel. */
	.pip-cat-articles__item { grid-template-columns: 1fr; column-gap: 0; row-gap: 2px; padding-bottom: 12px; }
	.pip-cat-articles__link { padding-bottom: 2px; }
	.pip-cat-articles__date { text-align: left; }
}

/* Themapagina-tekstkleur wordt per shortcode gestuurd via het color-attribuut,
   bijv. [pip_theme_text key="title" color="#fff"]. Geen vaste CSS-kleur hier. */

/* Themapagina: beelden responsive (lopen nooit over hun container). */
.pip-theme-img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Populaire artikelen — [pip_popular_articles]
   ========================================================================== */
.pip-popular__heading {
	font-size: 18px;
	font-weight: 700;
	color: var(--pip-text);
	margin: 0 0 16px;
}

/* Lijst-weergave (home / "trending") */
.pip-popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pip-popular-list__link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 9px 0;
	color: var(--pip-text);
	text-decoration: none;
	font-family: var(--Typography-Inter, Inter);
	font-size: var(--Typography-Size-Body, 17px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-body-160, 27.2px); /* 160% */
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
	transition: color .15s ease;
}

.pip-popular-list__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	width: 18px;
	color: var(--pip-primary);
	transition: transform .15s ease;
}

.pip-popular-list__arrow svg { width: 100%; height: auto; }

.pip-popular-list__link:hover { color: var(--pip-primary); }
.pip-popular-list__link:hover .pip-popular-list__arrow { transform: translateX(4px); }

/* Kaart-weergave (thema, in pip_category_cards-stijl) */
.pip-popular-card {
	position: relative;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 0;
	padding-right: 56px; /* ruimte voor de pijl rechtsonder */
}

.pip-popular-card__cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-buttons-100, 18px); /* 128.571% */
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
}

.pip-popular-card__cat-icon {
	display: inline-flex;
	align-items: center;
	width: 18px;
	color: var(--pip-primary);
}

.pip-popular-card__cat-icon svg { width: 100%; height: auto; }

.pip-popular-card__desc {
	overflow: hidden;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	text-overflow: ellipsis;
	font-family: var(--Typography-Inter, Inter);
	font-size: var(--Typography-Size-Body, 17px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-body-160, 27.2px); /* 160% */
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
	margin: 42px 0 0; /* ruimte tussen titel en tekst */
}

.pip-popular-card__arrow {
	position: absolute;
	right: 24px;
	bottom: 24px;
	display: inline-flex;
	width: 18px;
	color: var(--pip-text);
	transition: transform .15s ease, color .15s ease;
}

.pip-popular-card__arrow svg { width: 100%; height: auto; }

.pip-popular-card:hover .pip-popular-card__arrow {
	color: var(--pip-primary);
	transform: translate(3px, -3px);
}

/* Themapagina: titel-typografie (H1). Kleur blijft via het color-attribuut. */
/* Thema-tekst met icoon ervoor ([pip_theme_text ... icon="yes"]). */
.pip-theme-text--has-icon {
	display: flex;
	align-items: center;
	gap: 17px;
}

.pip-theme-text__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

.pip-theme-text__icon-img {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

/* Dubbele class = hogere specificiteit dan Elementor's .elementor-kit-… h1. */
.pip-theme-title.pip-theme-title {
	font-family: var(--Typography-Figtree, Figtree);
	/* Vloeiend schalen, minder agressief: klein scherm ~52px → desktop 90px. */
	font-size: clamp(3.25rem, 9vw, var(--Typography-Size-H1, 90px));
	font-style: normal;
	font-weight: 500;
	line-height: 0.97 !important; /* relatief zodat 't meeschaalt (≈87px bij 90px) */
	letter-spacing: -0.033em; /* relatief (≈-3px bij 90px), blijft proportioneel bij schalen */
}

/* Themapagina: tweede subtitel-typografie (H2). Kleur via het color-attribuut. */
.pip-theme-subtitle2 {
	font-family: var(--Typography-Figtree, Figtree);
	font-size: clamp(1.75rem, 4.5vw, var(--Typography-Size-H2, 40px));
	font-style: normal;
	font-weight: 400;
	line-height: 1.1; /* 110% — schaalt mee */
	letter-spacing: -0.02em; /* relatief (≈-0.8px bij 40px) */
}

/* Themapagina: subtitel-typografie (H2). Kleur via het color-attribuut. */
.pip-theme-subtitle {
	font-family: var(--Typography-Figtree, Figtree);
	font-size: clamp(1.75rem, 4.5vw, var(--Typography-Size-H2, 40px));
	font-style: normal;
	font-weight: 400;
	line-height: 1.1; /* 110% — schaalt mee */
	letter-spacing: -0.02em; /* relatief (≈-0.8px bij 40px) */
}

/* ==========================================================================
   Path-detail: "Follow the path"-kaarten met statuskleuren [pip_path layout="cards"]
   ========================================================================== */
.pip-path-cards {
	display: grid;
	/* Desktop: vaste 464px. Smaller: krimpt mee tot de containerbreedte (geen overflow). */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 464px), 464px));
	justify-content: start;
	gap: 24px;
}

@media (max-width: 520px) {
	.pip-path-cards { grid-template-columns: 1fr; }
}

.pip-path-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 24px;
	min-height: 240px;
	text-decoration: none;
	background: #F8F8F8;
	border-radius: 0;
	border-bottom: 2px solid var(--pip-primary, #F55522);
	transition: background-color .15s ease, border-width .15s ease;
}

.pip-path-card__icon {
	display: inline-flex;
	width: 34px;
	height: 34px;
	color: var(--pip-primary);
}

.pip-path-card__icon svg { width: 100%; height: 100%; }

.pip-path-card__step {
	margin-top: 8px;
	color: var(--orange-f-55522, var(--Primary-Orange, #F55522));
	font-family: var(--Typography-Inter, Inter);
	font-size: var(--Typography-Size-Body, 17px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-body-160, 27.2px); /* 160% */
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
}

.pip-path-card__title {
	margin-top: 8px;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: var(--Typography-Size-H4, 25px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-h-4120, 30px); /* 120% */
	letter-spacing: var(--typography-letter-spacing-h-41, -0.25px);
}

.pip-path-card__pct {
	margin-top: auto;
	align-self: flex-end;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	text-align: right;
	font-family: var(--Typography-Inter, Inter);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-body-160, 27.2px);
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
}

/* Statuskleuren: groen = voltooid, blauw = gestart, grijs = niet gestart. */
.pip-path-card--completed   { background: #EAF6EC; }
.pip-path-card--started     { background: #E7F1FB; }
.pip-path-card--not-started { background: #F8F8F8; }

/* Hover: alleen de onderrand dikker (3px) — geen schaduw of lift. */
.pip-path-card,
.pip-path-card:hover {
	box-shadow: none !important;
	transform: none !important;
}

.pip-path-card:hover {
	border-bottom-width: 3px;
}

/* ==========================================================================
   Path-detail: [pip_path_text] typografie (dubbele class = beat Elementor kit)
   ========================================================================== */
.pip-path-learn_eyebrow.pip-path-learn_eyebrow {
	color: var(--orange-f-55522, var(--Primary-Orange, #F55522));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: var(--Typography-Size-H4, 25px);
	font-style: normal;
	font-weight: 700;
	line-height: var(--typography-line-height-h-4120, 30px); /* 120% */
	letter-spacing: var(--typography-letter-spacing-h-41, -0.25px);
}

.pip-path-learn_title.pip-path-learn_title {
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: clamp(1.75rem, 4.5vw, var(--Typography-Size-H2, 40px));
	font-style: normal;
	font-weight: 400;
	line-height: 1.1; /* 110% — schaalt mee */
	letter-spacing: -0.02em; /* relatief (≈-0.8px bij 40px) */
}

.pip-path-learn_text.pip-path-learn_text {
	color: var(--text-black-191919, var(--Primary-TextBlack, #191919));
	font-family: var(--Typography-Inter, Inter);
	font-size: var(--Typography-Size-Body, 17px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--typography-line-height-body-160, 27.2px); /* 160% */
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
}

/* -------------------------------------------------------------------------
   Updates — landingspagina ([pip_updates])
   ------------------------------------------------------------------------- */
.pip-updates__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}
.pip-updates__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 28px;
	row-gap: 33px;
}
.pip-update-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 30px 32px 0;
	text-decoration: none;
	border-bottom: 1px solid var(--pip-primary, #F55522);
	transition: background-color .2s ease, border-width .2s ease;
}
.pip-update-card:hover {
	background: #F8F8F8;
	padding-bottom: 31px; /* compenseert de 2px-rand → geen sprong */
	border-bottom-width: 2px;
}

.pip-update-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	color: var(--mist-700464646, var(--Mist-700, #464646));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: 14px;
	font-weight: 400;
	line-height: var(--typography-line-height-buttons-100, 18px);
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
}
.pip-update-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.pip-update-card__meta-item svg { width: 16px; height: 16px; flex: none; }
/* Type-label op de zoekresultaten ([pip_search_results]) */
.pip-search__type {
	color: var(--pip-primary, #F55522);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.pip-update-card__title {
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: var(--Typography-Size-H4, 25px);
	font-weight: 400;
	line-height: var(--typography-line-height-h-4120, 30px);
	letter-spacing: var(--typography-letter-spacing-h-41, -0.25px);
}
.pip-update-card__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text-black-191919, var(--Primary-TextBlack, #191919));
	font-family: var(--Typography-Inter, Inter);
	font-size: var(--Typography-Size-Body, 17px);
	font-weight: 400;
	line-height: var(--typography-line-height-body-160, 27.2px);
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
	padding-right: 34px; /* ruimte vrijhouden voor het pijltje rechtsonder */
}

.pip-update-card__arrow {
	position: absolute;
	right: 30px;
	bottom: 32px;
	width: 14px;
	height: 14px;
	overflow: hidden;
}
.pip-update-card__arrow-icon {
	position: absolute;
	inset: 0;
	display: inline-flex;
	transition: transform .3s ease;
}
.pip-update-card__arrow-icon svg { width: 14px; height: 14px; }
/* Rust: donkere pijl in beeld. Hover-pijl (oranje) wacht linksonder. */
.pip-update-card__arrow-icon--rest  { color: var(--dark-2-d-2-d-2-d, #2D2D2D); transform: translate(0, 0); }
.pip-update-card__arrow-icon--hover { color: var(--pip-primary, #F55522);      transform: translate(-100%, 100%); }
/* Hover: rust-pijl naar rechtsboven uit beeld, hover-pijl schuift in. */
.pip-update-card:hover .pip-update-card__arrow-icon--rest  { transform: translate(100%, -100%); }
.pip-update-card:hover .pip-update-card__arrow-icon--hover { transform: translate(0, 0); }

/* Paginatie */
.pip-updates__pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 48px;
}
.pip-updates__pages {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Previous / Next */
.pip-updates__nav {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: 18px;
	font-weight: 400;
	line-height: 100%;
	text-decoration: none;
}
.pip-updates__nav svg { width: 8px; height: 14px; flex: none; }
.pip-updates__nav.is-disabled { opacity: .35; cursor: default; pointer-events: none; }

/* Cijfers */
.pip-updates__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 999px;
	color: #000;
	text-align: center;
	font-family: var(--Typography-Figtree, Figtree);
	font-size: 16px;
	font-weight: 600;
	line-height: 100%;
	text-decoration: none;
}
.pip-updates__pagination .page-numbers.current { background: #EDEDED; }
.pip-updates__pagination a.page-numbers:hover { background: #F5F5F5; }
.pip-updates__pagination .dots { min-width: 0; padding: 0 4px; }

/* Laadstaat tijdens AJAX */
.pip-updates.is-loading .pip-updates__results { opacity: .5; transition: opacity .15s ease; pointer-events: none; }

/* Zoekbalk-marge op de LP */
.pip-updates-search { margin-bottom: 16px; }

/* Filter-rij: zelfde look als [pip_category_filter] (.pip-cat-filter*).
   Iets krappere tussenruimtes zodat "Clear filters" op één regel blijft. */
.pip-updates-filter { margin-bottom: 32px; }
.pip-updates-filter.pip-cat-filter { gap: 11px 23px; }
.pip-updates-filter .pip-cat-filter__group { gap: 7px; }

/* Zoekpaginafilters: alleen layout; de achtergrond komt uit Elementor. */
.pip-search-filters.pip-cat-filter { gap: 11px 23px; }
.pip-search-filters .pip-cat-filter__group { gap: 7px; }
.pip-search-filters__divider {
	align-self: stretch;
	width: 1px;
	min-height: 24px;
	background: #D2D2D2;
	margin: 0 3px;
}
/* Streepje tussen de filters en Sort by / Show articles */
.pip-updates-filter__divider {
	align-self: stretch;
	width: 1px;
	min-height: 24px;
	background: #D2D2D2;
	margin: 0 3px;
}
/* "Clear filters" niet naar rechts duwen in deze samengestelde rij + eigen stijl
   (button-reset zodat het thema de knop niet overneemt). */
.pip-updates-filter .pip-updates-filter__clear {
	margin-left: 0;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--dark-2-d-2-d-2-d, var(--Primary-Dark, #2D2D2D));
	font-family: var(--Typography-Figtree, Figtree);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: var(--typography-line-height-buttons-100, 18px);
	letter-spacing: var(--Typography-Letter-spacing-None, 0);
}
.pip-updates-filter .pip-updates-filter__clear:hover {
	color: var(--pip-primary, #F55522);
	background: none;
	text-decoration: none;
	box-shadow: none;
}

/* Custom dropdown — breedte volgt de inhoud (compact, zoals het design) maar met
   een harde max; langere waarde/opties worden AFGEKAPT met ellipsis, nooit breder.
   De toggle hergebruikt .pip-cat-filter__select voor rand/font/chevron. */
/* Breedte = inhoud (box hugt de waarde, zoals Figma), met een cap; langere
   waarde → ellipsis. Padding 10/16 symmetrisch, chevron als inline element. */
.pip-dropdown { position: relative; width: fit-content; max-width: 220px; }
.pip-dropdown__toggle {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 10px 16px;                 /* symmetrisch, zoals het design */
	background-image: none;             /* geen achtergrond-chevron: we gebruiken een element */
	color: var(--dark-2-d-2-d-2-d, #2D2D2D);
	text-align: left;
	cursor: pointer;
}
.pip-dropdown__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; /* dichte staat: 1 regel met ellipsis */
}
.pip-dropdown__caret { flex: none; display: inline-flex; transition: transform .2s ease; }
.pip-dropdown__caret svg { display: block; width: 12px; height: 8px; }
.pip-dropdown.is-open .pip-dropdown__caret { transform: rotate(180deg); }
.pip-dropdown__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	width: max-content;      /* groeit mee met de opties … */
	min-width: 100%;         /* … maar minstens zo breed als de dropdown */
	max-width: 360px;        /* bovengrens; daarboven breekt de tekst af */
	margin-top: 4px;
	max-height: 300px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--Mist-400, #989898);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
	display: none;
}
.pip-dropdown.is-open .pip-dropdown__panel { display: block; }
.pip-dropdown__option {
	display: block;
	width: 100%;
	padding: 10px 16px;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--Typography-Figtree, Figtree);
	font-size: 14px;
	line-height: 1.35;
	color: var(--dark-2-d-2-d-2-d, #2D2D2D);
	cursor: pointer;
	white-space: nowrap;          /* volledig item tonen; paneel verbreedt hiervoor */
}
.pip-dropdown__option:hover { background: #F8F8F8; }
.pip-dropdown__option.is-selected { background: #F1F1F1; font-weight: 600; }

@media (max-width: 640px) {
	.pip-updates__grid { grid-template-columns: 1fr !important; }
	.pip-dropdown { width: 100% !important; max-width: none; }
}

/* =========================================================================
   Organisatie-portalen: hulpklassen
   Elementor's kleurvelden slikken een CSS-variabele niet betrouwbaar, dus
   zet je deze klassen op een container/widget (tab Geavanceerd → CSS-klassen).
   Ze volgen automatisch de hoofdkleur van de organisatie.
   ========================================================================= */

.pip-org-bg          { background-color: var(--pip-primary) !important; }
.pip-org-text        { color: var(--pip-primary) !important; }
.pip-org-border      { border-color: var(--pip-primary) !important; }

/* Tint over een achtergrondafbeelding, zoals de hero. Zet deze klasse op de
   container die de afbeelding draagt; de tint komt als overlay erover heen. */
.pip-org-tint        { position: relative; }
.pip-org-tint::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--pip-primary);
	opacity: .82;
	pointer-events: none;
	z-index: 0;
}
.pip-org-tint > *    { position: relative; z-index: 1; }

/* Sterkte van de tint bij te stellen zonder de kleur te herhalen. */
.pip-org-tint--soft::before   { opacity: .55; }
.pip-org-tint--strong::before { opacity: .92; }

/* [pip_articles layout="list"] — meerdere lijsten naast elkaar in kolommen. */
.pip-articles-list .pip-related-list { margin: 0; }