/* =====================================================================
   mmtaart.nl  —  stijl
   Palet: roze #fbc0de + wit, met dieproze accenten
   ===================================================================== */

:root {
  --roze:        #fbc0de;
  --roze-licht:  #fff4f9;
  --roze-zacht:  #fde3ee;
  --roze-diep:   #d06a96;
  --roze-donker: #a8456f;
  --wit:         #ffffff;
  --inkt:        #4a3a42;   /* warm donkergrijs voor leestekst */
  --inkt-zacht:  #806a74;
  --schaduw:     0 10px 30px rgba(208, 106, 150, 0.18);
  --schaduw-zacht: 0 4px 16px rgba(208, 106, 150, 0.12);
  --radius:      22px;
  --max:         1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 400;
  color: var(--inkt);
  background: var(--roze-licht);
  line-height: 1.65;
  /* zachte roze sluier-achtergrond */
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(251,192,222,0.45), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(251,192,222,0.30), transparent 55%);
  background-attachment: fixed;
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  color: var(--roze-donker);
  line-height: 1.15;
  margin: 0 0 .5em;
}

p { margin: 0 0 1em; }

a { color: var(--roze-diep); text-decoration: none; }
a:hover { color: var(--roze-donker); }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---- Header / navigatie -------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--roze-zacht);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo img { height: 58px; width: auto; }

.hoofdnav { display: flex; gap: 6px; }
.hoofdnav a {
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .02em;
  color: var(--inkt);
  padding: 8px 16px;
  border-radius: 999px;
  transition: background .2s, color .2s;
}
.hoofdnav a:hover { background: var(--roze-zacht); color: var(--roze-donker); }
.hoofdnav a.actief { background: var(--roze); color: #fff; }

.menu-toggle, .menu-knop { display: none; }

/* ---- Hero ----------------------------------------------------------- */
.hero {
  text-align: center;
  padding: 88px 24px 64px;
}
.hero .script {
  font-family: 'Sacramento', cursive;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  color: var(--roze-diep);
  line-height: 1;
  margin-bottom: 8px;
  transform: rotate(-2deg);
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: .3em;
}
.hero p.lead {
  max-width: 620px;
  margin: 0 auto 28px;
  font-size: 1.15rem;
  color: var(--inkt-zacht);
}
.knop {
  display: inline-block;
  background: var(--roze-diep);
  color: #fff;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 999px;
  box-shadow: var(--schaduw-zacht);
  transition: transform .15s, box-shadow .2s, background .2s;
  margin: 8px 8px 0;
}
.knop:hover {
  background: var(--roze-donker);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--schaduw);
}
.knop.licht {
  background: #fff;
  color: var(--roze-diep);
  border: 2px solid var(--roze);
}
.knop.licht:hover { background: var(--roze-zacht); }

/* decoratieve golf onder de hero */
.golf { display: block; width: 100%; height: 60px; }
.golf path { fill: #fff; }

/* ---- Secties / kaarten --------------------------------------------- */
section { padding: 64px 0; }
.sectie-titel { text-align: center; margin-bottom: 8px; }
.sectie-sub {
  text-align: center; color: var(--inkt-zacht);
  max-width: 560px; margin: 0 auto 44px;
}

.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
.kaart {
  background: #fff;
  border: 1px solid var(--roze-zacht);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--schaduw-zacht);
  transition: transform .2s, box-shadow .25s;
}
.kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw); }
.kaart .icoon {
  width: 52px; height: 52px; margin-bottom: 14px;
  display: grid; place-items: center;
  background: var(--roze-zacht); border-radius: 50%;
  font-size: 1.5rem;
}
.kaart h3 { margin-bottom: .35em; }
.kaart p { color: var(--inkt-zacht); margin: 0; }

