/* AI42 Tagcloud — basisstijl. Puur de zwevende tagcloud; de achtergrond is
   altijd transparant, zodat de glas-tags breken op de sectie waar jij de widget
   in plaatst. Instelbare waarden lopen via CSS-variabelen die de Elementor-
   controls op .ai42-tc zetten. Ontworpen voor een lichte achtergrond. */

.ai42-tc {
	--ink: #12201e;         /* tekstkleur van de neutrale tags */
	--accent1: #12a093;
	--accent2: #c15f2c;
	--cloud-h: 170px;

	position: relative;
	background: transparent;
	margin: 0;
	padding: 0;
	overflow: visible;      /* tags mogen vrij buiten de widget zweven, niet afgekapt */
	font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

/* het compacte gebied waarin de tags zweven */
.ai42-tc .cloud {
	position: relative;
	height: var(--cloud-h);
	margin: 0;
	perspective: 900px;
	perspective-origin: 50% 50%;
}
.ai42-tc .cloud-world {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	will-change: transform;
}

/* --- glas op licht: frosted-wit met zachte rand/schaduw --- */
.ai42-tc .tag {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 0.5em 1.05em;
	border-radius: 999px;
	font-size: 14px; /* fallback vóór JS; JS zet de grootte per diepte */
	font-weight: 600;
	white-space: nowrap;

	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px) saturate(135%);
	-webkit-backdrop-filter: blur(10px) saturate(135%);
	box-shadow: 0 10px 26px rgba(24, 62, 58, 0.16),
	            inset 0 1px 0 rgba(255, 255, 255, 0.85);
	color: var(--ink);
	will-change: transform, opacity;
}
.ai42-tc .tag::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 55%);
	pointer-events: none;
}

/* accenten: kleuren komen uit --accent1 / --accent2 (kleurkiezers) */
.ai42-tc .tag.teal {
	background: color-mix(in srgb, var(--accent1) 22%, transparent);
	border-color: color-mix(in srgb, var(--accent1) 65%, transparent);
	color: var(--accent1);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--accent1) 26%, transparent),
	            inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ai42-tc .tag.orange {
	background: color-mix(in srgb, var(--accent2) 20%, transparent);
	border-color: color-mix(in srgb, var(--accent2) 60%, transparent);
	color: var(--accent2);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--accent2) 22%, transparent),
	            inset 0 1px 0 rgba(255, 255, 255, 0.6);
}