/*
 * Gedeelde bouwstenen voor de pagina's die in code zijn opgebouwd of opgefrist:
 * paginakop (zelfde vorm als de titelbalk), knoppen en statuslabels.
 * Geladen op elke pagina (klein bestand); zie inc/paginas.php.
 */

/* ---------- Paginakop ---------- */
.lm-paginakop {
	padding: 56px 24px 60px;
	color: #fff;
	background:
		radial-gradient(1100px 420px at 80% -40%, rgba(46, 193, 251, 0.14), rgba(46, 193, 251, 0) 60%),
		#135a83;
}

.lm-paginakop__binnen {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 10px;
}

body .lm-paginakop .lm-paginakop__titel {
	max-width: 820px;
	margin: 0;
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(30px, 1.6vw + 18px, 42px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: #fff;
	text-wrap: balance;
}

.lm-paginakop__intro {
	max-width: 720px;
	margin: 12px 0 0;
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

@media (min-width: 1200px) {
	.lm-paginakop {
		background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 220' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%232EC1FB' stroke-opacity='.4' stroke-width='1.5'%3E%3Cpath d='M380 60H250l-38 38h-52'/%3E%3Cpath d='M380 120H190'/%3E%3Cpath d='M380 176h-80l-38-38h-26'/%3E%3Cpath d='M330 24h-40l-20 20'/%3E%3C/g%3E%3Cg fill='%23135A83' stroke='%232EC1FB' stroke-opacity='.75' stroke-width='1.5'%3E%3Ccircle cx='160' cy='98' r='4.5'/%3E%3Ccircle cx='190' cy='120' r='4.5'/%3E%3Ccircle cx='236' cy='138' r='4.5'/%3E%3Ccircle cx='330' cy='24' r='4.5'/%3E%3Ccircle cx='270' cy='44' r='4.5'/%3E%3C/g%3E%3C/svg%3E") right center / 380px 220px no-repeat,
			radial-gradient(1100px 420px at 80% -40%, rgba(46, 193, 251, 0.14), rgba(46, 193, 251, 0) 60%),
			#135a83;
	}
}

@media (max-width: 767px) {
	.lm-paginakop {
		padding: 36px 16px 40px;
	}

	body .lm-paginakop .lm-paginakop__titel {
		font-size: 28px;
	}

	.lm-paginakop__intro {
		font-size: 16px;
	}
}

/* ---------- Knoppen ---------- */
body :is(a, button).lm-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 22px;
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

body :is(a, button).lm-knop--geel {
	color: #0b3f5e;
	background: #fdc14d;
	border: 0;
	box-shadow: 0 8px 22px rgba(253, 193, 77, 0.3);
}

body :is(a, button).lm-knop--geel:hover {
	color: #0b3f5e;
	background: #ffcb5e;
	box-shadow: 0 12px 28px rgba(253, 193, 77, 0.4);
	transform: translateY(-1px);
}

body :is(a, button).lm-knop--rand {
	color: #135a83;
	background: #fff;
	border: 1.5px solid #b5c8d6;
}

body :is(a, button).lm-knop--rand:hover {
	color: #003465;
	border-color: #135a83;
}

body :is(a, button).lm-knop:focus-visible {
	outline: 3px solid #135a83;
	outline-offset: 3px;
}

.lm-knop__pijl {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lm-knop:hover .lm-knop__pijl {
	transform: translateX(3px);
}

/* ---------- Statuslabels ---------- */
.lm-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	border-radius: 999px;
}

.lm-status::before {
	content: "";
	width: 7px;
	height: 7px;
	background: currentColor;
	border-radius: 50%;
}

.lm-status--in-progress {
	color: #0b5a85;
	background: #e3f4fc;
}

.lm-status--not-started {
	color: #5a6b78;
	background: #edf1f4;
}

.lm-status--completed {
	color: #1e6b45;
	background: #e3f5ea;
}

@media (prefers-reduced-motion: reduce) {
	body :is(a, button).lm-knop,
	.lm-knop__pijl {
		transition: none;
	}
}