/**
 * Merkonderdelen naast Avada: wat Avada niet zelf kan, en alleen dat.
 * Kleuren via het Avada-palet (--awb-*) of per domein via inline variabelen.
 * Uitleg per klasse: includes/class-pk-merk.php en AVADA.md.
 */

:root {
	--pk-schaduw-sm: 0 1px 2px rgb(27 35 55 / 0.06);
	--pk-schaduw-md: 0 2px 4px rgb(27 35 55 / 0.04), 0 8px 24px rgb(27 35 55 / 0.08);
}

/* ---------- Kolomklassen ------------------------------------------------- */

/* Schaduw bij hover. Avada tekent de schaduw van een kolom met --awb-box-shadow. */
.fusion-layout-column.pk-hover-schaduw {
	--awb-box-shadow: var(--pk-schaduw-sm);
}
.fusion-layout-column.pk-hover-schaduw > .fusion-column-wrapper {
	transition: var(--awb-transition), box-shadow 250ms ease;
}
.fusion-layout-column.pk-hover-schaduw:hover {
	--awb-box-shadow: var(--pk-schaduw-md);
}
/* De pijlknop van een ingangskaart schuift een stukje mee. */
.pk-hover-schaduw .fontawesome-icon {
	transition: transform 250ms ease;
}
.pk-hover-schaduw:hover .fontawesome-icon {
	transform: translateX(4px);
}

/* Eén rand in de randkleur van de kolom (de domeinkleur), de andere zijden neutraal. */
.fusion-layout-column.pk-rand-boven > .fusion-column-wrapper {
	border-right-color: var(--awb-color3) !important;
	border-bottom-color: var(--awb-color3) !important;
	border-left-color: var(--awb-color3) !important;
}
.fusion-layout-column.pk-rand-links > .fusion-column-wrapper {
	border-top-color: var(--awb-color3) !important;
	border-right-color: var(--awb-color3) !important;
	border-bottom-color: var(--awb-color3) !important;
}

/* Vlak met een cirkel die rechtsboven uit beeld valt (lid worden). */
.fusion-layout-column.pk-hoekring > .fusion-column-wrapper {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.pk-hoekring .pk-ring {
	position: absolute;
	z-index: -1;
	top: -60px;
	right: -60px;
	pointer-events: none;
}
@media (max-width: 767px) {
	.pk-hoekring .pk-ring {
		top: -70px;
		right: -70px;
		width: 200px;
		height: 200px;
	}
}

/* ---------- Hero: kaartomtrek ------------------------------------------- */

/* De afbeelding zelf staat in de container (Achtergrond > Afbeelding); dit lijnt hem uit
   met de rechterkant van de inhoud in plaats van de rand van het scherm. */
.fusion-fullwidth.pk-hero {
	background-repeat: no-repeat !important;
	background-position: right max(24px, calc((100vw - 1200px) / 2)) top 32px !important;
	background-size: clamp(260px, 32vw, 440px) auto !important;
}
@media (max-width: 1023px) {
	.fusion-fullwidth.pk-hero {
		background-position: right -18vw top 16px !important;
		background-size: 62vw auto !important;
	}
}

/* ---------- Domeincirkel -------------------------------------------------- */

.pk-ring {
	display: block;
	width: var(--pk-ring-maat, 200px);
	height: var(--pk-ring-maat, 200px);
	max-width: 100%;
}
@property --ring-draw {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}
@media (prefers-reduced-motion: no-preference) {
	.pk-js .pk-ring--teken {
		--ring-draw: 0;
	}
	/* Alleen het intekenen animeert, niet het verbergen bij het laden. */
	.pk-js .pk-ring--teken.is-zichtbaar {
		--ring-draw: 1;
		transition: --ring-draw 1.6s cubic-bezier(0.22, 1, 0.36, 1);
	}
}

@media (min-width: 1024px) {
	.pk-ring--rechts {
		margin-left: auto;
	}
}
@media (max-width: 1023px) {
	.pk-ring--rechts {
		width: 140px;
		height: 140px;
	}
}

/* Kop van een domeinkaart: nummer links, cirkel rechts. */
.pk-kaartkop {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
}

/* ---------- Agenda: label, tijd en plaats ---------------------------------- */

.pk-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}
.pk-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.pk-meta__item svg {
	flex: none;
}
.pk-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 2px 10px 2px 8px;
	border-radius: 999px;
	background: var(--pk-label-vlak, var(--awb-custom_color_3));
	color: var(--awb-color8);
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
}
.pk-label::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--pk-label-stip, var(--awb-color5));
}

/* ---------- Regiokaart --------------------------------------------------- */

