/* Gekozen stijl voor menu en lijsten: C, zacht en speels. Staat ná thema.css.
   Beweging gebruikt alleen transform, opacity, translate en scale en staat uit bij "minder beweging". */
.top{transition:box-shadow .25s ease}
.top.scrolled{box-shadow:0 12px 30px -10px rgba(40,36,85,.28)}
nav li>a{white-space:nowrap}
.sub-toggle::after{transition:transform .25s ease}
.has-sub:hover .sub-toggle::after,.has-sub.open .sub-toggle::after{transform:rotate(225deg) translate(-2px,-2px)}

/* inscrollen */
.js .reveal{opacity:0;translate:0 26px;transition:opacity .5s ease var(--d,0ms),translate .65s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.js .reveal.in{opacity:1;translate:0 0}

/* smalle computerschermen: menu op één regel */
@media (min-width:901px) and (max-width:1100px){
  nav{gap:14px}
  nav li>a{padding:12px 10px;font-size:12.5px;letter-spacing:.05em}
}
/* telefoon */
@media (max-width:900px){
  nav{box-shadow:0 24px 40px -20px rgba(40,36,85,.4)}
  nav li>a{padding:15px 16px;font-size:15px}
  .has-sub{display:block}
  .sub{margin:0 0 6px}
  .sub li>a{padding:11px 16px;font-size:15px}
  nav.open li,nav.open .nav-cta{animation:menu-in .4s cubic-bezier(.2,.8,.2,1) both}
  nav.open li:nth-child(1){animation-delay:.02s}nav.open li:nth-child(2){animation-delay:.06s}
  nav.open li:nth-child(3){animation-delay:.10s}nav.open li:nth-child(4){animation-delay:.14s}
  nav.open li:nth-child(5){animation-delay:.18s}nav.open li:nth-child(6){animation-delay:.22s}
  nav.open .nav-cta{animation-delay:.26s}
}
@keyframes menu-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
/* Stijl C: zacht en speels. Ronde vormen die een beetje stuiteren, pastelkleuren,
   een menu waarvan de bolletjes erbij springen. Vriendelijk voor (aanstaande) mama's. */

/* ============ MENU ============ */
@media (min-width:901px){
  nav ul{gap:4px}
  nav li>a{
    position:relative;isolation:isolate;font-weight:600;font-size:15px;
    padding:10px 18px;background:none;border-radius:999px;color:var(--navy);transition:color .2s ease;
  }
  nav li>a::before{
    content:'';position:absolute;inset:0;z-index:-1;border-radius:999px;background:var(--teal-licht);
    transform:scale(.55);opacity:0;transition:transform .45s cubic-bezier(.3,1.7,.5,1),opacity .2s ease;
  }
  nav li>a:hover,nav li>a:focus-visible{background:none;color:var(--teal-tekst)}
  nav li>a:hover::before,nav li>a:focus-visible::before{transform:scale(1);opacity:1}
  nav li>a[aria-current="page"]{color:#fff}
  nav li>a[aria-current="page"]::before{background:var(--navy);transform:scale(1);opacity:1}
  nav li>a[aria-current="page"]::after{content:'';position:absolute;top:5px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--roze)}
  nav li>a[aria-current="page"]:hover{color:#fff}

  .sub{
    display:flex;visibility:hidden;opacity:0;pointer-events:none;
    top:calc(100% + 8px);border:0;border-radius:26px;padding:10px;min-width:262px;
    box-shadow:0 0 0 1px var(--rand),0 26px 46px -16px rgba(40,36,85,.35);
    transform:scale(.86) translateY(-6px);transform-origin:top left;
    transition:opacity .2s ease,transform .45s cubic-bezier(.3,1.5,.5,1),visibility 0s linear .45s;
  }
  .has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{
    visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s;
  }
  .sub li>a{border-radius:18px;font-size:15.5px;font-weight:500;padding:12px 16px;transition:background .2s ease,translate .3s cubic-bezier(.3,1.5,.5,1)}
  .sub li>a::before{display:none}
  .sub li>a:hover{background:var(--teal-licht);translate:4px 0}
}

/* ============ KNOPPEN: dik, rond en een beetje stuiterend ============ */
.btn{transition:transform .4s cubic-bezier(.3,1.7,.5,1),box-shadow .25s ease,background .2s ease,color .2s ease}
.btn-roze{box-shadow:0 12px 26px -10px rgba(229,0,91,.6)}
.btn-roze:hover{transform:scale(1.06) rotate(-1deg);box-shadow:0 16px 30px -10px rgba(229,0,91,.7)}
.btn-lijn:hover{transform:scale(1.05) rotate(1deg)}
.btn:active{transform:scale(.94)}
.menu-btn{transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.menu-btn:active{transform:scale(.92)}

/* ============ LIJSTEN MET VINKJES: zachte tegels met een stuiterend vinkje ============ */
.vinkjes{--k:var(--teal);gap:12px}
.wil-blok:nth-child(2) .vinkjes{--k:var(--roze)}
.vinkjes li{
  padding:14px 20px 14px 68px;font-weight:500;border-radius:26px;background:rgba(255,255,255,.88);
  box-shadow:0 3px 0 rgba(40,36,85,.05),0 12px 18px -16px rgba(40,36,85,.4);
  transition:transform .45s cubic-bezier(.3,1.6,.5,1),box-shadow .25s ease;
}
.vinkjes li:hover{transform:translateX(6px);box-shadow:0 3px 0 rgba(40,36,85,.05),0 18px 24px -16px rgba(40,36,85,.45)}
.vinkjes li::before,.wil-blok:nth-child(n) .vinkjes li::before{
  left:14px;top:50%;translate:0 -50%;width:40px;height:40px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.8l4.2 4.2 8.8-9.6'/%3E%3C/svg%3E") center/22px no-repeat,var(--k);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--k) 18%,transparent);
  transition:transform .5s cubic-bezier(.3,1.9,.5,1),box-shadow .3s ease;
}
.vinkjes li:hover::before,.wil-blok:nth-child(n) .vinkjes li:hover::before{transform:scale(1.18) rotate(-10deg);box-shadow:0 0 0 8px color-mix(in srgb,var(--k) 22%,transparent)}

/* ============ VOORDELEN: ronde cijfers ============ */
.voordelen-lijst{gap:22px 26px}
.voordeel{
  --c:var(--teal);--c1:var(--teal-licht);
  align-items:center;gap:20px;background:#fff;border:0;border-radius:30px;padding:24px 26px 24px 24px;
  box-shadow:0 14px 34px -18px rgba(40,36,85,.35);
  transition:transform .5s cubic-bezier(.3,1.5,.5,1),box-shadow .3s ease;
}
.voordeel:nth-child(3n+2){--c:var(--roze);--c1:var(--roze-licht)}
.voordeel:nth-child(3n){--c:var(--navy);--c1:var(--navy-licht)}
.voordeel:hover{transform:translateY(-7px) rotate(-1deg);box-shadow:0 30px 40px -22px rgba(40,36,85,.42)}
.nr{
  width:58px;height:58px;font-size:22px;font-weight:700;background:var(--c);color:#fff;
  box-shadow:0 0 0 7px var(--c1);transition:transform .5s cubic-bezier(.3,1.9,.5,1),box-shadow .3s ease;
}
.voordeel:hover .nr{transform:scale(1.1) rotate(12deg);box-shadow:0 0 0 10px var(--c1)}

/* ============ KAARTEN, ROOSTER, KOSTEN ============ */
.kaart{transition:transform .5s cubic-bezier(.3,1.5,.5,1),box-shadow .3s ease}
.kaart:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 30px 44px -22px rgba(40,36,85,.45)}
.rooster-rij,.kosten-rij,.info-lijst div{border-radius:20px;padding-left:16px;padding-right:16px;transition:transform .45s cubic-bezier(.3,1.6,.5,1),background .25s ease}
.rooster-rij:hover,.info-lijst div:hover{background:var(--teal-licht);transform:translateX(6px)}
.kosten-rij:hover{background:var(--roze-licht);transform:translateX(6px)}
.kosten-prijs,.info-prijs{font-weight:700;color:var(--roze)}

/* inscrollen: erbij ploppen */
.js .reveal{
  scale:.92;
  transition:opacity .5s ease var(--d,0ms),translate .6s cubic-bezier(.3,1.4,.5,1) var(--d,0ms),scale .6s cubic-bezier(.3,1.4,.5,1) var(--d,0ms);
}
.js .reveal.in{scale:1}