@import 'font.css';

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);
}

.__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-family: var(--secondary-color);
	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 {
	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';
}

.film-stills {
	display: flex;
	height: auto;
	width: 100%;
}

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

.series {
	margin: 1rem auto 3rem auto;
}

.series p {
	width: 50%;
}

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

.series span p {
	margin: 0;
}


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

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

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

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

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

	}

	.dir-bio p, .series div {
		width: 70%;
	}
}