/*
 * The footer, and it is the same object on both properties.
 *
 * Served at `/chase-footer.css` on **both** www.havefundex.com and app.havefundex.com, from one file,
 * by an explicit route in server.js registered ahead of the host-matching middleware. That is
 * the whole design: Dan asked for it to be identical on both, and the only way to guarantee
 * identical is one file rather than two that agree today.
 *
 * It appears on four surfaces — the marketing page, /privacy, /support, and the app itself —
 * and the markup is repeated in each because this project has no templating. **If you change
 * the markup, change it in all four**: site/index.html, public/privacy.html,
 * public/support.html, public/index.html.
 *
 * **Desktop only, by Dan's decision.** Below 1000px it is `display: none` — which is not a
 * cop-out but the thing that makes it safe to put inside the app at all: the app is
 * full-screen with a fixed bottom nav on phones, and a footer in that space would sit under
 * the nav or push it. 1000px is the app's own `wide()` breakpoint, so the footer appears
 * exactly when the desktop top bar does.
 *
 * Every link is absolute. On the marketing site a product link could be a #hash, but the app
 * is a different origin and the same markup has to work from both — so they all point at
 * www.havefundex.com and the two are byte-identical.
 */

/*
 * Self-defence, and it is not optional.
 *
 * This block lands inside three different stylesheets — site/styles.css, public/policy.css and
 * the app's public/styles.css — each of which styles bare `a`, `li`, `ul` and `p` for its own
 * document. "Identical on both" cannot survive that unless the footer states everything it
 * needs rather than inheriting it. The policy pages proved the point immediately: their
 * `li::before` put a lime square in front of every footer link and their `a` rule underlined
 * the wordmark.
 *
 * So: reset the elements this footer uses, inside this footer only, before styling them.
 * Every value below is stated in full for the same reason — no shorthand that leaves a
 * longhand to be inherited from whatever else is on the page.
 */
.fo-foot ul, .fo-foot li, .fo-foot p, .fo-foot h4 { margin: 0; padding: 0; }
.fo-foot ul { list-style: none; }
.fo-foot li { position: static; }
.fo-foot li::before, .fo-foot li::after { content: none; display: none; }
.fo-foot a { text-decoration: none; border: 0; background: none; }
.fo-foot * { box-sizing: border-box; border-radius: 0; }

.fo-foot {
  display: none;
  border-top: 1px solid #262626;
  background: #0A0A0A;
  color: #9C9C9C;
  font: 500 14px/1.6 Manrope, 'Helvetica Neue', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1000px) { .fo-foot { display: block; } }

.fo-foot-in {
  max-width: 1480px; margin: 0 auto;
  padding: 56px 40px 26px;
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}

/* ── The brand column ── */
/* `.tb-mark` and `.brand`, a third time — 9px diamond, 12px gap, Anton 25/1 at 1.6px. Written
   out rather than inherited because this file has to stand alone on two hosts. */
