/* ======================================================================
   THE FOOT — its own sheet, because it is the one block every page on the
   site shares, the redesigned ones and the handful still on the old
   template. It leans on no variable it does not also carry itself.

   It is a light band: white ground, dark blue type. The mark stands alone
   on the first line, the columns run the full measure beneath it, a dotted
   rule closes the content, and the legal line and the two accounts sit on
   one last quiet row.
   ====================================================================== */
.sa-foot {
  --sa-foot-font: "Aptos", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --sa-foot-ink: #101B37;          /* the one dark blue */
  --sa-foot-blue: #4E72B7;
  --sa-foot-t: 12px;               /* the links and the column heads */
  --sa-foot-s: 11px;               /* the legal line and the eyebrows */
  position: relative;
  background-color: #FFFFFF;
  background-image: none;
  color: var(--sa-foot-ink);
  font-family: var(--sa-font, var(--sa-foot-font));
}

/* ---- the mark, alone on its line ---------------------------------- */
.sa-foot-mark { display: block; padding: 0; width: max-content; }
/* the mark keeps its own dark ground and white letters, the same lockup the
   bar at the top of the page carries, so the two read as one thing */
.sa-foot-mark img {
  display: block;
  width: auto;
  height: 38px;
  border-radius: 0;
}

/* ---- the columns -------------------------------------------------- */
.sa-foot-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 48px);
  margin-top: clamp(34px, 4.6vw, 66px);
}
.sa-foot-grp { min-width: 0; }
.sa-foot-bh {
  margin: 0 0 14px;
  font-size: var(--sa-foot-t);
  line-height: 1.4;
  font-weight: 600;
  color: var(--sa-foot-ink);
}
.sa-foot-list { margin: 0; padding: 0; list-style: none; }
/* the row is the size of its own text; the space between items is the
   margin alone, not a line-height inherited from the page body */
.sa-foot-list li {
  margin: 0 0 9px;
  padding: 0;
  font-size: var(--sa-foot-t);
  line-height: 1.45;
}
.sa-foot-list li:last-child { margin-bottom: 0; }
.sa-foot-a {
  display: inline-block;
  font-size: var(--sa-foot-t);
  line-height: 1.45;
  font-weight: 400;
  color: rgba(16, 27, 55, .72);
  text-decoration: none;
  transition: color .18s ease;
}
.sa-foot-a:hover,
.sa-foot-a:focus-visible { color: var(--sa-foot-ink); }
.sa-foot-a:focus-visible { outline: 2px solid var(--sa-foot-blue); outline-offset: 3px; }
.sa-foot-a.is-more {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 500;
  color: var(--sa-foot-blue);
}
.sa-foot-a.is-more:hover { color: var(--sa-foot-ink); }

/* ---- what we are certified for, as the fourth column -------------- */
.sa-foot-isos { margin: 0; padding: 0; list-style: none; }
.sa-foot-iso {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 0;
}
.sa-foot-iso:last-child { margin-bottom: 0; }
.sa-foot-iso-img { flex: none; width: auto; height: 42px; }   /* 30 % larger than the 32 px they were */
.sa-foot-iso-body { display: flex; flex-direction: column; gap: 1px; }
.sa-foot-iso-code {
  font-size: var(--sa-foot-t); line-height: 1.3; font-weight: 600;
  color: var(--sa-foot-ink);
}
.sa-foot-iso-desc {
  font-size: var(--sa-foot-s); line-height: 1.3;
  color: rgba(16, 27, 55, .62);
}

/* ---- who co-funds the work, kept to the right --------------------- */
.sa-foot-eufund {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 16px; flex-wrap: wrap;
  margin-top: clamp(26px, 3.2vw, 44px);
}
/* The three marks belong on one line. Left to wrap they stacked and the
   label floated beside the stack, which read as three separate logos
   rather than one funding credit. */
.sa-foot-eufund-list {
  display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap;
  gap: 16px; margin: 0; padding: 0; list-style: none;
}
.sa-foot-eufund-list li { flex: none; margin: 0; padding: 0; }
.sa-foot-eufund-img { display: block; width: auto; height: 34px; }

