/*--------------------------------------------------------------
# Site footer
Loaded after trf.css.

Container metrics are inherited from the header tokens
(--ctx-max-width, --ctx-pad-x) so the footer content box lines up
with the header rows at every breakpoint. Fallback values match the
header defaults if header.css is not loaded.

Selectors are qualified with the element name to reach (0,1,1). An
inline .site-footer block at (0,1,0) is emitted in the document head
and would otherwise win on source order.
--------------------------------------------------------------*/

footer.site-footer {
  --footer-surface: var(--ctx-navy-mid, #042d52);
  --footer-card: rgba(255, 255, 255, 0.05);
  --footer-rule: rgba(255, 255, 255, 0.16);
  --footer-max-width: var(--ctx-max-width, 1400px);
  --footer-gutter: var(--ctx-pad-x, 3rem);

  background-color: var(--footer-surface);
  color: var(--text-on-dark);
  padding: 48px 0 40px;
  border-top: 0;
}

/*--------------------------------------------------------------
## Container
--------------------------------------------------------------*/

footer.site-footer .footer-inner {
  width: 100%;
  max-width: var(--footer-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--footer-gutter);
  padding-right: var(--footer-gutter);
  box-sizing: border-box;
}

/*--------------------------------------------------------------
## Intro: wordmark, blurb, social
--------------------------------------------------------------*/

footer.site-footer .footer-intro {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: start;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--footer-rule);
}

footer.site-footer .footer-brand {
  grid-column: 1 / span 13;
}

footer.site-footer .footer-logo {
  display: inline-block;
  margin-bottom: 24px;
}

footer.site-footer .footer-logo img {
  display: block;
  width: 176px;
  height: auto;
}

footer.site-footer .footer-blurb {
  margin: 0;
  max-width: 660px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-on-dark);
}

footer.site-footer .footer-blurb a,
footer.site-footer .footer-blurb a:visited,
footer.site-footer .footer-blurb a:hover,
footer.site-footer .footer-blurb a:focus,
footer.site-footer .footer-blurb a:active {
  color: var(--text-on-dark);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

footer.site-footer .footer-blurb a:hover,
footer.site-footer .footer-blurb a:focus {
  border-bottom-color: transparent;
}

footer.site-footer .footer-social {
  grid-column: 16 / span 9;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

footer.site-footer .footer-social__link,
footer.site-footer .footer-social__link:visited,
footer.site-footer .footer-social__link:hover,
footer.site-footer .footer-social__link:focus,
footer.site-footer .footer-social__link:active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background-color: var(--text-on-dark);
  color: var(--footer-surface);
  transition: var(--transition);
}

footer.site-footer .footer-social__link:hover,
footer.site-footer .footer-social__link:focus {
  background-color: var(--brand-primary-hover);
  color: var(--text-on-dark);
}

footer.site-footer .footer-social__link svg {
  display: block;
  width: 22px;
  height: 22px;
}

/*--------------------------------------------------------------
## Navigation columns
--------------------------------------------------------------*/

footer.site-footer .footer-nav {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  padding: 40px 0;
  border-bottom: 1px solid var(--footer-rule);
}

footer.site-footer .footer-col--sections {
  grid-column: 1 / span 5;
}

footer.site-footer .footer-col--explore {
  grid-column: 6 / span 5;
}

footer.site-footer .footer-col--about {
  grid-column: 16 / span 9;
  border-left: 1px solid var(--footer-rule);
  padding-left: 52px;
}

footer.site-footer .footer-col__title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 22px;
  color: var(--text-on-dark);
}

footer.site-footer .footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer.site-footer .footer-col li {
  margin-bottom: 14px;
}

footer.site-footer .footer-col li:last-child {
  margin-bottom: 0;
}

footer.site-footer .footer-col a,
footer.site-footer .footer-col a:visited,
footer.site-footer .footer-col a:hover,
footer.site-footer .footer-col a:focus,
footer.site-footer .footer-col a:active {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-on-dark);
  border-bottom: 1px solid transparent;
}

footer.site-footer .footer-col a:hover,
footer.site-footer .footer-col a:focus {
  border-bottom-color: currentColor;
}

/*--------------------------------------------------------------
## Products
--------------------------------------------------------------*/

footer.site-footer .footer-products {
  padding: 40px 0;
  border-bottom: 1px solid var(--footer-rule);
}

