/* ============================================================================
   The site footer, in one place.

   Written 11 September 2026. Until then the footer markup was pasted into four
   pages and its CSS into three files, and the four copies had drifted: the
   Systems Studio had no logo, ABN, location or social icons at all; the three
   legal pages had lost the "built with AI" line and sat on a navy block the
   other pages did not use; the portfolio had dropped the location line and the
   phone and email icons and was rendering the rest two pixels smaller; and
   404.html had no footer whatsoever.

   Every page now loads this file and carries the identical markup block, so the
   next change is one edit rather than seven, and tests/footer-consistency.test.cjs
   fails the build if the markup parts company again.

   It is deliberately self-contained. Half the pages do not define the design
   system's tokens, so each value below reads the host page's token where it has
   one, then the portfolio's older name for the same thing, then the literal from
   DESIGN.md. A page with no tokens at all still renders this footer correctly.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}

footer.site-footer {
  --ft-line: var(--line, oklch(0.885 0.008 85));
  --ft-ink: var(--ink, oklch(0.19 0.022 220));
  --ft-ink-soft: var(--ink-soft, var(--muted, oklch(0.44 0.018 220)));
  --ft-signal: var(--signal, var(--cyan, oklch(0.76 0.145 190)));
  --ft-signal-text: var(--signal-text, var(--ft-signal));
  --ft-glow: var(--glow, transparent);
  --ft-ease: var(--e-out, cubic-bezier(0.22, 1, 0.36, 1));

  padding: 32px 0;
  border-top: 1px solid var(--ft-line);
  background: none;
  color: var(--ft-ink-soft);
  /* 404.html centres its body with grid and place-items:center, which shrinks
     any child to its content and floats it in the middle of the viewport. The
     footer spans the page on every other layout, so it says so here rather than
     each page having to undo its own centring. */
  width: 100%;
  justify-self: stretch;
  align-self: end;
  /* Stated, not inherited. 404.html loads no webfont at all and systems-studio.css
     declares a different fallback stack, so an inherited family rendered this footer
     in three different faces across the seven pages. */
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Its own width, rather than the page's .wrap, which three of the seven pages
   do not define. */
footer.site-footer .foot-inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--ft-ink-soft);
  font-size: 0.9rem;
}

footer.site-footer .foot-brand {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}

/* The lockup's own presentation, stated rather than inherited.

   The two modifiers are .foot-logo-light and .foot-logo-dark, names nothing else uses.
   They were .logo-on-light and .logo-on-dark, shared with the page header's lockup, so
   every rule a page wrote on those names reached the footer's copy too, and an
   !important one won outright: hiding the header lockup on phones, an ordinary enough
   thing to want, erased the footer's as well. No amount of extra specificity beats
   !important, so the names are the footer's own now and the question does not arise. */
footer.site-footer .foot-logo {
  width: 206px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 1;
  filter: none;
  transform: none;
  visibility: visible;
}

/* Every type value is stated rather than inherited. 404.html styles bare p and a
   for its own card, and those rules otherwise leak in and render this footer a
   size larger with its legal links un-underlined. */
footer.site-footer .foot-brand p {
  margin: 0;
  color: var(--ft-ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: none;
}

/* Icons above, legal links below. Right-aligned on wide screens, left-aligned
   once the footer wraps to one column on a phone. */
footer.site-footer .foot-right {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
}

@media (min-width: 720px) {
  footer.site-footer .foot-right { align-items: flex-end; }
}

footer.site-footer .foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.86rem;
}

footer.site-footer .foot-legal a {
  text-decoration: underline;
  font-weight: 500;
}

/* Icons rather than words, so the two rows do not read as one undifferentiated
   list of small blue text. */
footer.site-footer .foot-social {
  display: flex;
  gap: 10px;
}

footer.site-footer .foot-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  min-height: 0;
  border: 1px solid var(--ft-line);
  border-radius: 999px;
  color: var(--ft-ink-soft);
  text-decoration: none;
  transition: color 0.3s var(--ft-ease), border-color 0.3s var(--ft-ease),
              background 0.3s var(--ft-ease), transform 0.3s var(--ft-ease);
}

footer.site-footer .foot-social a:hover {
  color: var(--ft-signal-text);
  border-color: var(--ft-signal);
  background: var(--ft-glow);
  transform: translateY(-2px);
}

footer.site-footer .foot-social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  display: block;
}

/* Padded to clear the 24px minimum tap target: these are the links most likely
   to be pressed with a thumb.

   The background and radius are reset rather than left alone because 404.html
   styles every anchor on the page as a filled turquoise button, which otherwise
   turns the legal row and the icons into a row of pills. */
footer.site-footer .foot-inner a {
  color: var(--ft-ink);
  font-weight: 500;
  background: none;
  border: 0;
  border-radius: 0;
  text-decoration-color: var(--ft-signal);
  text-underline-offset: 3px;
  display: inline-block;
  padding: 5px 2px;
  min-height: 24px;
}

footer.site-footer .foot-social a {
  color: var(--ft-ink-soft);
  border: 1px solid var(--ft-line);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 400;
}

footer.site-footer a:focus-visible {
  outline: 2px solid var(--ft-signal);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  footer.site-footer .foot-social a { transition: none; }
  footer.site-footer .foot-social a:hover { transform: none; }
}

/* ---- which lockup shows -------------------------------------------------
   The inverse lockup on a dark ground, the standard one on light. Only the
   homepage changes ground with the theme, so every other page states its ground
   outright with data-ground.

   The two sets below are mutually exclusive by :not([data-ground]) rather than
   by specificity. Written that way deliberately: the theme selectors carry one
   more class-level component than the data-ground ones, so when both could
   match, the theme rule wins and a fixed-ground page renders a white lockup on
   a cream background. Making them disjoint removes the race instead of tuning
   selector weights against each other. */

footer.site-footer .foot-logo-light { display: block; }
footer.site-footer .foot-logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) footer.site-footer:not([data-ground]) .foot-logo-light { display: none; }
  :root:not([data-theme="light"]) footer.site-footer:not([data-ground]) .foot-logo-dark { display: block; }
}

:root[data-theme="dark"] footer.site-footer:not([data-ground]) .foot-logo-light { display: none; }
:root[data-theme="dark"] footer.site-footer:not([data-ground]) .foot-logo-dark { display: block; }
:root[data-theme="light"] footer.site-footer:not([data-ground]) .foot-logo-light { display: block; }
:root[data-theme="light"] footer.site-footer:not([data-ground]) .foot-logo-dark { display: none; }

footer.site-footer[data-ground="dark"] .foot-logo-light { display: none; }
footer.site-footer[data-ground="dark"] .foot-logo-dark { display: block; }
footer.site-footer[data-ground="light"] .foot-logo-light { display: block; }
footer.site-footer[data-ground="light"] .foot-logo-dark { display: none; }

@media (max-width: 640px) {
  footer.site-footer .foot-inner { padding: 0 20px; }
}