/*
Typography:
-----------
Font family:
Typographic scale:  12px  14px  16px  18px  20px  24px  30px  36px  48px  60px  72px
                    0.75  0.875 1base 1.125 1.25  1.5   1.875 2.25  3     3.75  4.5

Font color (light): hsla(0, 100%, 100%, 1) primary - white
                    hsla(206, 33%, 96%, 1) secondary - lighter
                    hsla(208, 21%, 88%, 1) tertiary - light

Font color (dark):  hsla(208, 16%, 16%, 1) primary - black
                    hsla(207, 12%, 43%, 1) secondary - darker
                    hsla(208, 12%, 58%, 1) tertiary - dark

Line height:        Small: 1.5rem (16px fonts)
                    Medium: 1.25rem (24px fonts)
                    Large: 1.125rem (48px fonts)

Spacing scale:      6px   12px  16px  20px  30px  48px
                    0.375 0.75  1base 1.25  1.875 3
*/

:root {
	/* Color palette https://www.design-seeds.com/seasons/summer/underwater-hues/  */
	--salmon: hsla(6, 72%, 67%, 1);
	--blue-grey: hsla(205, 45%, 33%, 1);
	--blue: hsla(221, 63%, 32%, 1);
	--light-blue: hsla(218, 43%, 54%, 1);
	--levander: hsla(271, 46%, 83%, 1);
	--pink: hsla(308, 43%, 89%, 1);
	--scuba-red: hsla(354, 72.9%, 43.3%, 1);

	/* Greyscale palette */
	--white: hsla(0, 100%, 100%, 1); /* primary light */
	--lighter: hsla(206, 33%, 96%, 1); /* secondary light */
	--light: hsla(208, 21%, 88%, 1); /* tertiary light */
	--dark: hsla(208, 12%, 58%, 1); /* tertiary dark */
	--darker: hsla(207, 12%, 43%, 1); /* secondary dark */
	--black: hsla(208, 16%, 16%, 1); /* primary dark */

	/* Boxes */
	--box-radius: 4px;
	--box-shadow: 0 2px 1px hsla(0, 0%, 0%, 0.08);
	--box-padding: 1.25rem;
}

/*-------------------------------------------------
 CSS reset
------------------------------------------------*/

