/*
 * Header- en knopopmaak die vóór de eerste weergave klaar moet zijn.
 *
 * Wordt render-blokkerend geladen (via de Webflow site-head), zodat de header niet
 * meer verspringt zodra de scripts (nomad-i18n.js, homepage-tellers.js) binnenkomen.
 * Deze regels staan óók nog in die scripts (blog en partners laden alleen het script):
 * wijzig je hier iets, doe het daar dan ook.
 */

/* Uniforme knop-styling (kleuren ongemoeid): Rubik 400, 14px, hoofdletters, radius 8. */
.w-button,.button-bg-2,.button-text,.route-bekijk-knop,.reis-bekijk-knop{font-family:"Rubik",sans-serif !important;font-weight:400 !important;font-size:14px !important;line-height:1.25 !important;text-transform:uppercase !important;letter-spacing:0 !important}
.w-button,.button-bg-2,.route-bekijk-knop,.reis-bekijk-knop{display:inline-flex !important;align-items:center !important;justify-content:center !important;min-height:40px !important;padding:5px 25px !important;border-radius:8px !important}

/* Logo (SVG 278x150, loading=lazy): ruimte vooraf reserveren, anders heeft het logo hoogte 0 tot het
   laadt en verschuiven knop en icoon verticaal zodra het binnenkomt. */
.nav-logo{aspect-ratio:278 / 150}

/* Nav-CTA: vaste breedte opheffen, vlak in de flow, tekst op nav-hoogte. */
.button-lid-worden-top,.button-lid-worden-top.accent{width:auto !important;padding-left:0 !important;padding-right:0 !important;margin-top:0 !important;white-space:nowrap !important}
.button-bg-2.accent{position:relative !important;inset:auto !important;width:auto !important;height:auto !important;display:flex !important;align-items:center !important;justify-content:center !important;white-space:nowrap !important}
.button-text._1.wit,.button-text{margin-top:0 !important}

/* Terugvallettertype met dezelfde breedte als Rubik in hoofdletters (Rubik = 93,5% van Arial),
   zodat de knop niet verspringt wanneer Rubik binnenkomt. */
@font-face{font-family:"Rubik Header Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:93.5%}
.button-lid-worden-top .button-text,.button-lid-worden-top .button-bg-2.accent{font-family:"Rubik","Rubik Header Fallback",sans-serif !important}

/* Mobiel: smallere en kleinere nav-CTA, met clamp() en een vaste 12px als terugval. */
@media (max-width:768px){
  .button-bg-2.accent{padding-left:8px !important;padding-right:8px !important}
  .button-lid-worden-top .button-bg-2.accent{min-height:34px !important;padding:4px 8px !important}
  .button-lid-worden-top .button-text,.button-lid-worden-top .button-bg-2.accent{font-size:12px !important;font-size:clamp(11px,3.2vw,12.5px) !important;line-height:1.2 !important}
}
@media (max-width:340px){
  .button-lid-worden-top .button-bg-2.accent{padding:4px 6px !important}
}

/* w--current-stijlen (Home-logo, login-icoon) gelijk aan de rest. */
@media (max-width:860px){.nav-brand.w--current{margin-right:38px !important}}
@media (min-width:479px) and (max-width:991px){.loginicoon.w--current{margin-top:2px !important}}

/* Home op mobiel: de foto loopt door tot de bovenrand, de balk is doorzichtig met een lichte aanzet.
   100dvh i.p.v. Webflow's eigen 100svh: svh is de kleinst mogelijke viewport (adresbalk altijd
   meegerekend als zichtbaar) -> zodra de adresbalk inklapt bij scrollen wordt de pagina hoger dan
   de hero en zie je daaronder een randje volgende sectie. dvh volgt de daadwerkelijke viewport live. */
@media (max-width:860px){
  .nav-outer:has(.nav-brand.w--current){background:transparent}
  .section-18{position:relative;min-height:100dvh;height:auto}
  .section-18 .div-block-148,.section-18 .slide-content-2{min-height:100dvh}
  .section-18 .hero-img{height:100dvh;object-fit:cover}
  .section-18::before{content:"";position:absolute;left:0;right:0;top:0;height:110px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(4,8,14,.5),rgba(4,8,14,0))}
}

/* De basis-<img class="hero-img"> heeft in Webflow zelf nog de oude foto als src staan;
   hero-slideshow.js overschrijft die pas zodra het (footer-)script draait, en dat is later
   dan het moment waarop de browser de oude foto al inlaadt en tekent -> korte flits van de
   oude foto. Onzichtbaar tot het script 'm vrijgeeft (zie base.style.opacity in init()).
   Vangnet-vertraging ruim: hero-slideshow.js staat ALS LAATSTE van een lange rij footer-
   scripts (jquery, webflow.js, memberstack, gtag, cookiefirst, schema's, swiper,
   social-share, instagram-feed, opbouwpopup, texttruncate, tellerstrook) waarvan sommige
   zónder defer laden -> op een trage verbinding kan dat ruim boven 2s duren. Een te kort
   vangnet zou dan zélf de oude foto tonen vóórdat het script aan de beurt komt (precies het
   probleem dat dit moest oplossen). 8s is ruim boven wat dit script redelijkerwijs nodig
   heeft, maar redt het scherm nog steeds als het script om wat voor reden dan ook nooit
   draait. */
.section-18 img.hero-img{opacity:0;animation:n4lHeroReveal 0s linear 8s forwards}
@keyframes n4lHeroReveal{to{opacity:1}}