/* The Arclite site footer. Pairs with components/footer.html; needs dist/arclite-tokens.css.

   A flat forest band running the full width of the page, with no gradient and no active
   background: the footer is the one dark green surface on a landing page that does not move, as
   on the site. Social marks on square white tiles at the left; the link columns right-aligned,
   titles in white, links in warm taupe; the outline wordmark drawn across the bottom at watermark
   opacity, its baseline on the bottom edge of the page; the legal line bottom right. The columns
   sit inside the rail box (web-max-w), inset by one gutter. Under 720px everything stacks left.
   Only var() values from the tokens, plus the percentages that place the wordmark. */

.web-footer {
  position: relative;
  z-index: 1;
  background: var(--web-footer-bg);
  color: var(--web-footer-ink);
  font-size: var(--web-footer-link);
  line-height: var(--leading-body);
  padding: var(--web-footer-pad-y) 0 0;
  overflow: hidden;
}
.web-footer-wrap {
  max-width: var(--web-max-w);
  margin: 0 auto;
  padding: 0 var(--web-gutter);
}
.web-footer a {
  color: inherit;
  text-decoration: none;
}
.web-footer a:hover {
  text-decoration: underline;
}
.web-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.web-footer-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8) var(--web-section-gap);
}

/* Social marks: a square white tile, the mark in deepest forest. */
.web-footer-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.web-footer-social a {
  display: inline-flex;
  width: var(--web-icon-tile-size);
  height: var(--web-icon-tile-size);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--web-footer-social-bg);
  color: var(--web-footer-social-ink);
  transition: transform var(--duration-slow) var(--ease);
}
.web-footer-social a:hover {
  transform: translateY(calc(-1 * var(--space-1) / 2));
  text-decoration: none;
}
.web-footer-social svg {
  display: block;
}

/* Link columns, right-aligned, as on the site. */
.web-footer-cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-7) var(--web-feature-gap);
  text-align: right;
}
.web-footer-col ul {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.web-footer-col-title {
  font-size: var(--web-footer-title);
  font-weight: var(--weight-strong);
  color: var(--web-footer-title-ink);
  line-height: var(--leading-title);
}
.web-footer-col a:not(.web-footer-col-title) {
  font-size: var(--web-footer-link);
  font-weight: var(--weight-regular);
  color: var(--web-footer-ink);
}

/* The bottom strip reserves room for the wordmark (a fraction of the content width, since the
   wordmark is sized against it), then the legal line sits at its foot. */
.web-footer-bottom {
  position: relative;
  margin-top: var(--space-6);
  padding-top: 24%;
}
/* The wordmark file has transparent padding: its glyphs sit between 35.09% and 79.26% of its
   height. Pinning the box to the footer's bottom edge and pushing it down by the 20.74% of empty
   rows underneath puts the glyph baseline exactly on the bottom of the page; the overhang is
   clipped by the footer. */
.web-footer-wordmark {
  position: absolute;
  left: -6%;
  bottom: 0;
  width: 84%;
  height: auto;
  transform: translateY(20.74%);
  opacity: var(--web-footer-wordmark-opacity);
  user-select: none;
  pointer-events: none;
}
.web-footer-legal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-4);
  margin: 0;
  padding: 0 0 var(--space-9) var(--space-6);
  font-size: var(--web-footer-text);
  font-weight: var(--weight-strong);
  color: var(--web-footer-ink);
  white-space: nowrap;
}
.web-footer-legal a {
  font-weight: var(--weight-regular);
}

@media (max-width: 720px) {
  .web-footer-grid {
    grid-template-columns: 1fr;
  }
  .web-footer-social {
    flex-direction: row;
  }
  .web-footer-cols {
    justify-content: flex-start;
    text-align: left;
  }
  /* On a phone the legal line sits above the wordmark, not on it: the reserved space moves below. */
  .web-footer-bottom {
    padding-top: 0;
    padding-bottom: 40%;
  }
  .web-footer-wordmark {
    left: -4%;
    width: 95%;
  }
  .web-footer-legal {
    justify-content: flex-start;
    padding-left: 0;
    padding-bottom: var(--space-2);
    white-space: normal;
  }
}