/* =====================================================================
   Site footer — D/M EU Footer (Figma 10159:15355 / 10159:15354)
   ===================================================================== */

/* ---- Desktop ---- */
/* Mobile-first: desktop footer hidden until >=768 (toggle lives at file end).
   flex-direction/gap/padding stay declared here and activate when shown. */
.site-footer__desktop {
  background: var(--color-footer-bg);
  padding-top: 100px;
  display: none;
  flex-direction: column;
  gap: 80px;
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-badges { display: flex; gap: 20px; align-items: flex-start; }
.app-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 10px 20px;
  background: var(--gray-8);
  border-radius: var(--radius-8);
  overflow: hidden;
}
.app-badge--apple  { width: 156px; }
.app-badge--google { width: 151px; }
.app-badge img { height: 30px; width: auto; }

.site-footer__nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.footer-cols { display: flex; flex-wrap: wrap; gap: 32px clamp(28px, 3vw, 56px); align-items: flex-start; }
.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-col__heading { font-weight: var(--fw-bold); font-size: var(--fs-16); color: var(--gray-8); }
.footer-col a,
.footer-col__label {
  font-size: var(--fs-16);
  color: var(--color-text-muted);
  /* No forced nowrap: at the 1440 frame these stay single-line (ample room),
     but longer fr/it/de labels (e.g. "Échanger avec GOLD AVENUE",
     "Einlösen mit GOLD AVENUE") may wrap gracefully at 768-1240 widths
     instead of overflowing past the 252px "Part Of" card. */
}
.footer-col a:hover { color: var(--charcoal); }

/* Social row */
.social { display: flex; gap: 20px; align-items: flex-start; }
.social__icon { position: relative; display: block; width: 30px; height: 30px; overflow: hidden; }
.social__icon .p { position: absolute; }
.social__icon .p img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ico-fb-c { inset: 0 0 0.37% 0; }
.ico-fb-d { inset: 18.51% 26.8% 0 27.61%; }
.ico-x    { inset: 7.93% 4.17% 9.21% 4.17%; }
.ico-ig   { inset: 0; } /* Instagram glyph authored at the full 30x30 box */
.ico-yt-1 { inset: 14.77% -0.1% 14.77% 0.1%; }
.ico-yt-2 { inset: 35.13% 33.99% 35.13% 39.87%; }

/* "OneGold is Part of" card */
.part-of {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px 30px;
  padding: 20px;
  width: 252px;
  flex: none;          /* Figma shrink-0: never compress the 252px card */
  /* Inset shadow instead of border so the 1px stroke doesn't shrink the
     content box below 212px (which would wrap the two partner logos). */
  box-shadow: inset 0 0 0 1px var(--color-border-soft);
  border-radius: var(--radius-20);
}
.part-of__heading {
  flex: 0 0 100%;     /* own row; logos sit side-by-side beneath */
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--gray-8);
  text-align: center;
}
.part-of__mpg { width: 93px; height: 90px; flex: none; }
.part-of__mpg a { display: block; width: 100%; height: 100%; }
.part-of__mpg img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
/* .part-of__bullion is an <a> (links to bullioninternationalgroup.com); block so its w/h apply */
.part-of__bullion { display: block; position: relative; width: 89px; height: 90px; flex: none; overflow: hidden; }
.part-of__bullion .p { position: absolute; }
.part-of__bullion .p img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* clickable-logo affordance */
.part-of__mpg a, .part-of__bullion { transition: opacity 0.15s ease; }
.part-of__mpg a:hover, .part-of__bullion:hover { opacity: 0.85; }
.bull-1 { inset: 50.98% 23.36% 36.75% 23.35%; }
.bull-2 { inset: 67.66% 0 20.07% 0; }
.bull-3 { inset: 84.38% 25.12% 0 25.12%; }
.bull-4 { inset: 0 35.69% 54.81% 35.69%; }

/* Bottom bar */
.site-footer__bottom { background: var(--color-footer-dark); }
.site-footer__bottom .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-block: 16px;
}
/* Regulatory/risk disclaimer — small muted text above the copyright row. */
.legal-disclaimer {
  margin: 0;
  width: 100%;
  max-width: 1100px;
  font-size: var(--fs-12);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}
.legal { display: flex; align-items: center; gap: 40px; }
.legal span, .legal a { font-size: var(--fs-14); color: var(--gray-0); white-space: nowrap; }
.legal a:hover { color: var(--gray-3); }

/* ---- Mobile ---- */
.site-footer__mobile {
  background: var(--color-footer-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-top: 40px;
}
.footer-m-apps { display: flex; gap: 20px; }
.footer-m-nav {
  align-self: stretch;
  width: 100%;
  padding-inline: var(--pad-mobile);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-m-nav a {
  font-size: var(--fs-14);
  color: var(--color-text-muted);
}
.part-of--mobile {
  align-self: stretch;
  width: auto;
  margin-inline: var(--pad-mobile);
}
.site-footer__mobile .site-footer__bottom-m {
  align-self: stretch;
  width: 100%;
  background: var(--color-footer-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: 20px 15px;
}
.site-footer__bottom-m span,
.site-footer__bottom-m a {
  font-size: var(--fs-14);
  color: var(--gray-0);
  white-space: nowrap;
}

/* ---- Tablet (768–1023): compress desktop footer layout ---- */
@media (max-width: 1023.98px) {
  .site-footer__desktop {
    padding-top: 64px;
    gap: 48px;
  }
  /* Stack the top bar (logo + badges) vertically */
  .site-footer__top {
    flex-wrap: wrap;
    gap: 24px;
  }
  /* Nav + part-of: allow wrapping */
  .site-footer__nav {
    flex-wrap: wrap;
    gap: 32px;
  }
  /* Footer link columns: let them wrap to ~2-col rhythm */
  .footer-cols {
    gap: 24px clamp(20px, 2.5vw, 40px);
  }
  .footer-col {
    min-width: 140px;
  }
}

/* ---- Responsive toggle (authoritative — overrides .is-* utilities) ---- */
@media (min-width: 768px) {
  .site-footer__desktop { display: flex; }
  .site-footer__mobile  { display: none; }
}