/* ═══ MEEHELPEN ═══
   Overgenomen uit de testsite. Leunt op de tokens (kleuren, maten) uit
   site.css van het thema Hervormd Westerhaar.

   Klussen en de formulieren. Zelfde kaarten en velden als de rest van
   de site: witte vlakken, de lijnkleur als rand, salie bij focus. */

.groep-uitleg { color: var(--sub); font-size: .95rem; margin: calc(var(--s2) * -1) 0 var(--s4); max-width: 60ch; }

.klus-plaatser {
	font-size: .8rem; font-weight: 600; color: var(--salie-tekst);
	margin-bottom: .3rem;
}
.klus-plekken { color: var(--amber-tekst); }
.klus-meedoen { color: var(--salie-tekst); }

/* Uitgelichte klus: altijd als laatste, in de donkere huiskleur met amber. */
.klus-uitgelicht {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
	margin-top: var(--s7); padding: var(--s6) var(--s6);
	background: var(--lei); color: #fff; text-decoration: none;
	border-radius: var(--r-xl);
	box-shadow: var(--e2);
	transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.klus-uitgelicht:hover { transform: translateY(-3px); box-shadow: var(--e3); }
.klus-uitgelicht-titel { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: .4rem; }
.klus-uitgelicht p { color: rgba(255,255,255,.82); max-width: 55ch; margin: 0; line-height: 1.7; }
.klus-uitgelicht-knop {
	flex: none; background: var(--amber); color: var(--tekst);
	font-size: .95rem; padding: .8rem 1.5rem; border-radius: var(--r-vol); font-weight: 600;
}
.klus-uitgelicht:hover .klus-uitgelicht-knop { background: #f2b95a; }
.klus-uitgelicht:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
@media (max-width: 720px) {
	.klus-uitgelicht { flex-direction: column; align-items: flex-start; padding: var(--s5); }
	.klus-uitgelicht-knop { font-size: .9rem; }
}
.klus-vol { background: var(--achter); box-shadow: none; }
.klus-vol .klus-plekken { color: var(--sub); }

.klus-waarom {
	max-width: var(--lees); margin-top: var(--s5);
	padding: var(--s4) var(--s5); border-left: 3px solid var(--amber);
	background: var(--amber-zacht); border-radius: 0 var(--r-m) var(--r-m) 0;
}
.klus-werkwijze { margin-top: var(--s7); max-width: var(--lees); }
.klus-werkwijze h2 { margin-bottom: var(--s4); }
.klus-stappen { list-style: none; counter-reset: stap; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.klus-stappen li {
	counter-increment: stap; position: relative; padding-left: 2.6rem; line-height: 1.6;
}
.klus-stappen li::before {
	content: counter(stap); position: absolute; left: 0; top: -.05rem;
	width: 1.8rem; height: 1.8rem; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--salie-zacht); color: var(--salie-tekst);
	font-size: .85rem; font-weight: 700;
}
.klus-aanmelden { margin-top: var(--s7); max-width: 40rem; }
.proza + .klus-aanmelden { margin-top: var(--s7); }
.opzet > div > .klus-aanmelden:first-child { margin-top: 0; }
.klus-aanmelden h2 { margin-bottom: var(--s4); }

.meehelpen-algemeen { max-width: 44rem; }
.meehelpen-algemeen .lead { margin: var(--s3) 0 var(--s5); }

/* Formulier */
.formulier { display: grid; gap: var(--s4); }
.formulier-rij-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 560px) { .formulier-rij-2 { grid-template-columns: 1fr; } }
.veld { display: grid; gap: .35rem; margin: 0; }
.veld label, .keuzes legend { font-size: .88rem; font-weight: 600; color: var(--tekst); }
.veld input, .veld textarea {
	font: inherit; font-size: 1rem; color: var(--tekst);
	width: 100%; padding: .7rem .9rem;
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-m);
	transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.veld textarea { resize: vertical; min-height: 6rem; }
.veld input:focus, .veld textarea:focus {
	outline: none; border-color: var(--salie); box-shadow: 0 0 0 3px var(--salie-zacht);
}
.veld-hulp { font-size: .85rem; color: var(--sub); margin-top: calc(var(--s2) * -1); }

.keuzes {
	border: 1px solid var(--lijn); border-radius: var(--r-l); background: var(--wit);
	padding: var(--s4) var(--s5); display: grid; gap: .45rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.keuzes legend { padding: 0 .4rem; margin-left: -.4rem; }
.keuzes label { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; cursor: pointer; }
.keuzes input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--salie-tekst); flex: none; }

.formulier-privacy { font-size: .85rem; color: var(--sub); max-width: 60ch; }
.formulier .knop { font-size: .95rem; padding: .8rem 1.6rem; }
.formulier .knop:focus-visible,
.keuzes input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* Het veld voor spamrobots: buiten beeld, niet weg (dan vullen ze het niet in). */
.formulier-val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Melding na versturen */
.melding {
	padding: var(--s4) var(--s5); border-radius: var(--r-m);
	margin-bottom: var(--s5); font-weight: 500; max-width: 44rem;
}
.melding-goed { background: var(--salie-zacht); border: 1px solid var(--salie); }
.melding-fout { background: var(--amber-zacht); border: 1px solid var(--amber); }