/* ---------- Lettertype ---------- */
/* Inter (gratis, open licentie) vervangt het Cargo-lettertype.
   Wil je een ander lettertype: vervang het bestand in /fonts en pas de naam hieronder aan. */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: #00c600;
  color: #fff;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-x: hidden; /* voorkomt horizontaal scrollen door de gedraaide banen */
}

h1, h2 {
  font-size: clamp(2rem, 2.8vw, 3.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- Lopende banen ---------- */
.baan {
  position: fixed;
  width: 260vmax;        /* ruim breder dan het scherm, zodat de baan altijd van rand tot rand loopt */
  background: #ffffff;
  color: #ff0000;
  padding: 0.4em 0;
  z-index: 10;
  white-space: nowrap;
  overflow: hidden;
  border-top: 1px solid;
  border-bottom: 1px solid;
  pointer-events: none;
}

/* left/top = het punt op het scherm waar het midden van de baan doorheen loopt;
   rotate = de hoek. Schuif hiermee om de banen te verplaatsen. */
.baan-1 {
  left: 80vw;
  top: 61vh;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.baan-2 {
  left: 50vw;
  top: 54vh;
  transform: translate(-50%, -50%) rotate(10deg);
}

.baan-loop {
  display: inline-flex;
  animation: baan-loopt 90s linear infinite reverse; /* lager getal = sneller */
}

.baan-loop span { flex: none; white-space: pre; }

@keyframes baan-loopt {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Wie in het systeem 'minder beweging' heeft aangezet, krijgt stilstaande banen */
@media (prefers-reduced-motion: reduce) {
  .baan-loop { animation: none; }
}

/* ---------- Titel en de drie vlakken ---------- */
.sp-topbar {
  position: relative;      /* schuift mee, zodat lange teksten altijd te lezen zijn door te scrollen */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 gelijke kolommen */
  gap: 0.4em;
  align-items: start;
  padding: 0.5em 0.5em 4em;
  font-size: clamp(1rem, 1vw, 1.25rem);
  z-index: 100;
}

.sp-titel {
  margin: 0;
  padding: 0.1em 0.3em;
  border: 2px solid transparent; /* zelfde rand als de blokken, dan staat de tekst op één lijn */
  color: #fff;
  white-space: nowrap;
}

.sp-blok {
  background: var(--vul);
  border: 2px solid var(--lijn);
  color: var(--tekst);
  min-width: 0;            /* breedte blijft gelijk bij uitklappen */
}

.sp-kop { margin: 0; }

.sp-kop button {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  padding: 0.1em 0.3em;
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.sp-kop button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

.sp-pijl { transition: transform 0.2s; }
.sp-blok.open .sp-pijl { transform: rotate(45deg); }

.sp-inhoud {
  display: none;
  padding: 0 0.6em 1.2em;
  overflow-wrap: break-word;
}
.sp-blok.open .sp-inhoud { display: block; }

.sp-inhoud img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1.4em;
}

/* Kleuren per blok */
.sp-wie     { --vul: #ffdddd; --lijn: #ffdddd; --tekst: #fe4c52; }
.sp-wat     { --vul: #0a5d3b; --lijn: #0a5d3b; --tekst: #e1bcff; }
.sp-project { --vul: #0167e2; --lijn: #0167e2; --tekst: #bcd5ff; }

/* ---------- Contact ---------- */
.sp-contact {
  position: fixed;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0.8em;
  color: #fff;
  z-index: 20;
}

.sp-contact a { color: inherit; text-decoration: none; }
.sp-contact a:hover { text-decoration: underline; }

/* ---------- Tablet: titel boven, drie vlakken naast elkaar ---------- */
@media (max-width: 1100px) {
  .sp-topbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-titel  { grid-column: 1 / -1; }
}

/* ---------- Mobiel: alles onder elkaar ---------- */
@media (max-width: 700px) {
  .sp-topbar { grid-template-columns: 1fr; padding-bottom: 1em; }
  .sp-contact { position: relative; z-index: 100; padding: 0 0.8em 1.5em; }
}