/* ==========================================================================
   Bob Expertise, centrale stylesheet
   Kleuren, lettertypes, glas, gloed, navigatie, knoppen en footer.
   Een aanpassing hier geldt meteen voor de hele site.
   ========================================================================== */

/* Lettertypes (zelf gehost) */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url(https://nieuw.bobexpertise.be/wp-content/themes/bob-expertise/assets/css/../fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;src:url(https://nieuw.bobexpertise.be/wp-content/themes/bob-expertise/assets/css/../fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;src:url(https://nieuw.bobexpertise.be/wp-content/themes/bob-expertise/assets/css/../fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url(https://nieuw.bobexpertise.be/wp-content/themes/bob-expertise/assets/css/../fonts/montserrat-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;src:url(https://nieuw.bobexpertise.be/wp-content/themes/bob-expertise/assets/css/../fonts/montserrat-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Belleza;font-style:normal;font-weight:400;font-display:swap;src:url(https://nieuw.bobexpertise.be/wp-content/themes/bob-expertise/assets/css/../fonts/belleza-latin-400-normal.woff2) format("woff2")}

/* Tokens */
:root{color-scheme:light;
  --black:#010101;--white:#fff;--mint:#BCD9CE;--bg:#eef2f0;--gray:#4a4a4a;--lightgray:#9a9a9a;--ink:#1c1c1c;
  --smoke-a:rgba(188,217,206,1);--smoke-b:rgba(188,217,206,0.9);--smoke-c:rgba(96,140,118,0.5);
  --smoke-d:rgba(150,190,172,0.55);--smoke-e:rgba(70,110,92,0.35);
  --font-body:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:Belleza,Montserrat,"Helvetica Neue",sans-serif;
  --gutter:140px;--max-w:1440px}

/* Basis */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body.be{margin:0;background:#fff;font-family:var(--font-body);color:#010101;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
:where(.be) a{color:#010101;text-decoration:none}
:where(.be) a:hover{opacity:.85}
:where(.be) a:focus-visible,:where(.be) button:focus-visible,:where(.be) input:focus-visible{outline:2px solid #010101;outline-offset:3px}
:where(.be) img{display:block;max-width:100%;height:auto}
.page{position:relative;overflow:clip}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Glas */
.glass{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.gl{backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3)}

/* Gloed (rook) en parallax */
.smoke{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;will-change:transform}
.s1{animation:drift1 34s ease-in-out infinite}
.s2{animation:drift2 41s ease-in-out infinite}
.s3{animation:drift3 47s ease-in-out infinite}
.s4{animation:drift4 38s ease-in-out infinite}
.s5{animation:drift5 53s ease-in-out infinite}
@keyframes drift1{0%{transform:translate(0,0) scale(1) rotate(0deg)}33%{transform:translate(180px,-60px) scale(1.18) rotate(8deg)}66%{transform:translate(60px,70px) scale(.92) rotate(-6deg)}100%{transform:translate(0,0) scale(1) rotate(0deg)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1.05) rotate(0deg)}40%{transform:translate(-200px,50px) scale(.9) rotate(-10deg)}75%{transform:translate(-60px,-80px) scale(1.15) rotate(5deg)}100%{transform:translate(0,0) scale(1.05) rotate(0deg)}}
@keyframes drift3{0%{transform:translate(0,0) scale(1)}30%{transform:translate(120px,-90px) scale(1.25)}70%{transform:translate(-140px,-20px) scale(.95)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift4{0%{transform:translate(0,0) scale(1) rotate(0deg)}50%{transform:translate(-120px,110px) scale(1.2) rotate(12deg)}100%{transform:translate(0,0) scale(1) rotate(0deg)}}
@keyframes drift5{0%{transform:translate(0,0) scale(.95)}45%{transform:translate(160px,60px) scale(1.1)}80%{transform:translate(40px,-60px) scale(1.2)}100%{transform:translate(0,0) scale(.95)}}
.pxl{position:absolute;inset:0;pointer-events:none;will-change:transform}

/* Navigatie */
.site-nav{position:fixed;top:calc(20px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:28px;padding:8px 8px 8px 22px;background:rgba(255,255,255,0.82);border:1px solid rgba(255,255,255,0.9);border-radius:999px;box-shadow:0 8px 30px rgba(1,1,1,0.08);width:max-content;max-width:calc(100vw - 40px)}
.admin-bar .site-nav{top:calc(52px + env(safe-area-inset-top,0px))}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{height:36px;width:auto}
.nav-links{display:flex;gap:28px;font-size:14px;font-weight:500}
.nav-links a.active{font-weight:700;color:var(--black)}
.nav-cta{display:flex;align-items:center;gap:12px;height:48px;padding:0 6px 0 20px;background:var(--black);color:var(--white)!important;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap}
.nav-cta-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--mint)}
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-hamburger svg{display:block}

/* Taalkeuze */
.lang-wrap{display:flex;gap:1px;padding:2px;background:rgba(238,242,240,0.6);border-radius:999px;margin-left:4px}
.langbtn{display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 6px;border:0;border-radius:999px;font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.04em;background:transparent;color:var(--black);transition:background .2s ease}
.langbtn:hover{background:rgba(188,217,206,0.6);opacity:1}
.langbtn.active{background:var(--black);color:var(--white)!important}

.nav-links .lang-mobile{display:none;gap:8px;padding:10px 24px 6px;border-top:1px solid rgba(1,1,1,0.06);margin-top:4px}

/* Knoppen */
.cta-btn{display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 7px 0 26px;background:var(--black);color:var(--white)!important;border-radius:999px;font-size:15px;font-weight:600;flex-shrink:0}
.cta-btn-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--mint)}
.cta-btn-ghost{display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 28px;border:2px solid var(--black);color:var(--black);border-radius:999px;font-size:15px;font-weight:600;background:transparent}

/* Scrollknop (pijl naar beneden) */
.scroll-cta{display:flex;justify-content:center;text-align:center}
.knowus{display:block}.knowus:hover{opacity:1}
.lift{display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.knowus:hover .lift{transform:translateY(-10px)}
.scroll-label{font-size:13px;font-weight:600;letter-spacing:.18em;color:var(--black)}
.scroll-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--black)}

/* Footer */
.site-footer{position:relative;z-index:5;padding:54px var(--gutter) calc(34px + env(safe-area-inset-bottom,0px));background:var(--black);color:#cfcfcf;font-size:13px;line-height:1.8}
.footer-grid{display:grid;grid-template-columns:90px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:start}
.footer-col{display:flex;flex-direction:column}
.footer-logo{font-family:var(--font-display);font-size:34px;color:var(--white);display:flex;align-items:center;gap:8px;line-height:1}
.footer-logo i{display:block;width:1.5px;height:38px;background:var(--white);transform:rotate(14deg)}
.footer-bottom{display:flex;justify-content:space-between;padding-top:18px;border-top:1px solid #2a2a2a;font-size:12px;color:var(--lightgray);margin-top:40px}
.be a.flink2{color:#cfcfcf}
.be a.flink2:hover,.be a.flink2.cur{color:var(--mint);opacity:1}

/* Minder beweging */
@media(prefers-reduced-motion:reduce){
  .s1,.s2,.s3,.s4,.s5{animation:none}
  html{scroll-behavior:auto}
  .lift{transition:none}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}

/* Responsief */
@media(max-width:1024px){
  :root{--gutter:60px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .footer-logo-col{grid-column:1/-1}
}
@media(max-width:768px){
  :root{--gutter:24px}
  .site-nav{top:calc(12px + env(safe-area-inset-top,0px));left:12px;right:12px;transform:none;width:auto;max-width:none;padding:8px 12px 8px 16px;gap:0;justify-content:space-between}
  .nav-links{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;flex-direction:column;gap:0;background:rgba(255,255,255,0.96);border-radius:20px;box-shadow:0 12px 40px rgba(1,1,1,0.12);padding:8px 0;border:1px solid rgba(255,255,255,0.9)}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 24px;font-size:15px}
  .nav-links a:hover{background:rgba(188,217,206,0.3)}
  .nav-cta{height:42px;padding:0 4px 0 16px;font-size:13px;margin-left:auto;margin-right:6px}
  .nav-cta-icon{width:32px;height:32px}
  .nav-hamburger{display:flex}
  .lang-wrap{display:none}
  .nav-links .lang-mobile{display:flex}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-bottom{flex-direction:column;gap:8px}
}

/* Honeypot van de formulieren (onzichtbaar voor bezoekers, v1.2.0) */
.be-hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}