/* Atelier aan de Streepen: groen palet uit het logo (feedback september 2026).
   Hoofdkleuren: de groenen uit het logo (limoen, grasgroen, bladgroen) en wit.
   Geel en rood zijn accenten die af en toe terugkomen: de coachingband en twee tegels.
   Elke combinatie van tekst en vlak haalt minstens WCAG AA (4,5:1). */

:root {
  /* Bladgroen: de diepgroene band uit het logo, net donker genoeg voor lichte tekst (5,5:1) */
  --luik: #0b6e37;
  --luik-diep: #075a2b;
  --luik-licht: #0e7a3c;
  --op-luik: #f4f6f1;
  --op-luik-zacht: #dbe9df;

  /* Precies uit het logo */
  --blad-fel: #98c808;   /* limoen */
  --gras: #48b030;       /* grasgroen, zwarte tekst 5,8:1 */
  --logogroen: #009038;  /* diepgroen */

  /* Lichte groenen voor grote vlakken met zwarte tekst */
  --blad: #d9edb0;       /* licht limoen, zwarte tekst 12:1 */
  --blad-zacht: #eef6dc;

  /* Stippelrand van een klomp, in groen */
  --rand-groen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='24' viewBox='0 0 56 24'%3E%3Ccircle cx='28' cy='12' r='4' fill='%2348B030'/%3E%3Cpath d='M20 12c-4-5-10-6-15-3 4 1 8 3 15 3z' fill='%2398C808'/%3E%3Cpath d='M36 12c4 5 10 6 15 3-4-1-8-3-15-3z' fill='%2398C808'/%3E%3C/svg%3E");
  --rand-limoen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='24' viewBox='0 0 56 24'%3E%3Ccircle cx='28' cy='12' r='4' fill='%2398C808'/%3E%3Cpath d='M20 12c-4-5-10-6-15-3 4 1 8 3 15 3z' fill='%2398C808'/%3E%3Cpath d='M36 12c4 5 10 6 15 3-4-1-8-3-15-3z' fill='%2398C808'/%3E%3C/svg%3E");
}

