/* ---------------------------------------------------------------------------
   Footer — centered "Supported by" + divider + supporter badge, then a
   left-aligned row with the ILS mark, the legal line and policy links.
   --------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-page);
  padding-block: var(--space-9);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.site-footer__supporter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

/* Per direct request: "Supported by" reads left-aligned on tablet/mobile
   rather than centered; the block itself stays centered (align-items above
   is untouched), and desktop keeps the approved centered text. */
@media (max-width: 1024px) {
  .site-footer__supporter { text-align: left; }
}

/* Treated as a regular section title per direct request — same weight
   and size as the others, not the shared --type-section-title-weight/
   -size tokens (Light/48px). Measured directly on the live site: Regular
   (400), 72px from 768px up, same as "Corporate Partners" etc. */
.site-footer__supporter-label {
  margin: 0;
  font-family: var(--type-section-title-family);
  font-weight: var(--fw-regular);
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-lh);
  letter-spacing: var(--type-section-title-tracking);
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .site-footer__supporter-label { font-size: 72px; }
}

.site-footer__supporter img { width: auto; height: 225px; }

/* Measured on the live site: the mark and the address/links sit in one
   stacked column all the way through tablet, and only become a genuine
   side-by-side row at 1024-1100px (confirmed stacked at 1024px, side by
   side at 1100px) — well past the site's usual 768px tablet cutoff. */
/* Gap between the logo and the legal text/links below it. The live site's
   own box-to-box gap here measures a mere 10px — but its logo image has
   ~22% of transparent padding baked into its bottom edge (confirmed by
   sampling the PNG's actual pixel content), so the true *visual* gap
   below the visible logo mark is closer to 85px. Our SVG has no such
   padding, so it needs that real distance set explicitly to look the
   same. */
.site-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 85px;
}

/* align-self: center — measured on the live site: while stacked, the
   logo is horizontally centered (text-align: center on its own column),
   while the legal text/links below it stay left-aligned. Not a shared
   align-items on the parent, since the two rows need different
   alignment — set per-item instead.

   Width: 95% matched the live site's own footprint closely; scaled down
   20% per direct request (95% -> 76%).

   The class now sits on the wrapping <a> (the logo links home on the
   live site), not the <img> — display:block so width/align-self behave
   as they did when the class was on the image directly, with the image
   itself just filling that box. */
.site-footer__logo { display: block; width: 76%; align-self: center; }
.site-footer__logo img { display: block; width: 100%; height: auto; }

.site-footer__legal-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* align-items: center, not flex-start — measured on the live site: the
   text block sits vertically centered against the taller logo (62px down
   from the logo's own top, matching (205-82)/2 for their measured
   heights), not pinned to its top edge. */
@media (min-width: 1025px) {
  .site-footer__legal { flex-direction: row; align-items: center; gap: var(--space-5); }
  .site-footer__logo { width: 400px; flex-shrink: 0; }
}

/* Color measured at rgb(28,28,28) on the live site — --text-primary, not
   the greyed-out --text-secondary this had before. */
.site-footer__legal p {
  max-width: 90ch;
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--text-primary);
}

.site-footer__legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* Measured on the live site: a dark navy (#08073B) Bold, not the shared
   --text-link red or Semibold. */
.site-footer__legal nav a {
  font-family: var(--type-caption-family);
  font-weight: var(--fw-bold);
  font-size: var(--type-caption-size);
  color: #08073b;
}

/* Mobile only, per direct request/screenshot. The live site's mobile
   footer is actually one legacy text widget (address, then a <br>, then
   the three links run together as inline text with literal " – "
   separators) rather than our block-level p + nav — reproduced here by
   dropping the nav's flex/gap so the links and separators wrap as plain
   inline text instead of big-gapped flex items, matching the address
   text's own line-wrapping. Sizes also measured directly at 375px: the
   address paragraph is 16px (not the shared 12px --type-caption-size),
   while the links themselves are a smaller 10px — a real, if unusual,
   legacy-markup detail confirmed against the live DOM's inline styles. */
@media (max-width: 767px) {
  .site-footer__legal p { font-size: 16px; }

  .site-footer__legal nav {
    display: inline;
    gap: 0;
  }

  .site-footer__legal nav a,
  .site-footer__legal nav span {
    font-size: 10px;
  }

  .site-footer__legal nav a { text-decoration: none; }
}