/* ─────────────────────────────────────────
   Design tokens
───────────────────────────────────────── */
:root {
  /* Brand colours */
  --c-green-deep:   #084C3B;
  --c-green-mid:    #0D5C49;
  --c-green-light:  #E6F0EA;
  --c-orange:       #EA5003;
  --c-orange-dark:  #B23D00;
  --c-cream:        #FFFBF7;
  --c-warm:         #FBEEDA;

  /* Text shades */
  --c-text-dark:    #3E5A4F;
  --c-text-mid:     #294B3D;
  --c-text-muted:   #4C6259;
  --c-text-on-dark: #BBD4C7;
  --c-text-footer:  #D7EBDF;

  /* Typography */
  --font-serif: 'Stoke', serif;
  --font-sans:  'Nunito', sans-serif;

  /* Spacing */
  --section-pad-v: 100px;
  --section-pad-h: 32px;
  --max-w: 1180px;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--c-cream);
  color: var(--c-green-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Voorkomt dat iOS Safari tekst opblaast bij het draaien van de telefoon */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* De koptekst blijft bovenaan plakken, dus een sprong naar #aanbod of
   #werkwijze moet daar onderdoor stoppen in plaats van erachter. De mobiele
   waarde staat in css/mobile.css. */
section[id], [id="top"] { scroll-margin-top: 100px; }

h1, h2, h3 { margin: 0; font-weight: 400; }
p, ul, li   { margin: 0; }
ul          { padding: 0; list-style: none; }
img         { display: block; max-width: 100%; }

a              { color: var(--c-green-mid); text-decoration: none; }
a:hover        { color: var(--c-orange); }

/* ─────────────────────────────────────────
   Button utilities
───────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-sm  { font-size: 15px;   padding: 12px 22px; }
.btn-md  { font-size: 16.5px; padding: 15px 28px; }
.btn-lg  { font-size: 17px;   padding: 17px 34px; }

/* Orange fill */
.btn-orange {
  background: var(--c-orange);
  color: var(--c-cream) !important;
}
.btn-orange:hover { background: var(--c-orange-dark); color: var(--c-cream) !important; }

/* Dark green fill */
.btn-green {
  background: var(--c-green-mid);
  color: var(--c-cream) !important;
}
.btn-green:hover { background: #0A4A3A; }

/* Green outline */
.btn-outline-green {
  border: 1.5px solid rgba(8, 76, 59, 0.35);
  color: var(--c-green-deep);
}
.btn-outline-green:hover {
  background: var(--c-cream);
  border-color: var(--c-green-deep);
  color: var(--c-green-deep);
}

/* Orange outline */
.btn-outline-orange {
  border: 1.5px solid rgba(234, 80, 3, 0.5);
  color: var(--c-orange-dark);
}
.btn-outline-orange:hover {
  border-color: var(--c-orange-dark);
  background: #FBE4D6;
  color: var(--c-orange-dark);
}

/* Green/light outline (secondary nav style) */
.btn-outline-light {
  border: 1.5px solid rgba(13, 92, 73, 0.35);
  color: var(--c-green-mid);
}
.btn-outline-light:hover {
  border-color: var(--c-green-mid);
  background: var(--c-green-light);
  color: var(--c-green-mid);
}

/* ─────────────────────────────────────────
   Responsive helpers
───────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--section-pad-h);
  padding-right: var(--section-pad-h);
}

@media (max-width: 600px) {
  :root { --section-pad-h: 20px; }
}