/* soulshinefood.nl: de hele vorm. Een maatsysteem (afstanden, koppen, kleuren) bovenaan, dan de
   bouwstenen die elke pagina deelt (kop, sectie, sectiekop, knop, kaart), dan de blokken van de
   home, en onderaan de smallere schermen. Nergens een verloop, nergens losse versiering. */

@font-face { font-family: "Comfortaa"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/comfortaa-latin.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/nunito-latin.woff2) format("woff2"); }

:root {
  /* kleur: het nachtblauw en het zand van de oude site, het roze van het logo */
  --nacht: #0b1030;
  --inkt: #1c2140;
  --grijs: #4a5070;
  --roze: #b3126f;
  --bloesem: #ff8ccb;
  --zand: #ffe7ba;
  --room: #fff0da;
  --papier: #fdf8f0;
  --wit: #ffffff;
  --nevel: #c9cde0;

  /* letter */
  --kop: "Comfortaa", "Trebuchet MS", sans-serif;
  --tekst: "Nunito", "Segoe UI", system-ui, sans-serif;

  /* maat: een trap voor afstand, een trap voor koppen */
  --a1: 0.5rem;
  --a2: 1rem;
  --a3: 1.5rem;
  --a4: 2.5rem;
  --a5: 4rem;
  --a6: clamp(4rem, 9vw, 7rem);
  --h1: clamp(2.5rem, 6.2vw, 4.75rem);
  --h2: clamp(1.75rem, 3.6vw, 2.75rem);
  --h3: clamp(1.15rem, 1.8vw, 1.4rem);
  --lead: clamp(1.15rem, 1.9vw, 1.5rem);
  --breed: 72rem;
  --rand: clamp(1.25rem, 4vw, 2.5rem);
  --hoek: 1.25rem;
  --hoek-klein: 0.75rem;
  --kop-hoog: 5.5rem;
  --kop-laag: 4rem;
  --vlot: 0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-laag) + 1rem); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--inkt); font-family: var(--tekst); font-size: 1.0625rem; line-height: 1.65; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--kop); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
:focus-visible { outline: 3px solid var(--bloesem); outline-offset: 3px; border-radius: 4px; }

.binnen { width: min(100% - 2 * var(--rand), var(--breed)); margin-inline: auto; }
.spring { position: absolute; left: var(--a2); top: -4rem; z-index: 30; padding: var(--a1) var(--a2); background: var(--wit); color: var(--inkt); border-radius: var(--hoek-klein); }
.spring:focus { top: var(--a2); }
.icoon { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- de kop: ligt over de opening, wordt compact en dicht zodra je scrolt */
.kop { position: fixed; inset: 0 0 auto 0; z-index: 20; color: var(--wit); background: transparent; border-bottom: 1px solid transparent; transition: background var(--vlot), border-color var(--vlot); }
.kop__rij { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); height: var(--kop-hoog); transition: height var(--vlot); }
.kop--los, .kop--open { background: var(--nacht); border-bottom-color: rgba(255, 255, 255, 0.14); }
.kop--los .kop__rij { height: var(--kop-laag); }
.merk { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; font-family: var(--kop); font-weight: 700; font-size: 1.2rem; text-decoration: none; white-space: nowrap; }
.merk svg { width: 2.1rem; height: auto; fill: var(--zand); transition: width var(--vlot); }
.kop--los .merk svg { width: 1.75rem; }
.kop__menu ul { display: flex; align-items: center; gap: var(--a1); }
.kop__menu a:not(.knop) { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.9rem; border-radius: 999px; font-weight: 700; text-decoration: none; transition: background var(--vlot), color var(--vlot); }
.kop__menu a:not(.knop):hover { background: rgba(255, 255, 255, 0.12); color: var(--zand); }
.kop__knop { display: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: var(--hoek-klein); background: transparent; color: inherit; cursor: pointer; }
.kop__knop span { display: block; width: 1.5rem; height: 2px; margin: 0.34rem auto; background: currentColor; border-radius: 2px; transition: transform var(--vlot), opacity var(--vlot); }
.kop--open .kop__knop span:nth-child(1) { transform: translateY(calc(0.34rem + 2px)) rotate(45deg); }
.kop--open .kop__knop span:nth-child(2) { opacity: 0; }
.kop--open .kop__knop span:nth-child(3) { transform: translateY(calc(-0.34rem - 2px)) rotate(-45deg); }

