// Styles for 848px and up (53*16)

// Helpers

.wrapper53 {
	@include proper-clearfix;
}

.nowrapper53 {
	@include no-proper-clearfix;
}

// Grid system

.col-row {
	@include proper-clearfix;
	@include margin-horizontal(-($gutter-w / 2));
}

	%local-column-styles {
		@include padding-horizontal(em-calc($gutter-w / 2));
		float: left;
	}

	@for $i from 1 through $cols {
		.col-#{$i} {
			@extend %local-column-styles;
			width: col-calc($i);
		}

		.col-l-#{$i} {
			margin-left: col-calc($i);
		}

		.col-r-#{$i} {
			margin-right: col-calc($i);
		}
	}

	.pull-left {
		float: left;
	}

	.pull-right {
		float: right;
	}

// Reset main menu to "normal"

.logo {
	float: left;
}


.site-header-topbar {
	.light-bg &, .light-bg.opened & {
		min-height: em-calc($header-h-clr-light);
		background-color: $header-bg-clr-light-fullwidth;
		@include transition(none);
		@include background-image(linear-gradient($header-bg-clr-light-fullwidth-top, $header-bg-clr-light-fullwidth-bottom));
	}
}

.top-nav-list {
	text-align: right;
	position: relative;
	padding-right: em-calc(80px); // UNCOMMENT THIS WHEN THE ENGLISH LANGUAGE GOES LIVE

	li {
		display: inline-block;
		margin: 0 0 0 em-calc(20px);

		a {
			display: block;
		}
	}

	.lang-switcher {
		line-height: lh-calc(28px, $fs-s);
		margin: 0;
		position: absolute;
		right: 0;
		top: em-calc(3px, $fs-s);

		a {
			display: inline;
		}
	}
}

.nav-toggle {
	display: none;
}

.js .top-nav-container {
	max-height: none;
	clip: auto;
	overflow: visible;
	zoom: normal;
	position: static;
}

.top-nav-container {
	float: right;
	height: auto;
	margin-top: em-calc(($header-h - 30px) / 2);

	a {
		line-height: lh-calc(30px, 20px);
	}
}

	.top-nav-container-inner {
		padding: 0;
	}

// Footer

.site-footer {
	text-align: left;
}

	.site-footer-nav-row {
		@include margin-vertical(60px);
	}

		.footer-logo {
			width: em-calc(75px);
			@include margin-vertical(0);
		}

		.btn-contact-us {
			margin-top: em-calc(20px);
		}

		.footer-nav-list {
			@include columns(auto 2);

			li {
				margin-bottom: em-calc(10px);
			}
		}

		.footer-nav-list {
			@include margin-vertical(0);
			// margin-left: em-calc(135px);

			li {
				position: relative;
			}

				a {
					margin-left: em-calc(10px, $fs-s);
					display: block;

					&:before {
						position: absolute;
						left: 0;
						display: block;
						content: "›";
					}
				}
		}

	.site-footer-meta {
		.disclaimer {
			text-align: right;
		}
	}



// Homepage

.homepage-title {
	.logo-animated {
		margin-top: $header-h + 25px;
		width: em-calc(150px);
		height: em-calc(150px);
	}

	h1 {
		font-size: em-calc($fs-h2-2);
		max-width: em-calc(840px, $fs-h2-2);
	}
}
	.btn-availability {
		$brd-thickness: 2px;
		$fs-button: $fs-default;
		$lh-button: $lh-default;
		$padding-button-vertical: 9px;
		$fs-checklist: $fs-xs;
		$lh-checklist: $lh-xs;
		$margin-checklist-item-vertical: 8px;

		height: em-calc($lh-button + (2 * $padding-button-vertical) + (2 * $brd-thickness));
		width: em-calc(320px);
		margin-left: em-calc(-160px);

		&:hover, &:focus {
			// Really complicated calculation using the variables above to make sure the height is correct on hover
			height: em-calc(($lh-button + (2 * $padding-button-vertical)) + (4 * ($lh-checklist + $margin-checklist-item-vertical)) + $margin-checklist-item-vertical + $padding-button-vertical + (2 * $brd-thickness));
		}


		.btn-availability-text { // The same as btn-big, but can't use @extend inside a media query so double styles
			font-size: em-calc($fs-button);
			line-height: lh-calc($lh-button, $fs-button);
			padding: em-calc($padding-button-vertical, $fs-button) em-calc(45px, $fs-button) em-calc($padding-button-vertical, $fs-button) em-calc(15px, $fs-button);

			&:after {
				padding: em-calc($padding-button-vertical, $fs-button) em-calc(15px, $fs-button);
				line-height: lh-calc($lh-button, $fs-button);
			}
		}

		.checklist {
			margin: 0;

			li {
				font-size: em-calc($fs-checklist);
				color: #fff;
				line-height: lh-calc($lh-checklist, $fs-checklist);
				@include margin-vertical(em-calc($margin-checklist-item-vertical, $fs-checklist));
			}

				.checkbox, .checkmark {
					width: em-calc($lh-checklist, $fs-checklist);
				}
		}
	}


