/*
 * Normative Mnemosyne web-footer component.
 *
 * Supply the approved assets at the two custom-property URLs. The mark is
 * decorative and must be rendered by an aria-hidden element in the DOM.
 */
.mn-app-shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.mn-app-main {
  flex: 1 0 auto;
}

.mn-brand-footer {
  position: relative;
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  overflow: hidden;
  padding: var(--mn-space-4) clamp(var(--mn-space-4), 4vw, var(--mn-space-8));
  color: var(--mn-color-text-on-brand);
  background: var(--mn-color-brand-footer);
}

.mn-brand-footer__content {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(80rem, 100%);
  align-items: center;
  gap: var(--mn-space-3);
}

.mn-brand-footer__product {
  font-family: var(--mn-font-family-sans);
  font-size: 0.8125rem;
}

.mn-brand-footer__wordmark {
  width: 11.5rem;
  height: auto;
}

.mn-brand-footer__mark {
  position: absolute;
  right: clamp(-2rem, -1vw, -0.5rem);
  bottom: -4.5rem;
  width: clamp(10rem, 20vw, 17rem);
  opacity: 0.38;
  pointer-events: none;
}

@media (max-width: 40rem) {
  .mn-brand-footer {
    min-height: 4.5rem;
  }

  .mn-brand-footer__wordmark {
    width: 9rem;
  }

  .mn-brand-footer__product {
    display: none;
  }
}