/* ---- de knop: een vorm, drie kleuren */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.5rem; border: 2px solid var(--roze); border-radius: 999px; background: var(--roze); color: var(--wit); font-family: var(--tekst); font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform var(--vlot), background var(--vlot), color var(--vlot), border-color var(--vlot); }
.knop:hover { transform: translateY(-2px); background: var(--wit); color: var(--roze); border-color: var(--wit); }
.knop .icoon { width: 1.15em; height: 1.15em; stroke-width: 2.2; transition: transform var(--vlot); }
.knop:hover .icoon { transform: translateX(3px); }
.knop--zand { background: var(--zand); border-color: var(--zand); color: var(--nacht); }
.knop--lijn { background: transparent; border-color: var(--zand); color: var(--zand); }
.knop--lijn:hover { background: var(--zand); border-color: var(--zand); color: var(--nacht); }
.knop--klein { min-height: 2.75rem; padding: 0 1.2rem; }
.knoppen { display: flex; flex-wrap: wrap; gap: var(--a2); }

/* ---- de sectie en de sectiekop: elk blok begint hetzelfde */
.sectie { padding-block: var(--a6); }
.sectie--nacht { background: var(--nacht); color: var(--wit); }
.sectie--room { background: var(--room); }
.sectiekop { display: grid; gap: var(--a2); justify-items: start; margin-bottom: var(--a4); }
.oog { display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px; background: var(--roze); color: var(--wit); font-family: var(--tekst); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.09em; line-height: 1.5; text-transform: uppercase; }
.sectie--nacht .oog, .held .oog, .kopstuk .oog { background: var(--zand); color: var(--nacht); }
.sectiekop p:not(.oog) { color: var(--grijs); max-width: 38rem; }
.sectie--nacht .sectiekop p:not(.oog) { color: var(--nevel); }
.lead { font-size: var(--lead); line-height: 1.45; }

/* ---- de kaart: wit, een zachte hoek, tilt op onder de muis */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a3); }
.kaart { display: grid; gap: var(--a3); align-content: start; height: 100%; padding: var(--a4) var(--a3); border: 1px solid rgba(28, 33, 64, 0.12); border-radius: var(--hoek); background: var(--wit); transition: transform var(--vlot), border-color var(--vlot), box-shadow var(--vlot); }
.kaart:hover { transform: translateY(-4px); border-color: var(--roze); box-shadow: 0 14px 30px rgba(11, 16, 48, 0.1); }
.kaart .icoon { width: 2.5rem; height: 2.5rem; color: var(--roze); stroke-width: 1.5; }
.kaart h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 700; line-height: 1.35; }

/* ---- de opening van de home */
.held { background: var(--nacht); color: var(--wit); padding-top: calc(var(--kop-hoog) + var(--a4)); padding-bottom: var(--a6); }
.held__rij { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.held__tekst { display: grid; gap: var(--a3); justify-items: start; }
.held__tekst .lead { color: var(--zand); font-family: var(--kop); font-weight: 500; }
.held__tekst .knoppen { margin-top: var(--a2); }
.held__beeld { position: relative; padding: 0 0 var(--a5) var(--a5); }
.held__foto { overflow: hidden; border-radius: var(--hoek); aspect-ratio: 4 / 5; }
.held__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.held__logo { position: absolute; left: 0; bottom: 0; width: 44%; border: 6px solid var(--nacht); border-radius: calc(var(--hoek) + 6px); overflow: hidden; }
.held__logo img { width: 100%; }

/* ---- de opening van een andere pagina (de 404): dezelfde vorm, zonder beeld */
.kopstuk { background: var(--nacht); color: var(--wit); padding-top: calc(var(--kop-hoog) + var(--a5)); padding-bottom: var(--a6); min-height: 70vh; }
.kopstuk .binnen { display: grid; gap: var(--a3); justify-items: start; }
.kopstuk .lead { color: var(--nevel); max-width: 36rem; }

/* ---- de gerechten: drie foto's, een klik toont ze groot */
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a3); }
.fotos a { display: block; overflow: hidden; border-radius: var(--hoek); aspect-ratio: 2 / 3; background: var(--inkt); }
.fotos img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.fotos a:hover img, .fotos a:focus-visible img { transform: scale(1.05); }

/* ---- contact: de gegevens als tekst naast een foto */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.duo__foto { overflow: hidden; border-radius: var(--hoek); aspect-ratio: 4 / 3; }
.duo__foto img { width: 100%; height: 100%; object-fit: cover; }
.gegevens { display: grid; gap: var(--a2); margin-bottom: var(--a3); }
.gegevens div { display: flex; align-items: center; gap: var(--a2); padding: var(--a2) var(--a3); border: 1px solid rgba(28, 33, 64, 0.12); border-radius: var(--hoek-klein); background: var(--wit); }
.gegevens .icoon { color: var(--roze); }
.gegevens dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gegevens dd { font-family: var(--kop); font-weight: 700; font-size: var(--h3); overflow-wrap: anywhere; }
.noot { color: var(--grijs); font-size: 0.95rem; max-width: 30rem; }

