/* JOF Logo Override v1.1. Veilig via plugin, zonder themebestanden te vervangen. */

/* Header: logo iets krachtiger en menu dichterbij, zodat er minder dode ruimte ontstaat. */
.otten-masthead__main {
	justify-content: flex-start !important;
}

.otten-masthead__brand {
	gap: 0 !important;
	flex: 0 0 auto !important;
	width: min(430px, 38vw) !important;
	max-width: 430px !important;
	min-height: 92px !important;
	background-image: url("logo-reverse-cropped.png") !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	background-size: contain !important;
}

.otten-masthead__brand::before {
	display: none !important;
}

.otten-masthead__brand .otten-masthead__title,
.otten-masthead__brand .otten-masthead__title-suffix {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap !important;
}

.otten-nav {
	flex: 0 0 auto !important;
	justify-content: flex-start !important;
	margin-left: clamp(36px, 5vw, 72px) !important;
}

/* Footer: logo iets hoger laten starten, zodat hij beter uitlijnt met Contact / Navigatie / Colofon. */
.otten-footer__brand-block {
	margin-top: -10px !important;
}

.otten-footer__brand-link {
	display: block !important;
	width: min(360px, 100%) !important;
	min-height: 132px !important;
	background-image: url("logo-reverse-cropped.png") !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	background-size: contain !important;
}

.otten-footer__brand-link:hover,
.otten-footer__brand-link:focus {
	opacity: 0.92;
}

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

.otten-footer__tagline {
	display: none !important;
}

@media (max-width: 1100px) {
	.otten-masthead__brand {
		width: min(390px, 36vw) !important;
		min-height: 82px !important;
	}

	.otten-nav {
		margin-left: clamp(26px, 4vw, 48px) !important;
	}
}

@media (max-width: 900px) {
	.otten-masthead__main {
		gap: 18px !important;
	}

	.otten-masthead__brand {
		width: min(360px, 48vw) !important;
		min-height: 76px !important;
	}

	.otten-nav {
		margin-left: 20px !important;
	}

	.otten-footer__brand-link {
		width: min(320px, 100%) !important;
		min-height: 116px !important;
	}

	.otten-footer__brand-block {
		margin-top: -6px !important;
	}
}

@media (max-width: 700px) {
	.otten-masthead__main {
		flex-wrap: wrap !important;
	}

	.otten-masthead__brand {
		width: min(100%, 460px) !important;
		max-width: 100% !important;
		min-height: 70px !important;
	}

	.otten-nav {
		width: 100% !important;
		margin-left: 0 !important;
	}
}

@media (max-width: 480px) {
	.otten-masthead__brand {
		min-height: 58px !important;
	}

	.otten-footer__brand-link {
		width: min(280px, 100%) !important;
		min-height: 102px !important;
	}
}


/* v1.3 mobiele header: compact logo links, menu-knop rechts naast het logo. */
@media (max-width: 700px) {
	.otten-masthead__main {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 14px !important;
		padding-top: 14px !important;
		padding-bottom: 14px !important;
	}

	.otten-masthead__brand {
		flex: 0 1 auto !important;
		width: min(58vw, 300px) !important;
		max-width: 300px !important;
		min-height: 62px !important;
		background-position: left center !important;
		background-size: contain !important;
	}

	.otten-nav {
		flex: 0 0 auto !important;
		width: auto !important;
		margin-left: 0 !important;
		justify-content: flex-end !important;
	}

	.otten-nav__toggle {
		margin: 0 !important;
		white-space: nowrap !important;
		padding: 10px 13px !important;
	}

	.otten-nav__menu-wrap {
		left: var(--otten-shell-pad) !important;
		right: var(--otten-shell-pad) !important;
		width: auto !important;
	}
}

@media (max-width: 480px) {
	.otten-masthead__main {
		gap: 10px !important;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}

	.otten-masthead__brand {
		width: min(54vw, 245px) !important;
		max-width: 245px !important;
		min-height: 54px !important;
	}

	.otten-nav__toggle {
		font-size: 11px !important;
		letter-spacing: 0.12em !important;
		padding: 9px 11px !important;
	}

	.otten-nav__toggle-label {
		display: inline-block !important;
	}
}

@media (max-width: 380px) {
	.otten-masthead__brand {
		width: min(52vw, 215px) !important;
		max-width: 215px !important;
		min-height: 48px !important;
	}

	.otten-nav__toggle {
		padding: 8px 10px !important;
	}
}