:root {
	--course-site-header-logo-height: 72px;
	--course-site-footer-logo-background: linear-gradient(135deg, #ffffff 0%, #eaf3fa 100%);
	--course-site-footer-logo-border: #d6b45e;
	--course-site-footer-logo-shadow: 0 12px 30px rgba(7, 33, 50, .24), inset 0 1px 0 #ffffff;
	--course-site-footer-logo-accent: #155b8f;
}

.brand .course-site-logo,
.brand img.custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/* The left edge stays fixed; increasing the size grows the PNG to the right. */
.site-header .brand {
	display: inline-flex;
	max-width: min(520px, 44vw);
	min-height: 48px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-start;
	overflow: visible;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transform-origin: left center;
}

.site-header .brand img,
.site-header .brand .course-site-logo,
.site-header .brand img.custom-logo {
	display: block;
	width: auto;
	height: var(--course-site-header-logo-height);
	max-width: 100%;
	max-height: var(--course-site-header-logo-height);
	object-fit: contain;
	object-position: left center;
}

/* Premium contrast card for the transparent footer PNG. */
.site-footer .brand {
	position: relative;
	display: inline-flex;
	max-width: min(390px, 82vw);
	min-height: 62px;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	overflow: hidden;
	padding: 14px 20px 17px;
	border: 1px solid var(--course-site-footer-logo-border);
	border-radius: 10px;
	background: var(--course-site-footer-logo-background);
	box-shadow: var(--course-site-footer-logo-shadow);
}

.site-footer .brand::after {
	position: absolute;
	right: 18px;
	bottom: 8px;
	left: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--course-site-footer-logo-accent);
	content: "";
	opacity: .95;
}

.site-footer .brand img,
.site-footer .brand .course-site-logo,
.site-footer .brand img.custom-logo {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 64px;
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 1120px) {
	.site-header .brand { max-width: min(360px, 42vw); }
	.site-header .brand img,
	.site-header .brand .course-site-logo,
	.site-header .brand img.custom-logo {
		height: min(var(--course-site-header-logo-height), 64px);
		max-height: 64px;
	}
}

@media (max-width: 720px) {
	.site-header .brand { max-width: 62vw; min-height: 42px; }
	.site-header .brand img,
	.site-header .brand .course-site-logo,
	.site-header .brand img.custom-logo {
		height: min(var(--course-site-header-logo-height), 50px);
		max-height: 50px;
	}
	.site-footer .brand { max-width: min(360px, 88vw); padding: 12px 17px 16px; }
	.site-footer .brand img,
	.site-footer .brand .course-site-logo,
	.site-footer .brand img.custom-logo { max-height: 56px; }
}