/* ══ Melissa's designtokens — de enige plek waar kleuren en fonts wonen ══ */
:root {
  --room:   #FBF9F0;
  --wit:    #FFFFFF;
  --zwart:  #141414;
  --blauw:  #2E4BE0;
  --roze:   #EF6A9B;
  --oranje: #FF922D;
  --groen:  #17A268;
  --geel:   #E4A31C;
  --lijn:   #E8E4D6;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--room);
  color: var(--zwart);
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; border-radius: 6px; }

.omslag { max-width: 1100px; margin: 0 auto; padding: 0 32px; position: relative; }

/* ══ Kop en voet ══ */
header.site {
  display: flex; justify-content: space-between; align-items: center;
  padding: 34px 0 0;
}
.logo { line-height: 0; }
.logo img { width: 150px; height: auto; }
.tagpill {
  font-size: .82rem; font-weight: 600;
  border: 2px solid var(--zwart); border-radius: 999px; padding: 7px 18px;
  background: var(--wit);
}
footer.site {
  border-top: 2px solid var(--zwart); padding: 26px 0 44px; margin-top: 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: .85rem; font-weight: 500;
}
.footer-logo { width: 80px; height: auto; }

/* ══ Pills: het terugkerende motief ══ */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 600;
  border: 2px solid; border-radius: 999px; padding: 6px 18px;
  background: var(--wit); text-decoration: none;
}
.pill small { font-size: .72rem; font-weight: 600; opacity: .75; letter-spacing: .06em; }
.pill.groen  { border-color: var(--groen);  color: var(--groen); }
.pill.roze   { border-color: var(--roze);   color: var(--roze); }
.pill.geel   { border-color: var(--geel);   color: var(--geel); }
.pill.blauw  { border-color: var(--blauw);  color: var(--blauw); }
.pill.oranje { border-color: var(--oranje); color: var(--oranje); }
.pill.zwart  { border-color: var(--zwart);  color: var(--zwart); }

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  background: var(--zwart); color: var(--wit);
  border: 2px solid var(--zwart); border-radius: 999px; cursor: pointer;
  font-family: 'Familjen Grotesk', sans-serif; font-weight: 600; font-size: .98rem;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.knop:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--roze); }

/* ══ Kronkel met smiley ══ */
.kronkel {
  position: absolute; top: 40px; right: -40px; width: 520px;
  pointer-events: none; z-index: 0;
}
.kronkel svg { width: 100%; height: auto; overflow: visible; }

/* ══ Homepage ══ */
.hero { position: relative; z-index: 1; padding: 84px 0 40px; max-width: 760px; }
.hero h1 {
  font-size: clamp(2.5rem, 6.5vw, 4.2rem); font-weight: 700;
  line-height: 1.06; letter-spacing: -.02em; margin-bottom: 16px;
}
.hero h1 .b { color: var(--blauw); }
.hero h1 .r { color: var(--roze); }
.intro { font-size: 1.08rem; max-width: 50ch; color: #3B3B36; }
.metarij { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.raster {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px; padding: 24px 0 40px;
}
.receptkaart {
  display: block; background: var(--wit);
  border: 2px solid var(--zwart); border-radius: 24px;
  padding: 26px 28px; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.receptkaart:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--geel); }
.receptkaart h2 {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em;
  margin: 14px 0 6px; line-height: 1.25;
}
.kaartmeta { font-size: .85rem; font-weight: 500; color: #6B6B62; }

/* ══ Receptpagina ══ */
.hoofd {
  display: grid; grid-template-columns: 360px 1fr; gap: 52px;
  padding: 16px 0 24px; align-items: start;
}
.kaart {
  background: var(--wit); border: 2px solid var(--zwart); border-radius: 24px;
  padding: 30px; position: sticky; top: 24px;
  box-shadow: 6px 6px 0 var(--geel);
}
.kaart h2, .stappen h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }

.porties {
  display: flex; align-items: center; gap: 14px; margin: 18px 0 20px;
  padding: 14px 16px; border-radius: 16px; background: var(--room);
}
.porties label { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blauw); }
.porties output { font-weight: 700; font-size: 1.35rem; min-width: 2ch; text-align: center; }
input[type=range] { flex: 1; appearance: none; height: 5px; border-radius: 3px; background: var(--blauw); cursor: pointer; }
input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--wit); border: 3px solid var(--blauw);
}
input[type=range]::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; background: var(--wit); border: 3px solid var(--blauw);
}

