/* ============ MC Kinderwens :: basis (layout, grid, typografie, schema's) ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-page);color:var(--c-ink);
  font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-base);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,picture,video,svg{max-width:100%;height:auto;display:block}
picture img{width:100%}
a{color:var(--c-link);text-decoration:none}
a:hover{color:var(--c-link-hover)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:700;color:var(--c-heading)}
hr{border:0;border-top:1px solid var(--c-border);margin:2rem 0}
:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px;border-radius:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--c-brand);color:#fff;padding:.75rem 1.25rem}
.skip-link:focus{left:0}

/* ---- typografie ---- */
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,.heading-1,.heading-2,.heading-3,.heading-4,.heading-5{
  font-family:var(--font-display);color:var(--c-heading);margin:0 0 .5em;text-wrap:balance}
h1,.h1,.heading-1{font-size:var(--h1-size);font-weight:var(--h1-weight);line-height:var(--h1-lh);letter-spacing:var(--h1-ls);text-transform:var(--h1-tt)}
h2,.h2,.heading-2{font-size:var(--h2-size);font-weight:var(--h2-weight);line-height:var(--h2-lh);letter-spacing:var(--h2-ls)}
h3,.h3,.heading-3{font-size:var(--h3-size);font-weight:var(--h3-weight);line-height:var(--h3-lh);letter-spacing:var(--h3-ls)}
h4,.h4,.heading-4{font-size:var(--h4-size);font-weight:var(--h4-weight);line-height:1.3;letter-spacing:var(--h4-ls)}
h5,.h5,.heading-5{font-size:var(--h5-size);font-weight:var(--h5-weight);line-height:1.35}
.section__description p,.header__description p{max-width:68ch}

/* ---- lijsten ---- */
ul,ol{margin:0 0 1em;padding-left:1.25rem}
li{margin-bottom:.4em}
.list--unstyled{list-style:none;padding:0;margin:0}
.list--inline{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}
.list--unstyled>li,.list--inline>li{margin:0}
.section__description ul{list-style:none;padding:0}
.section__description ul>li{position:relative;padding-left:1.6rem;margin-bottom:.55em}
.section__description ul>li::before{content:"";position:absolute;left:.25rem;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--c-accent)}
.section__description ol{padding-left:1.3rem}

/* ---- container & grid ---- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-full{max-width:var(--container-full)}
.grid{display:flex;flex-wrap:wrap;margin-inline:calc(var(--gap) / -2)}
/* let op: geen breedte in deze regel, anders verslaat hij alle .col-* klassen */
.grid>[class*="col-"]{padding-inline:calc(var(--gap) / 2);margin-bottom:var(--gap)}
[class*="col-"]{width:100%}
.order-1{order:1}.order-2{order:2}
.col-12{width:100%}
.col-1{width:8.3333%}.col-2{width:16.6667%}.col-3{width:25%}.col-4{width:33.3333%}
.col-5{width:41.6667%}.col-6{width:50%}.col-7{width:58.3333%}.col-8{width:66.6667%}
.col-9{width:75%}.col-10{width:83.3333%}.col-11{width:91.6667%}
@media(min-width:576px){
  .col-sm-3{width:25%}.col-sm-4{width:33.3333%}.col-sm-5{width:41.6667%}.col-sm-6{width:50%}
  .col-sm-7{width:58.3333%}.col-sm-8{width:66.6667%}.col-sm-9{width:75%}.col-sm-12{width:100%}
}
@media(min-width:768px){
  .col-md-3{width:25%}.col-md-4{width:33.3333%}.col-md-5{width:41.6667%}.col-md-6{width:50%}
  .col-md-7{width:58.3333%}.col-md-8{width:66.6667%}.col-md-9{width:75%}.col-md-12{width:100%}
  .order-md-1{order:1}.order-md-2{order:2}
}
@media(min-width:992px){
  .col-lg-3{width:25%}.col-lg-4{width:33.3333%}.col-lg-6{width:50%}.col-lg-8{width:66.6667%}
}
.relative{position:relative}.align-center{text-align:center}
.align-center .section__description p{margin-inline:auto}
.pt-8{padding-top:2rem}.p-2{padding:.5rem}

/* ---- sectie-ritme ---- */
section{position:relative}
.pd-top-md{padding-top:var(--sec-pad)}
.pd-bot-md{padding-bottom:var(--sec-pad)}
.pd-top-sm{padding-top:calc(var(--sec-pad) * .55)}
.pd-bot-sm{padding-bottom:calc(var(--sec-pad) * .55)}

/* ---- kleurschema's ---- */
.scheme--white{background:var(--sch-white-bg);color:var(--sch-white-fg)}
.scheme--frost{background:var(--sch-frost-bg);color:var(--sch-frost-fg)}
.scheme--sage{background:var(--sch-sage-bg);color:var(--sch-sage-fg)}
.scheme--teal{background:var(--sch-teal-bg);color:var(--sch-teal-fg)}
.scheme--white h1,.scheme--white h2,.scheme--white h3,.scheme--white h4,.scheme--white .section__title,.scheme--white .header__title{color:var(--sch-white-head)}
.scheme--frost h1,.scheme--frost h2,.scheme--frost h3,.scheme--frost h4,.scheme--frost .section__title,.scheme--frost .header__title{color:var(--sch-frost-head)}
.scheme--sage h1,.scheme--sage h2,.scheme--sage h3,.scheme--sage h4,.scheme--sage .section__title,.scheme--sage .header__title{color:var(--sch-sage-head)}
.scheme--teal h1,.scheme--teal h2,.scheme--teal h3,.scheme--teal h4,.scheme--teal .section__title,.scheme--teal .header__title{color:var(--sch-teal-head)}
.scheme--teal a:not(.btn):not(.pill){color:var(--sch-teal-link)}
.scheme--teal strong{color:var(--sch-teal-head)}
.scheme--teal .section__description ul>li::before{background:var(--sch-teal-head)}