:root {
	--backgroundColor: #f1f1f6;
	--backgroundColorAlt: #111;
	--secondaryBackgroundColor: #eee;
	--foregroundColor: #fefefe;
	--primaryTextColor: #000000;
	--accentColor: #3478f6;
	--constructiveColor: #49BF1F;
	--destructiveColor: #ea4e3d;
	--alertColor: #787a00;
	--horizontalRuleColor: #c6c6c8;
	--headerBackgroundColor: #f1f1f6aa;

	--standardHeight: 2.75rem;
	--standardPadding: 0.6rem 1rem 0.6rem 0;
}

@media (prefers-contrast: more) {
	:root {
		--accentColor: #183fd4;
		--destructiveColor: #c42925;
		--horizontalRuleColor: #b7b7b9;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--backgroundColor: #111;
		--backgroundColorAlt: #f1f1f6;
		--secondaryBackgroundColor: #333;
		--foregroundColor: #1c1c1e;
		--primaryTextColor: #fff;
		--accentColor: #3b82f6;
		--constructiveColor: #49BF1F;
		--destructiveColor: #eb5545;
		--alertColor: yellow;
		--horizontalRuleColor: #888;
		--headerBackgroundColor: #000000;
	}

	@media (prefers-contrast: more) {
		:root {
			--foregroundColor: #242426;
			--accentColor: #599af7;
			--destructiveColor: #ec7267;
			--horizontalRuleColor: #444448;
		}
	}
}

*::before, *::after {
	font-family: "Font Awesome";
	font-weight: 100;
}

input[type="radio"], button {
	cursor: pointer;
}

button, a {
	border: 0;
	background: none;
	color: var(--accentColor);
	text-decoration: none;
	padding: 0;
	font-weight: 500;
	font-family: inherit;
}

a {
	border-bottom: 1px solid;
}

label {
	cursor: pointer;
}

h3 {
	font-weight: 500;
}

strong {
	font-weight: 600;
}

summary {
	color: var(--accentColor);
	cursor: pointer;
}

hr {
	background: var(--horizontalRuleColor);
	height: 1px;
	border: 0;
}

.notice {
	border: 2px solid;
	display: none;
	padding: 0.5rem;
}

.succeeded.notice {
	border-color: green;
}

.info.notice {
	border-color: yellow;
}

.failed.notice {
	border-color: red;
}

#not_found:target ~ main .not_found,
#published:target ~ main .published,
#unpublished:target ~ main .unpublished,
#submitted:target ~ main .submitted,
#edited:target ~ main .edited,
#failed:target ~ main .failed {
	display: block;
	margin: 0;
}

body {
	background: #2a2a2a;
	color: var(--primaryTextColor);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	cursor: default;
	font-family: Barlow, sans-serif;
}

body, fieldset, button {
	margin: 0;
}

main > header {
	position: sticky;
	top: 0;
	background: linear-gradient(0deg, lightgray, white);
	text-align: center;
	z-index: 2;

	position: static;
}

@media (prefers-color-scheme: dark) {
	main > header {
		background: linear-gradient(0deg, var(--secondaryBackgroundColor), var(--backgroundColor));
	}
}

header > img {
	vertical-align: middle;
	margin-right: 1rem;
	max-width: 4rem;
	width: 5vw;
	border-radius: 0.25vw;
	min-width: 2rem;
}

header h1 {
	vertical-align: middle;
	display: inline-block;
	font-size: min(2rem, max(1.3rem, 3vw));
	font-family: "Barlow";
	font-weight: 400;
	line-height: 1;
}

main > header > nav {
	display: flex;
	justify-content: space-around;
	padding: 0.25rem 0 0.75rem;
	background: var(--backgroundColor);
}

body > main {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1024px;
	min-height: 100vh;
	background: var(--backgroundColor);
	padding-bottom: 10rem;
	/* height: calc(max(100%, 100vh) + env(safe-area-inset-bottom)); */
}

article {
	padding: 1rem;
}

article img {
	float: right;
	width: 40%;
	/* max-width: 300px; */
	margin-left: 1rem;
	margin-bottom: 1rem;
}

article img[src] {
	/* outline: 1px solid; */
}

article {
	padding: 1rem;
}

article h1 {
	margin: 0;
	font-style: italic;
	font-family: Barlow Condensed;
	font-weight: 400;
	font-size: 1.8rem;
}

article h2 {
	margin-top: 0;
	font-family: 'Barlow Condensed';
	font-weight: 400;
	font-size: 1.6rem;
	margin: 0;
}

article h3 {
	margin: 0 0 0.5rem;
	font-family: 'Barlow Condensed';
	font-weight: 400;
	font-size: 1.4rem;
	font-style: italic;
}