// Media block

.site-header-parallax-homepage {
	background-image: image-url('header-image-homepage-2.jpg');
}

.block-media {
	@include padding-horizontal(em-calc(10px));
}

.block-homepage-leaders {
	padding-bottom: em-calc(100px);
}

	.block-inner-media {
		// background: #fff;
		@include border-radius(10px);
		padding: 10px;
		margin-top: -100px;
		margin-bottom: em-calc(80px);
	}


.availability-interactive, .building-interactive {
	.usps {
		.usp {
			svg {
				width: auto;
			}
			&.usp-1 {
				.label {
					font-size: em-calc(166px);
				}
				.description {
					font-size: em-calc(46px);
				}
			}

			&.usp-2 {
				.label {
					font-size: em-calc(75px * 2);
				}
				.description {
					font-size: em-calc(15px * 2);
				}
			}

			&.usp-3 {
				.label {
					font-size: em-calc(183px * 1.5);
					margin-left: 0;
				}
				.description {
					font-size: em-calc(18px * 1.5);
				}
			}
		}
	}
	.usp-nav {
		display: block;

		li {
			a {
				&.active, &:hover {
					@include background-image(linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255, 0.3)));
				}
				.floor-number {
					display: none;
				}
			}
		}
	}
}

// Sidebar

.panel-availability {
	margin-top: em-calc($lh-default + 11px);

	.location & {
		margin-top: em-calc(($lh-h1-2 * 2) + ($lh-default * 2));
	}
}


// Sustainable

.block-sustainable-highlight {
	background-image: image-url('highlight-tower-2.jpg');
	@include background-size(auto);
}



// Interactive map

.interactive-map-ratio-wrapper {
	$ratio-w: 11;
	$ratio-h: 4;

	padding-bottom: ((100 / $ratio-w) * $ratio-h) + 0%;
}

.interactive-map {

	.interactive-map-overlay {
		padding: em-calc(15px) em-calc(20px);

		h4 {
			font-size: em-calc($fs-h4);
		}
	}

		.icon {
			width: 1.8%;
		}

		.icon-dot {
			width: 2.1%;
		}

		.icon-dot-title {
			font-size: em-calc($fs-default);
			line-height: lh-calc($fs-default);
		}

		.icon-dot-title-small {
			font-size: em-calc($fs-s);
			line-height: lh-calc($fs-s, $fs-s);
			margin-top: -0.6%;
		}

		// Slide europe

		.interactive-map-overlay-london {
			left: 32%;
			top: 54%;
		}

		.icon-dot-europe {
			width: 1%;
		}

		.icon-dot-europe-small {
			width: 0.5%;
		}

		// Slide Eindhoven

		.icon-dot-eindhoven {
			width: 1%;
		}

		// Slide street

		.icon-station {
			width: 2.1%;
		}

		.interactive-map-overlay-street-legenda {
			font-size: em-calc($fs-default);

			img {
				width: em-calc($fs-default);
			}
		}
}

.no-animation {
	.interactive-map {
		.slide-eindhoven-inner {
			.interactive-map-overlay-campus {

				left: 65%;
				top: 63%;
			}
		}

		.slide-street-inner {
			.interactive-map-overlay-cs {

				top: 31%;
			}
		}
	}
}


// Contact & availability brokers

.broker {
	margin-top: em-calc($lh-default * 4);

	&.second {
		margin-top: 0;
	}
}