/** Global Ozobot footer. Content is managed through WordPress menus and settings. */

.oz-site-footer {
	background: var(--oz-color-dark);
	border-radius: var(--oz-radius-xl) var(--oz-radius-xl) 0 0;
	color: var(--oz-color-white);
	margin-block-start: var(--oz-section-spacing-compact);
}

.oz-footer__inner {
	margin-inline: auto;
	padding: var(--oz-space-2xl) var(--oz-container-padding) var(--oz-space-xl);
	width: min(100%, var(--oz-container-wide));
}

/* Mobiel: intro, menugroepen, social media, juridisch. Desktop: social media rechts naast het logo. */
.oz-footer__inner {
	display: grid;
	grid-template-areas: "intro" "nav" "socials" "legal";
	grid-template-columns: minmax(0, 1fr);
}

.oz-footer__intro { grid-area: intro; }
.oz-footer-navigation { grid-area: nav; }
.oz-footer-socials { grid-area: socials; }
.oz-footer-legal { grid-area: legal; }

.oz-footer__intro {
	display: grid;
	gap: var(--oz-space-xl);
}

.oz-site-footer .oz-footer__brand .custom-logo-link,
.oz-site-footer a.oz-site-title {
	color: var(--oz-color-white);
	display: inline-flex;
	font-family: var(--oz-font-family-heading);
	font-size: var(--oz-font-size-h4);
	font-weight: var(--oz-font-weight-black);
	line-height: 1.1;
	text-decoration: none;
}

.oz-site-footer .oz-footer__brand .custom-logo {
	height: auto;
	max-height: 3rem;
	max-width: 10rem;
	width: auto;
}

.oz-footer__description {
	color: color-mix(in srgb, var(--oz-color-white) 78%, transparent);
	margin: var(--oz-space-md) 0 0;
	max-width: 34rem;
}

.oz-footer__contact,
.oz-footer-socials ul,
.oz-footer-menu,
.oz-footer-cta__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oz-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oz-space-xs) var(--oz-space-lg);
	margin-block-start: var(--oz-space-md);
}

.oz-site-footer a {
	color: color-mix(in srgb, var(--oz-color-white) 86%, transparent);
}

.oz-site-footer a:hover {
	color: var(--oz-color-accent);
}

.oz-footer-socials {
	border-top: 1px solid color-mix(in srgb, var(--oz-color-white) 18%, transparent);
	padding-block-start: var(--oz-space-lg);
}

.oz-footer-socials ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oz-space-xs);
}

.oz-footer-socials a {
	align-items: center;
	border: 1px solid color-mix(in srgb, var(--oz-color-white) 24%, transparent);
	border-radius: var(--oz-radius-pill);
	display: inline-flex;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

.oz-footer-socials a:hover {
	background: var(--oz-color-accent);
	border-color: var(--oz-color-accent);
	color: var(--oz-color-on-accent);
}

.oz-footer-socials svg,
.oz-footer-toggle svg,
.oz-footer-menu .oz-menu-item__external svg {
	fill: none;
	height: 1.25rem;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 1.25rem;
}

.oz-footer-cta {
	align-self: start;
}

.oz-footer-cta__menu a {
	align-items: center;
	background: var(--oz-color-primary);
	border-radius: var(--oz-radius-pill);
	color: var(--oz-color-on-primary);
	display: inline-flex;
	font-weight: var(--oz-font-weight-bold);
	justify-content: center;
	min-height: var(--oz-control-min-height);
	padding: 0.75rem var(--oz-space-lg);
	text-align: center;
	text-decoration: none;
}

.oz-footer-cta__menu a:hover {
	background: var(--oz-color-accent);
	color: var(--oz-color-on-accent);
}

.oz-footer-navigation {
	display: grid;
	margin-block-start: var(--oz-space-2xl);
}

.oz-footer-group {
	border-top: 1px solid color-mix(in srgb, var(--oz-color-white) 18%, transparent);
}

.oz-site-footer h2.oz-footer-group__title {
	color: var(--oz-color-white);
	font-size: 1.25rem;
	font-weight: var(--oz-font-weight-bold);
	line-height: 1.2;
	margin: 0;
}

.oz-site-footer button.oz-footer-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--oz-color-white);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-weight: var(--oz-font-weight-bold);
	justify-content: space-between;
	line-height: 1.2;
	min-height: 3.5rem;
	padding: var(--oz-space-md) 0;
	text-align: start;
	width: 100%;
}

.oz-footer-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.oz-footer-panel[hidden] {
	display: none;
}

.oz-footer-panel {
	padding-block-end: var(--oz-space-lg);
}

.oz-footer-menu {
	display: grid;
	gap: var(--oz-space-2xs);
}

.oz-footer-menu a {
	align-items: center;
	border-radius: var(--oz-radius-small);
	display: flex;
	gap: var(--oz-space-xs);
	min-height: 2.75rem;
	padding-block: var(--oz-space-xs);
	text-decoration: none;
}

.oz-footer-menu a:hover,
.oz-footer-menu a:focus-visible {
	color: var(--oz-color-accent);
}

.oz-footer-menu .oz-menu-item__copy {
	flex: initial;
}

.oz-footer-menu .oz-menu-item__external {
	display: inline-flex;
}

.oz-footer-legal {
	border-top: 1px solid color-mix(in srgb, var(--oz-color-white) 18%, transparent);
	color: color-mix(in srgb, var(--oz-color-white) 72%, transparent);
	display: flex;
	flex-direction: column;
	font-size: var(--oz-font-size-small);
	gap: var(--oz-space-sm);
	margin-block-start: var(--oz-space-xl);
	padding-block-start: var(--oz-space-lg);
}

.oz-footer-legal p {
	margin: 0;
}

.oz-footer-legal .oz-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oz-space-xs) var(--oz-space-lg);
}

.oz-footer-legal .oz-footer-menu a {
	min-height: 2.75rem;
}

.oz-site-footer :focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--oz-color-accent) 32%, transparent);
	outline-color: var(--oz-color-accent);
}

@media (prefers-reduced-motion: no-preference) {
	.oz-footer-toggle svg {
		transition: transform 160ms ease;
	}
}

@media (min-width: 64rem) {
	.oz-footer__inner {
		column-gap: var(--oz-grid-gap);
		grid-template-areas: "intro socials" "nav nav" "legal legal";
		grid-template-columns: minmax(0, 1fr) auto;
		padding-block-start: var(--oz-space-3xl);
	}

	.oz-footer-socials {
		align-self: start;
		border-top: 0;
		justify-self: end;
		padding-block-start: 0;
	}

	.oz-footer__intro {
		align-items: start;
		grid-template-columns: minmax(0, 1fr);
	}

	.oz-footer-cta {
		justify-self: end;
	}

	.oz-footer-navigation {
		gap: var(--oz-grid-gap);
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.oz-footer-group {
		border: 0;
	}

	.oz-site-footer button.oz-footer-toggle {
		cursor: default;
		min-height: auto;
		padding: 0 0 var(--oz-space-md);
		pointer-events: none;
	}

	.oz-footer-toggle svg {
		display: none;
	}

	.oz-footer-panel {
		padding: 0;
	}

	.oz-footer-legal {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}
}

.oz-footer-legal > nav { flex-shrink:0; }