/**
 * True Travel — site logo (nav, mobile menu, footer)
 */

.true-nav__brand {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.true-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.true-logo__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	border-radius: 14px;
	transition: filter 0.3s ease, transform 0.2s ease;
}

.true-logo__link:hover,
.true-logo__link:focus {
	text-decoration: none;
	transform: scale(1.02);
}

.true-logo__img {
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Navbar */
.true-logo--nav.true-logo__link {
	filter: drop-shadow(0 2px 10px rgba(30, 77, 58, 0.12));
}

.true-logo--nav.true-logo__link:hover,
.true-logo--nav.true-logo__link:focus {
	filter: drop-shadow(0 3px 14px rgba(30, 77, 58, 0.18));
}

.true-logo--nav .true-logo__img {
	width: clamp(148px, 16vw, 190px);
	max-height: 62px;
	object-fit: contain;
}

@media (max-width: 768px) {
	.true-logo--nav .true-logo__img {
		width: auto;
		height: 52px;
		max-height: 52px;
	}
}

/* Mobile drawer */
.true-mobile-menu__header .true-logo--mobile .true-logo__img {
	width: clamp(100px, 34vw, 128px);
}

.true-mobile-menu__header .true-logo {
	flex: 1;
	min-width: 0;
}

/* Footer — dark background */
.true-footer__brand .true-logo {
	margin-bottom: 0.85rem;
}

.true-logo--footer.true-logo__link {
	padding: 0;
	background: none;
	border-radius: 0;
	filter: none;
	transform: none;
}

.true-logo--footer.true-logo__link:hover,
.true-logo--footer.true-logo__link:focus {
	transform: none;
}

.true-logo--footer .true-logo__img {
	width: auto;
	height: 56px;
	max-width: min(100%, 160px);
	object-fit: contain;
	object-position: right center;
	mix-blend-mode: screen;
}

html[dir="ltr"] .true-logo--footer .true-logo__img {
	object-position: left center;
}

@media (max-width: 767px) {
	.true-footer__brand .true-logo {
		justify-content: center;
		width: 100%;
	}

	.true-logo--footer .true-logo__img {
		object-position: center;
		margin-inline: auto;
	}
}

@media (min-width: 768px) {
	.true-logo--footer .true-logo__img {
		height: 62px;
		max-width: 170px;
	}
}