/*
 * Homepage footer — Figma "Website" file, node 4307:2737 (desktop 1440) and
 * 4313:68 (mobile 393).
 *
 * Two rows on a black ground: the wordmark with the site links (and LinkedIn),
 * then a hairline and the legal row. This file owns the new client-facing
 * footer (`.site-footer`). The FAQs, clinical-validation, privacy and terms
 * pages still use the previous video footer from footer.css until they are
 * redesigned — do not link both on one page.
 *
 * Units: rem, like the rest of the site (1rem = 1px at the design widths, see
 * the <style> block in index.html). The row box is a plain .container so its
 * edges line up with the header and hero (layout.css owns --container-max).
 * Breakpoint 992px matches the header: below it the links stack in a column.
 *
 * Fonts: Inter throughout, as in Figma — no display type in the footer.
 */

.site-footer {
  --footer-bg: #000;
  --footer-fg: #fff;
  --footer-link: #ccc;
  --footer-muted: #888;
  --footer-rule: #222;

  position: relative;
  background-color: var(--footer-bg);
  color: var(--footer-fg);
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow `a` / `h1` element rules. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
}

/* Top row: wordmark left, links right, both centred on the row */
.site-footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32rem;
  padding: 24rem 0;
}

/* Brand — the wordmark is drawn with currentColor, same path as the header */
.site-footer-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 28rem;
  padding: 0;
  color: var(--footer-fg);
}

.site-footer-brand:hover {
  color: var(--footer-fg);
}

.site-footer-logo {
  display: block;
  height: 28rem;
  width: auto;
}

.site-footer-nav {
  display: flex;
  align-items: flex-end;
  gap: 8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma "Label/M": 14/18 medium, -0.14px tracking, 8x12 padding */
.site-footer-link {
  display: block;
  padding: 8rem 12rem;
  font-size: 14rem;
  line-height: 18rem;
  font-weight: 500;
  letter-spacing: -0.14rem;
  white-space: nowrap;
  color: var(--footer-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer-link:hover {
  color: var(--footer-fg);
  text-decoration: underline;
  text-underline-offset: 4rem;
}

.site-footer-link:focus-visible,
.site-footer-legal-link:focus-visible,
.site-footer-social:focus-visible {
  outline: 2px solid var(--footer-fg);
  outline-offset: 2px;
  border-radius: 2px;
}

/* LinkedIn — 20px glyph, only a left gap separates it from the last link */
.site-footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 0 8rem 8rem;
  color: #f5f5f5;
  transition: color 0.2s ease;
}

.site-footer-social:hover {
  color: var(--footer-fg);
}

.site-footer-social svg {
  display: block;
  width: 20rem;
  height: 20rem;
}

/* Bottom row: legal links left, copyright right, above a mono/800 hairline */
.site-footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
  padding: 16rem 0;
  border-top: 1px solid var(--footer-rule);
}

.site-footer-legal-links {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma "Label/S": 12/16 medium, -0.12px tracking */
.site-footer-legal-link,
.site-footer-copyright {
  font-size: 12rem;
  line-height: 16rem;
  font-weight: 500;
  letter-spacing: -0.12rem;
  white-space: nowrap;
  color: var(--footer-muted);
}

.site-footer-legal-link {
  display: block;
  padding: 8rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* The first legal link sits flush with the wordmark above it */
.site-footer-legal-links li:first-child .site-footer-legal-link {
  padding-left: 0;
}

.site-footer-legal-link:hover {
  color: var(--footer-link);
  text-decoration: underline;
  text-underline-offset: 3rem;
}

.site-footer-copyright {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* < 992px: wordmark above a single column of links (Figma mobile 393)   */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .site-footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 24rem;
    padding: 40rem 0 24rem;
  }

  .site-footer-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer-link {
    padding: 8rem 12rem 8rem 0;
  }

  .site-footer-social {
    padding: 8rem 0;
  }
}

/* < 768px: the column is full-bleed (layout.css), so the gutter is ours */
@media screen and (max-width: 767px) {
  .site-footer {
    padding: 0 24rem;
  }
}