/*
 * Kunstrondje — aanvullingen op de originele stylesheet.
 * 1. Kleine correcties voor moderne browsers en WordPress-markup.
 * 2. Responsive weergave voor tablets en telefoons (onder 860 px).
 */

/* ---------- 1. Algemeen ---------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.krt-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: #fff;
	padding: 8px 12px;
}
.krt-skip:focus {
	left: 8px;
	top: 8px;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* Koppen zijn nu echte koppen (h1) maar zien eruit als vroeger. */
h1.kop1,
h1.kop1b,
h2.kop1b {
	margin: 0;
	font-weight: normal;
	font-size: 28px;
	line-height: 28px;
}
h1.kop1b,
h2.kop1b {
	font-size: 18px;
	font-weight: bold;
	line-height: 24px;
}

#menu a {
	display: block;
}

h1.scrollbox_header {
	margin: 0;
	font-size: 12px;
	line-height: normal;
}

.krt-nowrap {
	white-space: nowrap;
}

h2.krt-sectiekop {
	margin: 0;
	line-height: normal;
}
h2.krt-sectiekop .dot_monument,
h2.krt-sectiekop .dot_horeca {
	float: none;
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
}

h1.logo,
h1.krt-logo-kop {
	margin: 0;
	font-size: inherit;
}
.logo img,
.infoblok_licontent .fotoborder {
	max-width: 100%;
	height: auto;
}

#fotoheadercontainer img {
	display: block;
	width: 520px;
	height: 340px;
	object-fit: cover;
}

.krt-w225 {
	width: 225px;
	height: auto;
}
.krt-w290 {
	width: 290px;
	max-width: 100%;
	height: auto;
}
.krt-rechts {
	text-align: right;
}
.krt-plattegrond {
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}
.krd_plattegrond {
	max-width: 100%;
	height: auto;
}
.krt-verlopen {
	color: #818181;
}
.lijst_txt .page-numbers {
	padding: 0 3px;
}

.krt-w200 {
	width: 200px;
	height: auto;
}

.fotoborder {
	max-width: 100%;
	height: auto;
}

#recontent .foto1 img,
.infoblok_licontent img {
	max-width: 100%;
	height: auto;
}

/* Voet: het oude tabelraster, nu met CSS grid. */
.krt-footer-grid {
	display: grid;
	grid-template-columns: 22% 20% 24% 12% 12%;
	text-align: left;
	justify-content: space-between;
}
.krt-footer-bottom {
	grid-template-columns: 22% 56% 12%;
}
.krt-footer-contact {
	line-height: normal;
}

/* Facebook-blok (laden na klik). */
.krt-facebook {
	border: 1px dashed #BFDFED;
	padding: 12px;
	margin-top: 0;
}
.krt-facebook .plattetekst {
	margin-top: 0;
}
.krt-facebook-load {
	font: bold 12px "Lucida Grande", Lucida, Verdana, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	background: #db1713;
	border: 0;
	padding: 6px 12px;
	cursor: pointer;
}
.krt-facebook-load:hover {
	background: #BFDFED;
	color: #db1713;
}
.krt-facebook-frame {
	display: block;
	width: 100%;
	max-width: 500px;
	height: 900px;
	border: 0;
	overflow: hidden;
}

/* Zoekformulier. */
.krt-searchform input[type="search"] {
	width: 99%;
	box-sizing: border-box;
	font-size: 14px;
	padding: 4px;
}
.krt-searchform .submit {
	font-size: 12px;
}

/* ---------- 2. Tablet en telefoon ---------- */

@media (max-width: 860px) {

	body {
		background: #fff none;
	}

	#wrapper,
	#header,
	#menu,
	#content,
	#footer {
		width: auto;
		max-width: 835px;
	}

	#wrapper {
		padding: 0 12px;
	}

	/* Kop: logo gecentreerd, headerfoto over de volle breedte. */
	#header {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#logo_blok {
		float: none;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#logo {
		height: auto;
		width: auto;
	}
	#logo img {
		width: 220px;
		height: auto;
	}
	#vlaggen {
		position: static;
		margin: 6px auto 12px;
	}
	#fotoheadercontainer {
		float: none;
		width: 100%;
		height: auto;
		margin: 0;
	}
	#fotoheadercontainer img {
		width: 100%;
		height: auto;
		aspect-ratio: 520 / 340;
	}

	/* Menu: knoppen verdelen zich over de breedte. */
	#menu {
		height: auto;
		display: flex;
		flex-wrap: wrap;
		left: 0;
		margin-top: 12px;
		gap: 1px;
		background: #fff;
	}
	#menu a {
		flex: 1 1 30%;
	}
	#menu a.krt-menu-zoek {
		flex: 0 0 53px;
	}
	#menu .but_on,
	#menu .but_off,
	#menu .but_on:hover,
	#menu .but_off:hover {
		width: auto;
		height: auto;
		float: none;
		padding: 3px 0 5px;
	}
	#menu .but_zoek_on,
	#menu .but_zoek_off {
		float: none;
		height: 100%;
		min-height: 25px;
	}

	/* Twee kolommen worden één kolom. */
	#licontent,
	#recontent {
		float: none;
		width: auto;
	}
	#recontent {
		margin-top: 18px;
	}
	.infoblok_licontent,
	.infoblok_licontent_voorpagina {
		float: none;
		width: auto;
		margin: 9px 0 0;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
	}
	.infoblok_licontent_voorpagina > div,
	.infoblok_licontent > div {
		max-width: 100%;
	}

	/* Homepage: eerst de welkomsttekst, dan de tegels in twee kolommen. */
	.krt-tekst-eerst #licontent {
		display: flex;
		flex-direction: column;
	}
	.krt-tekst-eerst #licontent .boxmarges {
		order: -1;
	}
	.krt-tekst-eerst .infoblok_licontent {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		padding: 0 8px 8px;
	}
	.infoblok_licontent_voorpagina {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		padding: 0 8px 8px;
	}
	.infoblok_licontent_voorpagina .foto1,
	.infoblok_licontent_voorpagina .plaatjeagenda_voorpagina {
		margin: 0;
	}
	.blok_plaatjeagenda_voorpagina {
		width: auto;
		top: 0;
	}
	.infoblok_licontent_voorpagina img,
	.krt-w200 {
		width: 100%;
		display: block;
		box-sizing: border-box;
	}
	.infoblok_licontent img {
		width: 100%;
	}

	.naw_container {
		width: 100%;
		box-sizing: border-box;
	}
	.naw_li,
	.naw_re {
		float: none;
		width: auto;
	}
	.naw_re {
		margin-top: 12px;
	}

	.plaatjeagenda img {
		float: none;
		display: block;
		position: static;
		margin: 10px 0;
		max-width: 100%;
		height: auto;
	}

	/* Lijsten: lange namen mogen afbreken. */
	table.plattetekst td {
		white-space: normal;
	}

	.plattegrond img,
	.krd_plattegrond {
		width: 100%;
		height: auto;
	}

	/* Voet stapelt. */
	.krt-footer-grid,
	.krt-footer-bottom {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.krt-footer-logo,
	.krt-footer-copy {
		grid-column: 1 / -1;
	}
	#footer_text {
		padding: 15px 10px;
		font-size: 12px;
		line-height: 20px;
	}
}

@media (max-width: 480px) {
	#menu a {
		flex: 1 1 45%;
	}
	#logo img {
		width: 190px;
	}
	.krt-footer-bottom {
		grid-template-columns: 1fr;
	}
	.kop1,
	h1.kop1 {
		font-size: 24px;
		line-height: 26px;
	}
}

.krt-facebook a {
	font-size: 12px;
}