/* ---- de voet */
.voet { background: var(--nacht); color: var(--nevel); padding-block: var(--a5) var(--a3); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.98rem; }
.voet__rij { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--a4); padding-bottom: var(--a4); }
.voet .merk { color: var(--wit); }
.voet__kop { margin-bottom: var(--a1); color: var(--zand); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; }
.voet__leus { margin-top: var(--a1); font-family: var(--kop); color: var(--zand); }
.voet a:not(.merk) { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--wit); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 0.2em; transition: color var(--vlot), text-decoration-color var(--vlot); }
.voet a:not(.merk):hover { color: var(--zand); text-decoration-color: var(--zand); }
.voet__onder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--a3); padding-top: var(--a2); border-top: 1px solid rgba(255, 255, 255, 0.14); }

/* ---- een foto groot */
.groot { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: var(--a2); padding: var(--a5) var(--a5) var(--a3); background: rgba(11, 16, 48, 0.96); color: var(--wit); }
.groot[hidden] { display: none; }
.groot img { max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: auto; object-fit: contain; border-radius: var(--hoek-klein); }
.groot p { max-width: 44rem; text-align: center; color: var(--nevel); font-size: 0.98rem; }
.groot button { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0 0 0.15em; border: 0; border-radius: 999px; background: var(--zand); color: var(--nacht); font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background var(--vlot); }
.groot button:hover { background: var(--wit); }
.groot__dicht { top: var(--a2); right: var(--a2); }
.groot__vorige { left: var(--a2); top: 50%; transform: translateY(-50%); }
.groot__volgende { right: var(--a2); top: 50%; transform: translateY(-50%); }

/* ---- beweging: een blok komt binnen als het in beeld schuift. Alleen met script (.js) en
   alleen voor wie beweging niet uit heeft staan; het script zet .kom dan pas. */
.kom { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: calc(var(--i, 0) * 110ms); }
.kom.er { opacity: 1; transform: none; }
.js .held__tekst > *, .js .held__beeld { animation: op 0.7s ease both; }
.js .held__tekst > :nth-child(2) { animation-delay: 0.08s; }
.js .held__tekst > :nth-child(3) { animation-delay: 0.16s; }
.js .held__tekst > :nth-child(4) { animation-delay: 0.24s; }
.js .held__beeld { animation-delay: 0.2s; }
@keyframes op { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .kom { opacity: 1; transform: none; }
}

/* ---- tablet staand en smaller */
@media (max-width: 900px) {
  .kaarten { grid-template-columns: 1fr; }
  .kaart { grid-template-columns: auto 1fr; align-items: center; padding: var(--a3); }
  .voet__rij { grid-template-columns: 1fr 1fr; }
  .voet__merk { grid-column: 1 / -1; }
}

/* ---- telefoon: de menuknop met een eigen paneel */
@media (max-width: 700px) {
  :root { --kop-hoog: 4.5rem; }
  .kop__knop { display: block; }
  .kop__menu { position: absolute; inset: 100% 0 auto 0; visibility: hidden; opacity: 0; transform: translateY(-0.5rem); background: var(--nacht); border-bottom: 1px solid rgba(255, 255, 255, 0.14); transition: opacity var(--vlot), transform var(--vlot), visibility var(--vlot); }
  .kop--open .kop__menu { visibility: visible; opacity: 1; transform: none; }
  .kop__menu ul { flex-direction: column; align-items: stretch; gap: var(--a1); padding: var(--a2) var(--rand) var(--a3); }
  .kop__menu a:not(.knop) { min-height: 3rem; padding: 0 var(--a2); border-radius: var(--hoek-klein); font-size: 1.1rem; }
  .kop__menu .knop { width: 100%; min-height: 3rem; margin-top: var(--a1); }
  .held__rij { grid-template-columns: 1fr; }
  .held__beeld { padding: 0 0 var(--a4) var(--a4); }
  .fotos { grid-template-columns: 1fr; }
  .fotos a { aspect-ratio: 4 / 5; }
  .duo { grid-template-columns: 1fr; }
  .voet__rij { grid-template-columns: 1fr; gap: var(--a3); }
  .groot { padding: var(--a5) var(--a2) var(--a2); }
  .groot p { display: grid; align-items: center; min-height: 3rem; padding-inline: 3.75rem; font-size: 0.9rem; line-height: 1.4; }
  .groot__vorige, .groot__volgende { top: auto; bottom: var(--a2); transform: none; }
  .gegevens div { padding: var(--a2); }
}