html {
	font: 400 19px choco-cooky, sans-serif;
	letter-spacing: 0.08rem;
	color: var(--lighter);
	line-height: 1.5rem;
	text-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

a {
	text-decoration: none;
	outline: 0;
	color: inherit;
	display: inline;
}

body {
	margin: 0;
	background: url("../img/backgrounds/bg.jpg") center center / cover no-repeat fixed;
}

/*-------------------------------------------------
 Wrapper
 ------------------------------------------------*/

/* The app wrapper div*/
.wrapper {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 80px 1fr auto;
	grid-template-areas: "header" "main" "footer";
	grid-gap: 20px;
	height: 100vh; /* must define an explicit height in order for grid rows to layout properly */
}

/*-------------------------------------------------
 Header
------------------------------------------------*/

.header {
	grid-area: header;
	position: fixed;
	top: 0;
	width: 100vw;
	display: grid;
	grid-template-areas: "logo header-main languages";
	grid-template-columns: auto 1fr auto; /* is it better to use px values?*/
	grid-template-rows: 1fr;
	grid-gap: 10px;
	padding: 0.375rem;
	background: hsla(205, 45%, 33%, 0.85);
	box-shadow: var(--box-shadow);
}

/* Logo area */

.logo {
	grid-area: logo;
	display: grid;
	grid-template-columns: 64px 1fr;
	grid-gap: 10px;
	align-items: center;
	padding-left: 0.75rem;
}

.logo__image {
	width: 200px;
	position: absolute;
	top: 10px;
	left: 10px;
}

.logo__text {
	font-size: 0.875rem;
	color: red;
	text-align: center;
}

/* Menu area */

.brandname {
	text-align: center;
	color: var(--lighter);
}

.brandname a {
    font: 400 1rem 'american-typewriter', sans-serif;
	letter-spacing: 0.2rem;
}

.menu {
	grid-area: menu;
	display: grid;
	grid-auto-flow: column;
	align-items: center;
}

.menu--light {
	color: var(--light);
	text-transform: uppercase;
	font-size: 0.875rem;
	font-weight: 600;
}

.menu__button {
	display: none;
	cursor: pointer;
	width: 85px;
	height: 35px;
	border: 0;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: var(--box-radius);
	box-shadow: var(--box-shadow);
}

.menu__button:hover {
	color: var(--white);
}

.menu__button--pink {
	background: var(--pink);
	color: var(--black);
}

.menu__button--scuba-red {
	background: var(--scuba-red);
	color: var(--black);
	font-family: choco-cooky, sans-serif;
}

.menu__list {
	font-size: 0.75rem;
	margin: 0;
	padding: 0 0.375rem;
	list-style: none;
	display: grid;
	grid-auto-flow: column;
	justify-content: center;
	align-items: center;
}

.menu__close {
	display: none;
}

.menu__item:first-child {
	display: flex;
	width: inherit;
	justify-content: flex-end;
	padding: 0;
	margin-right: 40px;
}

.menu__item {
	display: inline-block;
	padding: 0.9rem 0.75rem 0.1rem 0.75rem;
	text-align: center;
}

.menu__item--selected {
	border-bottom: 2px solid var(--scuba-red);
}

.menu__link {
	color: inherit; /* inherits from menu--light */
	text-decoration: none;
}

.menu__link:hover {
	color: var(--white);
}

/* Languages area */

.languages {
	grid-area: languages;
	display: grid;
	/* grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)); */ /* related to grid-area header auto */
	grid-auto-flow: column;
	grid-gap: 5px;
	align-items: center;
	padding: 0 0.75rem;
	border-left: 1px solid var(--darker);
}

.languages__input {
	display: none;
}

.languages__label {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0 0.3rem;
	cursor: pointer;
	transition: all 0.2s ease-in;
}

.languages__label.lang__el {
	background: url('../img/languages/el.png') no-repeat;
}

.languages__label.lang__en {
	background: url('../img/languages/en.png') no-repeat;
}

.languages__label:hover {
	transform: scale(1.3);
}

/*-------------------------------------------------
 Main
------------------------------------------------*/

.main {
	grid-area: main;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr;
	justify-items: center;
	align-items: center;
}

.container {
	width: 50vw;
	background: rgba(0, 0, 0, 0.55);
	border-radius: var(--box-radius);
	box-shadow: var(--box-shadow);
	padding: 4.5rem;
	text-align: left;
}

.container__link {
	color: var(--lighter);
}

/*-------------------------------------------------
 Footer
------------------------------------------------*/

.footer {
	grid-area: footer;
	background: var(--blue);
	padding: var(--box-padding);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.875rem;
}

.footer p {
	margin: 0;
}

.footer__brand {
	text-shadow: 1px 2px 1px var(--scuba-red);
}

.footer img {
	width: 28px;
	height: 28px;
	margin-left: 15px;
}

/*-------------------------------------------------
 Responsiveness
------------------------------------------------*/

@media (max-width: 1100px) {
	.header {
		position: relative;
		z-index: 1;
		padding: 0 0.375rem;
	}

	/* Move the menu button at the end of the menu grid */
	.menu {
		justify-items: end;
	}

	/* Show the menu button */
	.menu__button[aria-controls="menu-list"] {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.logo__image {
		position: static;
		width: 80px;
	}

	/* Hide the logo text */
	.header-main {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.brandname {
		display: none;
		/* margin: 0;
		margin-right: 0.75rem;
		font-size: 0.75rem; */
	}

	/* Make menu list stay hidden on the left side of the viewport*/
	.menu__list {
		transition: transform 0.3s ease-in-out;
		margin: 0;
		background: var(--black);
		position: fixed;
		top: 0;
		bottom: 0;
		width: 300px;
		left: -340px;
		grid-auto-flow: row;
		justify-content: center;
	}

	.menu__item:first-child {
		padding: 0 40px 0 0;
		margin-right: 0;
	}

	.menu__close {
		display: inline-block;
		color: var(--lighter);
	}

	.menu__close:hover {
		color: var(--white);
	}

	/* When clicking the  */
	[aria-expanded="true"] ~ .menu__list {
		transform: translateX(340px);
	}

	/* Toggle the icon in the menu button */
	[aria-expanded="false"] .close {
		display: none;
	}

	[aria-expanded="true"] .close {
		display: inline-block;
	}

	[aria-expanded="true"] .open {
		display: none;
	}

	/* Fixes https://github.com/google/material-design-icons/issues/206 */
	.material-icons {
		vertical-align: middle;
	}

	.container {
		width: 75vw;
		padding: 1.875rem;
	}

	.footer {
		flex-direction: column-reverse;
		text-align: center;
	}

	.footer img {
		width: 28px;
		height: 28px;
	}
}