/* Site footer */

.site-footer {
  background: var(--main);
  color: var(--neutral-06);
}

/* Brand block plus two link columns, per the supplied redesign. It keeps
   the site's own container width and gutter rather than the 1440/60px the
   design file uses: the footer sits directly under sections built on a
   1200px container, and taking a wider one would step its content out of
   line with everything above it. Column ratios and gap are the design's.
   The three-column split arrives at 900px, the same breakpoint the header
   and the how-it-works row use. */
.site-footer__top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px var(--space-gutter) 56px;
  display: grid;
  /* Below the three-across breakpoint the two link columns still pair up
     rather than stacking — they hold three short links each, and stacked
     they ran the footer to 662px on a tablet. The brand block spans both,
     since the logo and address want the full width. */
  grid-template-columns: 1fr 1fr;
  gap: var(--space-loose) var(--space-gap);
}
.site-footer__brand { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .site-footer__top {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: var(--space-wide);
  }
  .site-footer__brand { grid-column: auto; }
}

@media (max-width: 639px) {
  .site-footer__top {
    padding: var(--space-block) var(--space-gutter-phone) var(--space-gap);
    gap: var(--space-gap) var(--space-row);
  }
}

.site-footer__logo {
  height: 22px;
  width: auto;
  display: block;
  margin-bottom: 20px;
}

/* Contact demoted from the 44px display mailto that used to open the
   footer to an ordinary detail under the logo, which is the point of the
   redesign. The rule underneath is the affordance now that it is no
   longer set at heading size. */
.site-footer__email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--neutral-01);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
  word-break: break-word;
  transition: border-color var(--motion-state) ease;
}
.site-footer__email:hover {
  border-bottom-color: var(--neutral-01);
}
.site-footer__email-icon {
  flex-shrink: 0;
}

.site-footer__col-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 var(--space-row) 0;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__links a {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.site-footer__links a:hover,
.site-footer__links a[aria-current="page"] {
  color: var(--neutral-01);
  text-decoration: underline;
}
/* Touch targets: these render at ~22px, so the rows get padding to reach
   the 44px floor. The gap drops to match, so the spacing between two links
   stays what it looks like rather than doubling. */
@media (max-width: 639px) {
  .site-footer__links { gap: 0; }
  .site-footer__links a { display: inline-block; padding: 11px 0; }
}

.site-footer__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-gap) var(--space-gutter) var(--space-gap);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-row);
}
@media (max-width: 639px) {
  .site-footer__bottom { padding: var(--space-gap) var(--space-gutter-phone); }
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The cookie settings control is a <button>, not a link: it opens the
   consent banner rather than navigating anywhere, so it must not look like
   a destination to a screen reader. Styled identically to its neighbours. */
.site-footer__legal-links a,
.site-footer__legal-links button {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--neutral-01);
  text-decoration: underline;
}
.site-footer__legal-links button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-underline-offset: 3px;
}
.site-footer__legal-links button:focus-visible {
  outline: 2px solid var(--neutral-01);
  outline-offset: 2px;
}

/* Touch targets — these render at 20px, being 12px text. Must come after
   the button reset above, which sets padding: 0 and would otherwise win on
   source order. The row gap drops to 0 because the padding now supplies
   the vertical separation between wrapped rows. */
@media (max-width: 639px) {
  .site-footer__legal-links { gap: 0 var(--space-gap); }
  .site-footer__legal-links a,
  .site-footer__legal-links button { padding: 15px 0; }

  /* The address is ~22px tall now that it is body text rather than the old
     display-size mailto. Padding would push its underline away from the
     words — the underline is the affordance — so the target is extended
     with an overlay instead, which leaves the visual alone. */
  .site-footer__email { position: relative; }
  .site-footer__email::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

.site-footer__copyright {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--neutral-06);
  margin: 0;
}