/*
Theme Name: Van Elias
Author: Elias van Gils
Description:
Version: 1.3.0
Requires at Least:
Tested up to: 7.0.2
Requires PHP:
License: All rights reserved.
License URI: -
Text Domain: -
*/


/* START CRITICAL CSS */

/* # Generic */

@import url("normalize/normalize.css");
@import url("fonts/fonts.css");

html {

	--fira: "fira-sans", "Tahoma", sans-serif;
	--alegreya: "alegreya", "Georgia", serif;

	--white: #fff;
	--light: #f5f5f5;
	--light-grey: #c4c4c4;
	--dark-grey: #666666;
	--dark: #222222;
	--black: #000;

	--red: #e53e25;
	--yellow: #fae238;
	--green: #00b145;
	--cyan: #00aad7;
	--blue: #4c37a0;
	--magenta: #e33891;

	--font: var(--alegreya);

	--primary-fg: var(--white);
	--secondary-fg: var(--light);
	--primary-bg: var(--dark);
	--secondary-bg: var(--dark-grey);

	box-sizing: border-box;
}

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


/* # Typography */

html {
	font-size: 20px;
}

body {
	background-color: var(--primary-bg);
	color: var(--primary-fg);
	font-family: var(--font);
	font-size: 1rem;
	font-variant-numeric: lining-nums;
	line-height: 1.5;
}

h1 {
	font-size: 2rem;
	margin-top: 1.5rem;
	margin-bottom: .5rem;
	font-family: var(--font);
	letter-spacing: -.015em;
	text-align: center;
}

h2 {
	font-size: 1.5rem;
	margin: 1.5rem auto .5rem auto;
	font-family: var(--font);
	letter-spacing: -.005em;
	max-width: 28rem;
}

p {
	margin: 0 auto 1rem auto;
	max-width: 28rem;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

figure.wp-block-table {
	margin: 2rem 0;
	white-space: nowrap;
}

.wp-block-table table {
	width: auto;
	margin: auto;
}

.wp-block-table td {
	border: none;
	padding: .25rem .5rem;
	font-variant-numeric: tabular-nums;
}

a {
	color: var(--primary-fg);
	text-decoration-thickness: .1rem;
}

a:hover,
a:focus,
a:active {
	text-decoration: none;
}

@media screen and (max-width: 780px) {
	html {
		font-size: 17.5px;
	}
}


/* # Layouts */

html,
body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.site-header {
	flex-shrink: 0;
	width: 100%;
}

.site-main {
	margin: auto;
	flex: 1 0 auto;
	width: 100%;
}

.site-footer {
	flex-shrink: 0;
	width: 100%;
}

.site-main,
.header-navigation,
.footer-navigation {
	padding: 0 1rem;
	max-width: 52rem;
}

/* # Components */

/* ## Header */

.site-header {
	background-color: var(--secondary-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.reel {
	height: 100vh;
	background: none;
}

.header-navigation {
	display: flex;
	width: 100%;
	margin: 1rem 0;
	justify-content: space-between;
}

a.custom-logo-link {
	display: block;
	line-height: 0;
}

.custom-logo-link img {
	height: 3rem;
	width: auto;
}

.hamburger-menu-container,
.menu-navigation-container,
#menu-navigation {
	display: contents;
}

.menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

#menu-navigation li {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -.015em;
	text-transform: uppercase;
	white-space: nowrap;
}

.menu a {
	text-decoration: none;
}

.menu a:hover,
.menu a:focus,
.menu a:active {
	text-decoration: underline;
}

.intro,
.error {
	flex-grow: 1;
	display: flex;
	align-items: center;
}

.intro p,
.error p {
	font-size: 1.5rem;
	font-weight: 700;
	font-style: italic;
	color: var(--primary-fg);
	text-align: center;
}

.showreel {
	object-fit: cover;
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}

.filter {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	filter: opacity(35%);
	background-color: var(--primary-bg);
}


/* ## Hamburger Menu */

#menu-toggle,
.menu-button-container {
	display: none;
}

@media screen and (max-width: 1040px) {

	.hamburger-menu-container {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		text-align: right;
	}

	.menu-button-container {
		display: flex;
		height: 3rem;
		width: 3rem;
		cursor: pointer;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.menu-button,
	.menu-button::before,
	.menu-button::after {
		display: block;
		background-color: var(--primary-fg);
		position: absolute;
		height: .4rem;
		width: 2.5rem;
		transition: transform 250ms;
	}

	.menu-button::before {
		content: '';
		margin-top: -.8rem;
	}

	.menu-button::after {
		content: '';
		margin-top: .8rem;
	}

	#menu-toggle:checked+.menu-button-container .menu-button::before {
		margin-top: 0px;
		transform: rotate(225deg);
	}

	#menu-toggle:checked+.menu-button-container .menu-button {
		background: rgba(255, 255, 255, 0);
	}

	#menu-toggle:checked+.menu-button-container .menu-button::after {
		margin-top: 0px;
		transform: rotate(-225deg);
	}

	.menu-navigation-container ul {
		display: block;
		margin-top: 0rem;
		transition: margin-top 125ms;
	}

	#menu-toggle:checked~.menu-navigation-container ul {
		margin-top: 1rem;
		transition: margin-top 125ms;
	}

	.menu-navigation-container li {
		overflow: hidden;
		height: 0;
		transition: height 125ms;
	}

	#menu-toggle:checked~.menu-navigation-container li {
		height: 4rem;
		transition: height 125ms;
	}

	#menu-toggle:checked~.logo-container,
	#menu-toggle:checked~.error-container {
		display: none;
	}
}


