/* ============================================================
   SWISS CLUSTER FOOTER — component styles
   Framework-free. Scoped under .sc-footer so it won't collide
   with the rest of your project.
   Theming: override the CSS variables on .sc-footer.

   The dark bar is full-bleed (matches the parent width), but its
   inner content is constrained to a centred max-width so the
   logo and nav columns line up with the page content above
   (sections / cards typically capped at ~1680px with 60px sides).
   Override --sc-footer-max / --sc-footer-pad-x to re-theme.
   ============================================================ */

.sc-footer {
  /* ---- design tokens (match menu component) ---- */
  --sc-bar-bg: var(--sc-ink);
  --sc-text-light: var(--sc-white);
  --sc-text-muted: #9a9a9a;
  --sc-font: var(--sc-font-sans);

  /* ---- content alignment (match the sections above) ---- */
  --sc-footer-max: 1680px;
  --sc-footer-pad-x: 60px;
  --sc-footer-pad-y: 40px 30px; /* top / bottom */

  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--sc-font);
  background: var(--sc-bar-bg); /* full-bleed dark background */
  color: var(--sc-text-light);
  -webkit-font-smoothing: antialiased;
}

.sc-footer *,
.sc-footer *::before,
.sc-footer *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* the inner bar is centred and constrained so its content lines up
   with the page content above (sections etc.) */
.sc-footer__bar {
  max-width: var(--sc-footer-max);
  margin: 0 auto;
  padding: var(--sc-footer-pad-y) var(--sc-footer-pad-x);
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

/* ---------- TOP ROW: brand + nav columns ---------- */
.sc-footer__top {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  flex-wrap: wrap;
}

.sc-footer__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  padding-top: 4px;
}

.sc-footer__logo {
  height: 40px;
  width: auto;
  display: block;
  /* render the SVG white regardless of its source fill colour */
  filter: brightness(0) invert(1);
}

.sc-footer__wordmark {
  color: var(--sc-text-light);
  font-size: 28px;
  font-weight: var(--sc-weight-semibold);
  letter-spacing: -0.2px;
  line-height: 1;
  white-space: nowrap;
}

.sc-footer__nav {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: flex-end; /* nav links sit at the right edge */
}

.sc-footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 140px;
}

.sc-footer__title {
  color: var(--sc-text-light);
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-weight-bold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.sc-footer__link {
  color: var(--sc-text-light);
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-weight-regular);
  text-decoration: none;
  line-height: 1.4;
}

.sc-footer__link:hover {
  text-decoration: underline;
}

/* ---------- BOTTOM ROW: copyright + legal links ---------- */
.sc-footer__bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 80px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12); /* hairline divider */
}

.sc-footer__copyright {
  color: var(--sc-text-muted);
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-weight-regular);
  line-height: 1.4;
}

.sc-footer__legal-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.sc-footer__legal {
  color: var(--sc-text-light);
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-weight-regular);
  text-decoration: none;
}

.sc-footer__legal:hover {
  text-decoration: underline;
}

/* ---------- RESPONSIVE ----------
   Match the page's section breakpoints so the footer content
   stays aligned with the cards above at every width. */
@media (max-width: 1100px) {
  .sc-footer {
    --sc-footer-pad-x: 48px;
  }
}

@media (max-width: 800px) {
  .sc-footer {
    --sc-footer-pad-x: 24px;
    --sc-footer-pad-y: 30px 24px;
  }
  .sc-footer__top {
    gap: 30px;
  }
  .sc-footer__nav {
    gap: 30px;
    justify-content: flex-start; /* on narrow screens, nav stacks left */
  }
  .sc-footer__col {
    min-width: 0;
    flex: 1 1 140px;
  }
  .sc-footer__bottom {
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
  }
  .sc-footer__legal-links {
    gap: 20px;
  }
}