.pk-regiokaart {
	display: grid;
	gap: 24px;
	align-items: end;
	margin: 0;
}
@media (min-width: 640px) {
	.pk-regiokaart {
		grid-template-columns: 1fr 11rem;
	}
}
.pk-regiokaart__svg {
	justify-self: center;
	width: 100%;
	max-width: 420px;
	height: auto;
	overflow: visible;
}
.pk-regiokaart__land path {
	fill: var(--awb-color1);
	stroke: var(--awb-custom_color_4);
	stroke-width: 1.25;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.pk-regiokaart__stippen circle {
	fill: var(--awb-color5);
	transition: opacity 250ms ease;
}
.pk-regiokaart[data-actief] .pk-regiokaart__stippen circle {
	opacity: 0.18;
}
.pk-regiokaart[data-actief] .pk-regiokaart__stippen g.is-actief circle {
	opacity: 1;
}
.pk-regiokaart__titel {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--awb-color8);
}
.pk-regiokaart__legenda ul {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.pk-regiokaart__legenda li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--awb-color3);
	font-size: 15px;
	color: var(--awb-color8);
	cursor: default;
}
.pk-regiokaart__legenda li.is-actief {
	color: var(--awb-color4);
	font-weight: 600;
}
.pk-regiokaart__n {
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.pk-regiokaart figcaption {
	font-size: 14px;
	line-height: 1.5;
	color: var(--awb-color6);
}
@media (max-width: 639px) {
	.pk-regiokaart__legenda ul {
		columns: 2;
		column-gap: 24px;
	}
	.pk-regiokaart__legenda li {
		break-inside: avoid;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.pk-js .pk-regiokaart__stippen circle {
		transform: scale(0);
		transform-box: fill-box;
		transform-origin: center;
		transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 9ms), opacity 250ms ease;
	}
	.pk-js .pk-regiokaart.is-zichtbaar .pk-regiokaart__stippen circle {
		transform: scale(1);
	}
}

/* ---------- Beeldvlak (projecten) ---------------------------------------- */

/* Foto, of zonder foto de domeintint met figuurtje. Het cirkelsegment van het domein
   staat in beide gevallen rechtsonder, gedraaid zodat het eigen segment boven staat. */
.pk-beeld__link {
	display: block;
}
.pk-beeld {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
}
.pk-beeld__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pk-beeld .pk-beeld__ring {
	position: absolute;
	z-index: 1;
	right: -6%;
	bottom: -24%;
	width: 52%;
	height: auto;
	aspect-ratio: 1;
}
.pk-beeld__figuur {
	position: absolute;
	left: 12%;
	bottom: -9%;
	height: 66%;
	width: auto;
	aspect-ratio: 54 / 55;
	opacity: 0.75;
}

/* ---------- Avatar, citaten en partners ---------------------------------- */

.pk-avatar {
	display: grid;
	flex: none;
	place-items: center;
	overflow: hidden;
	border-radius: 50%;
}
.pk-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pk-avatar__figuur {
	width: 72%;
	height: 72%;
	align-self: end;
	transform: translateY(12%);
}

/* Naam met avatar onder een citaat. */
.pk-wie {
	display: flex;
	align-items: center;
	gap: 16px;
}
.pk-wie strong {
	display: block;
	color: var(--awb-color8);
}

/* Label met een streepje ervoor, in de tekstkleur van het blok. */
.pk-streeplabel p {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}
.pk-streeplabel p::before {
	content: "";
	width: 32px;
	height: 4px;
	border-radius: 4px;
	background: currentColor;
}

/* Groot aanhalingsteken boven een citaat. */
.pk-citaat p {
	max-width: 30ch;
	text-wrap: pretty;
}
.pk-citaat p::before {
	content: "\201C";
	display: block;
	height: 0.55em;
	margin-bottom: 8px;
	font-weight: 800;
	font-size: 3.5em;
	line-height: 1;
	color: var(--awb-custom_color_4);
}

/* Een lijst als pillen (partners). */
.pk-pillen ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pk-pillen li {
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--awb-color2);
	font-weight: 500;
}
@media (max-width: 639px) {
	.pk-pillen ul {
		gap: 8px;
	}
	.pk-pillen li {
		padding: 6px 12px;
		font-size: 15px;
	}
}

/* ---------- Logo in de header ([pk_logo]) -------------------------------- */

/* Bovenaan het volledige logo. Is er gescrold (Avada zet dan fusion-sticky-transition op de sticky header),
   dan verdwijnt de kaart achter het icoon en schuift het icoon voor de tekst. De standen
   komen als variabelen uit de shortcode. */
