/**
 * KIM Toolbox Circle – Front-end styles
 * Conic-gradient ring, icon positioning via transform, responsive panel
 */

.kim-toolbox-circle {
	--kim-circle-size: 390px;
	--kim-ring-width: 28px;
	--kim-side-icon-size: 56px;
	--kim-center-size: 100px;
	--kim-segment-color: #e8e0f0;
	--kim-segment-line: rgba(140, 110, 160, 0.35);
	/* Zelfde tint als veel KIM-pictogrammen; vul de ronde icon-achtergrond (ipv wit). */
	--kim-side-icon-bg: #e8f4fc;
	--kim-panel-bg: #fff;
	--kim-panel-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	--kim-btn-bg: #3F3294;
	--kim-btn-color: #fff;
	--kim-title-color: #2d2438;
	--kim-subtitle-color: #6b6b6b;
	box-sizing: border-box;
	max-width: 100%;
	font-family: inherit;
}

.kim-toolbox-circle *,
.kim-toolbox-circle *::before,
.kim-toolbox-circle *::after {
	box-sizing: inherit;
}

/* --------------------------------------------------------------
 * Horizontal strip (kim_toolbox_strip)
 * -------------------------------------------------------------- */
.kim-toolbox-strip {
	box-sizing: border-box;
	max-width: 100%;
	font-family: inherit;
}

.kim-toolbox-strip__items {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 1.5rem 1rem;
	overflow: visible;
}

.kim-toolbox-strip__items--animating {
	pointer-events: none;
}

.kim-toolbox-strip__items--animating .kim-toolbox-strip__item {
	z-index: 2;
}

.kim-toolbox-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	position: relative;
	z-index: 0;
}

.kim-toolbox-strip__item:focus {
	outline: 2px solid var(--kim-btn-bg);
	outline-offset: 2px;
}

.kim-toolbox-strip__icon-wrap {
	width: 140px;
	height: 140px;
	border-radius: 999px;
	background: #f8f4ff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px rgba(143, 120, 185, 0.15);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.kim-toolbox-strip__icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kim-toolbox-strip__label {
	margin-top: 0.75rem;
	padding: 0.35rem 1.25rem;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	font-size: 0.95rem;
	font-weight: 600;
	white-space: nowrap;
	font-family: inherit;
}

.kim-toolbox-strip__item:hover .kim-toolbox-strip__icon-wrap {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	background: #f1e9ff;
}

.kim-toolbox-strip__item--active .kim-toolbox-strip__icon-wrap {
	transform: translateY(-8px) scale(1.14);
	box-shadow:
		0 0 0 3px rgba(255, 204, 0, 0.55),
		0 0 32px 10px rgba(255, 210, 80, 0.5),
		0 10px 26px rgba(0, 0, 0, 0.2);
	background: #ffffff;
}

