/* Zwevend menu in "liquid glass"-stijl + algemene correcties. Geldt voor de homepage en alle v2-pagina's. */

/* Geen streepje voor de kleine labels (eyebrows) */
.eyebrow:before{display:none!important}
.eyebrow{gap:0!important}

/* Ankerlinks komen niet onder het zwevende menu terecht */
[id]{scroll-margin-top:110px}

/* Afsluitende CTA-band (padding-top:0) direct na een gekleurde sectie (o.a. de FAQ op de plaatspagina's): normale ruimte erboven, anders plakt de kaart tegen de rand.
   Ook als er onzichtbare <script>/<style>-blokken (schema voor Google) tussen staan, tot vier stuks. */
section.alt + section[style*="padding-top:0"],
section.alt + script + section[style*="padding-top:0"],
section.alt + script + script + section[style*="padding-top:0"],
section.alt + script + script + script + section[style*="padding-top:0"],
section.alt + script + script + script + script + section[style*="padding-top:0"],
section.alt + style + section[style*="padding-top:0"]{padding-top:clamp(64px,9vw,120px)!important}

/* Lijstjes in de glaskaarten zijn links */
.glass li,.hcard li{padding:0!important}
.glass li a,.hcard li a{flex:1;display:block;padding:11px 0;transition:color .25s,transform .25s}
.glass li a:hover,.hcard li a:hover{color:var(--g);transform:translateX(4px)}
.hcard li:after,.glass li:after{transition:transform .25s}
.hcard li:hover:after,.glass li:hover:after{transform:translate(3px,-3px)}

/* Kaarten die een link zijn: pijltje staat vast rechtsboven, dus de tekst springt nooit naar een volgende regel */
a.card{display:block;color:inherit}
a.card h3{position:relative;padding-right:34px;font-size:19px}
a.card h3:after{content:"\2192";position:absolute;right:0;top:0;margin:0;color:var(--g);transition:transform .25s}
a.card:hover h3:after{transform:translateX(5px)}
/* tot 1290px past een lange titel niet op één regel: reserveer twee regels zodat alle teksten gelijk beginnen */
@media(min-width:1021px) and (max-width:1290px){a.card h3{min-height:2.3em}}

/* Offerteknop en social-iconen staan alleen in het telefoonmenu (op grotere schermen staat de knop al naast het menu) */
.menu-cta,.menu-social{display:none!important}

nav.top,nav.top.s{position:fixed!important;top:14px!important;left:50%!important;right:auto!important;transform:translateX(-50%);width:min(1120px,calc(100% - 28px));border-radius:999px;border:1px solid rgba(255,255,255,.16)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 45%,rgba(255,255,255,.09))!important;
  -webkit-backdrop-filter:blur(22px) saturate(190%) brightness(1.1)!important;backdrop-filter:blur(22px) saturate(190%) brightness(1.1)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.38),inset 0 -1px 1px rgba(255,255,255,.08),inset 0 0 24px rgba(255,255,255,.04),0 14px 44px -10px rgba(0,0,0,.6),0 0 0 .5px rgba(0,0,0,.45)!important;
  transition:background .4s,box-shadow .4s,top .4s!important}
nav.top.s{background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(15,23,42,.45) 50%,rgba(255,255,255,.1))!important}
/* glans bovenaan het glas */
nav.top:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(180px 70px at 14% 0%,rgba(255,255,255,.3),transparent 70%),radial-gradient(220px 60px at 88% 100%,rgba(34,197,94,.14),transparent 70%)}
nav.top .wrap{position:relative;width:100%!important;max-width:none!important;height:62px!important;margin:0!important;padding:0 10px 0 22px!important}
nav.top .logo img{height:40px!important}
.links{gap:4px!important}
.links a{padding:9px 17px!important;border-radius:999px;transition:background .25s,color .25s}
.links a:after{display:none!important}
.links a:hover{background:rgba(255,255,255,.09)}
.links a.on{background:rgba(34,197,94,.16);color:#86efac!important}
nav.top .nav-cta{padding:12px 22px!important;background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.55)}
nav.top .nav-cta:hover{background:rgba(34,197,94,.26)}
@media(max-width:760px){
  nav.top,nav.top.s{top:10px!important;width:calc(100% - 20px)}
  nav.top .wrap{height:56px!important;padding:0 8px 0 18px!important}
  nav.top .logo img{height:36px!important}
  /* hamburger: drie streepjes met CSS getekend (het tekstteken staat in elk lettertype net anders), zo staan ze exact in het midden van het rondje */
  .burger{position:relative;flex:none;width:40px;height:40px;padding:0;border-radius:50%;background:rgba(255,255,255,.08)!important;font-size:0!important;line-height:0;color:transparent;overflow:hidden}
  .burger:before{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;border-radius:2px;background:#fff;transform:translate(-50%,-50%);box-shadow:0 -6px 0 #fff,0 6px 0 #fff}
  /* geneste backdrop-filter werkt niet binnen het glasmenu, dus het uitklapmenu is volledig dicht */
  .links.o{top:calc(100% + 10px)!important;left:0!important;right:0!important;gap:2px!important;padding:12px!important;border-radius:28px;border:1px solid rgba(255,255,255,.18)!important;background:#060c1e!important;opacity:1!important;z-index:5;box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 24px 60px -10px rgba(0,0,0,.8)}
  .links.o a{padding:14px 18px!important;font-size:16px;background:transparent}
  /* offerteknop: compact, niet over de volle breedte */
  .links.o a.menu-cta{display:flex!important;align-items:center;justify-content:center;align-self:center;margin:10px 0 4px;padding:11px 24px!important;border-radius:999px;background:var(--g)!important;color:#04130a!important;font:700 14.5px/1 Manrope,sans-serif;box-shadow:0 8px 22px -10px var(--glow)}
  .links.o a.menu-cta:hover,.links.o a.menu-cta:active{background:#4ade80!important}
  .links.o a.menu-cta:after{display:inline!important;content:"\2192";position:static;width:auto;height:auto;background:none;margin-left:8px;transition:transform .25s}
  /* social-iconen onderaan het telefoonmenu (verschijnen zodra de adressen zijn ingesteld) */
  .links.o .menu-social{display:flex!important;justify-content:center;gap:12px;margin:12px 6px 4px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
  .links.o .menu-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0!important;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#cbd5e1}
  .links.o .menu-social a:hover,.links.o .menu-social a:active{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.55);color:#86efac}
  .links.o .menu-social svg{width:18px;height:18px;display:block}
}