/**
 * Site footer.
 *
 * Geometry from Figma 190:140 (desktop 1440×240) and 190:183 (mobile).
 * Gold on ink measures 8.07:1 and ink on gold the same, so both the "E:"
 * label and the Give pill clear WCAG 1.4.3 AA comfortably.
 */

.vu-footer {
  background-color: var(--vu-ink);
  color: #fff;
}

.vu-footer__inner {
  position: relative;
  display: grid;
  /* Right column is 360px in Figma (1440 − 1060 − 20); the 228px is the
     address block inside it, not the column. */
  grid-template-columns: 1fr 360px;
  gap: var(--vu-space-10);
  align-items: start;
  max-width: calc(var(--vu-container) + (var(--vu-gutter) * 2));
  margin-inline: auto;
  padding: var(--vu-space-5) var(--vu-gutter) 24px;
}

/* ---------------------------------------------------------------- Brand */
.vu-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 65px;
}

.vu-footer__logo {
  width: 200px;
  height: auto;
}

.vu-footer__legal {
  max-width: 778px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.01em;
  color: #fff;
}

.vu-footer__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -------------------------------------------------------------- Contact */
.vu-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 74px;
  font-size: var(--vu-body-size);
  line-height: 26px;
  letter-spacing: var(--vu-body-track);
}

.vu-footer__contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--vu-space-5);
  width: 228px;
}

.vu-footer__heading {
  font-family: var(--vu-font-sans);
  font-size: var(--vu-body-size);
  font-weight: 600;
  line-height: 26px;
  letter-spacing: var(--vu-body-track);
}

.vu-footer__address {
  font-style: normal; /* <address> italicises by default */
  line-height: 26px;
}

.vu-footer__email {
  /* The address wraps at 228px but the email address is kept on one
     line, as in the design, and is allowed to run into the column gap. */
  white-space: nowrap;
}

.vu-footer__email-label {
  color: var(--vu-gold);
}

.vu-footer__privacy {
  white-space: nowrap;
}

.vu-footer__email a,
.vu-footer__privacy a {
  color: inherit;
  text-decoration: none;
}

.vu-footer__email a:hover,
.vu-footer__email a:focus-visible,
.vu-footer__privacy a:hover,
.vu-footer__privacy a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------------- Give */
/* Sits above the contact column at the top-right of the footer, matching
   the absolute placement in Figma (left 1302, top 20). */
.vu-footer__give {
  position: absolute;
  inset-block-start: var(--vu-space-5);
  inset-inline-end: var(--vu-gutter);
	min-width: 98px;
}
.vu-footer__give:hover {
	border-color: #fff!important;
	color: #fff;
}

/* ================================================================
 * Mobile — Figma 190:183
 * ============================================================== */
@media (max-width: 1023px) {
  .vu-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--vu-space-8);
    padding-block: var(--vu-space-8);
  }

  .vu-footer__brand {
    gap: var(--vu-space-8);
    /* Legal small print reads last on a narrow screen. */
    order: 3;
  }

  .vu-footer__logo {
    width: 152px;
  }

  .vu-footer__contact {
    order: 1;
    gap: var(--vu-space-8);
  }

/*   .vu-footer__give {
    position: static;
    order: 2;
    justify-self: start;
  } */

  .vu-footer__contact-block {
    width: auto;
  }
	.vu-footer__give {
		top: 115px;
	}


  /* A 390px viewport cannot hold these on one line without causing
     horizontal scroll, which would fail WCAG 1.4.10 Reflow. */
  .vu-footer__email,
  .vu-footer__privacy {
    white-space: normal;
  }
}

/* The logo and the legal notice belong together on mobile, but the
   wordmark should still lead the footer. */
@media (max-width: 1023px) {
  .vu-footer__brand {
    display: contents;
  }

  .vu-footer__logo {
    order: 0;
  }

  .vu-footer__legal {
    order: 4;
  }
}