/*
 * Het inschrijfformulier.
 *
 * Bewust zuinig: alleen wat nodig is om het formulier bruikbaar te maken.
 * Kleuren en lettertype komen van het thema, zodat het blok er niet uitziet
 * als een plugin die op de pagina is geplakt.
 */

.kwm-blok {
	max-width: 34rem;
	margin: 2rem 0;
	padding: 1.6rem 1.8rem;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 10px;
}

.kwm-titel {
	margin: 0 0 .4rem;
	font-size: 1.35em;
	line-height: 1.25;
}

.kwm-uitleg {
	margin: 0 0 1.2rem;
	opacity: .8;
}

.kwm-veld {
	margin: 0 0 .9rem;
}

.kwm-veld label {
	display: block;
	margin-bottom: .3rem;
	font-size: .92em;
	font-weight: 600;
}

.kwm-optioneel {
	font-weight: 400;
	opacity: .6;
}

.kwm-veld input {
	box-sizing: border-box;
	width: 100%;
	padding: .7rem .8rem;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 6px;
	font: inherit;
	background: #fff;
	color: #1a1a1a;
}

.kwm-veld input:focus {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.kwm-knop {
	margin: 1.1rem 0 0;
}

.kwm-knop button {
	padding: .75rem 1.4rem;
	border: 0;
	border-radius: 6px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	background: #26221f;
	color: #fff;
}

.kwm-knop button[disabled] {
	opacity: .6;
	cursor: progress;
}

/*
 * De honeypot. Niet display:none en niet hidden: bots slaan velden over die
 * zo verstopt zijn. Uit beeld schuiven werkt beter, en een schermlezer slaat
 * het veld over door de aria-hidden op de wikkel.
 */
.kwm-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kwm-melding {
	margin: .9rem 0 0;
	font-size: .95em;
}

.kwm-melding:empty {
	margin: 0;
}

.kwm-melding.kwm-fout {
	color: #b32d2e;
}

/*
 * De belofte onder de knop. Klein en rustig: het moet leesbaar zijn voor wie
 * ernaar zoekt, zonder de aandacht van de knop weg te trekken.
 */
.kwm-gerust {
	margin: .85rem 0 0;
	font-size: .85em;
	line-height: 1.5;
	opacity: .7;
}

/*
 * Het archief. Een lijst en verder niets: de titels moeten het werk doen.
 */
.kwm-archief {
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.kwm-archief-rij {
	padding: .9rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.kwm-archief-titel {
	display: block;
	font-size: 1.08em;
	font-weight: 600;
	text-decoration: none;
}

.kwm-archief-titel:hover {
	text-decoration: underline;
}

.kwm-archief-datum {
	display: block;
	margin-top: .15rem;
	font-size: .85em;
	opacity: .6;
}

.kwm-archief-intro {
	display: block;
	margin-top: .3rem;
	font-size: .92em;
	opacity: .8;
}