/*
 * Briekantiek: mobiele weergave.
 * - tot 1140 px: compacte kopbalk met menuknop, inhoud over de volle breedte, fotogalerij als raster
 *   (het desktopmenu heeft ~1130 px nodig; smaller liep de tweede menuregel over de tekst);
 * - tot 900 px (telefoon, tablet staand): ook de actiebalk onderaan.
 * Boven 1140 px verandert er niets.
 * Hoort bij mobile.js (menuknop, swipe in de fotoviewer) en de actiebalk in index.php.
 */

.bk-menu-toggle,
.bk-actions {
	display: none;
}

@media (max-width: 1140px) {

	html,
	body {
		background: #1c1c1c;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		font-size: 16px;
		line-height: 1.6;
	}

	/* Decoratie voor grote schermen: diashow, zijlijst */
	#header,
	#headernav-outer,
	#raam,
	.logo_side {
		display: none !important;
	}

	/* ---------- Kopbalk ---------- */

	#menu {
		position: sticky;
		top: 0;
		height: auto;
		width: auto;
		background: #000;
		background-image: none;
		border-bottom: 1px solid #3a3a3a;
		font-size: 17px;
	}

	#menu > center {
		display: block;
		text-align: left;
	}

	.menu_content {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		min-height: 60px;
		padding: 0 4px 0 16px;
		box-sizing: border-box;
	}

	#logo {
		flex: 1 1 auto;
		min-width: 0;
		padding: 12px 0;
		line-height: 0;
	}

	#logo img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 30px;
	}

	.bk-js .bk-menu-toggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 48px;
		height: 48px;
		margin: 6px 0;
		padding: 0 12px;
		background: none;
		border: 0;
		border-radius: 6px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.bk-menu-toggle span {
		display: block;
		height: 2px;
		background: #fff;
		border-radius: 2px;
		transition: transform .2s ease, opacity .2s ease;
	}

	.bk-menu-toggle:focus-visible {
		outline: 2px solid #d55403;
		outline-offset: 2px;
	}

	#menu.is-open .bk-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	#menu.is-open .bk-menu-toggle span:nth-child(2) { opacity: 0; }
	#menu.is-open .bk-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* ---------- Menu ---------- */

	ul.menu {
		display: block;
		flex: 0 0 calc(100% + 20px);
		margin: 0 -4px 0 -16px;
		padding: 0;
		/* de   tussen de items verbergen */
		font-size: 0;
		line-height: 0;
		text-align: left;
		border-top: 1px solid #2a2a2a;
	}

	/* Met JavaScript is het menu dicht tot de knop wordt gebruikt; zonder blijft het open. */
	.bk-js ul.menu {
		display: none;
		max-height: calc(100vh - 61px);
		max-height: calc(100dvh - 61px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.bk-js #menu.is-open ul.menu {
		display: block;
	}

	ul.menu > img {
		display: none;
	}

	ul.menu li {
		display: block;
		font-size: 18px;
		line-height: 1.3;
		border-bottom: 1px solid #2a2a2a;
	}

	ul.menu li.menu-item a,
	ul.menu li.current-menu-item a {
		display: block;
		margin: 0;
		padding: 15px 20px;
		white-space: normal !important;
		border-left: 4px solid transparent;
	}

	ul.menu li.current-menu-item a {
		color: #e8742a;
		border-left-color: #d55403;
		background: #141414;
	}

	ul.menu li a:active {
		background: #1f1f1f;
	}

	ul.menu li a:focus-visible {
		outline: 2px solid #d55403;
		outline-offset: -2px;
	}

	/* ---------- Inhoud ---------- */

	#main {
		position: static;
		float: none;
		max-width: 860px;
		margin: 0 auto;
		padding: 20px 16px 24px;
	}

	#content {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	#content img {
		max-width: 100%;
		height: auto;
	}

	#content iframe {
		max-width: 100%;
	}

	#content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	/* ---------- Fotogalerij: gelijke tegels, 2 of 3 per rij ---------- */

	#fotos {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid #333;
	}

	#fotos > div {
		float: none !important;
		padding: 0 !important;
	}

	#fotos a {
		display: block;
	}

	#fotos img.foto_preview {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		margin: 0;
		background: #2a2a2a;
	}
}

@media (max-width: 900px) {

	body {
		/* ruimte voor de actiebalk onderaan */
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}

	/* ---------- Actiebalk: bellen, route, e-mail ---------- */

	.bk-actions {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 150;
		padding-bottom: env(safe-area-inset-bottom);
		background: #000;
		border-top: 1px solid #3a3a3a;
	}

	.bk-actions a {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		min-height: 60px;
		color: #fff;
		font-size: 13px;
		line-height: 1.2;
		text-decoration: none;
	}

	.bk-actions a + a {
		border-left: 1px solid #2a2a2a;
	}

	.bk-actions svg {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: #e8742a;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.bk-actions a:active {
		background: #1f1f1f;
	}

	.bk-actions a:focus-visible {
		outline: 2px solid #d55403;
		outline-offset: -2px;
	}

	/* Fotoviewer (fancybox 1.3): sluitknop binnen beeld (standaard steekt hij rechts buiten het scherm) */
	#fancybox-close {
		top: 6px;
		right: 6px;
	}
}

@media (min-width: 560px) and (max-width: 1140px) {
	#fotos {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 900px) and (max-width: 1140px) {
	#fotos {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 1140px) and (prefers-reduced-motion: reduce) {
	.bk-menu-toggle span {
		transition: none;
	}
}