@import 'font.css';

@keyframes highlight {
	0% {
		color: var(--text-color);
		background: var(--secondary-color);
	}

	70% {
		color: var(--text-color);
		background: var(--secondary-color);
	}

	72% {
		color: var(--text-color);
		background: transparent;
	}
}

:root {
	--primary-font: 'Arial Narrow', sans-serif;
	--secondary-font: 'Arial', sans-serif;
	--film-title: 'Arial Black', 'Arial Narrow', sans-serif;
	--light-color: #f1fff0;
	--text-color: #000000;
	--secondary-color: #1aff00;
	--grey: #909090cc;
	--link-hover-color: #c0b1dc;
	color: var(--text-color);
	font-size: calc(0.8em + 0.25vw);
	letter-spacing: 0.025em;
	line-height: 1.3em;
	font-family: var(--primary-font);
}

* {
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
}

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

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

.hidden,
[data-confirm=''],
[data-confirm='undefined'],
.dir-bio [data-confirm='undefined'],
.__tags p[data-confirm=''] {
	display: none;
}

header {
	/* padding: 0.25rem; */
	margin: 0;
}

header .header-nav {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
}

header .header-nav p {
	/* margin: 0 0.25rem; */
}

header .header-nav a {
	cursor: default;
	font-size: 0.85rem;
	font-family: var(--primary-font);
	text-transform: uppercase;
	background: transparent;
	outline: none;
	color: var(--text-color);
}

header .header-nav a:hover {
	cursor: grab;
	color: var(--text-color);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--text-color);
}

header .back-home {
	flex-grow: 0;
}

header .back-home::after {
	content: 'F';
}

header .back-home:hover::after {
	content: 'anghum Film Collective';
}

/* header .back-programming:hover::before {
	content: 'back to ';
} */

._nav {
	position: relative;
}

._nav a {
	padding: 0.25em 0.5em;
	background: var(--secondary-color);
}

._nav a:first-of-type {
	position: fixed;
	top: 50%;
	left: 0;
}

._nav a:nth-of-type(2) {
	position: fixed;
	top: 50%;
	right: 0;
}

.tags__container {
	display: flex;
	justify-content: center;
	margin: 2rem 0 0 0;
}

.__tags {
	display: flex;
	flex-direction: row;
	justify-content: center;
	border: 1px dotted var(--text-color);
	width: max-content;
	/* padding: 0 0.25rem; */
}

.__tags p,
.__tags a {
	/* margin: 0 0.25rem; */
	font-family: var(--secondary-font);
	font-size: 0.85rem;
}

.__tags a {
	text-shadow: 0 0px 2px var(--secondary-color);
	padding: 0.25rem 0.75rem;
}

.__tags a:first-of-type {
	border-right: 1px dotted var(--text-color);
}

/* 
.__tags p:not(.__tags p:last-of-type)::after {
	content: '';
} */

/* .__tags p:not(.__tags p:last-of-type), .__tags a {
	border-right: 1px dotted var(--text-color);
	padding-right: 0.5rem;
} */

.banner-title[data-confirm=''] {
	display: none;
}

.banner-title {
	padding: 2rem 0;
	text-align: center;
}

.banner-title h5:first-of-type {
	font-family: var(--film-title);
	font-size: 3.25rem;
	text-shadow: 6px 0px 1px var(--text-color);
	filter: blur(1px);
	-webkit-filter: blur(1px);
	line-height: 1.6ch;
}

.banner-title h5 {
	margin: 0 0.5rem;
	font-weight: normal;
}

.banner-title h5 + h5 {

	font-size: 2.5rem;
	line-height: 1.8ch;
}

.banner-details {
	display: flex;
	justify-content: space-between;
	padding: 0 0.25rem;
}

.banner-details,
.banner-img,
.film-meta,
.film-description,
.dir-bio,
.film-stills,
.film-trailer,
.series {
	width: calc(((100% / 6) - 0.25rem) * 5);
	margin: 1rem auto;
}

.banner-details * {
	margin: 0;
}

.banner-details p {
	cursor: default;
}

.banner-details a {
	cursor: pointer;
}

.banner-details a:hover,
.film-meta a:hover,
.__tags a:hover {
	color: var(--text-color);
	text-shadow: 0px 0px 1px var(--text-color);
}

.banner-details a:hover::before {
	color: var(--text-color);
	text-shadow: none;
}

.banner-details p::before,
.banner-details a::before,
.dir-bio p::before,
.series p:first-of-type::before {
	font-size: 0.65rem;
	position: absolute;
	transform: translateY(-1.5em);
	border-bottom: 2px solid var(--secondary-color);
	line-height: 2ch;
	font-family: var(--secondary-font);
	cursor: default;
}

