/* Drakenjacht Pagina's — front-end (mobile-first, responsive) */

:root {
	--djp-accent: #2f5233;
	--djp-accent-dark: #24401f;
	--djp-text: #1f2733;
	--djp-muted: #5b6472;
	--djp-border: #d3d8e0;
	--djp-bg: #ffffff;
	--djp-radius: 10px;
	/* Maximale breedte waartoe de banner meeschaalt; daarna blijft hij gelijk. */
	--djp-banner-max-width: 1600px;
	/* Maximale hoogte van de banner: 30% van de schermhoogte. */
	--djp-banner-max-height: 30vh;
}

body.djp-body {
	margin: 0;
	background: var(--djp-bg);
	color: var(--djp-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

.djp-body *,
.djp-body *::before,
.djp-body *::after {
	box-sizing: border-box;
}

.djp-body img {
	max-width: 100%;
	height: auto;
}

/* Container */
.djp-container {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Header — logo */
.djp-header--logo {
	text-align: center;
	padding: 32px 20px 8px;
}

.djp-header--logo .djp-header-img {
	display: inline-block;
	width: auto;
	max-width: 200px;
	max-height: 140px;
}

/* Header — banner */
.djp-header--banner {
	width: 100%;
	/* Op grote schermen de banner centreren zodra de maximale breedte is bereikt. */
	text-align: center;
	background: var(--djp-bg);
}

.djp-header--banner .djp-header-img {
	display: block;
	/* Breedte en hoogte volgen de verhouding (geen vervorming, geen bijsnijden),
	   begrensd door zowel een maximale breedte als een maximale hoogte. */
	width: auto;
	height: auto;
	max-width: min( 100%, var(--djp-banner-max-width, 1600px) );
	max-height: var(--djp-banner-max-height, 30vh);
	/* Gecentreerd zodra een van beide maxima is bereikt. */
	margin: 0 auto;
}

/* Main */
.djp-main {
	padding-top: 24px;
	padding-bottom: 48px;
}

.djp-block-tekst {
	margin: 0 0 24px;
}

.djp-block-tekst :first-child { margin-top: 0; }
.djp-block-tekst :last-child { margin-bottom: 0; }

/* Formulierblok */
.djp-form-block {
	margin: 8px 0 24px;
}

.djp-form-title {
	font-size: 1.5rem;
	line-height: 1.25;
	margin: 0 0 8px;
}

.djp-form-intro {
	color: var(--djp-muted);
	margin: 0 0 20px;
}

.djp-field {
	margin: 0 0 16px;
}

.djp-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.djp-field input {
	display: block;
	width: 100%;
	padding: 12px 14px;
	font-size: 16px; /* voorkomt inzoomen op iOS */
	line-height: 1.4;
	color: var(--djp-text);
	background: #fff;
	border: 1px solid var(--djp-border);
	border-radius: var(--djp-radius);
}

.djp-field input:focus {
	outline: none;
	border-color: var(--djp-accent);
	box-shadow: 0 0 0 3px rgba( 47, 82, 51, 0.15 );
}

/* Honeypot — visueel verborgen, wel in de DOM */
.djp-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.djp-submit {
	margin: 20px 0 0;
}

.djp-submit button {
	display: block;
	width: 100%;
	min-height: 50px;
	padding: 14px 22px;
	font-size: 17px;
	font-weight: 600;
	color: #fff;
	background: var(--djp-accent);
	border: none;
	border-radius: var(--djp-radius);
	cursor: pointer;
	transition: background 0.15s ease;
}

.djp-submit button:hover,
.djp-submit button:focus {
	background: var(--djp-accent-dark);
}

/* Meldingen */
.djp-success,
.djp-error {
	border-radius: var(--djp-radius);
	padding: 16px 18px;
}

.djp-success {
	background: #edf7ed;
	border: 1px solid #c6e6c6;
	color: #1e4620;
	font-size: 1.05rem;
}

.djp-error {
	background: #fdecea;
	border: 1px solid #f5c6c2;
	color: #7a271f;
	margin-bottom: 16px;
}

/* Grotere schermen */
@media ( min-width: 600px ) {
	body.djp-body { font-size: 18px; }

	.djp-header--logo { padding-top: 48px; }
	.djp-header--logo .djp-header-img { max-width: 240px; max-height: 160px; }

	.djp-form-title { font-size: 1.75rem; }

	.djp-submit button {
		width: auto;
		min-width: 220px;
	}
}