.kim-toolbox-strip__item--active .kim-toolbox-strip__label {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

@media (max-width: 991px) {
	.kim-toolbox-strip__items {
		gap: 1.5rem;
	}
	.kim-toolbox-strip__icon-wrap {
		width: 120px;
		height: 120px;
	}
	.kim-toolbox-strip__item--active .kim-toolbox-strip__icon-wrap {
		transform: translateY(-7px) scale(1.1);
		box-shadow:
			0 0 0 3px rgba(255, 204, 0, 0.55),
			0 0 28px 8px rgba(255, 210, 80, 0.45),
			0 10px 22px rgba(0, 0, 0, 0.2);
	}
}

@media (max-width: 767px) {
	.kim-toolbox-strip__items {
		gap: 1.25rem;
	}
	.kim-toolbox-strip__icon-wrap {
		width: 110px;
		height: 110px;
	}
	.kim-toolbox-strip__item--active .kim-toolbox-strip__icon-wrap {
		transform: translateY(-6px) scale(1.08);
		box-shadow:
			0 0 0 3px rgba(255, 204, 0, 0.55),
			0 0 26px 8px rgba(255, 210, 80, 0.45),
			0 9px 20px rgba(0, 0, 0, 0.2);
	}
	.kim-toolbox-strip__label {
		font-size: 0.9rem;
	}
}

@media (max-width: 480px) {
	.kim-toolbox-strip__items {
		gap: 1rem;
	}
	.kim-toolbox-strip__icon-wrap {
		width: 100px;
		height: 100px;
	}
	.kim-toolbox-strip__item--active .kim-toolbox-strip__icon-wrap {
		transform: translateY(-5px) scale(1.06);
		box-shadow:
			0 0 0 3px rgba(255, 204, 0, 0.55),
			0 0 22px 6px rgba(255, 210, 80, 0.45),
			0 8px 18px rgba(0, 0, 0, 0.2);
	}
	.kim-toolbox-strip__label {
		font-size: 0.87rem;
		padding: 0.3rem 1rem;
	}
}

/* --------------------------------------------------------------
 * Activities block (kim_toolbox_activiteiten)
 * -------------------------------------------------------------- */
.kim-toolbox-events {
	box-sizing: border-box;
	max-width: 100%;
	background: #f7f5ff;
	border-radius: 20px;
	box-shadow: 0 18px 38px rgba(27, 20, 77, 0.14);
	padding: 2rem 2.25rem 2.25rem;
	font-family: inherit;
}

.kim-toolbox-events__columns {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

.kim-toolbox-events__column {
	flex: 1;
	min-width: 0;
}

.kim-toolbox-events__title {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
	color: #3f3294;
}

.kim-toolbox-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.kim-toolbox-events__item {
	padding: 0.75rem 0.4rem 0.9rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.kim-toolbox-events__item:last-child {
	border-bottom: none;
}

.kim-toolbox-events__item-title {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.kim-toolbox-events__item-meta {
	font-size: 0.9rem;
	color: #6b6b6b;
	margin-bottom: 0.4rem;
}

.kim-toolbox-events__item-description {
	font-size: 0.9rem;
	color: #444;
	margin-bottom: 0.4rem;
}

.kim-toolbox-events__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1.4rem;
	border-radius: 999px;
	border: none;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
	font-family: inherit;
}

.kim-toolbox-events__btn--signup {
	background: #3f3294;
	color: #fff;
}

.kim-toolbox-events__btn--signup:hover,
.kim-toolbox-events__btn--signup:focus {
	background: #35308a;
	color: #fff;
	box-shadow: 0 4px 14px rgba(63, 50, 148, 0.3);
	transform: translateY(-1px);
}

.kim-toolbox-events__btn--contact {
	background: #ffffff;
	color: #3f3294;
	box-shadow: 0 0 0 1px rgba(63, 50, 148, 0.3);
}

.kim-toolbox-events__btn--contact:hover,
.kim-toolbox-events__btn--contact:focus {
	background: rgba(63, 50, 148, 0.04);
	box-shadow: 0 0 0 1px rgba(63, 50, 148, 0.75);
}

.kim-toolbox-events__contact-wrap {
	margin-top: 1.25rem;
}

.kim-toolbox-events__btn--report {
	background: #ffffff;
	color: #3f3294;
	box-shadow: 0 0 0 1px rgba(63, 50, 148, 0.3);
	margin-top: 0.35rem;
}

.kim-toolbox-events__btn--report:hover,
.kim-toolbox-events__btn--report:focus {
	background: rgba(63, 50, 148, 0.04);
	box-shadow: 0 0 0 1px rgba(63, 50, 148, 0.75);
}

.kim-toolbox-events__empty {
	font-size: 0.9rem;
	color: #777;
	margin: 0.2rem 0 0;
}

@media (max-width: 991px) {
	.kim-toolbox-events {
		padding: 1.5rem 1.5rem 1.75rem;
	}
	.kim-toolbox-events__columns {
		flex-direction: column;
	}
}

@media (max-width: 600px) {
	.kim-toolbox-events {
		padding: 1.25rem 1.1rem 1.5rem;
		border-radius: 14px;
	}
	.kim-toolbox-events__badge {
		width: 100%;
		justify-content: center;
	}
}

.kim-toolbox-circle__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	max-width: 100%;
}

@media (min-width: 1200px) {
	.kim-toolbox-circle__panel {
		max-width: 640px;
	}
}

.kim-toolbox-circle--panel-right .kim-toolbox-circle__layout {
	flex-direction: row;
}

.kim-toolbox-circle--panel-left .kim-toolbox-circle__layout {
	flex-direction: row-reverse;
}

/* Ring container: square, centered content */
.kim-toolbox-circle__ring-wrap {
	position: relative;
	width: var(--kim-circle-size);
	height: var(--kim-circle-size);
	flex-shrink: 0;
	max-width: 100%;
}

/* Donut ring: conic-gradient 5 segments */
.kim-toolbox-circle__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(
		from -90deg,
		var(--kim-segment-color) 0deg 72deg,
		var(--kim-segment-color) 72deg 144deg,
		var(--kim-segment-color) 144deg 216deg,
		var(--kim-segment-color) 216deg 288deg,
		var(--kim-segment-color) 288deg 360deg
	);
}

/* Inner cutout = donut hole */
.kim-toolbox-circle__ring::before {
	content: "";
	position: absolute;
	inset: var(--kim-ring-width);
	border-radius: 50%;
	background: #fff;
}

/* Thin divider lines at segment boundaries (72° steps from -90°) */
.kim-toolbox-circle__ring::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	/* Vijf segmentgrenzen (elke 72°); 359.5–360° ontbrak → één sprek uit lichter grijs. */
	background: conic-gradient(
		from -90deg,
		transparent 0deg 71.5deg,
		var(--kim-segment-line) 71.5deg 72.5deg,
		transparent 72.5deg 143.5deg,
		var(--kim-segment-line) 143.5deg 144.5deg,
		transparent 144.5deg 215.5deg,
		var(--kim-segment-line) 215.5deg 216.5deg,
		transparent 216.5deg 287.5deg,
		var(--kim-segment-line) 287.5deg 288.5deg,
		transparent 288.5deg 359.5deg,
		var(--kim-segment-line) 359.5deg 360deg
	);
	-webkit-mask: radial-gradient(circle, transparent calc(50% - var(--kim-ring-width)), black calc(50% - var(--kim-ring-width)), transparent 50%);
	mask: radial-gradient(circle, transparent calc(50% - var(--kim-ring-width)), black calc(50% - var(--kim-ring-width)), transparent 50%);
	pointer-events: none;
}