article h4 {
	margin: 0 0 0.5rem;
	font-family: 'Barlow Condensed';
	font-weight: 500;
	font-size: 1.2rem;
	border-bottom: 0.5px solid;
}

article h5 {
	margin: 0 0 0.5rem;
	font-family: 'Barlow Condensed';
	font-weight: 400;
	font-size: 1.2rem;
}

article h6 {
	margin: 0 0 0.5rem;
	font-family: 'Barlow Condensed';
	font-weight: 400;
	font-size: 1.1rem;
}

article h1 + p {
	margin-top: 0;
}

article p.venue::before {
	content: "\f3c5";
	margin-right: 0.25rem;
	font-weight: 900;
}

article li + li {
	margin-top: 0.5rem;
}

article .filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: 'Barlow Condensed';
	font-weight: 400;
	margin: 0 0 1rem;
	padding: 0.5rem 0;
}

.filters > span {
	background: var(--secondaryBackgroundColor);
	border: 0.5px solid;
	padding: 0.25em 0.5em;
	border-radius: 0.5em;
	line-height: 1.2;
}

.filters > span::before {
	margin-right: 0.25em;
}

[for="filter_camp"],
[for="filter_class"],
[for="filter_workshop"],
span.camp,
span.class,
span.workshop {
	display: none;
}

/* span.adults::before {content: "\f183";}
span.appt_req::before {content: "\f46c";}
span.audition::before {content: "\f46c";}
span.comedy::before {content: "\f588";}
span.comps::before {content: "\f145";}
span.covid::before {content: "\e4a8";}
span.equity_contract::before {content: "\f56c";}
span.equity_candidacy::before {content: "\f4fc";}
span.fees::before {content: "\f09d";}
span.multi_cast::before {content: "\f500";}
span.multidiscipline::before {content: "\e537";}
span.musical::before {content: "\f001";}
span.paid::before {content: "\f81d";}
span.registration_req::before {content: "\f5b7";}
span.scholarship::before {content: "\f81d";}
span.shakespeare::before {content: "\e2c2";}
span.stipend::before {content: "\f81d";}
span.travel::before {content: "\f5e4";}
span.video_allowed::before {content: "\f03d";}
span.video_only::before {content: "\e073";}
span.youth_roles::before {content: "\f1ae";}
span.youths::before {content: "\f1ae";}
span.youth_show::before {content: "\e4e1";}
span.melodrama::before {content: "\f819";}
span.pwyc::before {content: "\f4c0";}
span.radio_play::before {content: "\f8d8";}
span.talent_show::before {content: "\f8cb";} */

span.fees {
	background: var(--alertColor) !important;
	border-color: var(--alertColor) !important;
	font-weight: 500;
	color: black;
}

span.free {
	color: var(--constructiveColor);
	/* position: relative; */
}

span.free::before {
	/* content: "$";
	margin-right: 0.6em !important; */
	/* content: "\f4d3"; */
}

span.free::after {
	position: absolute;
	transform: rotate(45deg);
	/* content: "|"; */
	border: 1.4px solid;
	width: 1rem;
	height: 1rem;
	text-align: center;
	border-radius: 50%;
	left: 1px;
	line-height: 0.9;
	top: 2.6px;
	font-size: 1.1rem;
}

/* span.employment::before {
	content: "\f0b1";
}

span.iso::before {
	content: "\f1e5";
} */

@media screen and (max-width: 768px) {
	.secondary-text span, .secondary-detail-text span {
		position: absolute;
		opacity: 0;
	}

	section .contents .subtext span:not(.new):not(.ending-soon) {
		/* font-size: 0; */
		/* border: 0; */
	}

	section .contents .subtext span::before {
		font-size: min(0.8rem, max(0.5rem, 3.5vw));
	}

	span.free::before {
		/* margin-right: 0 !important; */
	}

	.subtext span.free::before {
		padding: 0 4px;
	}

	span.free::after {
		left: -1px;
		font-weight: 100;
		top: -2px;
	}
}

#root > header {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	/* text-align: right; */
	padding: 0.5rem 0;
	z-index: 3;
	max-width: 1024px;
	margin: 0 auto;
	box-sizing: border-box;
	border-top: 1px solid var(--horizontalRuleColor);
	background: var(--headerBackgroundColor);
	-webkit-backdrop-filter: blur(30px);
	/* backdrop-filter: blur(30px); */
	opacity: 1;
	background: linear-gradient(180deg, var(--secondaryBackgroundColor), var(--backgroundColor));
}

@supports (backdrop-filter: blur(30px)) or (-webkit-backdrop-filter: blur(30px))
.modal > section > header, #root > header, main > header {
	background: var(--headerBackgroundColor);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
}
.modal > section > header, #root > header, main > header {
	/* background: var(--backgroundColor); */
}