.fo-foot-brand { display: flex; align-items: center; gap: 12px; color: #FFFFFF; text-decoration: none; }
/* A square on its corner. The C monogram stood here briefly and the diamond came back; the
   icons carry the same mark, so this is the one place in the chrome that still shows it. */
.fo-foot-brand i { width: 9px; height: 9px; flex: none; transform: rotate(45deg); background: #7CE22B; }
/* The wordmark. `Archivo` is declared by whichever stylesheet loads beside this one — styles.css
   on the app, site/styles.css on www, policy.css on the policy pages — and all three now do. */
/* Anton, as the app's top bar sets its wordmark — the two stood on one page in two faces.
   Archivo is the fallback on a host that has not loaded Anton. */
.fo-foot-brand span { font-family: Anton, Archivo, 'Helvetica Neue', sans-serif; font-weight: 400; font-size: 25px;
  line-height: 1; letter-spacing: 0.007em; text-transform: uppercase; }
/* `.fo-foot .fo-foot-blurb`, not `.fo-foot-blurb`. The reset above is `.fo-foot p` — one class
   and one element, which outranks a lone class — so a bare `.fo-foot-blurb { margin }` loses to
   it and silently reads as zero. Two classes beat one class plus an element. */
.fo-foot .fo-foot-blurb { margin: 24px 0 0; max-width: 300px; font-size: 13.5px; line-height: 1.65; color: #7C7C7C; }

/* ── The social row ──
 * Instagram and TikTok, @havefundex on both — links, labelled. The row was five inert spans
 * while there were no accounts to point at, and the note here said what to change when there
 * were: swap each span for an <a href>, drop the aria-hidden, add a label, delete the
 * pointer-events. Done, and the three that never got an account (X, YouTube, Discord) are
 * gone with it: an icon pointing nowhere is a worse footer than none. */
.fo-foot-social { display: flex; gap: 10px; margin-top: 20px; }
.fo-foot-social a {
  width: 38px; height: 38px;
  background: #111111; border: 1px solid #262626;
  position: relative;
}
.fo-foot-social a:hover::before { background: #FFFFFF; }
/* The marks are CSS masks rather than inline SVG, so the paths live once in this file instead
   of twice over in each of the documents that carry the footer. A mask is coloured by
   `background`, which is what lets one rule tint both.
   `mask-image` with a data: URI is governed by `img-src`, and both hosts allow `data:` — the
   marketing CSP is `img-src 'self' data:` and the app's adds blob: and Scrydex to the same. */
.fo-foot-social a::before {
  content: ''; position: absolute; inset: 0;
  background: #606060;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 17px 17px; mask-size: 17px 17px;
}
.fo-foot-social .ig::before {
  -webkit-mask-image: var(--ig); mask-image: var(--ig);
}
.fo-foot-social .tt::before { -webkit-mask-image: var(--tt); mask-image: var(--tt); }

.fo-foot {
  --ig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.41.6.22 1 .48 1.4.9.4.42.7.82.9 1.38.2.42.4 1.06.4 2.23.1 1.27.1 1.65.1 4.85s0 3.58-.1 4.85c0 1.17-.2 1.8-.4 2.23-.2.56-.5.96-.9 1.38-.4.42-.8.68-1.4.9-.4.16-1 .36-2.2.41-1.3.07-1.7.07-4.9.07s-3.6 0-4.9-.07c-1.2-.05-1.8-.25-2.2-.41-.6-.22-1-.48-1.4-.9-.4-.42-.7-.82-.9-1.38-.2-.42-.4-1.06-.4-2.23C2.1 15.58 2 15.2 2 12s.1-3.58.1-4.85c0-1.17.2-1.8.4-2.23.2-.56.5-.96.9-1.38.4-.42.8-.68 1.4-.9.4-.16 1-.36 2.2-.41C8.4 2.2 8.8 2.2 12 2.2m0 5.6a4.2 4.2 0 100 8.4 4.2 4.2 0 000-8.4m0 6.9a2.7 2.7 0 110-5.4 2.7 2.7 0 010 5.4m5.4-7a1 1 0 11-2 0 1 1 0 012 0'/%3E%3C/svg%3E");
  --tt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 2h-3.2v13.4a2.7 2.7 0 11-2.7-2.7c.3 0 .5 0 .8.1V9.5a6 6 0 00-.8-.1 5.9 5.9 0 105.9 5.9V8.6a7.1 7.1 0 004.2 1.3V6.6a4.1 4.1 0 01-4.2-4.6z'/%3E%3C/svg%3E");
}

/* ── The link columns ── */
.fo-foot-col h4 {
  margin: 0 0 18px;
  font: 800 10.5px/1 Manrope, 'Helvetica Neue', Helvetica, sans-serif;
  letter-spacing: 2.2px; text-transform: uppercase; color: #606060;
}
.fo-foot-col ul { margin: 0; padding: 0; list-style: none; }
.fo-foot-col li { margin: 0 0 13px; }
.fo-foot-col a { color: #C8C8C8; text-decoration: none; font-size: 14px; }
.fo-foot-col a:hover { color: #7CE22B; }
/* Not a link, because there is no listing behind it yet — the same rule the hero badge
   follows. It becomes an <a> the day the app is live. */
.fo-foot-col .soon { color: #606060; font-size: 14px; }
.fo-foot-col .soon em { font-style: normal; color: #7CE22B; font-size: 11px;
  letter-spacing: 1.2px; text-transform: uppercase; margin-left: 8px; }

/* ── The bottom rule ── */
.fo-foot-bot {
  max-width: 1480px; margin: 0 auto; padding: 22px 40px 34px;
  border-top: 1px solid #1C1C1C;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  font-size: 12.5px; color: #606060;
}
.fo-foot-bot .tag { color: #7C7C7C; }