.pk-logo {
	position: relative;
	display: block;
	width: var(--pk-logo-b);
	height: var(--pk-logo-h);
	/* Avada geeft links een eigen transition; die zou de breedte laten springen. */
	transition: width 450ms cubic-bezier(0.4, 0, 0.2, 1), height 450ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.pk-logo svg {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--pk-logo-b);
	height: var(--pk-logo-h);
	overflow: visible;
}
.pk-logo g {
	transform-box: view-box;
	transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease;
}
.pk-logo__kaart,
.pk-logo__icoon {
	transform-origin: var(--pk-logo-icoon-o);
}
.pk-logo__tekst {
	transform-origin: var(--pk-logo-tekst-o);
}
.fusion-sticky-transition .pk-logo {
	width: var(--pk-logo-cb);
	height: var(--pk-logo-ch);
}
.fusion-sticky-transition .pk-logo__icoon {
	transform: var(--pk-logo-icoon);
}
.fusion-sticky-transition .pk-logo__kaart {
	opacity: 0;
	transform: var(--pk-logo-icoon) scale(0.3);
}
.fusion-sticky-transition .pk-logo__tekst {
	transform: var(--pk-logo-tekst);
}
@media (prefers-reduced-motion: reduce) {
	.pk-logo,
	.pk-logo g {
		transition: none !important;
	}
}

/* Avada past de sticky hoogte (Container > Sticky > hoogte) alleen op groot scherm toe;
   zo krimpt de header ook op tablet en mobiel. Het mobiele menupaneel begint dan nog
   steeds direct onder de header: (72 - 44) / 2 = 14px onder de menuknop. */
.fusion-tb-header .fusion-sticky-container.fusion-sticky-transition {
	min-height: var(--awb-sticky-height) !important;
	transition: min-height 450ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fusion-tb-header .fusion-sticky-transition .awb-menu {
	--awb-mobile-nav-trigger-bottom-margin: 14px !important;
}

/* ---------- Disciplines ([pk_disciplines]) ------------------------------- */

.pk-disciplines {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	.pk-disciplines {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.pk-disciplines {
		grid-template-columns: repeat(3, 1fr);
	}
}
/* Zelfde kaart als de ingangen en domeinen: bovenstreep, bij hover omhoog met schaduw. */
.pk-discipline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 32px 28px 28px;
	border: 1px solid var(--awb-color3);
	border-radius: 16px;
	background: var(--awb-color1);
	box-shadow: var(--pk-schaduw-sm);
	transition: transform 250ms ease, box-shadow 250ms ease;
}
.pk-discipline::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 28px;
	width: 64px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: var(--awb-color5);
}
.pk-discipline:hover {
	transform: translateY(-4px);
	box-shadow: var(--pk-schaduw-md);
}
.pk-discipline .pk-discipline__naam {
	margin: 0;
	font-size: clamp(1.25rem, 1.2rem + 0.3vw, 1.5rem);
	color: var(--awb-color8);
}
.pk-discipline p {
	margin: 0;
	color: var(--awb-color6);
}
.pk-disciplines .pk-discipline__link {
	margin-top: auto;
	padding-top: 4px;
	font-weight: 600;
	color: var(--awb-color4);
	text-decoration: none;
}
/* Hele kaart klikbaar. */
.pk-discipline__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.pk-discipline:focus-within {
	outline: 3px solid var(--awb-color8);
	outline-offset: 3px;
}
.pk-discipline__link:focus-visible {
	outline: none;
}

/* Container zonder kaarten verbergen (klasse pk-verberg-leeg), bijvoorbeeld Projecten op de
   homepage zolang er nog geen projecten zijn. */
.fusion-fullwidth.pk-verberg-leeg:not(:has(.fusion-grid-column)) {
	display: none;
}

/* Op de contactpagina staat het formulier al; de contactstrook in de footer is daar dubbel. */
.pk-contactpagina .pk-footer-contact {
	display: none;
}
/* Springen naar een anker (Container > Menu-anker): niet onder de sticky header. */
.fusion-container-anchor {
	scroll-margin-top: 120px;
}

/* Ruimte onder het beeldvlak van een projectkaart (het codeblok heeft geen marge-instelling). */
.pk-beeld__link {
	margin-bottom: 24px;
}

/* Losse link als Avada-knop (klasse pk-knop-pijl): transparant, zonder padding, pijl schuift bij hover. */
.pk-knop-pijl .button-icon-right {
	transition: transform 250ms ease;
}
.pk-knop-pijl:hover .button-icon-right,
.pk-knop-pijl:focus-visible .button-icon-right {
	transform: translateX(4px);
}

/* Post Cards met één kolom zet Avada in een flex-rij; met filters erbij (Agenda) komen die dan
   links naast de kaarten. Onder elkaar zetten, de filters boven. */
.fusion-post-cards.fusion-grid-flex-grow:has(.fusion-filters) {
	flex-direction: column;
}

/* Filters van Post Cards als chips, zoals in de praktijkzoeker (klasse pk-filterchips; Agenda).
   Kleuren en lettergrootte staan in het element; de domeinstip (--pk-dot) zet pk-core. */
