/* Opmaak van de front-end (index.php). Kleuren gelijk aan de oude style.php, die alleen lib/auth.php nog gebruikt. */
:root {
	--zwart: #000000;
	--wit: #FFFFFF;
	--grijs: #E3E3E3;
	--navgrijs: #6F6F6E;      /* iets donkerder dan #90908F voor leesbaarheid */
	--bruin: #C28956;
	--bruin-donker: #A1632C;
	--creme: #F6F1EB;
	--credits: #996633;
	--breedte: 1140px;
	--ruimte: clamp(1rem, 3vw, 2.25rem);
	--letter: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
	margin: 0;
	background: var(--zwart);
	font-family: var(--letter);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--zwart);
}

.pagina {
	max-width: var(--breedte);
	margin: 0 auto;
	background: var(--creme);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Kop: logo links, navigatie rechts */
.kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.5rem;
	padding: .75rem var(--ruimte);
	background: var(--wit);
}
.logo { display: block; line-height: 0; }
.logo img { width: 164px; height: auto; }

.navigatie {
	flex: 1;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: .25rem;
}
.navigatie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem 1.5rem; }
.navigatie a { color: var(--navgrijs); text-decoration: none; }
.navigatie a:hover, .navigatie a:focus { color: var(--bruin-donker); text-decoration: underline; }
.hoofdnav { font-size: 1.0625rem; }
.topnav { font-size: .875rem; }

.menu-knop, .menu-label { display: none; }

/* Beeld */
.beeld { line-height: 0; background: var(--grijs); }
.beeld img {
	width: 100%;
	height: clamp(110px, 22vw, 260px);
	object-fit: cover;
}

/* Midden: submenu links, inhoud rechts */
.midden { flex: 1; display: flex; }

.zijkant {
	flex: 0 0 15rem;
	background: var(--bruin);
	padding: 1.5rem 1.25rem;
}
.zijkant h2 { font-size: 1rem; font-weight: normal; margin: 0 0 .75rem; color: var(--zwart); }
.zijkant ul { list-style: none; margin: 0; padding: 0; }
.zijkant ul ul { padding-left: 1rem; margin-top: .25rem; }
.zijkant li { margin: .35rem 0; }
.zijkant a { color: var(--wit); text-decoration: none; display: inline-block; padding: .1rem 0; }
.zijkant a:hover, .zijkant a:focus { text-decoration: underline; }
.zijkant .actief > a { font-weight: bold; }
.zijkant .actief > a::before { content: "\25B8\00A0"; }

.inhoud {
	flex: 1;
	min-width: 0;
	padding: var(--ruimte);
	background-color: var(--creme);
	background-repeat: no-repeat;
	background-position: right bottom;
}

/* Wat de modules (content.php, sitemap.php) aanleveren */
.content, .content td { font-size: 1.0625rem; line-height: 1.6; }
.content table { width: 100%; max-width: 100%; border-collapse: collapse; }
.content td { padding: 0; }
.content .contenttitle { font-size: 1.375rem; font-weight: bold; color: var(--bruin-donker); padding-top: .5rem; }
.contenttitle img { display: none; }
.content a { color: var(--bruin-donker); }
.content img { max-width: 100%; height: auto; }
.content img.image { float: left; margin: .25rem 1rem .5rem 0; border: 1px solid var(--zwart); max-width: 40%; }
#sitemap a { text-decoration: none; }
#sitemap .sitemap_main { color: var(--zwart); font-weight: bold; }
#sitemap .sitemap_sub { color: var(--bruin-donker); }
.paginas a { padding: 0 .25rem; }
.pageskippercurrent { font-weight: bold; }

/* Voet */
.voet {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding: 1rem var(--ruimte);
	background: var(--bruin);
	border-top: 1px solid rgba(0,0,0,.15);
	font-size: .875rem;
}
.voet .credits, .voet .credits a { color: #5E3A17; text-decoration: none; }
.voet .credits a:hover { text-decoration: underline; }

/* Tablet en telefoon */
@media (max-width: 52rem) {
	.midden { flex-direction: column; }
	.zijkant { flex: none; padding: 1rem var(--ruimte); }
	.zijkant ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
	.zijkant ul ul { display: block; flex-basis: 100%; padding-left: 1rem; }
	.zijkant li { margin: 0; }
}

/* Telefoon: menu achter een knop (zonder JavaScript) */
@media (max-width: 40rem) {
	.kop { justify-content: space-between; }
	.menu-label {
		display: inline-block;
		cursor: pointer;
		padding: .5rem .85rem;
		border: 1px solid var(--grijs);
		border-radius: 4px;
		color: var(--navgrijs);
		user-select: none;
	}
	.navigatie { display: none; flex: 0 0 100%; align-items: stretch; flex-direction: column; }
	.menu-knop:checked ~ .navigatie { display: flex; }
	.menu-knop:checked + .menu-label { background: var(--grijs); }
	.navigatie ul { flex-direction: column; gap: 0; }
	.navigatie li a { display: block; padding: .7rem 0; border-top: 1px solid var(--grijs); }
	.hoofdnav { font-size: 1.125rem; }
	.topnav { font-size: 1rem; }
	.zijkant ul { display: block; }
	.zijkant li { margin: .2rem 0; }
	.zijkant a { padding: .35rem 0; }
	.content img.image { float: none; display: block; max-width: 100%; margin: 0 0 1rem; }
}