/* HZVF PWA: app-navigatie, offline-melding en installatiehint */

/* Navigatiebalk: alleen in de geïnstalleerde app. De media query werkt al vóór het script; de klasse is voor iOS. */
.hzvf-nav {
	display: none;
}
@media (display-mode: standalone) {
	.hzvf-nav { display: flex; }
	body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}
.hzvf-standalone .hzvf-nav {
	display: flex;
}
.hzvf-standalone body {
	padding-bottom: calc(60px + env(safe-area-inset-bottom));
}
.hzvf-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	padding-bottom: env(safe-area-inset-bottom);
	background: #0C147F;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, .2);
}
.hzvf-nav a {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: 60px;
	color: #fff;
	font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-decoration: none;
	opacity: .75;
	-webkit-tap-highlight-color: transparent;
}
.hzvf-nav a[aria-current="page"] {
	opacity: 1;
	color: #90CEFF;
	box-shadow: inset 0 3px 0 #90CEFF;
}
/* Gekantelde telefoon (om de hele tabel te zien): lagere balk, pictogram naast de tekst */
@media (max-height: 500px) and (orientation: landscape) {
	.hzvf-nav a { flex-direction: row; gap: 6px; height: 44px; }
	@media (display-mode: standalone) {
		body { padding-bottom: calc(44px + env(safe-area-inset-bottom)); }
	}
	.hzvf-standalone body { padding-bottom: calc(44px + env(safe-area-inset-bottom)); }
}

/* Offline-melding bovenaan de pagina */
.hzvf-offline {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: #fff4d6;
	border-bottom: 1px solid #e8c35a;
	color: #4a3800;
	font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.hzvf-offline span { flex: 1; }
.hzvf-offline button {
	flex: none;
	padding: 6px 12px;
	border: 1px solid #4a3800;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
}

/* Installatiehint onderin */
.hzvf-install {
	position: fixed;
	left: 8px;
	right: 8px;
	bottom: calc(8px + env(safe-area-inset-bottom));
	z-index: 9991;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 560px;
	margin: 0 auto;
	padding: 12px 8px 12px 16px;
	border-radius: 10px;
	background: #0C147F;
	color: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
	font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.hzvf-install p {
	flex: 1;
	margin: 0;
	color: inherit;
}
.hzvf-install svg {
	vertical-align: -3px;
}
.hzvf-install button {
	flex: none;
	border: 0;
	font: inherit;
	cursor: pointer;
}
.hzvf-install .hzvf-install-go {
	padding: 8px 14px;
	border-radius: 6px;
	background: #fff;
	color: #0C147F;
	font-weight: 700;
}
.hzvf-install .hzvf-install-close {
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	color: #fff;
	font-size: 24px;
	line-height: 1;
}