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

.site-footer {

  margin-top:
    var(--space-20);

  background:
    var(--color-white);

  border-top:
    1px solid var(--color-border);

  padding:
    var(--space-16) 0
    var(--space-8);
}


/* =========================================
   FOOTER TOP
========================================= */

.footer-top {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap:
    var(--space-6);

  margin-bottom:
    var(--space-10);
}


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

.footer-brand {

  display: flex;

  justify-content: center;
}


/* =========================================
   FOOTER LOGO
========================================= */

.footer-logo {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap:
    var(--space-3);

  text-decoration:
    none;
}


.footer-logo img {

  width: 72px;

  height: auto;

  object-fit:
    contain;
}


.footer-logo h3 {

  margin: 0;

  color:
    var(--color-text);

  font-size:
    1.4rem;

  font-weight:
    var(--font-bold);
}


.footer-logo p {

  margin-top:
    4px;

  color:
    var(--color-text-muted);

  font-size:
    var(--text-sm);

  line-height:
    1.6;
}


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

.footer-links {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

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


.footer-links a {

  color:
    var(--color-text-light);

  text-decoration:
    none;

  font-weight:
    var(--font-medium);

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


.footer-links a:hover {

  color:
    var(--color-primary);
}


/* =========================================
   DISCLAIMER
========================================= */

.footer-disclaimer {

  max-width:
    900px;

  margin:
    0 auto;

  text-align:
    center;

  color:
    var(--color-text-muted);

  line-height:
    1.9;

  font-size:
    var(--text-sm);

  padding-top:
    var(--space-8);

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


/* =========================================
   FOOTER BOTTOM
========================================= */

.footer-bottom {

  margin-top:
    var(--space-8);

  padding-top:
    var(--space-6);

  border-top:
    1px solid var(--color-border);

  text-align:
    center;
}


.footer-bottom p {

  color:
    var(--color-text-muted);

  font-size:
    var(--text-sm);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

  .site-footer {

    padding:
      var(--space-12) 0
      var(--space-6);
  }

  .footer-top {

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

  .footer-links {

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

  .footer-logo img {

    width: 60px;
  }

  .footer-logo h3 {

    font-size:
      1.2rem;
  }
}