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

   GEEN scroll-margin-top op de cf-secties: de offset komt uit
   cf-subnav.js. Zie de kop van dat bestand.
   ============================================================ */

/* ============================================================
   STICKY ZIT OP DE ELEMENTOR-CONTAINER, NIET OP DE NAV.

   Gemeten op productie 03-09-2026, uitgelogd, met cachebuster, op
   /chatfunctie-op-je-website/ bij scroll 2000: `.cf-subnav` had keurig
   `position: sticky` en `top: 92px`, en géén enkele voorouder met
   overflow, transform of contain — de bekende val was het dus niet. Toch
   liep `getBoundingClientRect().top` door naar -936,5 in plaats van te
   blijven staan op +92.

   De reden: een sticky element reist alleen binnen zijn containing block,
   en dat is hier `.elementor-widget-container`. Die is exact even hoog als
   de nav zelf (63px tegen 63px), dus er is nul speling en het element
   wordt meteen weer losgelaten.

   Op /ai-chatbot/ gaat het goed omdat de sticky daar op de Elementor-
   CONTAINER staat: gemeten `position: sticky`, `top: 92px`, met als ouder
   de 10.907px hoge `.elementor`. Ruimte zat. Het nav-element is daar
   `position: static`.

   Zelfde route hier, met dezelfde selectorvorm als subnav.css — zie het
   blok "WordPress-context" daar, dat deze afweging al een keer heeft
   opgeschreven. Alleen de widgetnaam verschilt.

   LET OP: dit leunt op `:has()`. Dat doet de basiswidget `subnav` al sinds
   hij op productie staat, dus het is geen nieuwe afhankelijkheid; wel een
   die je moet kennen als je deze regel ooit verplaatst.
   ============================================================ */
.e-con:has(> .elementor-widget-bconnect_cf_subnav) {
	position: sticky;
	top: var(--bc-header-h, 76px);
	z-index: 40;
}
body.admin-bar .e-con:has(> .elementor-widget-bconnect_cf_subnav) {
	top: calc(var(--bc-header-h, 76px) + 32px);
}

/* De nav zelf blijft in de flow binnen die sticky container. Een tweede
   sticky hierbinnen zou hem opnieuw aan de korte widget-wrapper binden,
   precies de fout hierboven. */
.cf-subnav { position: static; top: auto; z-index: 40; display: block; width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(20, 20, 100, .08); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.cf-subnav.is-visible { opacity: 1; pointer-events: auto; }
.cf-subnav-inner { display: block; width: 100%; box-sizing: border-box; }
.cf-subnav-track { position: relative; display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; padding: 14px 0; }
.cf-subnav-track::-webkit-scrollbar { display: none; }
.cf-subnav-link { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--c-text-soft); white-space: nowrap; padding-bottom: 8px; transition: color .18s var(--ease); }
.cf-subnav-link:hover,
.cf-subnav-link.is-active { color: var(--c-navy); }
.cf-subnav-indicator { position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--cf-gradient); transition: transform .28s var(--ease), width .28s var(--ease); }

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

   `.cf-subnav-inner` draagt óók `.container`, en die heeft in de bron
   geen eigen regel — hij bestond alleen om de max-width van de schil mee
   te krijgen. In Elementor staat de balk in een eigen container die zelf
   al een breedte oplegt, dus display en box-sizing staan hierboven
   expliciet in plaats van geërfd.

   `position: sticky` faalt stil op twee manieren, en alleen de eerste is
   de bekende: een voorouder met `overflow: hidden`, `auto` of `clip`, of
   met een transform. De tweede is een containing block dat even hoog is
   als het element zelf — dan is er geen reisruimte en wordt het element
   meteen losgelaten. Dat was hier het geval; zie het blok bovenaan dit
   bestand. Meet het in de browser: geen van beide geeft een foutmelding,
   de balk scrollt gewoon mee weg.
   ============================================================ */