.fusion-post-cards.pk-filterchips .fusion-filters {
	gap: 8px;
	margin-bottom: 40px;
	line-height: 1.2;
}

.fusion-post-cards.pk-filterchips .fusion-filters .fusion-filter {
	margin: 0;
}

.fusion-post-cards.pk-filterchips .fusion-filters .fusion-filter a,
.fusion-post-cards.pk-filterchips .fusion-filters .fusion-filter.fusion-active a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--awb-custom_color_6);
	border-radius: 999px;
	background: var(--awb-color1);
	font-weight: 500;
	line-height: 1.2;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.fusion-post-cards.pk-filterchips .fusion-filters .fusion-filter a:hover {
	border-color: var(--awb-color8);
}

.fusion-post-cards.pk-filterchips .fusion-filters .fusion-filter.fusion-active a {
	background: var(--awb-color8);
	border-color: var(--awb-color8);
}

.fusion-post-cards.pk-filterchips .fusion-filters a[style*="--pk-dot"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--pk-dot);
}

.fusion-post-cards.pk-filterchips .fusion-filters .fusion-active a[style*="--pk-dot"]::before {
	box-shadow: 0 0 0 2px var(--awb-color1);
}

.fusion-post-cards.pk-filterchips .fusion-filters a:focus-visible {
	outline: 3px solid var(--awb-color8);
	outline-offset: 2px;
}

/* Mobiel: één rij chips die je opzij veegt, in plaats van zeven regels boven de agenda.
   Avada zet de filters tot 800px op display:block !important (onder elkaar). */
@media (max-width: 800px) {
	.fusion-post-cards.pk-filterchips .fusion-filters {
		display: flex !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-bottom: 32px;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.fusion-post-cards.pk-filterchips .fusion-filters .fusion-filter {
		flex-shrink: 0;
	}

	.fusion-post-cards.pk-filterchips .fusion-filters .fusion-filter a {
		white-space: nowrap;
	}
}

/* Rubrieken boven het nieuws ([pk_rubrieken]): links in dezelfde chipstijl. */
.pk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.pk-chips li {
	margin: 0;
}

.pk-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--awb-custom_color_6);
	border-radius: 999px;
	background: var(--awb-color1);
	color: var(--awb-color8);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.pk-chips a:hover {
	border-color: var(--awb-color8);
	color: var(--awb-color8);
}

.pk-chips a[aria-current] {
	background: var(--awb-color8);
	border-color: var(--awb-color8);
	color: var(--awb-color1);
}

.pk-chips a:focus-visible {
	outline: 3px solid var(--awb-color8);
	outline-offset: 2px;
}

@media (max-width: 800px) {
	.pk-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-bottom: 32px;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.pk-chips li {
		flex-shrink: 0;
	}

	.pk-chips a {
		white-space: nowrap;
	}
}

/* Nieuwskaart: rubriek als omlijnd label naast de datum (prototype .tag), domeinlabels onderaan de kaart. */
.pk-tag {
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	border: 1px solid var(--awb-custom_color_6);
	border-radius: 999px;
	line-height: 1.6;
	white-space: nowrap;
}

.pk-onderaan {
	margin-top: auto !important;
	padding-top: 20px;
}

/* Zoeken ([pk_zoeken]): zoekveld zoals de praktijkzoeker (48px, rand custom_color_6, 8px hoek),
   knop in de Avada-knopstijl. Chips per soort hergebruiken .pk-chips. */
.pk-zoekveld {
	display: flex;
	gap: 8px;
	max-width: 640px;
	margin: 0 0 24px;
}

.pk-zoekveld input[type="search"] {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--awb-custom_color_6);
	border-radius: 8px;
	background-color: var(--awb-color1);
	color: var(--awb-color8);
	font-size: 16px;
}

.pk-zoekveld input[type="search"]:focus {
	border-color: var(--awb-color8);
	outline: 2px solid var(--awb-color8);
	outline-offset: 1px;
}

.pk-zoekveld .fusion-button {
	flex: none;
	margin: 0;
}

.pk-zoek-telling,
.pk-zoek-tip,
.pk-zoek-leeg {
	margin: 0 0 24px;
	color: var(--awb-color6);
}

.pk-zoek-tip a,
.pk-zoek-leeg a {
	color: var(--awb-color5);
}

.pk-chips__aantal {
	margin-left: 6px;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

/* 404: "4 (domeincirkel) 4" als beeld; de echte kop staat eronder. */
.pk-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 2vw, 20px);
	margin: 0 0 32px;
	color: var(--awb-color8);
	font-family: Poppins, sans-serif;
	font-size: clamp(6rem, 4rem + 9vw, 11rem);
	font-weight: 800;
	line-height: 1;
}

.pk-404 .pk-ring {
	width: 0.82em;
	height: 0.82em;
}