.sa-foot-eyebrow {
  margin: 0;
  font-size: var(--sa-foot-s);
  line-height: 1.3;
  font-weight: 600;
  color: rgba(16, 27, 55, .66);
}

/* ---- the rule: dots, not a line ----------------------------------- */
.sa-foot-rule {
  height: 1px;
  margin-top: clamp(24px, 3vw, 40px);
  background-image: radial-gradient(circle, rgba(16, 27, 55, .34) .9px, transparent 1px);
  background-size: 7px 1px;
  background-repeat: repeat-x;
}

/* ---- the last quiet row ------------------------------------------- */
.sa-foot-base {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px clamp(20px, 3vw, 48px); flex-wrap: wrap;
  margin-top: clamp(16px, 2vw, 26px);
}
.sa-foot-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.sa-foot-credit,
.sa-foot-place {
  margin: 0;
  font-size: var(--sa-foot-s);
  line-height: 1.5;
  color: rgba(16, 27, 55, .66);
}
.sa-foot-connect { display: flex; align-items: center; gap: 10px; }
.sa-foot-social {
  display: flex; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.sa-foot-social li { margin: 0; padding: 0; }
.sa-foot-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  color: var(--sa-foot-ink);
  background: rgba(16, 27, 55, .07);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.sa-foot-ic svg { display: block; }
.sa-foot-ic:hover,
.sa-foot-ic:focus-visible {
  color: #fff;
  background: var(--sa-foot-blue);
  transform: translateY(-1px);
}
.sa-foot-ic:focus-visible { outline: 2px solid var(--sa-foot-blue); outline-offset: 2px; }

/* ---- narrower --------------------------------------------------- */
@media (max-width: 900px) {
  .sa-foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .sa-foot-eufund { justify-content: flex-start; }
  .sa-foot-eufund-list { flex-wrap: wrap; gap: 12px 16px; }
}
@media (max-width: 600px) {
  .sa-foot-eufund-img { height: 28px; }
}
@media (max-width: 520px) {
  .sa-foot-nav { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sa-foot-base { align-items: flex-start; flex-direction: column; }
}

/* A legacy rule hid anything called a foot column. The groups are named
   sa-foot-grp so that rule can never reach them; this keeps them visible
   even where the old sheet still loads. */
.sa-foot .sa-foot-grp { display: block; }

/* The old sheet still ships rules for a footer that no longer exists, and
   two of them are traps: one hides .sa-foot-cert and .sa-foot-fund-list
   outright, another stands the funding marks in a column. Every block here
   is named so none of those selectors can reach it — the classes above are
   sa-foot-iso* and sa-foot-eufund*, which the old sheet has never heard of.
   The alternative, out-shouting it rule by rule, only works while the load
   order holds. */

/* ---- the three facts that used to sit under the hero headline -------- */
.sa-foot-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  margin: 0; padding: 0; list-style: none;
  font-size: var(--sa-foot-s); font-weight: 300; line-height: 1.5;
  color: rgba(16, 27, 55, .66);
}
.sa-foot-trust li { display: inline-flex; align-items: center; gap: 16px; margin: 0; padding: 0; }
.sa-foot-trust li + li::before { content: ""; width: 3px; height: 3px; background: #4E72B7; }
.sa-foot-legal .sa-foot-trust { flex-basis: 100%; }
/* the facts lead the EU-funding row, on its left, in bold */
.sa-foot-eufund .sa-foot-trust { margin-right: auto; font-weight: 600; color: #101B37; }
.sa-foot-eufund .sa-foot-trust li + li::before { width: 4px; height: 4px; }
@media (max-width: 900px) { .sa-foot-eufund .sa-foot-trust { flex-basis: 100%; margin-bottom: 8px; } }

/* icon licence credit for the explainer films (coolicons CC BY 4.0 requires attribution) */
.sa-foot-icons { flex-basis: 100%; margin: 12px 0 16px; font-family: var(--sa-foot-font); font-size: 6px; font-weight: 300; line-height: 1.4; color: var(--sa-foot-ink); opacity: .6; }
.sa-foot-icons.sa-rvl, .sa-foot-icons.sa-rvl-wait { opacity: .6 !important; transform: none !important; }