/* ---------- Basis: groen in plaats van geel en rood ---------- */
::selection, .op-luik ::selection { background: var(--blad-fel); color: var(--inkt); }
a { text-decoration-color: var(--gras); }
:focus-visible { outline-color: var(--luik); }
.licht :focus-visible, main > :not(.op-luik) :focus-visible { outline-color: var(--luik); }
.op-luik :focus-visible, .voet :focus-visible, .actiebalk :focus-visible { outline-color: var(--blad-fel); }
.skip { background: var(--luik); color: var(--op-luik); }
.pijl span { text-decoration-color: var(--gras); }
.op-luik .pijl span { text-decoration-color: var(--blad-fel); }
.rand { background-image: var(--rand-groen); }
.rand--rood { background-image: var(--rand-groen); }
.vinklijst .icoon { color: var(--gras); }
.op-luik .vinklijst .icoon { color: var(--blad-fel); }
.feiten { background: var(--rand-groen) repeat-x center top 8px / 40px 17px, var(--blad-zacht); }
.feiten div { border-color: #fff; }
.feiten dt .icoon { color: var(--luik); }
.stappen li::before { background-image: var(--rand-groen); }
.voorwaarden summary::after { color: var(--luik); }
.veld input:focus, .veld select:focus, .veld textarea:focus { box-shadow: 0 0 0 4px rgb(152 200 8 / 0.45); }
.veld input, .veld textarea { caret-color: var(--luik); }
.lichtbak__sluit { background: var(--blad-fel); }

/* Knoppen: bladgroen met lichte tekst. Lijnknop in inkt. */
.knop { --knop-bg: var(--luik); --knop-fg: var(--op-luik); }
.knop:hover { background: var(--luik-diep); }
.knop--lijn { --knop-bg: transparent; --knop-fg: currentColor; }
.knop--lijn:hover { background: rgb(23 35 30 / 0.07); }
.op-luik .knop { --knop-bg: var(--blad-fel); --knop-fg: var(--inkt); }
.op-luik .knop:hover { background: #aad62a; }
.op-luik .knop--lijn { --knop-bg: transparent; --knop-fg: var(--op-luik); }
.op-luik .knop--lijn:hover { background: rgb(255 255 255 / 0.1); }

/* Bloemmotief: groen, behalve in de gele coachingband (daar blijft het rode bloemetje) */
.bloem { --motif-a: var(--gras); --motif-b: var(--luik); }
.op-luik .bloem { --motif-a: var(--blad-fel); --motif-b: var(--op-luik); }
.band .bloem { --motif-a: var(--rood); --motif-b: var(--luik); }
.held__bloem--klein { --motif-a: var(--gras); --motif-b: var(--luik); }

/* ---------- Kleurvlakken ---------- */
.op-blad { background: var(--blad); color: var(--inkt); }
.op-blad .zacht, .op-blad .inleiding { color: var(--inkt); }
.op-gras { background: var(--gras); color: var(--inkt); }
.op-gras .zacht { color: var(--inkt); }

/* ---------- Kop: wit, zodat het logo in zijn eigen kleuren staat ---------- */
.kop { background: #fff; color: var(--inkt); border-bottom: 1px solid rgb(11 110 55 / 0.12); }
.kop.is-gescrold { box-shadow: 0 10px 24px -18px rgb(7 90 43 / 0.45); }
.kop .merk--logo { background: none; box-shadow: none; padding: 0.2rem 0; }
.kop .merk--logo:hover { box-shadow: none; }
.menu ul a:hover { background: var(--blad-zacht); }
.menu ul a[aria-current="page"] { background: var(--blad); box-shadow: inset 0 -3px 0 var(--gras); }
.kop .knop { --knop-bg: var(--luik); --knop-fg: var(--op-luik); }
.menu-knop { border-color: var(--luik); color: var(--luik); }
.kop :focus-visible { outline-color: var(--luik); }
@media (max-width: 64rem) {
  .menu { background: #fff; border-bottom: 6px solid var(--gras); box-shadow: 0 18px 30px -20px rgb(7 90 43 / 0.45); }
}

/* ---------- Openingsbeeld en paginakoppen op licht limoen ---------- */
.held h1 { max-width: 15ch; }
.held h1 em { display: block; color: var(--luik); font-style: normal; margin-top: 0.1em; }
.held__adres { color: var(--inkt); }
.op-blad .inhoud-nav a { border-color: var(--luik); color: var(--luik); }
.op-blad .inhoud-nav a:hover { background: var(--luik); border-color: var(--luik); color: var(--op-luik); }

/* De stempel "Toegankelijk voor iedereen", zoals op het visitekaartje: nu in bladgroen */
.stempel {
  position: absolute; left: -13%; bottom: 7%;
  width: clamp(8rem, 5.5rem + 7vw, 11rem); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--luik); color: var(--op-luik);
  box-shadow: 0 2px 3px rgb(7 60 30 / 0.25), 0 16px 30px -14px rgb(7 60 30 / 0.7);
  transform: rotate(-10deg);
}
.stempel::before { content: ""; position: absolute; inset: 21%; border-radius: 50%; border: 2px dashed rgb(152 200 8 / 0.8); }
.stempel__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.stempel__ring text { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; fill: var(--op-luik); }
.stempel__deur { position: relative; width: 34%; height: 34%; color: var(--blad-fel); }
.stempel__deur .icoon { width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .stempel__ring { animation: stempel-draai 36s linear infinite; }
  .stempel { transition: transform 0.6s var(--uit); }
  .stempel:hover { transform: rotate(0deg) scale(1.04); }
}
@keyframes stempel-draai { to { transform: rotate(360deg); } }
@media (max-width: 48rem) {
  .stempel { left: auto; right: 0.25rem; bottom: auto; top: -2.75rem; width: 6.75rem; z-index: 2; }
  .held__bloem--klein { left: -0.25rem; right: auto; top: -1rem; }
}

/* ---------- De drie stroken uit het logo, onder elke kop ---------- */
.golven { background: var(--blad); line-height: 0; margin-bottom: -1px; overflow: hidden; }
.golven svg { display: block; width: 100%; height: clamp(46px, 7vw, 112px); }
.golven .g1 { fill: var(--blad-fel); }
.golven .g2 { fill: var(--gras); }
.golven .g3 { fill: var(--logogroen); }
.golven .g4 { fill: var(--kalk); }
.golven path { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .golven path { animation: golf-in 1.4s var(--uit) both; }
  .golven .g2 { animation-delay: 0.12s; }
  .golven .g3 { animation-delay: 0.24s; }
  .golven .g4 { animation-delay: 0.36s; }
}
@keyframes golf-in { from { transform: translateX(-100%); } }
.held { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* ---------- Toegankelijk voor iedereen (home) ---------- */
.groot-intro { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.25; letter-spacing: -0.02em; color: var(--luik-diep); max-width: 24ch; }
.twee .groot-intro + p { margin-top: 1rem; }

/* ---------- Details in groene vlakken ---------- */
.maken__lijst button[aria-selected="true"] .icoon { color: var(--blad-fel); }
.routes a:hover .rond { background: var(--blad-fel); border-color: var(--blad-fel); color: var(--inkt); }
.kanalen .icoon { color: var(--blad-fel); }
.tijdlijn b { color: var(--blad-fel); }
.inhoud-nav a:hover { background: var(--blad-fel); border-color: var(--blad-fel); color: var(--inkt); }

/* Kinderen op grasgroen met zwarte tekst */
.op-gras .kinderen p { color: var(--inkt); }
.kinderen .feiten { background: var(--rand-limoen) repeat-x center top 8px / 40px 17px, rgb(255 255 255 / 0.35); }
.kinderen .feiten div { border-color: var(--gras); }
.kinderen .feiten dt { color: var(--inkt); }
.kinderen .feiten dt .icoon { color: var(--luik-diep); }
.op-gras .knop { --knop-bg: var(--luik-diep); --knop-fg: var(--op-luik); }

/* ---------- Tegels op Workshops en feesten: groen, met één geel en één rood accent ---------- */
.tegel--a { background: var(--blad-fel); color: var(--inkt); }
.tegel--a p { color: var(--inkt); }
.tegel--b { background: var(--geel); color: var(--inkt); }
.tegel--c { background: var(--rood); color: #fff; }
.tegel--d { background: var(--blad); color: var(--inkt); }
.tegel--e { background: var(--luik); color: var(--op-luik); }
.tegel--e p { color: var(--op-luik-zacht); }
.tegel--f { background: var(--gras); color: var(--inkt); }
.tegel--f p { color: var(--inkt); }
.tegel--g { background: var(--luik-diep); color: var(--op-luik); }
.tegel--g p { color: var(--op-luik-zacht); }
.tegel { transition: transform 0.4s var(--uit), box-shadow 0.4s var(--uit); }
@media (prefers-reduced-motion: no-preference) {
  .tegel:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 18px 30px -18px rgb(7 60 30 / 0.5); }
}

/* Melding op de workshoppagina: licht groen in plaats van geel */
.melding { background: var(--blad); color: var(--inkt); }
.melding .icoon { color: var(--luik); }

/* Goed om te weten: het label groot, de uitleg klein eronder */
.feiten--kop dt { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; line-height: 1.15; color: var(--inkt); gap: 0.5rem; }
.feiten--kop dt .icoon { width: 1.35rem; height: 1.35rem; }
.feiten--kop dd { font-family: var(--font-body); font-weight: 400; font-size: var(--step-0); line-height: 1.45; color: var(--inkt-zacht); margin-top: 0.35rem; }

/* ---------- Voet en mobiele balk ---------- */
.voet h2 { color: var(--blad-fel); }
.voet a { text-decoration-color: var(--blad-fel); }
.voet .merk--logo { background: #fff; padding: 0.6rem 1.1rem; border-radius: var(--r-paneel); }
.voet__slogan { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--blad-fel); margin: 0 0 1rem; letter-spacing: -0.01em; }
.actiebalk a:last-child { background: var(--blad-fel); color: var(--inkt); }