.blok-wit { background: #fff; }

/* ---- Galerij -------------------------------------------------------- */
.galerij-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.galerij-item {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--roze-zacht);
  box-shadow: var(--schaduw-zacht);
  aspect-ratio: 1 / 1;
}
.galerij-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.galerij-item:hover img { transform: scale(1.06); }
.galerij-item .onderschrift {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 16px 14px;
  color: #fff;
  background: linear-gradient(to top, rgba(168,69,111,.82), transparent);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.galerij-item:hover .onderschrift { opacity: 1; transform: translateY(0); }
.galerij-leeg {
  text-align: center; color: var(--inkt-zacht);
  padding: 48px; grid-column: 1 / -1;
}

/* ---- Over ons / contact -------------------------------------------- */
.tekstblok { max-width: 720px; margin: 0 auto; }
.tekstblok p { font-size: 1.1rem; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.contact-kaart {
  background: #fff;
  border: 1px solid var(--roze-zacht);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
  box-shadow: var(--schaduw-zacht);
}
.contact-kaart .label {
  font-family: 'Cormorant Garamond', serif;
  color: var(--roze-donker); font-size: 1.2rem; margin-bottom: 4px;
}
.contact-kaart .waarde { font-weight: 700; }

/* ---- Footer --------------------------------------------------------- */
.site-footer {
  background: var(--roze);
  color: #fff;
  margin-top: 40px;
  padding: 44px 24px;
  text-align: center;
}
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-merk {
  font-family: 'Sacramento', cursive;
  font-size: 2.4rem; margin: 0;
}
.footer-merk span { letter-spacing: 2px; }
.footer-sub { margin: 4px 0 14px; opacity: .95; }
.footer-links a { color: #fff; font-weight: 600; }
.footer-links a:hover { text-decoration: underline; }
.footer-klein { margin-top: 14px; font-size: .85rem; opacity: .9; }
.footer-klein a { color: #fff; text-decoration: underline; }

/* ---- Afmetingen-pagina --------------------------------------------- */
.afm-blok { max-width: 560px; margin: 0 auto 40px; }
.afm-blok h2 { text-align: center; }
.afm-tabel {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schaduw-zacht);
  border: 1px solid var(--roze-zacht);
}
.afm-tabel th {
  background: var(--roze);
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 14px 22px;
  text-align: left;
}
.afm-tabel td {
  padding: 13px 22px;
  border-top: 1px solid var(--roze-zacht);
  font-size: 1.05rem;
}
.afm-tabel tbody tr:nth-child(even) { background: var(--roze-licht); }
.afm-tabel td:last-child { color: var(--roze-donker); font-weight: 700; }

.afm-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}
.afm-kaart {
  background: #fff;
  border: 1px solid var(--roze-zacht);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--schaduw-zacht);
}
.afm-kaart h3 { margin-bottom: .35em; }
.afm-kaart p { color: var(--inkt-zacht); margin: 0; }

.afm-prijzen {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--roze-donker);
  margin: 0 0 40px;
}

.afm-bewaren {
  max-width: 720px;
  margin: 0 auto;
  background: var(--roze-licht);
  border: 1px solid var(--roze-zacht);
  border-radius: var(--radius);
  padding: 32px 34px;
}
.afm-bewaren h2 { margin-bottom: .4em; }
.afm-bewaren p { color: var(--inkt); margin: 0; }

/* ---- Opties-pagina ------------------------------------------------- */
.opt-blok { max-width: 760px; margin: 0 auto 40px; }
.opt-blok h2 { text-align: center; margin-bottom: 22px; }

.opt-lijst {
  list-style: none;
  margin: 0; padding: 0;
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--roze-zacht);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schaduw-zacht);
}
.opt-lijst li {
  padding: 13px 22px;
  border-top: 1px solid var(--roze-zacht);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.opt-lijst li:first-child { border-top: none; }
.opt-lijst li:nth-child(even) { background: var(--roze-licht); }
.opt-naam {
  font-weight: 700;
  color: var(--roze-donker);
  min-width: 120px;
}
.opt-smaken { color: var(--inkt-zacht); }

.opt-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.opt-kaart {
  background: #fff;
  border: 1px solid var(--roze-zacht);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--schaduw-zacht);
}
.opt-kaart h3 { margin-bottom: .5em; }
.opt-kaart ul { margin: 0; padding-left: 20px; color: var(--inkt-zacht); }
.opt-kaart li { margin-bottom: 6px; }

.opt-wens {
  max-width: 620px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 1.1rem;
  color: var(--roze-donker);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}

/* ---- Responsive menu ----------------------------------------------- */
@media (max-width: 760px) {
  .menu-knop {
    display: flex; flex-direction: column; gap: 5px;
    cursor: pointer; padding: 8px;
  }
  .menu-knop span {
    width: 26px; height: 3px; border-radius: 3px; background: var(--roze-diep);
    transition: transform .25s, opacity .25s;
  }
  .hoofdnav {
    position: absolute; top: 100%; right: 0; left: 0;
    flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--roze-zacht);
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  .hoofdnav a { border-radius: 0; padding: 14px 24px; }
  .menu-toggle:checked ~ .hoofdnav { max-height: 320px; }
  .header-inner { position: relative; flex-wrap: wrap; }

  /* Hero-knoppen netjes onder elkaar met ruimte ertussen */
  .hero .knop {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 14px;
  }
  .hero .knop:last-child { margin-bottom: 0; }
}