/* Megaphone PHX — Overlay Panel */

/* ==================== BACKDROP ==================== */

.overlay-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.overlay-backdrop.active {
  display: block;
}

/* ==================== OVERLAY CONTAINER ==================== */

.overlay {
  display: none;
  font-family: "Walter Neue Variable", "Space Grotesk", sans-serif;
  position: fixed;
  top: 2.5vh;
  right: 2rem;
  padding: 0;
  width: 100%;
  max-width: 900px;
  max-height: 95vh;
  background-color: var(--tangerine);
  grid-template-areas:
    'header closer'
    'splitmenu selectContent'
    'fullmenu selectContent'
    'fullmenu footer';
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  border-radius: 1rem;
  border: 0.1rem solid var(--swatch-4);
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'slnt' 0;
  overflow: hidden;
  z-index: 1000;
}

.overlay.active {
  display: grid;
}

.overlay > div {
  text-align: left;
  font-size: 14px;
}

/* ==================== ZONE BORDERS ==================== */

.zone1, .zone2, .zone3, .zone4, .zone5, .zone6 {
  border: 0.05rem solid var(--swatch-4);
  margin: -0.025rem;
}

/* ==================== ZONE GRID ASSIGNMENTS ==================== */

.zone1 { grid-area: header; }
.zone2 { grid-area: splitmenu; }
.zone3 { grid-area: fullmenu; }
.zone4 { grid-area: closer; }
.zone5 { grid-area: selectContent; }
.zone6 { grid-area: footer; }

/* ==================== ZONE 1: HEADER ==================== */

.zone1 {
  padding-right: 2rem;
  min-height: 100px;
  display: flex;
  align-items: center;
  text-indent: 18px;
  border-radius: 1rem 0 0 0;
}

.zone1 h1 {
  color: var(--agedBlack);
  font-size: 6.00rem;
  font-weight: 500;
  letter-spacing: -0.45rem;
  cursor: pointer;
  transition: all 0.4s ease;
}

.zone1 h1:hover {
  opacity: 0.95;
}

.zone1 h1.active {
  font-weight: 900 !important;
}

/* ==================== ZONE 2: ARTIST MENU ==================== */

.zone2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

/* ==================== ZONE 3: EVENTS MENU ==================== */

.zone3 {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto 2fr;
  align-content: space-between;
}

.zone2 > div,
.zone3 > div {
  display: flex;
  align-items: center;
}

/* ==================== MENU TITLES ==================== */

.menuTitle {
  height: 30px;
  font-size: .8rem;
  font-weight: bold;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  padding-left: 20px;
  text-align: left;
  background-color: var(--agedBlack);
  color: white;
  grid-column: 1 / 3;
}

/* ==================== MENU ITEMS ==================== */

.menuItem {
  height: 45px;
  padding-left: 18px;
  border: 0.05rem solid var(--swatch-4);
  margin: -0.025rem;
  transition: all .125s ease-in-out 0s;
  cursor: pointer;
  user-select: none;
}

.menuItem:not(.active) {
  border-left-width: 0.05rem !important;
}

.menuItem:hover,
.menuItem.active {
  font-weight: normal !important;
  border-left: 10px solid var(--agedBlack);
}

.menuItem.spacer-1,
.menuItem.spacer-2 {
  height: auto;
  min-height: 45px;
  pointer-events: none;
  cursor: default;
}

.menuItem.spacer-1:hover,
.menuItem.spacer-2:hover {
  border-width: 0.05rem;
  font-weight: normal;
  border-left-width: 0.05rem !important;
}

.menuItem.span {
  grid-column-end: span 2;
}

/* ==================== EVENTS ==================== */

.menuItem.event,
.menuItem.event * {
  font-weight: normal !important;
}

.menuItem.event.active {
  border-left: 10px solid black !important;
  background-color: rgba(0, 0, 0, 0.05);
}

.menuItem.event.active .eventTitle {
  font-weight: 900 !important;
}

.zone3 h2 {
  color: var(--agedBlack);
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -0.05rem;
}

.zone3 .event {
  height: auto;
  max-height: 80px;
  padding-top: 2rem;
  padding-bottom: 1rem;
  display: grid;
  grid-template-areas:
    'title date'
    'description address';
  grid-template-columns: 1fr minmax(10px, 120px);
  grid-template-rows: 0.5rem 2.5rem;
  grid-column-gap: 1rem;
}

.zone3 .eventTitle { grid-area: title; }
.zone3 .eventDesc { grid-area: description; }
.zone3 .eventDate { grid-area: date; }
.zone3 .eventAddress { grid-area: address; }

.event p {
  font-size: 0.85em;
}

.event:hover {
  font-weight: 400;
}

.eventDesc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.eventAddress {
  font-weight: 900;
}

/* ==================== ZONE 4: CLOSE ==================== */

.zone4 {
  height: 4rem;
  text-align: right !important;
  padding: 1rem;
  line-height: 1.25;
  align-self: flex-start;
  border-radius: 0 1rem 0 0;
  border: none;
}

.zone4 .close-btn {
  font-size: 2rem;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--agedBlack);
  line-height: 1;
}

/* ==================== ZONE 5: CONTENT ==================== */

.zone5 {
  position: relative;
  top: -4rem;
  height: calc(100% + 4.00rem);
  padding: 1rem;
  line-height: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all .5s linear;
}

.zone5 .img {
  flex: 1 1 auto;
  margin: -1.05rem -1.05rem 1rem;
  min-height: 300px !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--tangerine);
}

.zone5 .img:empty:not([style*="background-image"]) {
  display: none;
  min-height: 0;
  flex: 0 0 0;
}

.zone5 .loading-screen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--tangerine);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  color: var(--agedBlack);
  opacity: 0.7;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.zone5 .loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.zone5 .name,
.zone5 .tagGroup,
.zone5 .desc {
  flex: 0 0 auto;
}

.zone5 .name {
  display: block;
  color: var(--agedBlack);
  padding-bottom: 0.5rem;
  margin-bottom: .5rem;
  font-size: 5.5rem;
  font-weight: 300;
  letter-spacing: -0.2rem;
  line-height: 0.9;
  text-transform: lowercase;
  overflow-wrap: break-word;
  word-break: keep-all;
  hyphens: none;
}

.zone5 .desc {
  margin: 1.0rem 0;
  align-self: flex-start;
  line-height: 140%;
  font-weight: 300;
}

/* ==================== ZONE 6: LINKS ==================== */

.zone6 {
  padding: 1rem;
  margin-bottom: 0;
}