/* Side icons: on the ring edge, positioned by angle */
.kim-toolbox-circle__side-icon {
	position: absolute;
	width: var(--kim-side-icon-size);
	height: var(--kim-side-icon-size);
	left: 50%;
	top: 50%;
	margin-left: calc(-1 * var(--kim-side-icon-size) / 2);
	margin-top: calc(-1 * var(--kim-side-icon-size) / 2);
	--r: calc(var(--kim-circle-size) / 2 - var(--kim-side-icon-size) / 2);
	--kim-scale: 1;
	transform: rotate(var(--kim-angle)) translateY(calc(-1 * var(--r))) scale(var(--kim-scale));
	border-radius: 50%;
	background: var(--kim-side-icon-bg);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	overflow: visible;
	border: none;
	padding: 0;
}

.kim-toolbox-circle__side-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 1px;
	height: 34px;
	background: var(--kim-segment-line);
	transform: translateX(-50%);
	pointer-events: none;
}

.kim-toolbox-circle__side-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: relative;
	z-index: 1;
	transform: rotate(calc(-1 * var(--kim-angle)));
}

.kim-toolbox-circle__side-icon:hover,
.kim-toolbox-circle__side-icon:focus {
	--kim-scale: 1.08;
	box-shadow: 0 8px 22px rgba(74, 61, 92, 0.3);
}

.kim-toolbox-circle__side-icon--active {
	box-shadow: 0 6px 18px rgba(74, 61, 92, 0.3);
}

/* Center icon */
.kim-toolbox-circle__center {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--kim-center-size);
	height: var(--kim-center-size);
	margin-left: calc(-1 * var(--kim-center-size) / 2);
	margin-top: calc(-1 * var(--kim-center-size) / 2);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.kim-toolbox-circle__center-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.2s ease;
}

.kim-toolbox-circle__center-link:hover,
.kim-toolbox-circle__center-link:focus {
	box-shadow: 0 6px 20px rgba(74, 61, 92, 0.2);
	outline: 2px solid var(--kim-btn-bg);
	outline-offset: 2px;
}

.kim-toolbox-circle__center-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 12px;
	background: #fff;
}

.kim-toolbox-circle__center:not(:has(.kim-toolbox-circle__center-link)) .kim-toolbox-circle__center-img {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* Panel */
.kim-toolbox-circle__panel {
	position: relative;
	min-width: 0;
	flex: 1;
	min-height: 120px;
}

.kim-toolbox-circle__panel-slide {
	display: none;
	animation: kim-panel-fade 0.2s ease;
}

.kim-toolbox-circle__panel-slide--active {
	display: block;
}

@keyframes kim-panel-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.kim-toolbox-circle__panel-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--kim-title-color);
	margin: 0 0 0.35em;
	line-height: 1.2;
}

.kim-toolbox-circle__panel-body {
	background: var(--kim-panel-bg);
	box-shadow: var(--kim-panel-shadow);
	border-radius: 10px;
	padding: 1rem 1.25rem;
}

