// Imports
@import 'reset.css';
@import 'fonts.less';
@import 'hamburger.less';
@import 'sizes.less';

// Variables
@background-color: #1d1f20;
@text-color: #e5e5e5;
@text-color-dark: black;
@accent-color: #e3001a;
@font-face: {
	.font-names();
}
@sizes: {
	.sizes();
}

body {
	background: @background-color;
	color: @text-color;
}

a, a:active, a:link, a:visited {
	color: @text-color;
	font: 1em 'Raleway', sans-serif;
}

h1 {
	font: 4em 'Oswald', serif;
}

h2 {
	font: 2em 'Oswald', serif;
}

p {
	font-family: 'Raleway';
	font-size: 1.5em;
}

li {
	font-family: 'Raleway';
}

#map {
	width: 20em;
	height: 20em;
}

#press-appearances a {
	font-size: 1.5rem;
}

#press-appearances p {
	font-size: 1rem;
}

@media (max-width: @sizes[desktop]) {
	.desktop-only {
		display: none;
	}
}

@media (min-width: @sizes[desktop]) {
	.mobile-only {
		display: none;
	}
}


main {
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

p {
	padding: 1em;
	max-width: 100%;
}

@media (max-width: @sizes[desktop]) {
	main {
		padding-top: 12em;
		max-width: 95vw;
	}

	p, a, li {
		font-size: 2.5em;
	}

	li {
		margin: 0.7em 0 0.7em 0;
	}

	h2 {
		font-size: 3em;
	}

	#press-appearances a {
		font-size: 2rem;
	}

	#press-appearances p {
		font-size: 1.5rem;
	}
}

@media (min-width: @sizes[desktop]) {
	main {
		padding-top: 6em;
		max-width: 50em;	
	}

	p, a, li {
		font-size: 1.5em;
	}

	li {
		margin: 0.5em 0 0.5em 0;
	}

}


.hidden {
	display: none;
}

// Navbar
#navbar-container {
	display: table;
	height: 4em;
	position: absolute;
	width: 100%;
	background-color: @accent-color;
	overflow: visible;
	z-index: 20;

	#navbar {
		display: table-cell;
		vertical-align: middle;
		height: 100%;
		overflow: visible;

		#info-dropdown-toggle {
			display: none;
		}

		li {
			margin: 0;
		}

		@media (max-width: @sizes[desktop]) {
			ul {
				display: block;
				width: 100%;
				min-height: calc(100vh - 10em);
				padding-top: 10em;
			}

			li {
				text-align: center;
				font: 4em 'Raleway', sans-serif;
				padding: 1em;

				ul {
					display: none;
					padding-top: 1em;
					min-height: unset;

					li {
						font-size: 1em;
					}

					li:last-child {
						padding-bottom: 0;

						a {
							padding-bottom: 0;
						}
					}
				}

				a {
					text-decoration: none;
					padding: 1.5em 0.5em 1.5em 0.5em;
					line-height: 1em;
				}

				#info-dropdown-toggle:checked ~ #info-dropdown {
					display: table;
				}
			}

			> a {
				position: absolute;
				top: 0;
				img {
					height: 10em;
				}
			}
			
			.hamburger();
		}

		@media (min-width: @sizes[desktop]) {
			ul {
				text-align: center;
				float: right;
				height: inherit;
			}
			li {
				float: left;
				font: 1.1em 'Raleway', sans-serif;
				font-weight: bold;
				line-height: 4em;

				a {
					text-decoration: none;
					font-weight: inherit;
					padding: 1.5em 0.5em 1.5em 0.5em;
					line-height: 1em;
					font-size: 1em;

				}

				#info-dropdown-label {
					height: 100%;
					padding-left: 0.5em;
					padding-right: 0.5em;
					padding: 1.5em 0.5em 1.5em 0.5em;
				}

				// Info-Dropdown
				ul {
					display: none;
					table-layout: fixed;
					position: absolute;
					color: white;
					background-color: white;
					width: 10em;

					li {
						display: block;
						width: 100%;
						a {
						 	color: @text-color-dark;
						 	padding-left: 0.2em;
							padding-right: 0.2em;
							display: block;
							width: 100%;
							height: 100%;
						}
					}

					li:hover {
						box-shadow: 0px 5px 15px -3px white, 
		        					-5px 5px 15px -3px white, 
		        					5px 5px 15px -3px white;

						a {
							color: @text-color;
						}
					}
				}

				#info-dropdown-label:hover ~ #info-dropdown {
					display: table;
				}

				#info-dropdown:hover {
					display: table;
				}
			}

			li:hover {
				background-color: @background-color;
			}

			img {
				display: inline-block;
				vertical-align: top;
				height: 4.4em;
			}
		}
		
	}
}