/* ==========================================================================
   Footer — accreditor strip · sitemap · social · legal/compliance links
   A11Y: <footer> landmark with nav groups labelled via aria-labelledby;
   external links carry rel="noopener noreferrer" (set in markup).
   ========================================================================== */
.site-footer {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
}

/* Accreditation band sits at the top of the footer on a darker navy. */
.site-footer__accred {
  background: var(--color-navy-900);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  padding-block: var(--space-4);
}

/* Real accreditor logos on white "plates" — a unified treatment that works on
   both the light home band and this dark footer despite the logos' mixed
   backgrounds. Defined here (global) because the footer uses it on every page. */
.accreditor-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-2) var(--space-3);
}
.accreditor-logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 84px; min-width: 160px; padding: 0.85rem 1.4rem;
  background: #ffffff; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.accreditor-logo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.accreditor-logo img { max-height: 48px; max-width: 168px; width: auto; object-fit: contain; }
.accreditor-caption {
  width: 100%; text-align: center; margin-top: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal);
  max-width: 90ch; margin-inline: auto;
}
.accreditor-caption a { color: var(--color-accent-hover); }
.site-footer__accred .accreditor-caption { color: var(--color-text-on-dark-muted); }
.site-footer__accred .accreditor-caption a { color: #fff; }
.accred-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
}
.accred-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-on-dark);
  text-decoration: none;
  max-width: 30ch;
}
.accred-item__mark {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--color-primary);
  font-family: var(--font-headline);
  font-weight: var(--weight-bold);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.accred-item__text { font-size: var(--text-xs); line-height: 1.4; color: var(--color-text-on-dark-muted); }
.accred-item__text strong { display: block; color: #ffffff; font-size: var(--text-sm); }
.accred-item:hover .accred-item__text strong { text-decoration: underline; }

/* Main footer columns -------------------------------------------------- */
.site-footer__main { padding-block: var(--space-8); }
.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.footer-brand__logo { height: 38px; width: auto; margin-bottom: var(--space-2); }
.footer-brand p { color: var(--color-text-on-dark-muted); font-size: var(--text-sm); max-width: 34ch; }
.footer-contact { margin-top: var(--space-3); display: grid; gap: var(--space-1); }
.footer-contact a, .footer-contact span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--color-text-on-dark); text-decoration: none; font-size: var(--text-sm);
}
.footer-contact a:hover { color: #ffffff; text-decoration: underline; }
.footer-contact .icon { color: var(--color-accent); flex-shrink: 0; }

.footer-col__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--space-2);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-col a {
  color: var(--color-text-on-dark-muted);
  text-decoration: none;
  font-size: var(--text-sm);
}
.footer-col a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 0.2em; }

/* Social row ----------------------------------------------------------- */
.footer-social { display: flex; gap: var(--space-1); margin-top: var(--space-3); }
.footer-social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 0.06);
  color: #ffffff;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.footer-social a:hover { background: var(--color-accent); }

/* Legal / compliance bar ---------------------------------------------- */
.site-footer__legal {
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding-block: var(--space-4);
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}
.legal-links a {
  color: var(--color-text-on-dark-muted);
  font-size: var(--text-xs);
  text-decoration: none;
}
.legal-links a:hover { color: #ffffff; text-decoration: underline; }
/* "Do Not Sell or Share" gets a subtle privacy glyph so it's easy to find. */
.legal-links .do-not-sell { display: inline-flex; align-items: center; gap: 0.3rem; }

.footer-fineprint {
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
  line-height: var(--leading-normal);
  max-width: 100ch;
}
.footer-fineprint p + p { margin-top: var(--space-1); }
/* A11Y: links in the fine print sit on navy — accent blue (#2172c1) is only
   3.25:1 there, so use white + underline (12.6:1) to clear WCAG AA. */
.footer-fineprint a { color: #ffffff; text-decoration: underline; text-underline-offset: 0.15em; }
.footer-fineprint a:hover { text-decoration-thickness: 2px; }