/* ## Skip Link */

.screen-reader-text {
	position: absolute;
	z-index: -3;
	/*HACK*/
}

.screen-reader-text:focus {
	background-color: var(--secondary-bg);
	clip: auto !important;
	clip-path: none;
	color: var(--primary-fg);
	display: block;
	height: auto;
	left: 0;
	padding: 1rem;
	text-decoration: none;
	top: 4px;
	width: 100%;
	z-index: 100000;
	text-align: center;
	font-family: var(--font);
	/*TODO*/
	font-size: 2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.015em;
}

/* END CRITICAL CSS */


/* ## Sections */

#contact,
#portfolio {
	padding-top: 4rem;
}

#contact,
#about {
	text-align-last: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding-bottom: 4rem;
}


/* ## Latest Posts */

.wp-block-latest-posts {
	margin: 0;
}

.wp-block-latest-posts li {
	display: grid;
	grid-template: 1fr 5fr / 1fr 28rem;
	grid-template-areas:
		"image title"
		"image excerpt";
	align-items: start;
}

.wp-block-latest-posts__featured-image {
	grid-area: image;
	padding: 0 2rem 4rem 0;
}

.wp-block-latest-posts__post-title {
	grid-area: title;
	margin: 0;
	font-size: 1.5rem;
	color: var(--primary-fg);
	text-decoration: none;
	font-weight: 700;
}

.wp-block-latest-posts__post-title:hover,
.wp-block-latest-posts__post-title:focus,
.wp-block-latest-posts__post-title:active {
	text-decoration: underline;
}

.wp-block-latest-posts__post-excerpt {
	grid-area: excerpt;
	margin: 0;
	text-align: justify;
	hyphens: auto;
	max-width: 28rem;
}

@media screen and (max-width: 1040px) {

	.wp-block-latest-posts li {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.wp-block-latest-posts__featured-image {
		padding: 0 0 1rem 0;
	}

	.wp-block-latest-posts__post-excerpt {
		margin-bottom: 4rem;
		text-align-last: center;
	}

}


/* ## Buttons */

.wp-block-buttons {
	margin: 2rem 0;
}

.wp-block-button__link {
	border-radius: 0;
	background-color: var(--secondary-fg);
	color: var(--primary-bg);
	font-weight: 700;
	padding: .75em 1.5em;
	letter-spacing: .02em;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:active {
	background-color: var(--secondary-bg);
	color: var(--primary-fg);
}

/* ## Videos */

.wp-block-embed {
	margin: 2rem 0;
}

iframe {
	height: 28.125rem;
	width: 100%;
}

@media screen and (max-width: 1040px) {

	iframe {
		height: calc(100vw / 16 * 9);
		width: 100%;
	}

}


/* ## Footer */

.site-footer {
	padding: 1rem 0;
	background-color: var(--secondary-bg);
	margin-top: 1rem;
}

.footer-navigation {
	margin: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#menu-utilities {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 0 2rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

#menu-utilities li {
	font-weight: 700;
}