/* ====== Fonts ====== */
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@300;400;600;700&family=Pacifico&display=swap');

/* ====== Kleuren (brand) ====== */
:root{
  /* Primair/merk */
  --pink: #CA427D;     /* hoofdaccent */
  --pink-200: #D887B1; /* licht */
  --pink-100: #E9BFD4; /* zeer licht */

  /* Secundair */
  --green: #B9CE55;
  --blue:  #95C2D7;
  --yellow:#ECBF6F;

  /* Tekst/basis */
  --black:#191915;
  --white:#FFFFFF;

  /* Hulpkleuren (optioneel) */
  --border:#EAEAEA;
  --bg:#FAFAFA;
}

/* ====== Basis ====== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Encode Sans Expanded', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  color:var(--black);
  background:var(--bg);
}
a{color:inherit}
img{max-width:100%;height:auto}
.visually-hidden{position:absolute;left:-9999px;}

/* ====== Header / Navigatie ====== */
.site-header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.site-header .wrap{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{width:42px;height:auto}
.brand-title{
  font-family:'Pacifico', cursive;
  color:var(--pink);
  font-size:1.6rem;
  letter-spacing:.2px;
}

.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);background:var(--white);border-radius:6px}
.menu-icon{display:block;width:20px;height:2px;background:var(--black);position:relative}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--black)}
.menu-icon::before{top:-6px}.menu-icon::after{top:6px}

.site-nav{display:none}
.site-nav.open{display:block}
.site-nav ul{list-style:none;margin:10px 0 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-nav a{display:block;padding:8px 12px;border-radius:6px;text-decoration:none;border:1px solid transparent}
.site-nav a.active,.site-nav a:hover{background:var(--pink);color:var(--white);border-color:var(--pink)}

@media (min-width: 900px){
  .menu-toggle{display:none}
  .site-nav{display:block}
  .site-nav ul{flex-direction:row;gap:12px;margin:0}
}

/* ====== Main ====== */
.site-main{max-width:1100px;margin:0 auto;padding:20px 16px}
.page{display:none}
.page.active{display:block}

.hero {
  display: flex;
  flex-direction: column;   /* slogan boven logo */
  align-items: center;      /* centreer de items */
  justify-content: center;
  /* match de pagina-breedte */
  max-width: 1100px;        /* zelfde als .site-main */
  margin: 10px auto 0;      /* centreert de hero */
  padding: 0 16px;          /* zelfde binnenmarge als .site-main */
  text-align: center;       /* centreer tekst (slogan) */
}
/* behoud je schaalverkleining en centreer de afbeelding */
.hero img {
  display: block;
  margin: 0 auto;
  max-width: 66%;  /* ~1.5x kleiner dan 100% */
  height: auto;
}
.intro{text-align:center;margin-top:16px}
.intro h1{font-size:2.2rem;margin:.5rem 0;color:var(--pink)}
.notice{margin:20px auto;padding:12px 14px;border:2px solid var(--pink);background:var(--pink-100);color:var(--pink);max-width:700px;border-radius:6px}
.cta{text-align:center;margin-top:14px}

.site-slogan {
  font-family: 'Pacifico', cursive;
  color: var(--pink);     /* je branding kleur */
  font-size: 1.6rem;
  letter-spacing: .2px;
  margin-bottom: 12px;    /* wat ruimte onder de tekst */
  text-align: center;
}

.site-slogan2 {
  font-family:'Encode Sans Expanded', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif, cursive;
  color: var(--pink);     /* je branding kleur */
  font-size: 1.6rem;
  letter-spacing: .2px;
  margin-bottom: 12px;    /* wat ruimte onder de tekst */
  text-align: center;
}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;background:var(--pink);color:var(--white);border-radius:6px;border:0;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(.95)}
.btn--secondary{background:var(--green)}
.btn--subtle{background:var(--pink-100);color:var(--pink)}

