/* ==========================================================
   PROJECT XAMUCO

   File: footer.css

   Version: 1.0.0

   Description: Site Footer
========================================================== */

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

.site-footer {
  background: var(--color-dark);

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

/* ======================================================
   MAIN
====================================================== */

.footer__main {
  display: grid;

  grid-template-columns:
    minmax(16rem, 1.4fr)
    repeat(3, minmax(10rem, 1fr));

  gap: var(--space-3xl);

  padding-top: var(--space-4xl);

  padding-bottom: var(--space-5xl);
}

/* ======================================================
   CLOSING
====================================================== */

.footer__closing {
  padding-top: var(--space-5xl);

  text-align: center;
}

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

.footer__brand {
  max-width: 22rem;
}

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

.footer__logo {
  display: inline-block;

  width: min(100%, 20rem);

  margin-bottom: var(--space-2xl);
}

.footer__logo img {
  display: block;

  width: 100%;
  height: auto;
}

/* ======================================================
   STATEMENT
====================================================== */

.footer__statement {
  max-width: 48rem;

  margin-inline: auto;
  margin-bottom: 0;

  font-family: var(--font-heading);

  font-size: clamp(2.5rem, 5vw, 4.5rem);

  font-style: italic;

  letter-spacing: 0.01em;

  line-height: 1.25;

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

.footer__statement span {
  display: inline-block;

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

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

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

.footer__column {
  min-width: 0;
}

/* ======================================================
   HEADING
====================================================== */

.footer__heading {
  margin-bottom: var(--space-xl);

  font-family: var(--font-body);

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

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

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--color-background);

  opacity: 0.7;
}

/* ======================================================
   MENU
====================================================== */

.footer__menu {
  display: flex;

  flex-direction: column;

  gap: var(--space-md);

  margin: 0;

  padding: 0;

  list-style: none;
}

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

.footer__menu a {
  display: inline-flex;

  align-items: center;

  gap: var(--space-sm);

  color: var(--color-background);

  text-decoration: none;

  transition:
    color var(--transition-normal) var(--ease-out),
    opacity var(--transition-normal) var(--ease-out);
}

.footer__menu a:hover {
  color: var(--color-primary);
}

/* ======================================================
   LINK ICON
====================================================== */

.footer__menu a span {
  transition: transform var(--transition-normal) var(--ease-out);
}

.footer__menu a:hover span {
  transform: translateX(0.25rem);
}

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

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* ======================================================
   BOTTOM INNER
====================================================== */

.footer__bottom-inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

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

  padding-block: var(--space-xl);
}

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

.footer__legal {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: var(--space-lg);

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

.footer__legal a {
  color: var(--color-background);

  text-decoration: none;

  opacity: 0.8;

  transition: opacity var(--transition-normal) var(--ease-out);
}

.footer__legal a:hover {
  opacity: 1;
}

/* ======================================================
   SEALS
====================================================== */

.footer__seals {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: var(--space-lg);

  flex-shrink: 0;
}

/* ======================================================
   SEAL
====================================================== */

.footer__seal {
  display: block;

  width: auto;

  height: 3.5rem;

  object-fit: contain;
}