/* ---------------------------------------------------------------------------
   Task108 — the site footer, defined ONCE.

   Before this file every page carried its own footer rules in its own inline
   <style>, and four different footers had drifted apart: index had a version
   line, founder had no version, analytics had no copyright, and the three
   policy pages had a single cramped line of links. A member who clicked from
   the home page into the Privacy Policy saw a different site.

   An external stylesheet rather than more inline CSS, deliberately: the
   analytics page ships `style-src 'self'` (website/_headers) with no
   'unsafe-inline', so a same-origin file is the only form of shared styling
   all six pages can use today. It is also the step that lets the rest of the
   site adopt that CSP later.

   The MARKUP still has to be copied into each page — Cloudflare Pages serves
   this repo statically, with no include mechanism, and injecting the footer
   with JS would hide the Privacy Policy and Child Safety links from the
   crawlers that Play Console requires to reach them. What keeps the copies
   honest is `checkSiteVersion` in build.gradle.kts: it now reads the version
   line out of all six pages, so a page whose footer was edited by hand or
   left behind fails the build instead of shipping.
   --------------------------------------------------------------------------- */

footer {
  background: #0C1430;
  color: #B9C2D8;
  padding: 36px 24px;
  text-align: center;
  font-size: 0.9rem;
}
/* text-decoration is stated, not inherited. index/founder/analytics each set
   `a { text-decoration: none }` in their own styles and the three policy pages
   never did, so the shared footer still rendered underlined on half the site —
   the same drift in a new form. Declaring it here is what makes "identical
   markup" actually look identical. */
footer a {
  color: #DCE4F5;
  font-weight: 600;
  text-decoration: none;
}
footer a:hover { text-decoration: underline; }
footer .links {
  margin-bottom: 12px;
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
}
/* An inline SVG, not the emoji: it inherits the link colour, tints on hover,
   and renders identically everywhere. The emoji already appears once in this
   footer, on the "Made with" line, and a second one competes with it. Static
   on purpose — one animating glyph among eight nav links pulls the eye off the
   content it is meant to point at. */
footer .links a svg {
  width: 13px; height: 13px;
  fill: currentColor;
  vertical-align: -1px;
  margin-right: 5px;
}
/* Current app release — kept in sync with gradle.properties by
   `gradlew syncSiteVersion`, which rewrites this line on every page. */
footer .version {
  margin-top: 10px;
  font-size: 0.78rem;
  color: #7C88A6;
  letter-spacing: 0.02em;
}

/* The analytics page was the only one that gave footer links a focus ring; the
   three policy pages gave keyboard users nothing at all. Same gold as --gold on
   the pages that define it, written as a literal because the policy pages have
   no custom-property block to read it from. */
footer a:focus-visible {
  outline: 2px solid #FFC24A;
  outline-offset: 3px;
}

@media print {
  footer .links { display: none; }
}