/*
 * Footer navigation — columns above the breakpoint, an accordion below it.
 *
 * The breakpoint lives here only. Below it, every column but the first sets
 * --accordion: 1, which is what common-footer-navigation.js reads to know
 * whether a title is a toggle.
 */

#footer-navigation > .content-wrapper {
	display: flex;
	flex-wrap: wrap;
}

#footer-navigation .column { min-width: 0; }

@media (width >= 900px) {
	#footer-navigation > .content-wrapper { flex-wrap: nowrap; }
	#footer-navigation .column { flex: 1 1 0; }
}

@media (width < 900px) {
	#footer-navigation .column { flex: 0 0 100%; }

	#footer-navigation .column:not(.column-about) { --accordion: 1; }

	#footer-navigation .column:not(.column-about) > .title {
		position: relative;
		padding-right: 35px;

		cursor: pointer;
		user-select: none;
	}
	/* Placeholder icon: images/icons/accordion.svg, turned over when open. */
	#footer-navigation .column:not(.column-about) > .title:after {
		content: '';
		position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(0deg);
		display: block; height: 24px; width: 24px;

		background-color: currentColor;

		-webkit-mask-image: url("../images/icons/accordion.svg");
		mask-image: url("../images/icons/accordion.svg");
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;

		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	}
	#footer-navigation .column:not(.column-about).is-open > .title:after {
		transform: translateY(-50%) rotate(180deg);
	}

	#footer-navigation .column:not(.column-about) > .column-body {
		display: none;

		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#footer-navigation .column > .title:after { transition: none; }
}

/*---------------------------------------------------------------------------*/

#footer-navigation .brand {
	display: block; max-width: 170px;

	background-image: url("../images/logo.svg");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
#footer-navigation .brand:before {
	content: '';
	display: block;
	padding-top: 64.12%; /* 109 / 170 */
}

/*---------------------------------------------------------------------------*/

#footer-navigation .socials {
	display: flex;
	flex-direction: row;
	column-gap: 15px;
}
#footer-navigation .socials > .social {
	display: block; width: 20px;

	background-color: currentColor;

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
#footer-navigation .socials > .social:before {
	content: '';
	display: block;
	padding-top: 100%;
}
#footer-navigation .socials > .social-facebook  { --mask-image: url("../images/icons/social/facebook.svg"); }
#footer-navigation .socials > .social-instagram { --mask-image: url("../images/icons/social/instagram.svg"); }