/* ============================================================
   Azwaj: shared site footer (10-Aug-2026)

   The landing page grew a footer of fifteen links on one line, which
   told a visitor nothing about what was where. This is the grouped
   version, and it is shared so every page carries the same shape.

   WHY A SHARED STYLESHEET BUT DUPLICATED MARKUP: the site pages are
   deliberately self-contained HTML, and the links have to be real
   anchors in the source. A footer injected by JavaScript is not
   reliably crawled, and these anchors are half of how Google learns
   that our social accounts are ours (the other half is the
   Organization sameAs). So the CSS lives here once; the markup is
   written into each page.

   Every selector is scoped to footer.site-footer so it wins against
   the plain `footer{...}` rules each page already has, whatever order
   the stylesheets load in.

   TWO VARIANTS OF THE MARKUP, and the difference matters:
     FULL     index, partners, pricing, refunds, contact, shipping
              (web-only pages; carry the commerce links)
     IN-APP   guide, blog, terms, privacy, delete-account,
              child-safety. These open INSIDE the Android app, so
              they must not link to /pricing, /refunds, /shipping,
              /contact, /biodata-maker or the landing page. Each of
              those leads, in one more hop, to a non-Play checkout,
              which is what Play's anti-steering rule prohibits.
   ============================================================ */

footer.site-footer {
  background: #3F0D1E;
  color: #E8D6CE;
  padding: 52px 0 30px;
  margin: 0;
  border: 0;
  text-align: left;
  font-size: 15px;
  line-height: 1.6;
}
footer.site-footer .sf-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
/* Five tracks: brand + four link columns (the FULL variant). The
   IN-APP variant has one column fewer, so it adds .sf-compact, because with
   five tracks and four items the last track would sit empty and the
   whole footer would look off-centre on a wide screen. */
footer.site-footer .sf-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 30px 26px;
  margin-bottom: 34px;
}
footer.site-footer.sf-compact .sf-grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; }
footer.site-footer .sf-lockup { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
footer.site-footer .sf-lockup svg { width: 34px; height: 34px; background: #5C142C; border-radius: 9px; padding: 3px; box-sizing: border-box; flex: none; }
footer.site-footer .sf-nm { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .3px; display: block; line-height: 1.1; }
footer.site-footer .sf-tg { color: #D89A6A; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; display: block; margin-top: 3px; }
footer.site-footer .sf-blurb { font-size: 13.5px; line-height: 1.7; opacity: .72; max-width: 290px; margin: 0 0 18px; color: #E8D6CE; }
footer.site-footer h4 {
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #D89A6A; margin: 2px 0 14px; font-weight: 700;
}
footer.site-footer .sf-col a {
  display: block; color: #E8D6CE; opacity: .82; font-size: 14px;
  margin: 0 0 10px; text-decoration: none; transition: opacity .15s, color .15s;
}
footer.site-footer .sf-col a:hover { opacity: 1; color: #fff; }

/* Icons rather than five more text links. The words were louder than
   the section headings above them. The anchor text survives in .sf-sr
   for crawlers and screen readers. */
footer.site-footer .sf-social { display: flex; gap: 10px; }
footer.site-footer .sf-social a {
  width: 38px; height: 38px; border-radius: 50%; margin: 0;
  border: 1px solid rgba(232, 214, 206, .28);
  display: flex; align-items: center; justify-content: center;
  color: #E8D6CE; opacity: .9;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
footer.site-footer .sf-social a:hover {
  background: #D89A6A; border-color: #D89A6A; color: #3F0D1E;
  opacity: 1; transform: translateY(-2px);
}
footer.site-footer .sf-social svg { width: 19px; height: 19px; display: block; }
footer.site-footer .sf-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
footer.site-footer .sf-cp {
  font-size: 12.5px; opacity: .6; line-height: 1.7; text-align: center;
  border-top: 1px solid rgba(232, 214, 206, .16); padding-top: 22px;
}
footer.site-footer .sf-cp a { color: #E8D6CE; }

/* Two columns down to the smallest phone. A single column looks tidy
   in a mockup and then runs to two screens of scrolling at 375px. */
@media (max-width: 880px) {
  footer.site-footer { padding: 40px 0 26px; }
  footer.site-footer .sf-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; margin-bottom: 26px; }
  footer.site-footer .sf-brand { grid-column: 1 / -1; }
  footer.site-footer .sf-blurb { max-width: none; margin-bottom: 14px; }
  footer.site-footer h4 { margin-bottom: 11px; }
  footer.site-footer .sf-col a { margin-bottom: 9px; font-size: 13.5px; }
}

/* ---------- Google Play badge (16-Aug) ----------
   Google's own artwork, unmodified. The rules that matter: do not
   recolour it, do not redraw it, and leave clear space around it. The
   height is set here and the width follows, so the aspect ratio of the
   file is never distorted; 44px keeps it above Google's legibility
   minimum without letting it shout over the wordmark above it.
   It works on this dark maroon because the badge ships with its own
   light border, which is exactly why we did not need a variant. */
footer.site-footer .sf-playbadge {
  display: inline-block;
  margin-top: 18px;
  line-height: 0;
  border-radius: 8px;
  transition: transform .18s, opacity .18s;
}
footer.site-footer .sf-playbadge img {
  height: 44px;
  width: auto;
  display: block;
}
footer.site-footer .sf-playbadge:hover { transform: translateY(-2px); opacity: .92; }
footer.site-footer .sf-playbadge:focus-visible { outline: 2px solid #D89A6A; outline-offset: 4px; }