/* ==========================================================================
   Formium Alliance — Responsive fixes (foldables, dual-screen, tablets, phones)
   Loaded on every page after the base styles. Scoped narrowly; no !important
   unless the framework's utility classes force it.
   ========================================================================== */

/* ---------- Footer ---------- */
footer .main-container > .grid:first-of-type {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 40px 24px !important;
  padding-top: 56px;
  padding-bottom: 40px;
}
footer .main-container > .grid:first-of-type > div {
  grid-column: auto !important;
  min-width: 0;
}
/* brand takes the whole first row until there is room beside the links */
footer .main-container > .grid:first-of-type > div:first-child { grid-column: 1 / -1 !important; }

footer .main-container > .grid:first-of-type p {
  font-size: clamp(15px, 1.5vw, 18px) !important;
  line-height: 1.25 !important;
  margin: 0 0 14px;
  overflow-wrap: anywhere;
}
footer .main-container > .grid:first-of-type ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
footer .main-container > .grid:first-of-type ul > li { margin: 0 !important; }
footer .footer-link { display: inline-flex; align-items: center; min-height: 36px !important; padding: 0; overflow-wrap: break-word; }

/* 3 link columns when there is room (large phones, Fold cover, small tablets) */
@media (min-width: 560px) {
  footer .main-container > .grid:first-of-type { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* all five groups on one row from unfolded-foldable width upward */
@media (min-width: 760px) {
  footer .main-container > .grid:first-of-type { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 44px 24px !important; }
  footer .main-container > .grid:first-of-type > div:first-child { grid-column: 1 / -1 !important; }
}
/* brand beside the 5 columns only on genuinely wide screens */
@media (min-width: 1180px) {
  footer .main-container > .grid:first-of-type { grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)) !important; gap: 40px 32px !important; padding-top: 80px; }
  footer .main-container > .grid:first-of-type > div:first-child { grid-column: auto !important; }
}

/* copyright + socials: stack on small, side-by-side when wide; touch-sized icons */
footer .main-container > .grid:last-of-type { align-items: center; row-gap: 14px; }
footer .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; }
footer .footer-social-link + .footer-social-link { margin-left: 0; }
footer .main-container > .grid:last-of-type .flex.items-center.gap-4 { gap: 4px; margin-left: -10px; }
@media (min-width: 1180px) { footer .main-container > .grid:last-of-type .flex.items-center.gap-4 { margin-left: 0; margin-right: -10px; } }
footer .main-container > .grid:last-of-type p { font-size: 13px; line-height: 1.5; }

/* ---------- Floating header: keep it legible over page content ---------- */
:root { --lg-header-bg: rgba(10, 10, 10, 0.62); }
.header-six::before {
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
}

/* ---------- Small stat/benefit cards in 2-up grids (phones, Fold cover) ---------- */
@media (max-width: 479px) {
  .grid.grid-cols-2.gap-6 { gap: 14px; }
  .grid.grid-cols-2.gap-6 > .text-center.p-6 { padding: 18px 10px; min-width: 0; }
  .grid.grid-cols-2.gap-6 > .text-center.p-6 > [class*="text-heading-"] {
    font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto;
  }
}