.banner-details a::after,
.dir-bio a::after,
.film-meta a::after {
	content: '\2197';
}

.banner-details p:nth-of-type(1)::before {
	content: 'When';
}

.banner-details p:nth-of-type(2)::before {
	content: 'Where';
}

.banner-details a:nth-of-type(1)::before {
	content: 'Tickets';
}

.banner-details a:nth-of-type(3)::before {
	content: 'Collaborators';
}

.banner-details a:nth-of-type(2)::before {
	content: 'Co-presenters';
}

.banner-img img {
	width: 100%;
}

.film-meta {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.film-meta p,
.film-meta a {
	margin: 0 0.5rem;
	font-family: var(--secondary-font);
	font-size: 0.85rem;
}

.film-meta p:not(.film-meta p:first-of-type)::before,
.film-meta a::before {
	content: '\00B7';
	margin-right: 1rem;
}

.film-meta a:hover::before {
	color: vaR(--text-color);
}

.film-description {
	margin: 0 auto;
	font-size: 1.75rem;
	line-height: 2.5ch;
}

.film-description p {
	margin: 0 0 1rem 0;
	text-align: justify;
}

.film-trailer {
	text-align: center;
	border: 1px solid var(--secondary-color);
	margin: 2rem auto;
}

.dir-bio {
	margin: 2rem auto;
}

.dir-bio div {
	display: flex;
	width: 100%;
	margin: 1rem 0;
	padding: 1rem;
	border: 1px solid var(--secondary-color);
}

.dir-bio * {
	margin: 0;
}

.dir-bio p {
	width: 50%;
	margin: 0 0 0 auto;
}

.dir-bio p::before {
	content: 'DIRECTOR';
}

.series p:first-of-type::before {
	content: 'SERIES';
}

.film-stills {
	display: flex;
	height: auto;
	width: 100%;
	/* flex-direction: column; */
}

.film-stills img {
	width: 100%;
	margin: 0;
	padding: 0;
}

.series:target p em {
	/* border-left: 1px solid var(--secondary-color);
	padding-left: 1rem; */
	animation: highlight 3s cubic-bezier(0.4, 0, 0.2, 1) none;
}

.series {
	margin: 3rem auto;
}

.series p {
	width: 50%;
}

.series span {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.series span p {
	margin: 0;
}

.series p em {
	text-transform: uppercase;
	font-style: normal;
}

.series p a {
	text-shadow: 0 0px 2px var(--secondary-color);
	margin: 0.25rem 0;
	/* box-shadow: 0 0 1px 0 var(--text-color) inset; */
	display: block;
	width: fit-content;
}

.series p a:hover {
	text-shadow: 0 0px 2px var(--text-color);
	color: var(--text-color);
}

.inactive {
	margin-left: 1rem;
	color: var(--grey);
}

.inactive:hover {
	cursor: not-allowed;
	color: var(--grey);
	text-decoration-color: var(--grey);
}

/* breakpoints */

@media (max-width: 820px) {
	.banner-title {
		padding: 2rem 0 0 0;
	}

	.banner-title h5:first-of-type {
		line-height: 1.25ch;
		margin-bottom: 1rem;
		font-family: 'Arial Black', 'Arial Narrow', sans-serif;
		letter-spacing: 2px;
	}

	.banner-details {
		display: grid;
		grid-template-columns: 50% 50%;
	}

	.banner-details * {
		width: 100%;
	}

	.banner-details,
	.banner-img,
	.film-meta,
	.film-description,
	.dir-bio,
	.film-stills,
	.film-trailer,
	.series {
		width: calc(((100% / 5) - 0.25rem) * 5);
	}

	.banner-details p,
	.banner-details a {
		margin-top: 2.5rem;
		font-size: 1.25rem;
	}

	.film-description p {
		text-align: left;
	}

	.film-meta p,
	.film-meta a {
		text-align: center;
	}

	.dir-bio p,
	.series p {
		width: 100%;
		font-size: 1.25rem;
	}

	.dir-bio {
		margin: 3rem auto 2rem auto;
	}

	.banner-details p::before,
	.banner-details a::before,
	.dir-bio p::before,
	.series p:first-of-type::before {
		transform: translateY(-2em);
	}

	.film-stills {
		flex-direction: column;
	}
}

@media (max-width: 640px) {
	body {
		background: white;
	}

	header .header-nav a {
		padding: 0;
		margin: 0;
		text-align: left;
	}

	/* .banner-details * {
		width: calc(20% - 1rem);
	} */
}