ul.ingr { list-style: none; }
ul.ingr li { display: flex; gap: 12px; padding: 9px 2px; font-size: .95rem; border-bottom: 1px dashed var(--lijn); }
ul.ingr li:last-child { border-bottom: 0; }
ul.ingr li.ingr-kopje { display: block; padding: 18px 2px 8px; border-bottom: 0; }
ul.ingr li.ingr-kopje:first-child { padding-top: 2px; }
ul.ingr li.ingr-subkopje { display: block; padding: 10px 2px 2px; border-bottom: 0; }
ul.ingr li.ingr-subkopje h4 {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6B6B62;
}
.hoev { font-weight: 600; color: var(--blauw); min-width: 66px; font-variant-numeric: tabular-nums; }
.knop-breed { width: 100%; margin-top: 22px; }

.stappen ol { list-style: none; margin-top: 14px; }
.stappen li {
  display: grid; grid-template-columns: 64px 1fr; gap: 18px;
  padding: 24px 0; border-bottom: 1px solid var(--lijn); align-items: start;
}
.stappen li:last-child { border-bottom: 0; }
.stapnr {
  width: 52px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 600; border: 2px solid; border-radius: 999px; background: var(--wit);
}
.stappen li:nth-child(5n+1) .stapnr { border-color: var(--groen);  color: var(--groen); }
.stappen li:nth-child(5n+2) .stapnr { border-color: var(--roze);   color: var(--roze); }
.stappen li:nth-child(5n+3) .stapnr { border-color: var(--geel);   color: var(--geel); }
.stappen li:nth-child(5n+4) .stapnr { border-color: var(--blauw);  color: var(--blauw); }
.stappen li:nth-child(5n+5) .stapnr { border-color: var(--oranje); color: var(--oranje); }
.stappen p { max-width: 58ch; font-size: 1rem; }
.stappen li.stappen-kopje { display: block; padding: 32px 0 6px; border-bottom: 0; }
.stappen li.stappen-kopje:first-child { padding-top: 8px; }
.verhaal { margin-top: 24px; font-size: .98rem; color: #55554D; font-style: italic; max-width: 58ch; }

/* ══ Familienotitie ══ */
.notitie {
  max-width: 560px; margin: 48px auto 40px; position: relative;
  background: var(--wit); border: 2px solid var(--zwart); border-radius: 24px;
  padding: 30px 36px 26px; transform: rotate(-1.4deg);
  box-shadow: 6px 6px 0 var(--roze);
}
.notitie p { font-family: 'Caveat', cursive; font-size: 1.7rem; line-height: 1.35; }
.notitie cite {
  display: block; margin-top: 10px; font-style: normal;
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--roze);
}
.smiley { position: absolute; top: -26px; right: -18px; width: 56px; height: auto; transform: rotate(8deg); }

/* ══ Kookmodus ══ */
.kookmodus { position: fixed; inset: 0; background: var(--room); z-index: 50; display: none; flex-direction: column; padding: 32px; }
.kookmodus.actief { display: flex; }
.km-kop { display: flex; justify-content: space-between; align-items: center; }
.km-voortgang { font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blauw); }
.km-sluit {
  background: var(--wit); border: 2px solid var(--zwart); border-radius: 999px;
  padding: 10px 20px; cursor: pointer; font-family: 'Familjen Grotesk', sans-serif; font-weight: 600; font-size: .85rem;
}
.km-stap { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 840px; margin: 0 auto; width: 100%; }
.km-nummer {
  width: 64px; height: 42px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 600; border: 2px solid var(--oranje); color: var(--oranje);
  border-radius: 999px; background: var(--wit);
}
.km-label {
  display: block; margin-top: 22px;
  font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blauw);
}
.km-label:empty { display: none; margin: 0; }
.km-label:empty + .km-tekst { margin-top: 22px; }
.km-tekst { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 600; line-height: 1.3; margin-top: 8px; letter-spacing: -.01em; }
.km-nav { display: flex; gap: 14px; max-width: 840px; margin: 0 auto; width: 100%; }
.km-nav button {
  flex: 1; padding: 20px; font-size: 1.05rem; font-family: 'Familjen Grotesk', sans-serif; font-weight: 600;
  border-radius: 999px; cursor: pointer; border: 2px solid var(--zwart);
}
.km-vorige { background: var(--wit); color: var(--zwart); }
.km-volgende { background: var(--zwart); color: var(--wit); }
.km-nav button:disabled { opacity: .35; cursor: default; }

/* ══ Responsief ══ */
@media (max-width: 920px) {
  .omslag { padding: 0 20px; }
  .kronkel { display: none; }
  .hero { padding: 48px 0 24px; }
  .hoofd { grid-template-columns: 1fr; gap: 36px; }
  .kaart { position: static; }
  .stappen li { grid-template-columns: 56px 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto; }
}