footer.site-footer .footer-products__title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 24px;
  color: var(--text-on-dark);
}

footer.site-footer .footer-products ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

footer.site-footer .footer-product {
  display: flex;
  flex-direction: column;
  background-color: var(--footer-card);
  border-radius: 4px;
  padding: 24px 20px;
}

footer.site-footer .footer-product__title {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 14px;
  color: var(--text-on-dark);
}

footer.site-footer .footer-product__text {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-on-dark);
}

footer.site-footer .footer-product__link,
footer.site-footer .footer-product__link:visited,
footer.site-footer .footer-product__link:hover,
footer.site-footer .footer-product__link:focus,
footer.site-footer .footer-product__link:active {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-on-dark);
  border-bottom: 1px solid currentColor;
}

footer.site-footer .footer-product__link:hover,
footer.site-footer .footer-product__link:focus {
  border-bottom-color: transparent;
}

/*--------------------------------------------------------------
## Legal band
--------------------------------------------------------------*/

footer.site-footer .footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 40px;
}

footer.site-footer .footer-legal__logo {
  display: inline-block;
  flex-shrink: 0;
}

footer.site-footer .footer-legal__logo img {
  display: block;
  width: 280px;
  height: auto;
}

footer.site-footer .footer-legal__meta {
  text-align: right;
}

footer.site-footer .footer-legal__links {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

footer.site-footer .footer-legal__links li {
  display: flex;
  align-items: center;
}

footer.site-footer .footer-legal__links li + li::before {
  content: "|";
  margin: 0 12px;
  color: var(--footer-rule);
}

footer.site-footer .footer-legal__links a,
footer.site-footer .footer-legal__links a:visited,
footer.site-footer .footer-legal__links a:hover,
footer.site-footer .footer-legal__links a:focus,
footer.site-footer .footer-legal__links a:active {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-on-dark);
  border-bottom: 1px solid transparent;
}

footer.site-footer .footer-legal__links a:hover,
footer.site-footer .footer-legal__links a:focus {
  border-bottom-color: currentColor;
}

footer.site-footer .footer-copyright {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-on-dark);
}

/*--------------------------------------------------------------
## Responsive
--------------------------------------------------------------*/

/* Above the container width the automatic margins keep the content clear
   of the viewport edges, so the side padding is dropped and the inner rows
   use the full container width. Mirrors the header rule at the same
   breakpoint. */
@media (min-width: 1500px) {
  footer.site-footer .footer-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 1080px) {
  footer.site-footer {
    padding: 40px 0 32px;
    border-top: 0;
  }

  footer.site-footer .footer-col--about {
    padding-left: 32px;
  }

  footer.site-footer .footer-legal__logo img {
    width: 230px;
  }
}

@media (max-width: 781px) {
  footer.site-footer {
    padding: 32px 0 28px;
  }

  footer.site-footer .footer-intro {
    display: block;
    padding-bottom: 24px;
  }

  footer.site-footer .footer-blurb {
    max-width: none;
  }

  footer.site-footer .footer-social {
    justify-content: flex-start;
    margin-top: 24px;
    gap: 10px;
  }

  footer.site-footer .footer-social__link,
  footer.site-footer .footer-social__link:visited,
  footer.site-footer .footer-social__link:hover,
  footer.site-footer .footer-social__link:focus,
  footer.site-footer .footer-social__link:active {
    width: 38px;
    height: 38px;
  }

  footer.site-footer .footer-social__link svg {
    width: 20px;
    height: 20px;
  }

  /* The navigation columns are not part of the mobile footer on the
     reference site. Remove this rule to stack them instead. */
  footer.site-footer .footer-nav {
    display: none;
  }

  footer.site-footer .footer-products {
    padding: 24px 0;
  }

  footer.site-footer .footer-products ul {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  footer.site-footer .footer-legal {
    flex-direction: column;
    justify-content: center;
    padding-top: 28px;
  }

  footer.site-footer .footer-legal__logo img {
    width: 210px;
    margin: 0 auto;
  }

  footer.site-footer .footer-legal__meta {
    text-align: center;
  }

  footer.site-footer .footer-legal__links {
    justify-content: center;
  }
}

@media (max-width: 639px) {
  footer.site-footer .footer-logo img {
    width: 140px;
  }

  footer.site-footer .footer-legal__links li + li::before {
    margin: 0 8px;
  }
}