/**
 * Navigation in the footer that has a unique layout
 *
 */

$footer__nav-bp--medium: 540;
$footer__nav-bp--large: 1000;
$footer__item-line-height: 28;

.c-footer {
	@include z(z-footer);
	color: palette(light);
	background-color: palette(dark);
}

.c-footer__nav {
	display: grid;
	grid-template-columns: $grid-main--split-columns;
	padding-bottom: 90px;
}

.c-footer__column {
	margin: 70px 0 0 0;
	list-style: none;
	grid-column: 3 / -3;


	// Stack columns under each other
	@include mq($max: $footer__nav-bp--medium) {
		@for $i from 2 through 4 {
			&:nth-child(#{$i}) {
				grid-row: $i;
			}
		}
	}

	@include mq(null, 900){
		&:nth-child(5) {
			display: none;
		}
	}


	// Make a 2x2 grid
	@include mq($footer__nav-bp--medium, $footer__nav-bp--large){
		grid-column: 3 / 12;

		&:nth-child(even){
			grid-column: 14 / -3;
		}
		&:nth-child(n+3){
			grid-row: 2;
		}
		&:nth-child(n+5){
			grid-row: 3;
		}
	}


	// Make a special 4 in a row grid, with a offset to the left, and a smaller last column
	@include mq($footer__nav-bp--large){
		$column-start: 1;
		$column-width: 4;
		grid-column: $column-start / (#{$column-start + $column-width});

		@for $i from 2 through 5 {
			&:nth-child(#{$i}){
				$start: ($i * 6) - 4;
				grid-column: #{$start} / #{$start + $column-width};
			}
		}

		&:nth-child(4) {
			grid-column: 19/25;
		}
		&:nth-child(5) {
			grid-column: 25/30;
		}
	}
}

.c-footer__item {
	overflow: hidden;
	margin-bottom: 8px;
	@include font(x-small, $footer__item-line-height);
	color: palette(light);

	a {
		text-decoration: none;
	}

	&.phone {
		color: palette(action);

		p {
			margin-bottom: 20px;
		}

		svg {
			margin-right: 10px;
		}
	}
}

.c-footer__item--gap {
	margin-top: #{$footer__item-line-height}px;
}

.c-footer__link {
	display: inline-block;
	position: relative;
	text-decoration: none;
	transition: color 0.3s;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: palette(secondary, 300);
		transform: translate(-101%, #{$footer__item-line-height - 5}px);
		transition-property: transform, color;
		transition-duration: 0.3s;
		transition-timing-function: ease-in-out;
	}

	&:hover {
		color: scale-color(palette(secondary, 300), $lightness: 30%);
		transition-duration: 0.2s;

		&::before {
			transform: translate(0, #{$footer__item-line-height - 5}px);
			transition-duration: 0.2s;
		}
	}
}

.c-footer__link--has-no-hover {
	pointer-events: none;
}

.c-footer__link--heading {
	@include font-size(x2-small);
	margin-bottom: 10px;
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: white;

	&:hover {
		padding: 0;
	}
}