/* ------------------------------------------
Site Layout, Global Objects
 ----------------------------------------- */
body {
	max-width: 2400px;
	margin: 0 auto;
	background-color: var(--bg-color);
	color: var(--text-color);
}

#site-wrapper {
	display: grid;
	grid-auto-rows: auto;
    grid-auto-columns: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

header {
	margin: calc(16px + 1.390625vw) 0 calc(0px + 3.2vw) 0;
}

header,
main,
footer {
	padding-left: calc(15px + 2.5625vw);
	padding-right: calc(15px + 2.5625vw);
}

@media only screen and (min-width: 800px) {

	header,
	main,
	footer {
		padding-left: calc(15px + 4.5625vw);
		padding-right: calc(15px + 4.5625vw);
	}
}

@media only screen and (min-width: 1700px) {

	header,
	main,
	footer {
		padding-left: calc(15px + 12.85vw);
		padding-right: calc(15px + 12.85vw);
	}
}

/* ------------------------------------------
 Modules
 ----------------------------------------- */

/* Navigation Menu */
#menu {
	display: grid;
	grid-template-columns: auto 1fr;
}



.logo {
	grid-row: 1;
    grid-column: 1;

	width: 6.7rem;
	z-index: 1;
}

.logo button {
	width: 100%;
}

.menu-menu-1-container {
	grid-row: 1;
	grid-column: 2;
	justify-self: end;
	align-self: start;

	margin-top: -0.5rem;
}

#menu-menu-1 {
	display: grid;
	grid-auto-flow: row;
}

.menu-item:not(:last-child) {
	margin-right: 2.5rem;
}

.menu-item a {
	text-decoration: none;
	color: var(--text-color);
}

.menu-item a:hover {
	padding-left: 0;
	text-decoration: underline;
}

.current-menu-item a {
	color: var(--red);
}

/* Sub menu */

.menu-item-has-children {
	position: relative;
}

.menu-item-has-children .sub-menu {
	display: none;
	background-color: var(--bg-color);
}

@media only screen and ( max-width: 952px ) {
	.menu-item-has-children .sub-menu {
		margin-top: 1rem;
	}

	.menu-item:not(:last-child) {
		min-width: 23ch;
	}
}

.menu-item-has-children:not(.active)::before {
	position: absolute;
	
	content: "";
	left: 43px;
    top: 13px;
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
	
}

.menu-item-has-children.active::before {
	position: absolute;
	
	content: " ";
	left: 43px!important;
    top: 15px;
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
}

@media only screen and ( min-width: 953px ) {
	.menu-item-has-children:not(.active)::before {
		top: 19px;
	}
	
	.menu-item-has-children.active::before {
		top: 19px;
	}
}

.menu-item-has-children.active .sub-menu {
	display: block;
	padding-left: .5rem;
}

.menu-item.menu-item-has-children:not(:last-child) {
	margin-right: 2.5rem;
}

.sub-menu .menu-item {
	width: max-content;
	margin-right: 0;
	overflow: hidden;
}

@media only screen and ( min-width: 953px ) {
		.menu-item-has-children .sub-menu {
		position: absolute;
	}
		.menu-item-has-children.active .sub-menu {
		    z-index: 1;
			padding: 0 1rem 1rem .5rem;
			left: -10px;
	}

	.menu-item-has-children::before,
	.menu-item-has-children.active::before	{
		left: 5ch;
		
	}
}
	


/* Responsive Menu*/

.menu__toggle-button {
	grid-column: 2;
	grid-row: 1;
	z-index: 2;
	justify-self: end;

	display: inline-block;
	margin-top: -0.5rem;
	cursor: pointer;
}

.bar1, .bar2, .bar3 {
	width: 35px;
	height: 5px;
	background-color: #333;
	margin: 6px 0;
	transition: 0.4s;
  }

  .change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-8px, 6px);
	transform: rotate(-45deg) translate(-8px, 6px);
  }

  .change .bar2 {opacity: 0;}

  .change .bar3 {
	-webkit-transform: rotate(45deg) translate(-9px, -8px);
	transform: rotate(45deg) translate(-9px, -8px);
  }

