/* =========================================================
   SITE FOOTER
========================================================= */

.site-footer {
  position: relative;

  padding:
    var(--space-2xl)
    var(--section-padding-x)
    var(--space-xl);

  background:
    var(--surface-primary);

  border-top:
    var(--border-dark);

  overflow: hidden;
}


/* =========================================================
   FOOTER INNER
========================================================= */

.footer-inner {
  max-width:
    var(--container-wide);

  margin-inline:
    auto;
}


/* =========================================================
   FOOTER GRID
========================================================= */

.footer-grid {
  align-items:
    start;

  padding-top:
    var(--space-md);
}


/* =========================================================
   FOOTER COLUMN
========================================================= */

.footer-column {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-sm);
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-brand {
  max-width:
    32ch;
}


/* =========================================================
   FOOTER LABEL
========================================================= */

.footer-label {
  margin-bottom:
    var(--space-md);

  text-transform:
    uppercase;
}


/* =========================================================
   FOOTER META
========================================================= */

.footer-meta {
  max-width:
    28ch;
}


/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-links {
  display:
    grid;

  gap:
    var(--space-sm);
}


/* =========================================================
   FOOTER LINK
========================================================= */

.footer-links a {
  display:
    inline-block;

  text-decoration:
    none;

  transition:
    opacity var(--transition-fast);
}

.footer-links a:hover {
  opacity:
    var(--opacity-heavy);
}


/* =========================================================
   FOOTER BASE
========================================================= */

.footer-base {
  margin-top:
    var(--space-2xl);

  border-top:
    1px solid var(--border-light);
}

.footer-base-inner {
  width:
    100%;

  max-width:
    var(--container-wide);

  margin:
    0 auto;

  padding:
    var(--space-lg) 0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-sm);
}


/* =========================================================
   FOOTER LEGAL
========================================================= */

.footer-legal {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    var(--space-xs);
}

.footer-legal a {
  text-decoration:
    none;

  opacity:
    var(--opacity-medium);

  transition:
    opacity var(--transition-fast);
}

.footer-legal a:hover {
  opacity:
    var(--opacity-heavy);
}

.footer-legal span {
  opacity:
    var(--opacity-soft);
}


/* =========================================================
   FOOTER RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .footer-grid {
    grid-template-columns:
      1fr;

    gap:
      var(--space-2xl);
  }

}