/* Copykit: testversie onepager. Tokens en regels: referentie/copykit-design-SKILL.md */

/* Fonts ------------------------------------------------------------------ */

@font-face {
  font-family: "Cringe Serif";
  src: url("../fonts/cringe-serif/CringeSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist/Geist-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist/Geist-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist/Geist-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* Tokens ----------------------------------------------------------------- */

:root {
  --ck-zwart: #000000;
  --ck-blauw: #869DA5;
  --ck-bordeaux: #540B31;
  --ck-geel: #FCF3A6;
  --ck-lichtgrijs: #C4CCCE;
  --ck-lila: #DDCED6;
  --ck-creme: #F7F3E4;
  --ck-donker: #1E1B1B;

  --font-titel: "Cringe Serif", Georgia, serif;
  --font-tekst: "Geist", system-ui, sans-serif;

  --header-hoogte: 88px;
  --marge: 40px;
  --sectie-ruimte: 112px;
  --stap-label: 180px;
}

/* Basis ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-hoogte);
}

body {
  margin: 0;
  background: var(--ck-creme);
  color: var(--ck-zwart);
  font-family: var(--font-tekst);
  font-size: 16px;
  line-height: 1.5;
}

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

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

a { color: inherit; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* Typografie ------------------------------------------------------------- */

.titel-groot,
.titel {
  font-family: var(--font-titel);
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
}

.titel-groot { font-size: 64px; }
.titel { font-size: 40px; }

.tekst-groot { font-size: 18px; }

/* Illustraties: de PNG's hebben grote lege randen. Het kader krijgt de maat van
   de tekening zelf (--b x --h, op --x, --y in een beeld van 2161 breed). */
.illustratie {
  position: relative;
  aspect-ratio: var(--b) / var(--h);
}

.illustratie img {
  position: absolute;
  top: calc(var(--y) / var(--h) * -100%);
  left: calc(var(--x) / var(--b) * -100%);
  width: calc(2161 / var(--b) * 100%);
  max-width: none;
  filter: drop-shadow(0 8px 12px rgb(0 0 0 / 0.16));
}

.illustratie--papier2 { --x: 450; --y: 598; --b: 1329; --h: 1556; }
.illustratie--papier { --x: 533; --y: 584; --b: 1188; --h: 1533; }
.illustratie--postit { --x: 355; --y: 508; --b: 1446; --h: 1642; }
.illustratie--mapje { --x: 547; --y: 649; --b: 1064; --h: 1400; }

/* Knop ------------------------------------------------------------------- */

.knop {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--ck-zwart);
  border-radius: 999px;
  background: var(--ck-geel);
  color: var(--ck-zwart);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s;
}

.knop:hover { background: var(--ck-creme); }

.knop--op-geel { background: transparent; }
.knop--op-geel:hover { background: var(--ck-creme); }

/* 1. Navigatie ----------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ck-creme);
}

/* De gescheurde rand: de scheur zit bovenaan de PNG, dus gespiegeld. Ze hangt
   onder de balk, over de sectie eronder. De PNG staat op ware grootte, anders
   is de scheur te fijn om te zien. Op 72 à 76 px van de bovenrand zit de scheur,
   daarboven de schaduw: de hoogte van 84 px toont net die strook. */
.site-header::after,
.hoofdmenu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 84px;
  margin-top: -8px;
  background: url("../assets/randen/gerafeld-randje.png") top center / 3841px 286px repeat-x;
  transform: scaleY(-1);
  /* De schaduw in de PNG stopt abrupt: hier vloeit ze zacht uit */
  mask-image: linear-gradient(to bottom, transparent 36px, #000 72px);
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--header-hoogte);
  padding-inline: var(--marge);
}

.site-header__logo { flex: none; margin-right: auto; }
.site-header__logo img { width: 190px; }

.hoofdmenu::after { display: none; } /* enkel voor het uitklapmenu op gsm */

.hoofdmenu ul { display: flex; gap: 48px; }

.hoofdmenu a {
  font-size: 15px;
  text-decoration: none;
  text-underline-offset: 4px;
}

.hoofdmenu a:hover,
.hoofdmenu a[aria-current="page"] { text-decoration: underline; }

.menu-knop {
  display: none;
  min-width: 44px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--ck-zwart);
  font: inherit;
  font-size: 15px;
  text-align: right;
  cursor: pointer;
}