body > header ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-around;
}

body > header nav a {
	border: 0;
	font-size: 0.7rem;
	text-align: center;
	display: block;
	/* color: gray; */
}

body > header nav a::before {
	/* font-weight: 400; */
	font-size: 1.7rem;
	display: block;
	padding-bottom: 0.2em;
}

body > header nav li.active a {
	/* color: var(--accentColor); */
}

body > header nav li.active a::before {
	font-weight: 900;
}

body > header nav li.directory a::before {
	content: "\f2b9";
}

body > header nav li.auditions a::before {
	content: "\e533";
}

body > header nav li.learning a::before {
	content: "\e56e";
}

body > header nav li.classifieds a::before {
	content: "\f1ea";
}

body > header nav li.theatres a::before {
	content: "\f630";
}

body > header nav li.notifications a::before {
	content: "\f0f3";
}



section .contents .detail-text {
	display: flex !important;
	align-items: center;
}

/* li:nth-child(even) p.detail-text::after {
	content: "\f005";
	margin-left: 0.25rem;
	font-weight: 900;
	color: yellow;
	/* content: "\e1a8"; */
	/* content: "\f4c6"; */
	content: "\f2b9";
	color: #c887df;
	/* color: mediumpurple; */
	color: chartreuse;
	color: cyan;
	/* color: darkseagreen; */
	color: deepskyblue;
	color: lawngreen;
	color: #00ec03;
}

li:nth-child(even) p.detail-text::before {
	content: "hi";
	order: 3;
	margin-left: 0.25rem;
	content: "\f005";
	font-weight: 900;
	color: yellow;
} */

a.directory {
	font-size: 0;
	border: 0;
}

a.directory::after {
	margin-left: 0.25rem;
	font-weight: 900;
	content: "\f2b9";
	font-size: 1rem;
}

blockquote {
	font-family: monospace;
	line-height: 1.5;
}

blockquote::before {
	content: "“";
	font-size: 1.5em;
	line-height: 0.6;
	font-family: inherit;
	vertical-align: middle;
}

blockquote::after {
	content: "”";
	font-size: 1.5em;
	line-height: 0.6;
	font-family: inherit;
	vertical-align: middle;
}

blockquote p {
	display: inline;
}




div.updated {
	margin-bottom: 1rem;
	font-weight: 500;
	color: var(--primaryTextColor);
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	border: 1px solid;
	background: var(--secondaryBackgroundColor);
}

div.updated p {
	margin: 0;
}

summary::marker {
	font-size: 1rem;
}

dialog {
	background: none;
	border: 0;
}

dialog > form {
	background: #333;
	color: var(--primaryTextColor);
	box-sizing: border-box;
	max-width: min(800px, 100vw);
	border: 0;
	padding: 1rem;
	position: relative;
	box-sizing: border-box;
	pointer-events: all;
}

dialog > form > div {
	overflow: auto;
	max-height: 80vh;
}

dialog[open] {
  opacity: 1;
}

dialog::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
	display 0.4s allow-discrete,
	overlay 0.4s allow-discrete,
	opacity 0.4s ease-out,
	background-color 0.4s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

dialog[open]::backdrop {
	background: #000;
	opacity: 0.75;
}

/* This starting-style rule cannot be nested inside the above selector
because the nesting selector cannot represent pseudo-elements. */

@starting-style {
  dialog[open]::backdrop {
	opacity: 0;
	background-color: rgb(0 0 0 / 0%);
  }
}

dialog > div > :last-child {
	margin-bottom: 0;
}

dialog button {
	border: 0;
	width: auto;
	display: block;
	font-size: 0;
	padding: 0;
	clip-path: circle(50%);
	background: black;
	right: 0;
	position: sticky;
	left: 100%;
	transform: translate(100%, -100%);
	margin: 0 0 -2rem -1rem;
	top: 1rem;
}

dialog button::before {
	pointer-events: all;
	/* color: #888; */
	content: "\f057";
	font-size: 2rem;
}

html:has(dialog[open]) {
	overflow: hidden;
}

/* for safari mobile, which still doesn't work very well */
html:has(dialog[open]) body {
	pointer-events: none;
}

dialog {
  opacity: 0;
  /* transform: scaleY(0); */
  transition:
	opacity 0.4s ease-out,
	overlay 0.4s ease-out allow-discrete,
	display 0.4s ease-out allow-discrete;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

/*   Before-open state  */
/* Needs to be after the previous dialog[open] rule to take effect,
	as the specificity is the same */
@starting-style {
  dialog[open] {
	opacity: 0;
  }
}

dialog > form > div > :last-child {
	margin-bottom: 0;
}