$o-footer-bp1: 400;
$o-footer-bp2: 600;
$o-footer-bp3: l;


.o-footer {
	@include z(z-footer);
	@include template(info, brand, nav);
	@include font-weight('semi-bold');
	color: palette(primary, 100);
	background-color: palette(primary);
	margin-top: auto; // push to bottom when there's little content
	padding-bottom: 0;
	transition: padding 0.6s;

	.is-cookie-bar-visible & {
		padding-bottom: $site-cookieBar-height;
	}
}


.o-footer__main {
	@include contain;
	@include vspacing(
		'padding-bottom' 0.75
	);

	display: grid;
	grid-template-areas:
		"brand"
		"info"
		"nav";

	@include mq($o-footer-bp2){
		grid-template-columns: 5fr 3fr;
		grid-template-areas:
			"brand brand"
			"info nav";
	}

	@include mq($o-footer-bp3){
		grid-template-columns: 3fr 6fr 3fr;
		grid-template-areas:
			"info brand nav";
	}
}


// Placed in grid
.o-footer__brand {
	text-align: center;
	color: palette(neutral, 0);

	//@include mq($o-footer-bp1) {
	//	margin-left: 5vw;
	//	margin-right: 5vw;
	//}
	//
	//@include mq($o-footer-bp2) {
	//	margin-left: 10vw;
	//	margin-right: 10vw;
	//}
	//
	//@include mq($o-footer-bp3) {
	//	margin-left: column(1,8);
	//	margin-right: column(1,8);
	//}
}


// Placed in grid
.o-footer__info {
	@include owl-children(space(4));
	padding-top: space(6);
}


// Placed in grid
.o-footer__nav {
	@include mq($o-footer-bp3) {
		margin-left: column(1,3);
	}
	padding-top: space(6);
}

.o-footer__logo-placeholder {
	margin: auto;
	width: percentage(2 / 3);
	max-width: 384px;
}

.o-footer__logo {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 0;
	width: 100%;
	padding-top: 50%;
	color: palette(primary);
	background-color: palette(neutral, 0);
	//clip-path: ellipse(50% 99% at 50% 0);
	// Alternative version of rounding
	border-radius: 0 0 500px 500px;

	& svg {
		position: absolute;
		top: 12%;
		left: 50%;
		right: 0;
		width: 100%;
		height: 56.25%;
		transform: translateX(-50%);
	}
}


.o-footer__heading {
	@include font-family(primary);
	@include font-size(l);
	@include font-weight('bold');
	color: palette(text);
}


.o-footer__list {
	list-style: none;
	margin: space(4) 0 0 0;
}


.o-footer__link {
	display: inline-block;
	position: relative;
	z-index: 0;
	color: palette(primary, 100);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s;

	&:hover {
		color: palette(neutral, 0);
	}

	&:focus {
		outline-color: palette(neutral, 0);
	}

	.is-active & {
		@include font-weight('bold');
		color: palette(neutral, 0);
	}
}


.o-footer__link--phone {
	@include font-size(l);
	@include font-weight('bold');
	display: flex;
	align-items: center;
	color: palette(neutral, 0);

	&:hover {
		text-decoration: underline;
	}

	// phone icon
	& > i {
		flex: none;
		display: flex;
		width: space(3);
		margin-right: space(0.5);
	}
}


.o-footer__headline {
	@include font-size(xl);
	@include font-weight('bold');
	margin-top: space(3);
}


.o-footer__social {
	display: flex;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: space(4) 0 0;
}


.o-footer__channel {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	margin-right: space(2);
}


.o-footer__icon {
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	transition-property: opacity;
	transition-duration: 0.3s;

	&:hover {
		opacity: 0.5;
	}

	&:focus {
		outline-color: palette(primary);
	}
}