/* 2. Hero ---------------------------------------------------------------- */

.hero {
  padding-block: 128px 136px;
  background: var(--ck-lichtgrijs);
}

.hero__raster {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: 64px;
  align-items: start;
}

.hero__intro { padding-top: 8px; }

/* 3. Hoe werkt het ------------------------------------------------------- */

/* overflow: clip knipt de lege randen van de PNG's af, anders scrollt de pagina opzij */
.stappen {
  padding-block: var(--sectie-ruimte);
  background: var(--ck-creme);
  overflow: clip;
}

.stappen__raster {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 88px;
  align-items: center;
}

/* De PNG heeft veel lege ruimte. Het kader neemt enkel de maat van het mapje
   (1064 x 1400 van 2161 x 2701) en de afbeelding schuift daarin op zijn plaats. */
.mapje {
  position: relative;
  aspect-ratio: 1064 / 1400;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  transform: rotate(8deg);
}

.mapje img {
  position: absolute;
  top: calc(-649 / 1400 * 100%);
  left: calc(-547 / 1064 * 100%);
  width: calc(2161 / 1064 * 100%);
  max-width: none;
  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.22));
}

.stappenlijst { margin-block: 32px 40px; }

.stappenlijst li {
  display: grid;
  grid-template-columns: var(--stap-label) 1fr;
  gap: 24px;
  padding-block: 24px;
  border-top: 1px solid var(--ck-zwart);
}

.stappenlijst li:first-child { border-top: 0; }

.stappenlijst h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

/* De knop lijnt uit op de tekstkolom van de stappen */
.stappen .knop { margin-left: calc(var(--stap-label) + 24px); }

/* 4. Voor wie ------------------------------------------------------------ */

.voor-wie {
  padding-block: var(--sectie-ruimte);
  background: var(--ck-lila);
  overflow: clip;
}

.voor-wie__raster {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 88px;
  align-items: start;
}

.voor-wie__kop {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* De kriebelpijl gespiegeld: hij wijst van de titel naar de tekst */
.voor-wie__pijl {
  flex: none;
  width: 44px;
  margin-top: 28px;
  transform: scaleX(-1) rotate(-24deg);
}

/* 5. Hoe werkt het ------------------------------------------------------- */

.termijnen {
  padding-block: var(--sectie-ruimte);
  background: var(--ck-creme);
  overflow: clip;
}

.termijnen__kop {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}

.termijnen__kop .tekst-groot { max-width: 520px; margin-top: 20px; }

.termijnen__beeld {
  width: 200px;
  margin-right: 48px;
  transform: rotate(-6deg);
}

.termijnen__lijst {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-block: 56px 48px;
}

.termijnen__lijst li {
  padding-top: 24px;
  border-top: 1px solid var(--ck-zwart);
}

.termijnen__lijst strong { font-weight: 500; }

.termijn__getal {
  margin-bottom: 16px;
  font-family: var(--font-titel);
  font-size: 96px;
  font-weight: 400;
  line-height: 1;
}

.termijn__getal span {
  display: block;
  margin-top: 4px;
  font-size: 32px;
  line-height: 1.05;
}

/* 6. Over ons ------------------------------------------------------------ */

.over-ons {
  display: grid;
  grid-template-columns: 51fr 49fr;
}

.over-ons__tekst {
  padding-block: 80px;
  padding-inline: 28% var(--marge);
  background: var(--ck-geel);
}

.over-ons__tekst p { max-width: 460px; margin-top: 16px; }
.over-ons__tekst .titel + p { margin-top: 24px; }
.over-ons__tekst .knop { margin-top: 32px; }

.over-ons__beeld {
  position: relative;
  aspect-ratio: 584 / 332; /* verhouding uit de mockup */
  overflow: clip;
}

.foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  /* Zo ingezoomd dat de post-it, zoals in de mockup, over de gezichten valt */
  transform: scale(1.2);
  transform-origin: 50% 32%;
}

/* Fotobehandeling uit de skill: grijswaarden plus een kleurlaag in blend "color" */
.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ck-blauw);
  mix-blend-mode: color;
}

/* Zelfde aanpak als het mapje: kader op de maat van post-it plus plakband */
.postit {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1690 / 1463;
  width: 62%;
  transform: translate(-50%, -50%);
}

