/* ============================================================
   cf-koppelingen.css — blok 8 van /chatfunctie-op-je-website/.
   Bouwt op widgets/shared/bconnect-cf.css (handle `bconnect-cf`).
   Bron: upgrade-chatfunctie.css, "8 — KOPPELINGEN".

   NIEUW WERK. Alleen de LAY-OUT (visual links, tekst rechts) komt van
   mr-int; de orbit-hub bestaat nergens anders in dit thema. Zie de kop
   van class-cf-koppelingen-widget.php.

   `.cf-split` en `.cf-figure-col` staan in de gedeelde stylesheet.
   ============================================================ */

.cf-checklist { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.cf-checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--c-navy); }

/* ---- de hub ------------------------------------------------
   Alles binnen .cf-hub-stage positioneert in procenten van een vierkant
   vlak. De acht plekken komen als inline left/top uit de PHP; zie
   posities() daar. */
.cf-hub { position: relative; width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box; }
.cf-hub-stage { position: relative; width: 100%; aspect-ratio: 1; }
.cf-hub-web { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cf-hub-web line { stroke: rgba(20, 20, 100, .14); stroke-width: .35; }
.cf-hub-orbitpath { fill: none; stroke: rgba(20, 20, 100, .16); stroke-width: .3; stroke-dasharray: 1.4 2.2; }

.cf-hub-orbit { position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; transform: translate(-50%, -50%); animation: cf-hub-orbit 22s linear infinite; }
.cf-hub-orbit.is-b { animation-duration: 30s; animation-direction: reverse; }
.cf-hub-orbit i { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; margin-top: -3.5px; border-radius: 999px; background: var(--cf-gradient); box-shadow: 0 0 0 4px rgba(35, 1, 251, .08); }
.cf-hub-orbit.is-b i { left: auto; right: 0; top: 50%; margin: -3.5px -3.5px 0 0; background: #a80290; }

@keyframes cf-hub-orbit {
	from { transform: translate(-50%, -50%) rotate(0); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cf-hub-orbit { animation: none; }
}

.cf-hub-logo { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 23%; aspect-ratio: 1; background: #fff; border: 1px solid rgba(20, 20, 100, .07); border-radius: 16px; padding: 10px; box-sizing: border-box; box-shadow: 0 10px 26px rgba(20, 20, 100, .09); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.cf-hub-logo:hover { box-shadow: 0 16px 34px rgba(20, 20, 100, .14); }
.cf-hub-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; place-items: center; width: 25%; aspect-ratio: 1; border-radius: 24px; background: var(--cf-gradient); color: #fff; box-shadow: 0 18px 44px rgba(168, 2, 142, .3); }
.cf-hub-core svg { width: 44%; height: 44%; }
.cf-hub-cap { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 14px; color: var(--c-text-soft); margin: 8px 0 0; text-align: center; }

/* ============================================================
   HARDENING

   `.cf-hub-logo img` staat in de bron op (0,1,1) — één klasse plus één
   type, gelijk aan `.elementor img`, dat `max-width: 100%`,
   `height: auto` én `border-radius: 0` zet. Bij gelijke specificiteit
   beslist de bronvolgorde, en die verandert zodra er een handle bij komt.

   De maten hier zijn ongewoon en juist daarom kwetsbaar: `width: 84%` en
   `height: 46%` van een tegel die zelf 23% van de stage is. Wint
   `height: auto`, dan bepaalt de beeldverhouding de hoogte en staan de
   acht logo's niet meer op één optische maat. Onder
   `.elementor-widget-bconnect_cf_koppelingen` komt het op (0,2,1) en
   staat de uitkomst vast. Meet de computed waarden in de browser.

   `.cf-hub-logo` heeft zelf een border-radius van 16px; de img erin
   krijgt er expliciet géén, anders knipt Elementors reset-waarde of een
   erfenis uit het parent-thema de hoek van het logo af.
   ============================================================ */
.elementor-widget-bconnect_cf_koppelingen .cf-hub-logo img {
	display: block;
	box-sizing: border-box;
	width: 84%;
	height: 46%;
	max-width: 84%;
	object-fit: contain;
	border-radius: 0;
}