/* Megaphone PHX — Footer */

#footer {
  padding: 0 3rem;
}

.footer {
  overflow: visible;
  height: 100%;
  margin-bottom: 4rem;
}

.footer .brand {
  width: 100%;
  margin: 0;
  padding: 0;
}

.footer .brand h2 {
  color: var(--tangerine);
}

.footer .brand .superscript {
  color: white;
  margin-left: 0.4rem;
  font-size: 0.8vw;
}

.footer .findUs {
  line-height: 1.8;
}

.footer .findUs a {
  transition: all .25s ease-in-out 0s;
}

.footer .findUs .icon {
  display: inline-block;
  width: 1.2em;
  margin-right: 0.25rem;
}

/* ==================== COPYRIGHT ==================== */

.footer .copyright {
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 0.77rem;
  color: rgba(255, 255, 255, 0.30);
  text-transform: uppercase;
  font-weight: bold;
}

.footer .copyright [class*="col-"] {
  padding: .5rem 2rem;
}

/* ==================== VACANCY SIGN ==================== */

.vacancy,
.vacancy .yes,
.vacancy .no {
  font-family: "IBM Plex Mono", monospace;
  text-align: center;
  font-weight: 600;
  font-size: 1.5rem;
  font-style: normal;
  line-height: 2;
  text-transform: uppercase;
}

/* "Vacancy" state (studios available) — default */
.footer .vacancy .yes {
  color: var(--tangerine);
  text-shadow: 0px 0px 4px hsl(from var(--tangerine) h s l / 0.5);
}

.footer .vacancy .no {
  color: white;
  filter: brightness(25%);
}

.footer .vacancy .caption {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 1.0);
  line-height: 1.2;
  text-transform: none;
}

.footer .vacancy .caption::after {
  content: "We've got space available for working artists!";
}

/* "No Vacancy" state — add .no-vacancy class to .vacancy div */
.footer .no-vacancy .no {
  filter: brightness(100%);
}

.footer .no-vacancy .caption::after {
  content: "Our studios are currently fully occupied.";
}