/* static export: replaces the RSForm forms */
.mw-notice{font-size:1.05rem;line-height:1.6;text-align:center;padding:10px 0}
.mw-notice p{margin:0 0 .8em}
.mw-notice a{font-weight:700;text-decoration:underline;white-space:nowrap}
.rsformcol .mw-notice{color:#fff;font-size:1.15rem;text-shadow:0 1px 3px rgba(0,0,0,.45);background:rgba(3,50,62,.38);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(255,255,255,.28);border-radius:18px;padding:24px 22px 12px;box-shadow:0 10px 30px rgba(0,0,0,.18);margin-top:10px}
.rsformcol .mw-notice p,.rsformcol .mw-notice a,.rsformcol .mw-notice a:hover{color:#fff !important}
.check .mw-notice{max-width:760px;margin:0 auto;padding:30px 0}
#tips.check .mw-notice p{color:#11576e !important;font-size:1.2rem}
#tips.check .mw-notice a{color:#d15725 !important}

.mw-trajecten{list-style:none;margin:0 auto 1em;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.mw-trajecten li{border:1px solid rgba(255,255,255,.85);border-radius:999px;padding:.2em .9em;font-size:.95rem;background:rgba(0,0,0,.18)}
.rsformcol .mw-trajecten li{color:#fff}

/* burn-out check: intro as centred lead text */
#section-id-1650880568070 #column-wrap-id-1650880568074{flex:0 0 100%;max-width:100%}
#section-id-1650880568070 #column-wrap-id-1650880568077{display:none}
#section-id-1650880568070 .sppb-addon-text-block .sppb-addon-content{max-width:760px;margin:0 auto;text-align:center}
#section-id-1650880568070 .sppb-addon-text-block p{font-size:1.4rem;line-height:1.6;margin-bottom:.6em}
#section-id-1650880568070 .sppb-addon-text-block p:last-child{color:#d15725;font-size:1.25rem}
@media (max-width:767px){#section-id-1650880568070 .sppb-addon-text-block p{font-size:1.15rem}}

/* burn-out check: static version */
.mw-check .formHidden{display:none}
.mw-check .mw-invalid{outline:2px solid #d15725;outline-offset:6px;border-radius:8px}
.mw-check-summary{background:rgba(255,255,255,.75);border-radius:14px;padding:20px 24px;margin:10px 0 24px;color:#03323e}
.mw-check-summary h3{color:#d15725;font-size:1.25rem;margin:14px 0 6px}
.mw-check-summary h3:first-child{margin-top:0}
.mw-check-summary dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:4px 18px}
.mw-check-summary dt{font-weight:400}
.mw-check-summary dd{margin:0;font-weight:700;text-align:right}
.mw-check-actions .formControls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mw-check-actions .btn{margin:0 !important}
.mw-check-status{flex-basis:100%;margin:6px 0 0;color:#11576e !important;min-height:1.4em}
@media (max-width:575px){.mw-check-summary dl{grid-template-columns:1fr}.mw-check-summary dd{text-align:left;margin-bottom:6px}}
@media print{body *{visibility:hidden}.mw-check-summary,.mw-check-summary *{visibility:visible}.mw-check-summary{position:absolute;left:0;top:0;width:100%;background:#fff}}

/* footer bottom bar: copyright + Webjongens credit */
.mw-footerbar{background:rgba(255,255,255,.7);color:#03323e;font-size:14px;line-height:1.4}
.mw-footerbar__inner{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:12px 50px;text-align:center}
.mw-footerbar__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 2rem}
.mw-footerbar p{margin:0;color:#03323e;font-size:14px}
.credit{--credit-heart:#11576e;display:inline-flex;align-items:center;gap:.4rem;margin:0;white-space:nowrap}
#sp-footer .credit__link{display:inline-flex;align-items:center;gap:.35rem;color:#03323e;text-decoration:none;letter-spacing:.02em}
.credit__link strong{font-weight:700}
#sp-footer .credit__link:hover span{text-decoration:underline;text-underline-offset:.2em}
.credit__link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.credit__heart{width:1.1rem;height:1.1rem;fill:var(--credit-heart);transition:transform 200ms cubic-bezier(.16,1,.3,1)}
.credit__link:hover .credit__heart{transform:scale(1.2)}
.credit__typed{display:inline-flex;align-items:center;gap:.4rem;color:rgba(3,50,62,.72)}
.credit__word{display:inline-flex;align-items:center;min-width:5.2em}
.credit__cursor{display:inline-block;width:2px;height:1.1em;margin-left:1px;background:currentColor;animation:credit-blink 1s step-end infinite}
@keyframes credit-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.credit__cursor{animation:none}.credit__heart{transition:none}}
.mw-footerbar .mw-photocredit{opacity:.85;font-size:13px}
@media (max-width:767px){.mw-footerbar__inner{padding:12px 16px 56px}}

/* contact: photo from the old Contactformulier section fills the white gap around the address block */
#section-id-1649763693966.faqblok{background:url(/images/contact-form-bg.jpg) center 65%/cover no-repeat !important;padding:70px 0 !important;position:relative;z-index:10000 !important}

/* "Lees alle tips" (and other buttons in .tips): template rule overrides the hover colour */
.tips .sppb-btn-default{transition:background-color .25s ease,color .25s ease}
.tips .sppb-btn-default:hover,.tips .sppb-btn-default:focus-visible{background-color:#d15725;color:#fff}

/* Tips page: subtle hover + fade-in for the tip blocks */
.tipsblok .sppb-addon-image-layout-image{overflow:hidden}
.tipsblok .sppb-addon-image-layout-image img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.tipsblok .sppb-addon-image-layout-wrap:hover .sppb-addon-image-layout-image img{transform:scale(1.04)}
.tipsblok .image-layout-tittle-wrap{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.tipsblok .sppb-addon-image-layout-wrap:hover .image-layout-tittle-wrap{transform:translateX(6px)}
.mw-js .tipsblok .sppb-addon-image-layout-wrap{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.mw-js .tipsblok .sppb-addon-image-layout-wrap.mw-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .tipsblok .sppb-addon-image-layout-image img,.tipsblok .image-layout-tittle-wrap{transition:none}
  .tipsblok .sppb-addon-image-layout-wrap:hover .sppb-addon-image-layout-image img,.tipsblok .sppb-addon-image-layout-wrap:hover .image-layout-tittle-wrap{transform:none}
  .mw-js .tipsblok .sppb-addon-image-layout-wrap{opacity:1;transform:none;transition:none}
}

/* header LinkedIn icon: gold hover (not preset red) and an underline that takes no space,
   so the header (and logo) no longer jumps on hover */
#sp-menu ul.social-icons a{position:relative;display:inline-block;transition:color .2s ease}
#sp-menu ul.social-icons a:hover,#sp-menu ul.social-icons a:focus-visible{color:#db9c3a !important}
#sp-menu ul.social-icons a:hover::after{position:absolute !important;left:0;right:0;top:calc(100% - 35px) !important;bottom:auto;width:auto}
@media (max-width:991px){#sp-menu ul.social-icons a:hover::after{top:calc(100% - 41px) !important}}

/* contact: dotted circle (parallax) starts lower so it clears the intake panel */
#sppb-addon-1649763693946 .sppb-addon-single-image-container{top:230px !important}

/* off-canvas menu: Helix sets body{overflow:hidden} on open, which drops the scrollbar and makes the
   page/header jump sideways. Reserve the scrollbar space so nothing moves. */
html{scrollbar-gutter:stable}

/* mobile/tablet: .geel's inner container loses its padding (margin:0 auto in custom.css), so the row's
   -15px gutters overflow and the full-width button touches the screen edge */
@media (max-width:991px){
  .geel .sppb-container-inner,.intro .sppb-container-inner{padding-left:15px !important;padding-right:15px !important}
  /* pink address block: icons hang 27px left of the text, so it needs a wider left padding */
  .faqblok .col1{padding:40px 30px 40px 64px !important}
}

/* accordion: SPPB slides the height with jQuery, but the panels also carry a CSS "transition: all",
   so both fight over the height every frame (stutter). Let jQuery animate alone. */
.sppb-panel-collapse,.sppb-panel-body{transition:none !important}
.sppb-panel-body{display:flow-root}

/* mobile: footer photo shrinks to "100% auto" and the translucent panel ends up on the dark footer (grey) */
@media (max-width:991px){
  #section-id-1650542851660{background-size:cover !important;background-position:50% 50% !important}
  /* dotted circles must not touch the button above them */
  .colfixed .cirkel{margin-top:60px;transform:none !important}
  /* sticky photo/circle columns make sense side-by-side only; stacked they slide over the button */
  .intro .sppb-col-md-5,.intro.over .sppb-col-md-5,.colfixed{position:relative !important;top:auto !important}
  /* contact FAQ: heading needs breathing room below the intake photo */
  #section-id-1649763693940{padding-top:80px !important}
}

/* sticky header must stay above .tips (z-index 9999 in custom.css) */
#sp-header.header-sticky{z-index:100000 !important}
/* ...but the off-canvas menu (and its overlay) must stay above the sticky header, or its close X is hidden */
.offcanvas-overlay{z-index:100001 !important}
.offcanvas-menu{z-index:100002 !important}
.offcanvas-menu .close-offcanvas .burger-icon>span{background-color:#11576e !important}
.offcanvas-menu .close-offcanvas:focus:not(:focus-visible){outline:none}

/* footer address: bigger logo, two columns, KvK underneath */
.footer .footerlogo .sppb-addon-single-image-container{width:100% !important;min-width:0 !important}
.footer .footerlogo img{width:85% !important;min-width:0 !important;max-width:170px}
@media (min-width:992px){.footer .footerlogo img{position:relative;left:-24px;top:-18px}}
.mw-adres__col p{position:relative}
.mw-adres{display:grid;grid-template-columns:max-content max-content;gap:4px clamp(56px,6vw,110px);justify-content:center;text-align:left;align-items:start}
.footer .middencol .mw-adres__col--contact p{margin-bottom:18px !important}
.footer .middencol .mw-adres__li{text-align:center;margin:4px 0 0 !important}
@media (min-width:992px){.footer .middencol .mw-adres__li{text-align:left}}
.footer .middencol .mw-adres__li a{display:inline-flex;align-items:center;gap:10px}
.footer .middencol .mw-adres__li a i{position:static !important;width:auto !important;font-size:24px;line-height:1}
.footer .middencol .mw-adres__li-gutter{display:none}
@media (min-width:992px){.footer .middencol .mw-adres__li-gutter{display:block;top:50% !important;transform:translateY(-50%);line-height:1}}
.footer .middencol .mw-adres__li a:hover{color:#11576e !important}
.mw-adres__col{white-space:nowrap}
.footer .middencol .mw-adres p{margin-bottom:14px !important;line-height:1.45}
.mw-adres__kvk{grid-column:1 / -1;margin-top:20px !important;text-align:center}
@media (min-width:992px){
  .footer .middencol{padding-left:36px !important;padding-right:36px !important}
  .footer .middencol #column-wrap-id-1650542851667{flex:0 0 29%;max-width:29%}
  .footer .middencol #column-wrap-id-1650542851671{flex:0 0 71%;max-width:71%}
}
/* wide screens: balance the logo with an equal spacer so the text columns are centred on the page (= footer bar) */
@media (min-width:1400px){
  #section-id-1650542851666 > .sppb-container-inner > .sppb-row{justify-content:center;flex-wrap:nowrap}
  .footer .middencol #column-wrap-id-1650542851667{flex:0 0 190px !important;max-width:190px !important}
  .footer .middencol #column-wrap-id-1650542851671{flex:0 1 auto !important;max-width:none !important;width:auto !important}
  #section-id-1650542851666 > .sppb-container-inner > .sppb-row::after{content:"";flex:0 0 190px}
  .mw-adres{justify-content:start}
}
/* tablet + mobile: logo above, everything centred */
@media (max-width:991px){
  .footer .middencol #column-wrap-id-1650542851667,.footer .middencol #column-wrap-id-1650542851671{flex:0 0 100% !important;max-width:100% !important}
  .footer .footerlogo .sppb-addon-single-image-container{text-align:center}
  .footer .footerlogo .sppb-addon-single-image-container{height:auto !important}
  .footer .footerlogo img{max-width:120px;margin:0 auto 18px !important;position:static !important}
  .mw-adres__col{white-space:normal}
  .mw-adres{grid-template-columns:1fr;justify-content:center;justify-items:center;text-align:center;gap:4px}
  .mw-adres__col p{text-align:center}
  .mw-adres__kvk{grid-column:1;margin-top:16px !important}
  .footer .middencol .mw-adres__li{margin-top:0 !important}
}
