/* --------------------------------

File#: _1_main-footer-v4
Title: Main Footer v4
Descr: Footer navigation template
Usage: codyhouse.co/license

-------------------------------- */

:root {
  --mo1-space-3xs: 0.25rem;
  --mo1-space-xs: 0.5rem;
  --mo1-space-sm: 0.75rem;
  --mo1-space-md: 1.25rem;
  --mo1-space-lg: 2rem;

  --mo1-text-xs: 0.694rem;
}

@media (min-width: 64rem) {
  :root {
    --mo1-space-3xs: 0.375rem;
    --mo1-space-xs: 0.75rem;
    --mo1-space-sm: 1.125rem;
    --mo1-space-md: 2rem;
    --mo1-space-lg: 3.125rem;

    --mo1-text-xs: 0.8rem;
  }
}

/* Divider */
.text-divider {
  width: 60%;
  height: 1px;
  margin: 2rem auto;
  background: hsl(240, 4%, 90%);
}

/* Layout */
.mo1-container {
  width: calc(100% - 2 * var(--mo1-space-md));
  margin-left: auto;
  margin-right: auto;
}

.mo1-max-width-lg {
  max-width: 80rem;
}

/* Footer */
.footer-v4 {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Icons */
.mo1-icon {
  width: 2em;
  height: 2em;
  display: block;
  fill: var(--color-primary);
}

.footer-v4__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: hsl(var(--mo1-color-contrast-lower-hsl));
  color: hsl(var(--mo1-color-primary-hsl));
  flex-shrink: 0;
}

/* Contact row */
.footer-v4__contact {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin-bottom: var(--mo1-space-md);
}

.footer-v4__contact-item {
  flex: 1;
  max-width: 33.333%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mo1-space-xs);
  text-align: left;
  color: hsl(var(--mo1-color-contrast-medium-hsl));
  font-size: var(--mo1-text-xs);
}

.footer-v4__contact-item strong {
  display: block;
  font-weight: bold;
  color: hsl(var(--mo1-color-contrast-high-hsl));
  margin-bottom: var(--mo1-space-3xs);
}

.footer-v4__contact-item span {
  display: block;
}

/* Print text */
.footer-v4__print {
  color: hsl(var(--mo1-color-contrast-medium-hsl));
  font-size: var(--mo1-text-xs);
}

/* Footer navigation */
.footer-v4__nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--mo1-space-md);
}

.footer-v4__nav-item {
  width: 20%;
  max-width: 160px;
  text-align: center;
}

.footer-v4__nav-item a {
  display: block;
  color: hsl(var(--mo1-color-contrast-high-hsl));
  font-size: 0.75em;
}

.footer-v4__nav-item a:hover {
  color: hsl(var(--mo1-color-primary-hsl));
}

/* Mobile */
@media (max-width: 768px) {
  .footer-v4__contact {
    flex-direction: column;
    gap: var(--mo1-space-sm);
  }

  .footer-v4__contact-item {
    max-width: 100%;
    justify-content: flex-start;
  }

  .footer-v4__nav-list {
    flex-direction: column;
    gap: var(--mo1-space-xs);
  }

  .footer-v4__nav-item {
    width: auto;
    max-width: none;
  }
}