/* ==========================================================================
   AdM Administraties
   Footer
   ========================================================================== */

.adm-footer {
	padding: 62px 0 24px;

	background: var(--adm-dark);
	color: var(--adm-white);
}


/* ==========================================================================
   Footer grid
   ========================================================================== */

.adm-footer__grid {
	display: grid;

	grid-template-columns:
		1.5fr
		0.75fr
		0.75fr;

	gap: 58px;

	padding-bottom: 42px;
}


/* ==========================================================================
   Footer logo
   ========================================================================== */

.adm-footer__brand .adm-brand__link {
	display: inline-flex;

	margin-bottom: 24px;
}

.adm-footer__brand .adm-brand__logo {
	display: block;

	width: 300px;
	max-width: 100%;

	height: auto;
}

.adm-footer__brand p {
	max-width: 430px;

	margin-bottom: 0;

	color:
		rgba(
			255,
			255,
			255,
			0.94
		);
}


/* ==========================================================================
   Footer titels
   ========================================================================== */

.adm-footer h2 {
	margin-bottom: 18px;

	color: var(--adm-white);

	font-family: var(--adm-font);

	font-size: 0.92rem;
	font-weight: 800;

	letter-spacing: 0.08em;

	text-transform: uppercase;
}


/* ==========================================================================
   Footer links
   ========================================================================== */

.adm-footer ul {
	margin: 0;
	padding: 0;

	list-style: none;
}

.adm-footer li {
	color: var(--adm-white);
}

.adm-footer li + li {
	margin-top: 8px;
}

.adm-footer a {
	color: var(--adm-white);

	text-decoration: none;

	transition:
		opacity 160ms ease;
}

.adm-footer li a {
	font-weight: 600;
}

.adm-footer a:hover,
.adm-footer a:focus-visible {
	color: var(--adm-white);

	opacity: 0.76;
}


/* ==========================================================================
   Footer bottom
   ========================================================================== */

.adm-footer__bottom {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 24px;

	padding-top: 22px;

	border-top:
		1px solid
		rgba(
			255,
			255,
			255,
			0.28
		);

	font-size: 0.9rem;
}

.adm-footer__bottom p {
	margin: 0;

	color:
		rgba(
			255,
			255,
			255,
			0.94
		);
}

.adm-footer__bottom > div {
	display: flex;

	gap: 22px;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1000px) {

	.adm-footer__grid {
		grid-template-columns:
			1fr
			1fr;

		gap: 40px;
	}

	.adm-footer__brand {
		grid-column:
			1 / -1;
	}

	.adm-footer__brand .adm-brand__logo {
		width: 280px;
	}

}


/* ==========================================================================
   Mobiel
   ========================================================================== */

@media (max-width: 700px) {

	.adm-footer {
		padding-top: 50px;
	}

	.adm-footer__grid {
		grid-template-columns: 1fr;

		gap: 34px;
	}

	.adm-footer__brand {
		grid-column: auto;
	}

	.adm-footer__brand .adm-brand__logo {
		width: 250px;
	}

	.adm-footer__bottom {
		flex-direction: column;

		align-items: flex-start;
	}

	.adm-footer__bottom > div {
		flex-direction: column;

		gap: 8px;
	}

}