/* Contact */
.contact-block{display:flex;gap:20px;align-items:flex-start;justify-content:center;margin-top:28px}
.contact-block .portrait{width:200px}
.contact-info{font-size:.95rem;line-height:1.4;color:var(--blue)}
.contact-info a{color:#111}

/* ====== Formulier ====== */
.form-section{margin-top:18px}
.form-section h3{margin:0 0 8px 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid.one{grid-template-columns:1fr}
.grid > div label{display:block;font-weight:700;margin:8px 0 4px}
.grid input,.grid select,.grid textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:6px}
.grid textarea{min-height:110px;resize:vertical}

.checkbox-list{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
.checkbox-list label{display:flex;align-items:center;gap:10px;font-weight:normal;padding:10px;border:1px solid #ddd;border-radius:6px;background:var(--white)}
.checkbox-list input[type="checkbox"]{width:18px;height:18px;accent-color:var(--green)}
.checkbox-list .span-2{grid-column:1 / -1}
@media (min-width: 720px){ .checkbox-list{grid-template-columns:1fr 1fr} }

/* textarea blok netjes uitlijnen */
.checkbox-list .textarea-block { grid-column: 1 / -1; padding: 10px; border: 1px solid #ddd; border-radius: 6px; background: var(--white); }
.checkbox-list .textarea-block textarea { width: 100%; box-sizing: border-box; }

.required::after{content:" *";color:var(--pink);font-weight:700}
.req{color:var(--pink);font-weight:700}
.hp{position:absolute;left:-5000px;top:auto;width:1px;height:1px;overflow:hidden}

.actions{margin-top:16px}

/* ====== Modal ====== */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:9999}
.modal-backdrop.show{display:flex}
.modal{background:var(--white);padding:20px;border-radius:8px;max-width:520px;width:90%;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.modal h3{margin-top:0}
.modal-actions{text-align:right;margin-top:10px}
.status-error{color:var(--pink)}

/* ====== Steps ====== */
.steps{margin:10px 0 0 1.2rem;padding:0}
.steps li{margin:0 0 14px 0}
.steps h3{margin:.2rem 0 .3rem 0;font-size:1.05rem;color:#111}
.steps p{margin:0;color:#333}

/* ====== Aanbod ====== */
.feature{display:flex;flex-direction:column;gap:16px;margin:18px 0;align-items:center}
.feature .media{flex:1 1 50%;display:flex;justify-content:center;align-items:center}
.feature .media img{max-width:100%;height:auto;border-radius:8px;display:block}
.feature .copy{flex:1 1 50%}
.feature .copy h3{margin:.2rem 0 .4rem 0;font-size:1.2rem;color:#111}
.feature .copy p{margin:0;color:#333;}
@media (min-width: 900px){
  .feature{flex-direction:row;gap:24px}
  .feature:nth-of-type(even){flex-direction:row-reverse}
  .feature .media, .feature .copy{flex:1 1 50%}
}



/* ====== Carousel ====== */
.carousel{position:relative;width:100%}
.carousel-viewport{overflow:hidden;border-radius:8px}
.carousel-track{display:flex;transition:transform .5s ease}
.carousel-slide{min-width:100%;flex:0 0 100%;display:flex;justify-content:center;align-items:center;background: var(--white);}
/* NIEUW – toon altijd de volledige foto */
.carousel-slide img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;                  /* voorkom forceren naar 100% breedte */
  height:auto;
  object-fit: contain;         /* geen cropping meer */
}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);border:0;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.carousel-btn:hover{background:rgba(0,0,0,.6)}
.carousel-prev{left:8px}
.carousel-next{right:8px}
.carousel-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:6px;justify-content:center}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:#ddd;border:0;cursor:pointer}
.carousel-dot.active{background:var(--green);  /* jouw branding-groen #B9CE55 */}
@media (min-width: 900px){
  .carousel-slide img{max-height:480px}
}

/* ====== Decorative random pictures ("sprinkles") ====== */
#decor-sprinkles{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
}
.decor-sprinkle{
  position: absolute;
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.1));
  transition: transform .2s ease;
}
.decor-sprinkle:hover{
  transform: scale(1.02);
}

/* Desktop-only & never in print */
@media (max-width: 899px){
  #decor-sprinkles{ display: none !important; }
}
@media print{
  #decor-sprinkles{ display: none !important; }
}