.postit img {
  position: absolute;
  top: calc(-611 / 1463 * 100%);
  left: calc(-226 / 1690 * 100%);
  width: calc(2161 / 1690 * 100%);
  max-width: none;
  filter: drop-shadow(0 8px 12px rgb(0 0 0 / 0.25));
}

/* 7. Contact ------------------------------------------------------------- */

.contact {
  padding-block: 96px 112px;
  background: var(--ck-bordeaux);
  color: var(--ck-creme);
  overflow: clip;
}

/* Drie kolommen, zodat de tekst op het midden van de pagina staat */
.contact__raster {
  display: grid;
  grid-template-columns: 1fr minmax(0, 420px) 1fr;
  gap: 48px;
  align-items: center;
}

.vlieger {
  position: relative;
  justify-self: end;
  aspect-ratio: 1738 / 1049;
  width: 200px;
}

.vlieger img {
  position: absolute;
  top: calc(-810 / 1049 * 100%);
  left: calc(-201 / 1738 * 100%);
  width: calc(2161 / 1738 * 100%);
  max-width: none;
}

.contact__tekst { text-align: center; }
.contact__tekst p { margin-top: 20px; }

.contact__mail {
  display: inline-block;
  margin-top: 24px;
  color: var(--ck-creme);
  font-weight: 500;
  text-underline-offset: 4px;
}

.contact__instagram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 12px auto 0;
  color: var(--ck-creme);
  transition: color 0.15s, transform 0.15s;
}

.contact__instagram:hover { color: var(--ck-geel); transform: rotate(-6deg); }

.contact__cookies {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ck-creme);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* Detailpagina: het traject ---------------------------------------------- */

.traject {
  padding-block: var(--sectie-ruimte);
  background: var(--ck-creme);
}

.traject__lijn { width: 200px; margin-top: 12px; }

/* --tijdlijn-kolom is de breedte van de stapnamen; de lijn staat er net naast */
.tijdlijn {
  --tijdlijn-kolom: 300px;
  margin-top: 56px;
}

.tijdlijn li {
  position: relative;
  display: grid;
  grid-template-columns: var(--tijdlijn-kolom) minmax(0, 560px);
  gap: 0 72px;
  padding-bottom: 44px;
}

.tijdlijn li:last-child { padding-bottom: 0; }

.tijdlijn li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: calc(var(--tijdlijn-kolom) + 30px);
  z-index: 1;
  width: 13px;
  height: 13px;
  border: 1px solid var(--ck-zwart);
  border-radius: 50%;
  background: var(--ck-geel);
}

.tijdlijn li::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: -12px;
  left: calc(var(--tijdlijn-kolom) + 36px);
  width: 1px;
  background: var(--ck-zwart);
}

.tijdlijn li:last-child::after { display: none; }

.tijdlijn h3 {
  font-family: var(--font-titel);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

.tijdlijn__duur { font-size: 18px; font-weight: 500; }

/* Detailpagina: wat zit erin --------------------------------------------- */

.inhoud {
  padding-block: var(--sectie-ruimte);
  background: var(--ck-lila);
  overflow: clip;
}

.kaarten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  margin-top: 56px;
}

.kaart__beeld {
  height: 200px;
  margin-bottom: 32px;
}

.kaarten li:nth-child(1) .kaart__beeld { transform: rotate(-5deg); }
.kaarten li:nth-child(2) .kaart__beeld { transform: rotate(3deg); }
.kaarten li:nth-child(3) .kaart__beeld { transform: rotate(-3deg); }

.kaarten h3 {
  margin-bottom: 8px;
  font-family: var(--font-titel);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
}

/* Detailpagina: veelgestelde vragen -------------------------------------- */

.vragen {
  padding-block: var(--sectie-ruimte);
  background: var(--ck-creme);
}

.vragen__raster {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 88px;
  align-items: start;
}

.vragen details { border-top: 1px solid var(--ck-zwart); }
.vragen details:last-child { border-bottom: 1px solid var(--ck-zwart); }

.vragen summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
  font-size: 18px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.vragen summary::-webkit-details-marker { display: none; }

.vragen summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-titel);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.15s;
}

.vragen details[open] summary::after { transform: rotate(45deg); }
.vragen details p { max-width: 560px; padding-bottom: 20px; }

/* Detailpagina: afsluiter ------------------------------------------------ */

.afsluiter {
  padding-block: var(--sectie-ruimte);
  background: var(--ck-geel);
  text-align: center;
}