@media only screen and (max-width: 952px) {
	#menu-menu-1 {
		visibility: hidden;
		opacity: 0;
		grid-column: 1;
		grid-row: 1;
		align-content: start;
		justify-content: space-around;

		width: 100%;
		position: absolute;
		background-color: var(--bg-color);
		margin: 0;
		padding: 1rem 0 0 0;
		right: 0;
		height: 100vh;
		top: 46px;

		-webkit-transition: all 0.30s ease-in-out;
		-moz-transition: all 0.30s ease-in-out;
		-ms-transition: all 0.30s ease-in-out;
		-o-transition: all 0.30s ease-in-out;

	}

	.menu-item {
		margin-bottom: 0.9rem;
	}

	.logo.blur {
		-webkit-filter: blur(4px);
		filter: blur(4px);
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
	}
}

@media only screen and (min-width: 953px) {
	#menu-menu-1 {
		grid-auto-flow: column;

		-webkit-transition: all 0.30s ease-in-out;
		-moz-transition: all 0.30s ease-in-out;
		-ms-transition: all 0.30s ease-in-out;
		-o-transition: all 0.30s ease-in-out;
	}

	.menu__toggle-button {
		display: none;
	}
}

#menu-menu-1.visible {
	display: grid;
	visibility: visible;
	opacity: 1;
	z-index: 1;
}


/* Footer */

footer > * {
	min-width: 0px;
}

footer {
	background-color: var(--black);
	margin-top: calc(140px + 2.5625vw);
	padding-top: calc(40px + 2.5625vw);
	padding-bottom: 2rem;
	color: var(--bg-color);

	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: auto auto auto;
	grid-gap: 1rem 2rem;
}

footer a,
footer a:visited,
footer a:active,
footer a:hover {
	color: var(--beige);
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}

footer .logo,
footer .mail-form,
footer address,
footer .footer-copyright {
	grid-column: 1 / 4;
}

footer .mail-form {
	margin-bottom: 2rem;
}

footer address {
    grid-row: 3 / 4;
    justify-self: start;
    align-self: end;
}

footer .footer-copyright {
	grid-row: 4 / 5;
	justify-self: end;
	align-self: end;
	font-size: var(--font-size--small);
}

footer .logo {
	grid-row: 1 / 2;
}

@media only screen and (min-width: 900px) {
	footer .logo {
		grid-column: 1 / 2;
		grid-row: 1 / 2;

		margin-top: -1rem;
	}

	footer .mail-form {
		grid-column: 2 / 3;
		grid-row: 1 / 3;
		margin-bottom: 4rem;
	}

	footer address {
		grid-column: 1 / 3;
	}

	footer .footer-copyright {
		grid-row: 3 / 4;
	}

}

footer address ul:last-child {
	font-size: var(--font-size--small);
	margin-top: 2rem;
	color: var(--grey);
}

footer address ul:last-child  a,
footer address ul:last-child  a:visited,
footer address ul:last-child  a:active {
	color: var(--grey);
	text-decoration: none;
}

footer address ul:last-child  a:hover {
	text-decoration: underline;
}


/* Buttons */

.btn a,
input[type="submit"] {
	background-color: transparent;
	color: var(--accent-color--secondary);
	border: 2px solid var(--accent-color--secondary);
	border-radius: 50px;
	font-size: var(--font-size);
	display: inline-block;
	width: auto;
	text-decoration: none;
	padding: 0.5em 1em;
	text-align: center;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
	cursor: pointer;
}

.btn a:hover,
	input[type="submit"]:hover {
		background: var(--accent-color--secondary);
		color: var(--bg-color);
		border: 2px solid var(--accent-color--secondary);
		
}