/* ============================================================
   Task #1585684: Footer layout — even spread, Stripe-level spacing

   BEFORE: Columns bunched together with tight/insufficient gaps
   AFTER:  Columns evenly spread across full footer width at all sizes
   ============================================================ */

/* ── Task #1585684: Force .fn-columns to space-between across full width ── */
.fn-footer .fn-columns,
.fn-inner > .fn-columns {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: clamp(40px, 5vw, 56px) !important;
  justify-content: space-between !important;
  align-items: start !important;
  width: 100% !important;
  margin-bottom: 48px !important;
  box-sizing: border-box !important;
}

/* ── Task #1585684: fn-inner container: remove max-width cap so grid can spread ── */
.fn-footer .fn-inner {
  max-width: 1440px !important;
  /* Keep padding for breathing room, grid handles the spread */
  padding: 0 clamp(24px, 5vw, 48px) !important;
}

/* ── Task #1585684: Footer bottom row — center with even spacing ── */
.fn-footer .fn-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  padding: 32px 0 40px !important;
  border-top: 1px solid #E5E7EB !important;
}

/* ── Task #1585684: Column titles — uppercase, even visual weight ── */
.fn-footer .fn-col-title {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #E5E7EB !important;
  color: #0A0A0A !important;
}

/* ── Task #1585684: Column links — consistent spacing & size ── */
.fn-footer .fn-col-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.fn-footer .fn-col-links a {
  font-size: 0.875rem !important;
  color: #4B5563 !important;
  text-decoration: none !important;
  padding: 3px 0 !important;
  line-height: 1.5 !important;
  transition: color 0.15s ease !important;
}
.fn-footer .fn-col-links a:hover {
  color: #00875A !important;
}
.fn-footer .fn-col-links a.fn-link--featured {
  color: #047857 !important;
  font-weight: 600 !important;
}

/* ── Task #1585684: Trust section — even horizontal distribution ── */
.fn-footer .fn-trust-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.3rem 1.2rem !important;
  text-align: center !important;
}

/* ── Task #1585684: Desktop (1280px+) — full 6-column spread ── */
@media (min-width: 1280px) {
  .fn-footer .fn-columns {
    gap: 56px !important;
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* ── Task #1585684: Tablet (640px–1023px) — 3-column evenly spaced ── */
@media (min-width: 640px) and (max-width: 1023px) {
  .fn-footer .fn-columns {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px 40px !important;
    justify-content: space-between !important;
  }
}

/* ── Task #1585684: Mobile (below 640px) — clean vertical stacking ── */
@media (max-width: 639px) {
  .fn-footer .fn-columns {
    display: none !important;
  }
  .fn-footer .fn-mobile-accordion {
    display: block !important;
    border-bottom: 1px solid #E5E7EB !important;
  }
  .fn-footer .fn-mobile-accordion summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 0 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #0A0A0A !important;
    cursor: pointer !important;
    list-style: none !important;
    min-height: 48px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
  .fn-footer .fn-mobile-accordion-links {
    padding: 8px 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .fn-footer .fn-mobile-accordion-links a {
    font-size: 0.9rem !important;
    color: #1F2A37 !important;
    padding: 8px 0 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  .fn-footer .fn-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 24px 0 !important;
  }
  /* Show mobile accordions on small screens */
  .fn-footer .fn-mobile-accordions {
    display: block !important;
  }
}