/*
 * Brand lockup.
 *
 * The WordPress custom-logo file already contains both the botanical icon and
 * the EssenzNatur wordmark. The same complete asset is used in the header and
 * footer; only its colour treatment changes with the background.
 */

.brand--mark,
.footer-brand-logo-link {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:0;
	text-decoration:none;
}

.brand-lockup-image {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
}

.brand-logo {
	display:block;
	width:auto;
	height:52px;
	max-width:none;
}

.brand-fallback {
	font-family:var(--display);
	font-size:var(--fs-lede);
	font-weight:var(--fw-heading);
	line-height:1;
	letter-spacing:var(--ls-display);
	color:var(--deep);
}

.en-site-header .brand {
	min-height:44px;
}

.brand--mark:focus-visible,
.footer-brand-logo-link:focus-visible {
	outline:2px solid var(--focus);
	outline-offset:4px;
}

/* The dark footer uses a restrained white reverse of the same source asset. */
footer.site .footer-brand-logo-link {
	width:max-content;
	max-width:100%;
}

footer.site .footer-brand .brand-logo {
	height:72px;
	filter:brightness(0) invert(1);
}

footer.site .footer-brand .brand-fallback {
	color:var(--white);
}

@media (max-width: 1024px) {
	.en-site-header .brand-logo { height:48px; }
}

@media (max-width: 767px) {
	.en-site-header .brand-logo { height:44px; }
	footer.site .footer-brand .brand-logo { height:64px; }
}

@media (max-width: 420px) {
	.en-site-header .brand-logo { height:42px; }
}