/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
main { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; }
button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type='checkbox'], [type='radio'] { box-sizing: border-box; padding: 0; }
[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
[type='search']::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }

/* Variables and Base Styles */
body {
  font-family: "Roboto Mono", sans-serif;
  --bg-color: #fff;
  --font-color: #1c1c1b;
  color: var(--font-color);
  background-color: var(--bg-color);
  margin: 0;
}

/* Dark Mode Prefs */
@media (prefers-color-scheme: dark) {
	body {
		--bg-color: #1c1c1b;
		--font-color: #e3e3e4;
		background-color: #1c1c1b;
	}
	nav img, .social-icon, #jfc img {
		filter: invert(1);
	}
}

body.dark {
	--bg-color: #1c1c1b;
	--font-color: #e3e3e4;
	background-color: #1c1c1b;
}

body.dark nav img, body.dark .social-icon, body.dark #jfc img {
	filter: invert(1);
}

/* Icons Fix for Light Mode - ensuring they are dark */
nav img, .social-icon, #jfc img {
    /* If icons were white, we would invert them here. 
       But they are dark (#1c1c1b or #000000), so they are visible on white background.
       If they are NOT visible, they might be white in reality? 
       Checked Logo: fill:#1c1c1b (Dark). Checked Menu: fill:#000000 (Dark).
       Checked Instagram: no fill specified, usually defaults to black.
    */
}

/* Style.css Content */
* {
  box-sizing: border-box;
}

input, textarea, select, button {
  display: block;
  width: 100%;
  background-color: var(--bg-color);
  color: var(--font-color);
  border: 1px solid var(--font-color);
  padding: 10px;
  margin: 10px 0;
}

h1, h2 {
  font-family: "Roboto Condensed";
  font-weight: 700;
}

nav, main {
  padding: 50px;
}

main {
  margin-left: 400px;
  word-break: break-word;
}

ul {
  padding: 0;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: inherit;
}

a.active {
  text-decoration: underline;
}

h1 {
  margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
}

.icon {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: pointer;
}

@media only screen and (max-width: 900px) {
  nav, main {
    width: 100vw;
    padding: 20px;
  }

  main {
    margin-top: 100px;
    margin-left: 0;
  }
}

.event {
  width: 400px;
  max-width: 100%;
  display: inline-block;
  margin: 20px;
  box-shadow: 10px 10px black;
  border: 2px solid black;
  border-radius: 10px;
  overflow: hidden;
  vertical-align: top;
}

.event section {
  position: relative;
}

.event .teaser-header {
  display: flex;
  margin-bottom: 10px;
  padding: 10px;
}

.event .teaser-img {
  display: block;
  aspect-ratio: 3/2;
  object-fit: cover;
  overflow: hidden;
  width: 100%;
}

.event h2, .event p {
  margin: 0;
}

.event .date {
  margin-right: 20px;
  font-weight: bold;
  flex-shrink: 0;
}

.event .date .day {
  font-size: 2rem;
}

.event .date .month {
  font-size: 20px;
}

.event .location {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  padding: 10px;
  font-weight: bold;
}

@media only screen and (max-width: 900px) {
  .event {
    width: 100%;
    margin: 20px 0;
  }
}

.event-detail img {
  width: 100%;
  max-width: 900px;
  height: auto;
  margin-bottom: 20px;
}

.band-image {
  max-width: 400px;
  display: block;
  margin-bottom: 10px;
  border-radius: 5px;
}

.event-past-notice {
  background-color: #f0f0f0;
  color: #666;
  padding: 15px;
  margin-bottom: 20px;
  border-left: 5px solid #ccc;
  font-weight: bold;
  text-transform: uppercase;
}

.event-detail.is-past img, 
.event-detail.is-past .event-bands {
  filter: grayscale(0.8);
  opacity: 0.8;
}

body.dark .event-past-notice {
  background-color: #2c2c2b;
  color: #aaa;
  border-left-color: #444;
}

.event-detail header {
  background-color: var(--bg-color);
  padding-right: 20px;
  border-bottom-right-radius: 20px;
}

article a {
  text-decoration: underline;
}

iframe {
  max-width: 100%;
}

/* Navigation */
nav {
	position: fixed;
	width: 400px;
	z-index: 10;
}

nav .nav-content {
	width: 100%;
	position: absolute;
	top: 0;
	padding-top: 150px;
	padding-bottom: 50px;
	flex-shrink: 0;
	height: calc(var(--vh, 1vh) * 100);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overscroll-behavior: contain;
	background-color: var(--bg-color);
}

nav ul {
	font-size: 2rem;
	line-height: 3rem;
	flex-grow: 10;
	text-transform: uppercase;
}

nav .social-icons {
	margin-bottom: 10px;
}

nav .social-icons img {
	width: 24px;
	aspect-ratio: 1;
    fill: currentColor;
}

nav header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	width: 100%;
	position: relative;
	z-index: 100;
	background-color: var(--bg-color);
}

nav #header-logo {
	display: block;
	max-width: 300px;
	width: calc(100% - 50px);
	aspect-ratio: 250/97;
}

nav #menu-icon {
	display: none;
	width: 25px;
	height: 25px;
	cursor: pointer;
}

nav #jfc {
	margin-top: 10px;
	font-size: 0.9rem;
}

nav #jfc img {
	width: 12px;
	margin-right: 5px;
}

@media only screen and (max-width: 900px) {
	nav {
		position: fixed;
		background-color: var(--bg-color);
		top: 0;
		width: 100%;
		padding: 0;
	}

	nav .nav-content, nav header {
		padding: 20px;
	}

	nav .nav-content {
		padding-top: 80px;
		top: -100vh;
		transition: 0.3s;
	}

	nav.opened .nav-content {
		top: 0;
	}

	nav #header-logo {
		max-height: 79px;
	}

	nav #menu-icon {
		display: block;
	}
}