/* ===================================================================
   Waadi — chrome 2026: header, footer, knoppen, slot-CTA
   -------------------------------------------------------------------
   Laadt op elke pagina, na style.css. Dit zijn de onderdelen van het
   ontwerp uit home-alt-8.html die op de hele site thuishoren: de
   lichte menubalk, de footer, de knoppen met diepte en het donkere
   slotblok. De voorpagina zelf zit in home-2026.css.

   De variabelen hieronder zijn die van het ontwerp; ze botsen niet met
   de --color-* uit style.css en de twee die overlappen (--font-sans,
   --font-mono, --container) hebben dezelfde waarde.
   =================================================================== */

:root{--bg:#F8FAF9; --surface:#FFFFFF; --dark:#0A0A0A; --dark-soft:#0F1A14; --text:#333333; --muted:#6B7280; --border:#E5E7EB; --accent:#0A8560; --accent-light:#10B981; --accent-soft:#ECFDF5; --accent-dark:#047553; --warn:#B42318; --warn-soft:#FEF3F2; --sand:#F9DFCB; /* het blok dat onder de kaarten uitsteekt */ --mint:#CFE9DC; --font-head:'Plus Jakarta Sans',-apple-system,sans-serif; --font-sans:'Inter',-apple-system,sans-serif; --font-serif:'DM Serif Display',Georgia,serif; --font-mono:'JetBrains Mono',monospace; --container:1180px; --r:14px; --r-lg:22px;}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:100px;padding:11px 22px; font-family:var(--font-head);font-weight:600;font-size:.92rem;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-dark)}
.btn-ghost{border-color:var(--border);color:var(--dark);background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-light{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.btn-light:hover{background:rgba(255,255,255,.18)}
.close{text-align:center;background:var(--dark-soft);color:#fff;border-radius:var(--r-lg);padding:clamp(44px,6vw,72px) 28px}
.close h2{color:#fff;font-family:var(--font-serif);font-weight:400;font-size:clamp(1.9rem,3.2vw,2.7rem)}
.close p{color:rgba(255,255,255,.65);margin-top:12px}
.close .actions{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.close{position:relative;overflow:hidden}
.close h2{font-family:var(--font-head);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.close::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px); background-size:9px 9px;background-position:3px 3px; -webkit-mask-image:linear-gradient(160deg,#000 10%,transparent 68%); mask-image:linear-gradient(160deg,#000 10%,transparent 68%);}
.close > *{position:relative}
.site-foot{position:relative;overflow:hidden; background:linear-gradient(#fff 0%,#F4F7F5 22%,#F4F7F5 100%); border-top:1px solid var(--border); padding:clamp(48px,6vw,76px) 0 clamp(22px,2.4vw,30px)}
.site-foot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:radial-gradient(color-mix(in srgb,var(--accent) 18%,transparent) 1px,transparent 1px); background-size:9px 9px;background-position:3px 3px; -webkit-mask-image:linear-gradient(transparent 0%,#000 30%,#000 70%,transparent 100%); mask-image:linear-gradient(transparent 0%,#000 30%,#000 70%,transparent 100%)}
.site-foot > .container{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(26px,4vw,52px);padding-bottom:clamp(32px,4vw,54px)}
.foot-brand .logo{color:var(--dark);display:inline-block}
.foot-tag{color:var(--muted);font-size:.92rem;margin-top:12px;max-width:26ch}
.foot-contact{display:grid;gap:10px;margin-top:22px}
.foot-contact a{display:inline-flex;align-items:center;gap:10px;text-decoration:none; color:var(--text);font-size:.92rem;width:max-content; border:1px solid var(--border);background:#fff;border-radius:100px; padding:8px 16px 8px 12px;transition:border-color .15s ease,color .15s ease}
.foot-contact a:hover{border-color:var(--accent);color:var(--accent-dark)}
.foot-contact a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.foot-contact svg{flex:none}
.foot-col-title{font-family:var(--font-head);font-weight:700;font-size:.74rem; letter-spacing:.12em;text-transform:uppercase;color:var(--dark); display:block;margin-bottom:14px}
.foot-col a{display:block;color:var(--muted);text-decoration:none;font-size:.93rem; padding:5px 0;transition:color .15s ease}
.foot-col a:hover{color:var(--accent-dark)}
.foot-col a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px; padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--border); font-size:.84rem;color:var(--muted)}
.foot-bottom .foot-legal{margin-left:auto;font-size:.8rem;opacity:.8}
.foot-bottom a{color:var(--muted);text-decoration:none}
.foot-bottom a:hover{color:var(--accent-dark);text-decoration:underline}
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-brand{grid-column:1 / -1}
  .foot-bottom .foot-legal{margin-left:0;width:100%}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
}
.btn{padding:12px 20px;font-size:.9rem;font-weight:600;letter-spacing:-.005em; gap:9px;line-height:1;white-space:nowrap; transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.btn svg{flex:none;transition:transform .18s ease}
.btn:hover svg{transform:translateX(2px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-accent{box-shadow:0 1px 2px rgba(10,26,20,.2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-dark)}
@media (prefers-reduced-motion:reduce){
  .btn,.btn svg{transition:none}
  .btn:hover svg{transform:none}
}
.btn{padding:14px 24px;font-size:.95rem;gap:10px; transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease, background .18s ease,border-color .15s ease,color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-accent{background:linear-gradient(180deg,#10976D 0%,#0A8560 58%,#097B58 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(8,42,30,.28), 0 8px 18px -8px rgba(8,42,30,.5);}
.btn-accent:hover{background:linear-gradient(180deg,#13A277 0%,#0C9069 58%,#0A8560 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 2px 4px rgba(8,42,30,.3), 0 14px 26px -10px rgba(8,42,30,.55);}
.btn-accent:active{background:linear-gradient(180deg,#097B58 0%,#0A8560 100%); box-shadow:inset 0 2px 4px rgba(8,42,30,.35),0 1px 2px rgba(8,42,30,.2);}
.btn-ghost{background:#fff;border-color:var(--border); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(10,26,20,.06), 0 6px 14px -10px rgba(10,26,20,.32);}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); color:var(--accent-dark); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(10,26,20,.07), 0 12px 22px -12px rgba(10,26,20,.42);}
.btn-ghost:active{box-shadow:inset 0 2px 4px rgba(10,26,20,.1)}
@media (prefers-reduced-motion:reduce){
  .btn,.btn svg{transition:none}
  .btn:hover{transform:none}
  .btn:hover svg{transform:none}
}
.foot-contact{gap:12px}
.foot-contact a{font-size:.93rem;font-weight:500;padding:10px 18px 10px 14px;gap:11px; border-color:var(--border);background:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(10,26,20,.06), 0 6px 14px -10px rgba(10,26,20,.32); transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease, border-color .15s ease,color .15s ease;}
.foot-contact a:hover{transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); color:var(--accent-dark); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(10,26,20,.07), 0 12px 22px -12px rgba(10,26,20,.42);}
.foot-contact a:active{transform:translateY(0);box-shadow:inset 0 2px 4px rgba(10,26,20,.1)}
@media (prefers-reduced-motion:reduce){
  .foot-contact a{transition:none}
  .foot-contact a:hover{transform:none}
}
.foot-contact{display:flex;flex-wrap:wrap;gap:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0}
.foot-brand .logo{font-size:clamp(2.1rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.01em}
.foot-tag{margin-top:16px}

/* ===================================================================
   Header (WordPress-markup: .site-header > .container > .logo,
   .mobile-menu > .main-nav + .header-actions, .mobile-toggle)
   -------------------------------------------------------------------
   Licht, bijna wit, met blur. Het menu staat gecentreerd tussen logo
   en knoppen in plaats van op het midden van het venster; rechts
   staan Inloggen en een knop, links alleen het logo, dus optisch
   stond het anders te ver naar rechts.
   =================================================================== */
.site-header{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
             -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.site-header .container{height:70px}
.logo{font-family:var(--font-serif);font-size:1.45rem;color:var(--dark);text-decoration:none;line-height:1}
.site-header .main-nav{position:static;transform:none;flex:1;display:flex;justify-content:center}
.main-nav ul{gap:26px}
.main-nav a{font-size:.94rem;color:var(--muted);text-decoration:none}
.main-nav a:hover,.main-nav .current-menu-item > a,.main-nav .current_page_item > a{color:var(--accent-dark)}
.main-nav .menu-item-has-children > a{gap:5px}
.main-nav .menu-item-has-children > a::after{width:5px;height:5px;border-width:1.6px;opacity:.7;margin-top:-2px}
.main-nav .sub-menu{min-width:218px;padding:7px;margin-top:10px;border-radius:14px;
  box-shadow:0 0 0 1px rgba(10,26,20,.03),0 2px 4px rgba(10,26,20,.05),0 22px 44px -14px rgba(10,26,20,.42)}
.main-nav .sub-menu a{padding:9px 12px;border-radius:9px;font-size:.92rem;color:var(--text)}
.main-nav .sub-menu a:hover{background:var(--accent-soft);color:var(--accent-dark)}
.main-nav .sub-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Inloggen: grijs met een zacht vlak bij hover. Te zwaar voor een
   hulplink en te licht voor een knop was het probleem; nu is het
   zichtbaar aanklikbaar zonder met de knop te concurreren. */
.header-login{color:var(--muted);font-weight:500;font-size:.92rem;gap:7px;
              border-radius:100px;padding:8px 14px;margin-right:6px;text-decoration:none;
              transition:background-color .15s ease,color .15s ease}
.header-login svg{opacity:.75;transition:opacity .15s ease}
.header-login:hover{background:#F1F4F2;color:var(--dark)}
.header-login:hover svg{opacity:1}
.header-login:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.header-actions .btn{padding:11px 20px;font-size:.9rem}

/* Hamburger */
.mobile-toggle{padding:10px;margin-right:-6px;border-radius:10px;color:var(--dark);
               transition:background-color .15s ease}
.mobile-toggle:hover{background:#F1F4F2}
.mobile-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mobile-toggle span{width:20px;border-radius:2px}

@media (max-width:768px){
  .mobile-menu{top:calc(var(--topbar-h,0px) + 70px);background:#fff;backdrop-filter:none;
               border-top:1px solid var(--border);border-bottom:1px solid var(--border);
               box-shadow:0 22px 44px -18px rgba(10,26,20,.35);
               padding:10px 24px 18px;max-height:calc(100vh - 70px);overflow-y:auto}
  .mobile-menu.open{gap:0}
  .mobile-menu .main-nav{display:block}
  .mobile-menu .main-nav a{padding:12px 0;font-family:var(--font-head);font-weight:600;
                           font-size:1rem;color:var(--dark);border-bottom:1px solid var(--border)}
  .mobile-menu .main-nav .current-menu-item > a{color:var(--accent-dark)}
  /* Uitklapbaar item: pijl rechts, op dezelfde regel. Open = submenu
     als ingesprongen groep met een eigen onderlijn, zodat het volgende
     hoofditem weer op een lijn begint. :hover telt op aanraakschermen
     niet mee: na een tik om te sluiten bleef het menu anders open. */
  .mobile-menu .main-nav .menu-item-has-children > a{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .mobile-menu .main-nav .menu-item-has-children > a::after{display:inline-block;width:8px;height:8px;border-width:1.8px;
                                                            margin:-4px 6px 0 0;opacity:.5;transform:rotate(45deg);transition:transform .2s ease}
  .mobile-menu .main-nav .menu-item-has-children.open > a::after{transform:rotate(-135deg);margin-top:4px}
  .mobile-menu .main-nav .menu-item-has-children:not(.open):hover > a::after{transform:rotate(45deg)}
  .mobile-menu .main-nav .menu-item-has-children:not(.open):hover > .sub-menu{display:none}
  .mobile-menu .main-nav .menu-item-has-children:not(.open)::after{display:none}
  .mobile-menu .main-nav .sub-menu{display:none;padding:6px 0 10px;border-bottom:1px solid var(--border)}
  .mobile-menu .main-nav .menu-item-has-children.open > .sub-menu{display:flex}
  .mobile-menu .main-nav .sub-menu a{font-weight:500;font-size:.95rem;color:var(--muted);
                                     padding:9px 0 9px 16px;border-bottom:0;border-left:2px solid var(--border);margin-left:2px}
  .mobile-menu .main-nav .sub-menu a:hover,.mobile-menu .main-nav .sub-menu .current-menu-item > a{color:var(--accent-dark);border-left-color:var(--accent)}
  .mobile-menu .header-actions{display:flex;flex-direction:column;gap:10px;padding-top:16px}
  .mobile-menu .header-login{justify-content:flex-start;padding:10px 0;margin:0;border-radius:0}
  .mobile-menu .header-login:hover{background:none}
  .mobile-menu .header-actions .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .header-login,.header-login svg,.mobile-toggle{transition:none}
}

/* ===================================================================
   Slot-CTA (template-parts/cta.php gebruikt .close uit het ontwerp)
   =================================================================== */
.close{margin:0}
.close .actions{margin-top:26px}
.close p{margin-top:12px}

/* ===================================================================
   Sticky werkt niet onder overflow-x:hidden
   -------------------------------------------------------------------
   style.css zet overflow-x:hidden op html én body. Staat het op beide,
   dan geeft body zijn overflow niet door aan het venster en wordt body
   zelf een scrollcontainer; position:sticky heeft dan niets om aan te
   plakken. overflow-x:clip knipt net zo goed horizontale overloop af,
   maar maakt géén scrollcontainer. Alle moderne browsers kennen het.
   =================================================================== */
html,body{overflow-x:clip}

/* Uit de 1:1-vergelijking: het ontwerp meet 1180px breed (style.css had
   1200) en de menuregels hebben de regelhoogte van body. */
.main-nav a{line-height:1.6;display:inline-block}

/* ===================================================================
   Whitepaper-knop in de footer (kolom Kennis)
   -------------------------------------------------------------------
   Zelfde pil als de contactknoppen, met een boekje ervoor en de
   accentkleur als tekst, zodat hij als knop leest tussen de links.
   =================================================================== */
.foot-col .foot-whitepaper{
  display:inline-flex;align-items:center;gap:9px;width:max-content;
  margin:2px 0 10px;padding:9px 16px 9px 13px;
  font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--accent-dark);
  background:#fff;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));
  border-radius:100px;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,26,20,.06),0 6px 14px -10px rgba(10,26,20,.32);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,border-color .15s ease;
}
.foot-col .foot-whitepaper:hover{
  transform:translateY(-1px);border-color:var(--accent);color:var(--accent-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,26,20,.07),0 12px 22px -12px rgba(10,26,20,.42);
}
.foot-col .foot-whitepaper svg{color:var(--accent)}
/* In de contactrij: zelfde pil als e-mail en telefoon, maar met de
   accentkleur als tekst en rand, zodat hij als eerste leest. */
.foot-contact .foot-whitepaper{
  margin:0;padding:10px 18px 10px 14px;font-size:.93rem;font-weight:600;color:var(--accent-dark);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
}
.foot-contact .foot-whitepaper:hover{border-color:var(--accent);color:var(--accent-dark)}

/* ===================================================================
   Footer: badges in de onderregel (variant 07 uit footer-variaties.html)
   -------------------------------------------------------------------
   Drie badges rechts in de onderregel: AVG proof, Gehost in de EU en
   WTTA ready, met dezelfde teksten als de trustbar in de hero. De
   sterrenkrans is afgekeken van belang.org; kleur en letter zijn van
   ons. De statutaire regel verhuist naar een tweede, stillere regel.
   De puntjes van de footer zijn uit (zie onderaan), het slotblok heeft ze al.
   =================================================================== */
.foot-trust{list-style:none;margin:0 0 0 auto;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.foot-trust .ft-item{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--dark);opacity:.78;transition:opacity .15s ease}
.foot-trust a.ft-item:hover{opacity:1;text-decoration:none}
.foot-trust a.ft-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.foot-trust .ft-ico{width:34px;height:34px;flex:none;color:var(--dark)}
.foot-trust .ft-txt{font-family:var(--font-head);font-weight:600;font-size:.78rem;letter-spacing:-.005em;line-height:1.2}
.foot-bottom{row-gap:8px}
.foot-bottom .foot-legal{margin-left:0;width:100%}
@media (max-width:900px){
  .foot-trust{margin-left:0;width:100%}
}

/* ===================================================================
   Slot-CTA, versie home-alt-11: geen donkere kaart meer maar een
   mintlichte band over de volle breedte, met stippen die naar het
   midden toe wegvallen zodat de kop vrij staat. Eén kop, de ondertekst
   en één knop. 'body .section.cta' wint van de padding in pages-2026,
   '.hp26 .section.cta' van de sectieregels van de voorpagina. Alles is
   gescoopt op .section.cta: de whitepaperpagina gebruikt .close ook
   voor het donkere citaat en het formulierblok, die blijven donker.
   =================================================================== */
body .section.cta,.hp26 .section.cta{
  position:relative;overflow:hidden;background:#EEF7F3;
  padding:clamp(88px,11vw,168px) 0;
}
body .section.cta::before,.hp26 .section.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--accent) 22%,transparent) 1px,transparent 1px);
  background-size:9px 9px;background-position:3px 3px;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 50%,transparent 30%,#000 100%);
          mask-image:radial-gradient(60% 70% at 50% 50%,transparent 30%,#000 100%);
}
body .section.cta > .container{position:relative}
.section.cta .close,.hp26 .section.cta .close{background:none;border-radius:0;padding:0;color:var(--text);overflow:visible;box-shadow:none}
.section.cta .close::before{display:none}
.section.cta .close h2,.hp26 .section.cta .close h2,.wpp-sec-cta .close h2{
  color:var(--dark);font-family:var(--font-head);font-weight:700;
  font-size:clamp(2rem,3.4vw,2.75rem);line-height:1.1;letter-spacing:-.03em;
  max-width:620px;margin:0 auto;text-wrap:balance;
}
.section.cta .close p,.hp26 .section.cta .close p{color:var(--muted);font-size:1.06rem;line-height:1.6;max-width:46ch;margin:14px auto 0}
.section.cta .close .actions{margin-top:32px}
.section.cta .close .actions .btn-accent{padding:14px 24px;font-size:.95rem}
/* Een tweede knop stond licht op donker; op de lichte band wordt dat de ghost-knop. */
.section.cta .close .btn-light{background:#fff;border-color:var(--border);color:var(--dark)}
.section.cta .close .btn-light:hover{border-color:var(--accent);background:#fff}

/* Sinds het slotblok zelf een stippenband is, staan er geen stippen meer in de footer: twee stippenvlakken boven elkaar is te veel. */
.site-foot::before{display:none}

/* Footerpillen (whitepaper, mail, telefoon) op de maat van de knop in de
   menubalk: 38px hoog, .9rem. Ze waren 46px door de regelhoogte van 1.6
   en stonden daarmee groter dan de knoppen zelf. */
.foot-contact a,.foot-contact .foot-whitepaper{font-size:.9rem;line-height:1;padding:11px 18px 11px 14px}