.afsluiter p { margin-top: 16px; }
.afsluiter .knop { margin-top: 28px; }

/* Cookie-pop-up ---------------------------------------------------------- */

.cookies {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 20;
  width: min(420px, calc(100% - 48px));
  padding: 28px;
  border: 1px solid var(--ck-zwart);
  background: var(--ck-geel);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.25);
  transform: rotate(-1deg);
}

.cookies[hidden] { display: none; }

.cookies h2 {
  font-family: var(--font-titel);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.05;
}

.cookies p { margin-top: 12px; }

.cookies__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.cookies .knop { font-family: inherit; cursor: pointer; }

/* Tablet ----------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --sectie-ruimte: 88px; --stap-label: 140px; }

  .titel-groot { font-size: 52px; }
  .titel { font-size: 36px; }
  .hoofdmenu ul { gap: 28px; }
  .stappen__raster,
  .voor-wie__raster,
  .vragen__raster { gap: 56px; }
  .termijnen__lijst { gap: 32px; }
  .termijn__getal { font-size: 80px; }
  .termijn__getal span { font-size: 28px; }
  .tijdlijn { --tijdlijn-kolom: 200px; }
  .tijdlijn li { gap: 0 64px; }
  .kaarten { gap: 40px; }
  .alleen-breed { display: none; }
  .over-ons__tekst { padding-inline-start: 12%; }
}

/* Vanaf hier stapelen de kolommen en wordt het menu een uitklapmenu */
@media (max-width: 860px) {
  :root { --header-hoogte: 72px; --marge: 24px; --sectie-ruimte: 72px; }

  .site-header__inner { gap: 16px; }
  .site-header__logo img { width: 140px; }

  .menu-knop { display: block; order: 1; }

  .hoofdmenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 8px var(--marge) 20px;
    background: var(--ck-creme);
  }

  .hoofdmenu.is-open { display: block; }
  .hoofdmenu::after { display: block; }
  .hoofdmenu ul { flex-direction: column; gap: 0; }
  .hoofdmenu a { display: block; padding-block: 12px; font-size: 16px; }

  .knop { font-size: 15px; }

  .hero { padding-block: 88px 80px; }
  .hero__raster { grid-template-columns: 1fr; gap: 24px; }
  .hero__intro { max-width: 560px; padding-top: 0; }

  .stappen__raster { grid-template-columns: 1fr; gap: 56px; }
  .mapje { max-width: 240px; }

  .voor-wie__raster,
  .vragen__raster { grid-template-columns: 1fr; gap: 24px; }

  .voor-wie__pijl { width: 26px; margin-top: 6px; }

  .termijnen__kop { gap: 32px; }
  .termijnen__beeld { width: 150px; margin-right: 12px; }
  .termijnen__lijst { grid-template-columns: 1fr; margin-block: 40px; }

  .vragen__raster { gap: 32px; }

  .over-ons { grid-template-columns: 1fr; }
  .over-ons__tekst { padding-inline: var(--marge); }

  .contact { padding-block: 72px 80px; }
  .contact__raster { grid-template-columns: 1fr; gap: 32px; }
  .cookies { left: 16px; bottom: 16px; width: calc(100% - 32px); padding: 24px; transform: none; }
  .vlieger { justify-self: center; width: 180px; }
}

/* Gsm -------------------------------------------------------------------- */

@media (max-width: 500px) {
  .titel-groot { font-size: 38px; }
  .titel { font-size: 30px; }
  .stappenlijst li { grid-template-columns: 1fr; gap: 6px; padding-block: 20px; }
  .stappen .knop { margin-left: 0; }

  .tekst-groot { font-size: 16px; }

  .termijnen__kop { grid-template-columns: 1fr; }
  .termijnen__beeld { justify-self: center; margin-right: 0; }
  .termijn__getal { font-size: 72px; }

  /* Tijdlijn: de lijn schuift naar links, de tekst komt onder de stapnaam */
  .tijdlijn li { grid-template-columns: 1fr; padding-left: 32px; padding-bottom: 36px; }
  .tijdlijn li::before { top: 8px; left: 0; }
  .tijdlijn li::after { top: 8px; left: 6px; }
  .tijdlijn h3 { margin-bottom: 8px; font-size: 28px; }

  .kaarten { grid-template-columns: 1fr; gap: 48px; }
  .kaart__beeld { height: 170px; margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}