/* Header + footer, matched to the live site's measured nav/footer colors. */

.lm-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var( --lm-color-nav-bg );
	border-bottom: 1px solid var( --lm-color-border );
	box-shadow: 0 7px 28px rgba( 24, 32, 43, 0.063 );
}

.lm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 70px;
}

.lm-logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.lm-logo__img {
	display: block;
	width: clamp( 160px, 30vw, 240px );
	height: auto;
}

.lm-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.lm-nav__list {
	display: flex;
	align-items: center;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lm-nav__list a {
	font-weight: 800;
	font-size: 0.8125rem;
	color: #485562;
}

.lm-nav__list a:hover {
	color: var( --lm-color-primary );
}

.lm-header__cta.lm-header__cta {
	white-space: nowrap;
	min-height: 44px;
	padding: 10px 15px;
	font-size: 0.8125rem;
}

.lm-main {
	min-height: 50vh;
}

.lm-footer {
	background-color: var( --lm-color-dark );
	color: var( --lm-color-dark-muted );
	padding: var( --lm-space-6 ) 0 var( --lm-space-3 );
	margin-top: var( --lm-space-6 );
}

.lm-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var( --lm-space-5 );
	margin-bottom: var( --lm-space-5 );
}

.lm-footer .lm-logo--footer {
	color: var( --lm-color-white );
	display: inline-block;
	margin-bottom: var( --lm-space-2 );
}

.lm-footer__tagline {
	color: var( --lm-color-dark-muted );
	max-width: 32ch;
}

.lm-footer__heading {
	color: var( --lm-color-white );
	font-size: 1rem;
	margin-bottom: var( --lm-space-2 );
}

.lm-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lm-footer__list li {
	margin-bottom: var( --lm-space-1 );
}

.lm-footer__list a {
	color: var( --lm-color-dark-muted );
}

.lm-footer__list a:hover {
	color: var( --lm-color-white );
}

.lm-footer__bottom {
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
	padding-top: var( --lm-space-3 );
	font-size: 0.85rem;
}

@media ( min-width: 860px ) {
	.lm-header__inner {
		min-height: 88px;
	}
}

@media ( max-width: 900px ) {
	.lm-header__inner {
		flex-wrap: wrap;
	}

	.lm-nav {
		order: 3;
		flex-basis: 100%;
		justify-content: flex-start;
		overflow-x: auto;
	}

	.lm-footer__inner {
		grid-template-columns: 1fr;
	}
}