/*
 * Section: Site footer.
 * Reference: Figma 1:3789 (desktop, 1440×104) / 1:4322 (mobile).
 *
 * Single horizontal row: logo on the left, copyright on the right.
 * Mobile centres both items and stacks them in a column.
 *
 * The footer is fully transparent — different pages will have
 * different surfaces under it (Success Stories blue-50, Blog white,
 * etc.). Instead of giving the footer its own background, we extend
 * the LAST section on the page by `--footer-height` and pull the
 * footer up by the same amount with a negative margin. The footer
 * then visually sits inside the closing section's surface, no matter
 * what colour or gradient that section uses. No seam, no per-page
 * footer styling.
 */

:root {
  --footer-height: 104px;
}

@media (max-width: 640px) {
  :root {
    /* Mobile footer height (Figma 1:4322): 32 pt + 28 logo + 32 gap +
       14 copy + 56 pb ≈ 162. */
    --footer-height: 162px;
  }
}

/* Extend the last on-page section so its bg/gradient paints through
   the footer area. Overrides whatever bottom padding that section
   had in isolation; the footer overlays the bottom `--footer-height`
   slice via the negative margin below, so the visible gap between
   the section's last content (e.g. the closing CTA button) and the
   footer top equals (padding-bottom - footer-height).

   Values matched to the Figma close on Success Stories: 146px gap
   on desktop (1:3419: button y=498 → footer y=644), 100px on mobile
   (1:4501: button y=406 → footer y=506). */
.site-main > section:last-of-type,
.site-main > article:last-of-type,
.site-main > .post-content:last-of-type {
  padding-bottom: calc(146px + var(--footer-height));
}

@media (max-width: 960px) {
  .site-main > section:last-of-type,
  .site-main > article:last-of-type,
  .site-main > .post-content:last-of-type {
    padding-bottom: calc(120px + var(--footer-height));
  }
}

@media (max-width: 640px) {
  .site-main > section:last-of-type,
  .site-main > article:last-of-type,
  .site-main > .post-content:last-of-type {
    padding-bottom: calc(100px + var(--footer-height));
  }
}

.site-footer {
  width: 100%;
  position: relative;
  background: transparent;
  /* Pull up by the footer's own height so it overlays the last
     section's extended bottom padding, sitting on the section bg. */
  margin-top: calc(-1 * var(--footer-height));
  z-index: 1;
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 40px 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------- *
 * Logo
 * ---------------------------------------------------------------- */

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-text-950);
  flex-shrink: 0;
}

.site-footer__logo:hover,
.site-footer__logo:focus-visible {
  outline: none;
  opacity: 0.85;
}

.site-footer__logo-img {
  display: block;
  height: 24px;
  width: auto;
}

/* Text wordmark fallback — same family/style as the header default. */
.site-footer__logo-text {
  font-family: var(--font-accent);
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  color: var(--color-text-950);
}

/* ---------------------------------------------------------------- *
 * Copyright
 * ---------------------------------------------------------------- */

.site-footer__copy {
  margin: 0;
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: var(--color-text-800);
  white-space: nowrap;
}

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

@media (max-width: 1280px) {
  .site-footer__inner {
    padding: 40px var(--space-2xl);
  }
  .site-footer__rails {
    padding-inline: var(--space-2xl);
  }
}

@media (max-width: 960px) {
  .site-footer__inner {
    padding: 32px var(--space-xl);
  }
  .site-footer__rails {
    padding-inline: 0;
    justify-content: center;
  }
  /* Mobile: only the centre rail, mirroring .home-decor / .page-rails. */
  .site-footer__rail:first-child,
  .site-footer__rail:last-child {
    display: none;
  }
}

@media (max-width: 640px) {
  /* Mobile (Figma 1:4322): logo + copyright stacked, gap 32, padding
     32 top / 56 bottom / 20 sides. Logo grows to 126×28, copy is
     14px Jonova. */
  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 32px 20px 56px;
    text-align: center;
  }
  .site-footer__logo-img,
  .site-footer__logo-text {
    height: 28px;
  }
  .site-footer__copy {
    font-size: 14px;
    line-height: 14px;
    white-space: normal;
  }
}