/* Purpose: Global footer — Figma 180:37. Navy band, brand + socials, link columns, contact addresses, bottom bar. */

.site-footer { background: var(--color-primary); color: rgba(255, 255, 255, 0.38); }

.site-footer__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(32px, 4vw, 64px); padding-block: clamp(48px, 6vw, 80px);
}

/* ---- brand column ---- */
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; flex: 0 1 352px; min-width: 0; }
.site-footer__logo {
  display: inline-block; background: #fff; border-radius: 8px; padding: 6px 10px; line-height: 0;
  width: max-content;
}
.site-footer__logo a { display: block; line-height: 0; }
.site-footer__logo img, .site-footer__logo .custom-logo { max-width: 143px; width: 100%; height: auto; display: block; }
.site-footer__about {
  font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px;
  color: rgba(255, 255, 255, 0.38); margin: 0; max-width: 351px;
}
.site-footer__socials { display: flex; align-items: center; gap: 7px; }
.site-footer__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.42);
  transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.site-footer__social svg { width: 12px; height: 12px; display: block; }
.site-footer__social:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }

/* ---- link columns ---- */
.site-footer__col { display: flex; flex-direction: column; gap: 16px; flex: 0 0 200px; }
/* .site-footer scope raises specificity to (0,2,0) so it beats the global mobile
   h2[class] rule — footer headings stay 12px (Jost SemiBold), not the section-title size. */
.site-footer .site-footer__heading {
  font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 20px;
  text-transform: uppercase; letter-spacing: 0; color: #fff; margin: 0;
}
.site-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.site-footer__menu a {
  font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px;
  color: rgba(255, 255, 255, 0.38); text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
.site-footer__menu a:hover { color: var(--color-gold-light); }

/* ---- contact column ---- */
.site-footer__contact { flex-basis: 262px; }
.site-footer__addresses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.site-footer__address {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px;
  color: rgba(255, 255, 255, 0.38);
}
.site-footer__pin { flex: 0 0 auto; width: 8px; height: 23px; color: #687484; display: block; }
.site-footer__addr-link { color: inherit; text-decoration: none; transition: color var(--duration-base) var(--ease-out); }
.site-footer__addr-link:hover { color: var(--color-gold-light); }

/* ---- bottom bar ---- */
.site-footer__bottom { border-top: 1px solid #213b5f; }
.site-footer__bottom-inner {
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 24px;
  padding-block: 24px;
}
.site-footer__copy, .site-footer__cookie {
  font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.25;
  color: rgba(255, 255, 255, 0.26); margin: 0;
}
.site-footer__cookie { text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color var(--duration-base) var(--ease-out); }
.site-footer__cookie:hover { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 1024px) {
  .site-footer__top { flex-wrap: wrap; gap: 40px; }
  .site-footer__brand { flex-basis: 100%; }
  .site-footer__col { flex: 1 1 180px; }
}
@media (max-width: 640px) {
  /* Link/contact columns sit two-per-row instead of one long stack */
  .site-footer__col { flex: 1 1 42%; min-width: 140px; }
  .site-footer__contact { flex-basis: 100%; }
}
@media (max-width: 420px) {
  /* Keep SHOP + QUICK LINK two-up (Figma mobile); contact stays full-width via the 640px rule. */
  .site-footer__col { min-width: 120px; }
  .site-footer__bottom-inner { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; }
}