/* ============================================================
   lu-subnav.css — de sectiebalk van /live-chat-uitbesteden/.
   Bouwt op widgets/shared/bconnect-lu.css (handle `bconnect-lu`).
   Bron: upgrade-uitbesteden.css, "subnav".

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

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

   De bron zet de sticky op een eigen wrapper: `.lu-subnav-wrap` met
   `position: sticky; top: var(--bc-header-h, 76px); height: 0`. Dat werkt
   in de standalone export, waar die wrapper een direct kind is van een
   lange pagina-flow, maar niet hier.

   Een sticky element reist namelijk alleen binnen zijn containing block,
   en dat is in Elementor `.elementor-widget-container` — precies even hoog
   als de balk zelf. Nul speling, dus het element wordt meteen weer
   losgelaten. Met `height: 0` op de wrapper erbij is die speling zelfs
   negatief. Dat is op 03-09-2026 op productie gemeten bij cf-subnav
   (`getBoundingClientRect().top` liep door naar -936,5 in plaats van te
   blijven staan op +92); zie het HARDENING-blok van cf-subnav.css voor de
   volledige meting.

   Daarom: de sticky gaat naar de Elementor-CONTAINER, de nav zelf staat
   static, en `.lu-subnav-wrap` is niet overgenomen. Zelfde selectorvorm
   als subnav.css en cf-subnav.css; 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.
   ============================================================ */
/* 0px IN DE FLOW (3.3.25, 30-09-2026). De nav staat tot na de hero op
   opacity 0, maar de container hield tot 3.3.24 zijn volle hoogte (63px)
   vast: een lege witte strook onder de logobalk. Nu is de container 0px
   hoog en valt de nav eroverheen, over de bovenkant van de sectie eronder
   (die heeft 40 tot 64px padding, de kop staat daaronder). Dat is het
   gedrag uit de bron, waar `.lu-subnav-wrap` height 0 had. Sticky
   werkt nog, omdat deze container een direct kind is van de hoge
   .elementor-root en niet van de korte widget-wrapper.
   De scroll-offset in lu-subnav.js klopt nog steeds: getOffset() leest
   `sticky.offsetHeight || bar.offsetHeight`, en met een container van 0
   valt hij terug op de hoogte van de nav zelf.
   Deze eigenschappen staan in de BESTAANDE :has()-regel, er komt geen
   nieuwe :has()-selector bij. padding en min-height gaan naar 0 omdat
   Elementor ze via --padding-* en --min-height op elke container zet. */
.e-con:has(> .elementor-widget-bconnect_lu_subnav) {
	position: sticky;
	top: var(--bc-header-h, 76px);
	z-index: 40;
	height: 0;
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: visible;
}
body.admin-bar .e-con:has(> .elementor-widget-bconnect_lu_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. */
.lu-subnav { position: static; top: auto; z-index: 40; display: block; width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(20, 20, 100, .08); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.lu-subnav.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.lu-subnav > .container { display: block; width: 100%; box-sizing: border-box; }
.lu-subnav-track { position: relative; display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; padding: 14px 0; box-sizing: border-box; }
.lu-subnav-track::-webkit-scrollbar { display: none; }
.lu-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); }
.lu-subnav-link:hover,
.lu-subnav-link.is-active { color: var(--c-navy); }

/* De onderlijn begint onzichtbaar: zolang er nog geen sectie voorbij de
   grenslijn is, is er niets actiefs om onder te staan. lu-subnav.js zet
   de opacity op 1 zodra dat wel zo is. Dat is het gedrag uit de bron
   (`ind.style.opacity = active < 0 ? "0" : "1"`), en het verschilt van
   cf-subnav, waar item 0 altijd actief is. */
.lu-subnav-indicator { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; opacity: 0; border-radius: 2px; background: var(--brand-gradient); transition: transform .28s var(--ease), width .28s var(--ease), opacity .2s var(--ease); }

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

   1. De links zijn `<a>` binnen een sectie-achtige balk. De gedeelde
      regel in bconnect-lu.css onderstreept elke link in een `.lu-sec` en
      sluit `.lu-subnav-link` daar expliciet van uit — maar deze balk
      staat helemaal niet in een `.lu-sec`, dus die regel raakt hem sowieso
      niet. De uitsluiting blijft er als vangnet voor wie de balk ooit
      binnen een sectie plaatst.

   2. `text-decoration: none` moet wél expliciet: het thema zet
      onderstreping op `a` in de inhoudsstroom. `.lu-subnav-link` staat op
      (0,1,0) en dat is genoeg tegen een kale `a`, maar niet tegen
      `.elementor a` als een plugin dat ooit toevoegt. Onder de widgetnaam
      staat het vast.
   ============================================================ */
.elementor-widget-bconnect_lu_subnav .lu-subnav-link { text-decoration: none; }