/* Center slide: lange tekst beperken zodat de pagina niet "springt" */
.kim-toolbox-circle__panel-slide--center .kim-toolbox-circle__panel-body {
	max-height: 430px;
	overflow-y: auto;
}

.kim-toolbox-circle__panel-description {
	font-size: 0.9rem;
	line-height: 1.5;
	color: #444;
	margin: 0 0 1rem;
	font-family: inherit;
}

.kim-toolbox-circle__panel-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	background: var(--kim-btn-bg);
	color: #fff !important;
	padding: 0.65rem 1.5rem;
	min-height: 44px;
	line-height: 1;
	border-radius: 9999px;
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
	font-family: inherit;
}

.kim-toolbox-circle__panel-btn:hover,
.kim-toolbox-circle__panel-btn:focus {
	color: #fff !important;
}

.kim-toolbox-circle__panel-btn:hover {
	background: #35308a;
}

.kim-toolbox-circle__panel-btn:focus {
	outline: 2px solid var(--kim-btn-bg);
	outline-offset: 2px;
	background: #35308a;
}

.kim-toolbox-circle__panel-btn--hidden {
	display: none;
}

/* Tablet: smaller circle, keep side-by-side */
@media (max-width: 991px) {
	.kim-toolbox-circle {
		--kim-circle-size: min(390px, 55vw) !important;
		--kim-ring-width: 24px;
		--kim-side-icon-size: 50px;
		--kim-center-size: 88px;
	}
	.kim-toolbox-circle__layout {
		gap: 1.25rem;
	}
	.kim-toolbox-circle__panel-title {
		font-size: 1.25rem;
	}
	.kim-toolbox-circle__panel-body {
		padding: 0.9rem 1.1rem;
	}
	.kim-toolbox-circle__panel-slide--center .kim-toolbox-circle__panel-body {
		max-height: 360px;
	}
	.kim-toolbox-circle__panel-description {
		font-size: 0.9rem;
	}
}

/* Stack circle + panel, circle scales with viewport */
@media (max-width: 767px) {
	.kim-toolbox-circle__layout {
		flex-direction: column !important;
		gap: 1.25rem;
	}
	.kim-toolbox-circle {
		--kim-circle-size: min(340px, 85vw) !important;
		--kim-ring-width: 22px;
		--kim-side-icon-size: 48px;
		--kim-center-size: 82px;
	}
	.kim-toolbox-circle__ring-wrap {
		width: var(--kim-circle-size);
		height: var(--kim-circle-size);
		max-width: 100%;
	}
	.kim-toolbox-circle__panel {
		width: 100%;
		min-width: 0;
	}
	.kim-toolbox-circle__panel-title {
		font-size: 1.2rem;
	}
	.kim-toolbox-circle__panel-description {
		font-size: 0.875rem;
		margin-bottom: 0.85rem;
	}
	.kim-toolbox-circle__panel-btn {
		padding: 0.55rem 1.25rem;
		font-size: 0.9rem;
	}
}

/* Small phones */
@media (max-width: 480px) {
	.kim-toolbox-circle {
		--kim-circle-size: min(300px, 90vw) !important;
		--kim-ring-width: 20px;
		--kim-side-icon-size: 44px;
		--kim-center-size: 72px;
	}
	.kim-toolbox-circle__layout {
		gap: 1rem;
	}
	.kim-toolbox-circle__panel-title {
		font-size: 1.1rem;
	}
	.kim-toolbox-circle__panel-body {
		padding: 0.85rem 1rem;
		border-radius: 8px;
	}
	.kim-toolbox-circle__panel-slide--center .kim-toolbox-circle__panel-body {
		max-height: 280px;
	}
	.kim-toolbox-circle__panel-description {
		font-size: 0.875rem;
		margin-bottom: 0.75rem;
	}
	.kim-toolbox-circle__panel-btn {
		min-height: 44px;
		padding: 0.5rem 1.1rem;
		font-size: 0.875rem;
		width: 100%;
		max-width: 100%;
	}
}

/* Extra small phones */
@media (max-width: 380px) {
	.kim-toolbox-circle {
		--kim-circle-size: min(250px, 92vw) !important;
		--kim-ring-width: 18px;
		--kim-side-icon-size: 40px;
		--kim-center-size: 64px;
	}
	.kim-toolbox-circle__layout {
		gap: 0.85rem;
	}
	.kim-toolbox-circle__panel-title {
		font-size: 1rem;
	}
	.kim-toolbox-circle__panel-body {
		padding: 0.75rem 0.9rem;
	}
	.kim-toolbox-circle__panel-description {
		font-size: 0.8125rem;
	}
}