/* Footer — flowty's footer, measured at 1440x900.

   Their geometry, and ours beside it:

   | | flowty | ours |
   |---|---|---|
   | row       | flex, justify-between, px-50   | same, at --gutter |
   | QR block  | left: 150x150 tile + text at x218 | same |
   | columns   | right: THREE, ~236px apart, 40px rhythm | same |
   | legal     | copyright left, credit right   | copyright left, tagline right |
   | lock-up   | ONE svg, 1440x234, mark left + wordmark right | two svgs, flexed |

   Two of their pieces are cut (owner): "Click to zoom" under the QR, and the
   "Designed by" credit. */

.foot {
  position: relative;
  z-index: 2;
  overflow: clip;
  padding: var(--sp-24) var(--gutter) var(--sp-10);
  /* The hero's gradient again, closing the page on the colour it opened with. */
  background: linear-gradient(
    var(--hero-grad-angle),
    var(--hero-grad-a) 0%,
    var(--hero-grad-b) 100%
  );
  color: var(--text);
}

/* ---- The row: QR left, link columns right ------------------------------ */
.foot__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-12);
  padding-bottom: var(--sp-20);
}

.foot__qr { display: flex; align-items: flex-start; gap: var(--sp-10); }
.foot__qr-img {
  width: clamp(112px, 10.5vw, 150px);
  height: auto;
  flex-shrink: 0;
  border-radius: var(--sp-3);
  border: 1px solid var(--hair-card);
}
.foot__qr-label {
  max-width: 15ch;
  padding-top: var(--sp-2);
  font-size: var(--fs-lead);
  line-height: 1.34;
  color: var(--text);
}

.foot__cols {
  display: flex;
  gap: clamp(32px, 8vw, 150px);
}
.foot__col ul { display: flex; flex-direction: column; gap: var(--sp-4); }
.foot__col li { line-height: 1.5; }
.foot__col a,
.foot__col span {
  font-size: var(--fs-lead);
  color: var(--text);
  transition: color 0.25s;
}
.foot__col a:hover { color: var(--brand); }
/* The draft site's social icons carry no destination — they are `cursor-default`
   spans there too. Rendered the same way here rather than as dead links, and
   marked so they are obvious to whoever wires them up. */
.foot__col span[data-needs-url] { color: var(--text-muted); cursor: default; }

/* ---- Social row -------------------------------------------------------- */
/* Mark, then label, on one baseline. The <svg> is INLINE rather than an <img>
   so it inherits `currentColor`: that alone gives it the muted grey on the two
   entries that still have no URL, and the brand colour on link hover, with no
   second rule and no second asset per state. */
.foot__social {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.foot__social-icon {
  /* Sized in em against the label, not px, so the whole badge tracks --fs-lead
     across the breakpoints instead of drifting out of proportion. */
  width: 2em;
  height: 2em;
  flex: none;
  /* The white disc. padding insets the glyph inside it, and border-box keeps
     the disc itself exactly 2em so the row's rhythm does not change with it. */
  box-sizing: border-box;
  padding: 0.46em;
  background: #fff;
  border-radius: 50%;
  /* The glyphs are `fill="currentColor"`, so `color` here — not on the link —
     is what makes them black. Set on the badge so it holds regardless of the
     link's own colour: the muted grey on the two entries with no URL, and the
     brand colour on hover, now apply to the LABEL only, which is what you want
     when the mark sits on its own white ground. */
  color: #111;
  /* The footer's gradient is a warm cream, so a pure white disc on it is a very
     quiet edge. A hairline keeps the badge defined without turning it into an
     outlined button. Harmless on the dark theme, where the disc already pops. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06);
  transition: transform 0.25s;
}
.foot__social:hover .foot__social-icon { transform: translateY(-1px); }
/* No lift on a badge that goes nowhere. */
.foot__social[data-needs-url]:hover .foot__social-icon { transform: none; }

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) 0 var(--sp-24);
  border-top: 1px solid var(--hair-soft);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---- The lock-up: mark left, wordmark right ---------------------------- */
/* The mark's three parts assemble on entry, so both SVGs are INLINE — an <img>
   is one opaque node and none of the pieces would be reachable. */
.foot__logo {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 40px);
}
.foot__mark {
  flex: 0 0 auto;
  height: clamp(101px, 20.2vw, 308px);  /* owner: +20%, then +20% again */
  width: auto;
  overflow: visible;           /* the arms start outside their own box */
}
.foot__word {
  flex: 1 1 auto;
  min-width: 0;                /* or the svg refuses to shrink below intrinsic */
  height: auto;
}
/* Mark in brand orange, wordmark in ink — the lock-up as supplied. */
.foot__mark path { fill: var(--brand); }
.foot__word path { fill: var(--text); }

/* No JS: the lock-up is simply there. */
.no-motion .foot__mark path,
.no-motion .foot__word { opacity: 1 !important; transform: none !important; }

/* Portrait counts as stacked here too — see the note in css/hero.css. A 1024px
   wide iPad in portrait is past the width line but is shaped like a tall phone,
   and was taking the desktop layout. */
@media (max-width: 1023px), (orientation: portrait) {
  .foot__row { flex-direction: column; gap: var(--sp-16); }
  .foot__cols { gap: var(--sp-16); flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .foot { padding: var(--sp-20) var(--gutter) var(--sp-8); }
  .foot__qr { gap: var(--sp-6); }
  .foot__cols { gap: var(--sp-10) var(--sp-12); }
  .foot__logo { gap: var(--sp-3); }

  /* THE LEGAL LINE MOVES BELOW THE LOCK-UP ON SMALL SCREENS.
     Document order is row -> legal -> logo, which on a narrow column left the
     copyright and its rule stranded in the middle with the big logo hanging
     underneath. Reordered with flex `order` rather than by moving the markup:
     the DOM stays as it is, so the desktop arrangement is untouched and the
     legal pages — which lift this same footer out of index.html — get the
     change for free.
     The rule travels with the block, because it is that block's own
     border-top, so it lands between the logo and the copyright exactly where
     it is wanted. */
  .foot { display: flex; flex-direction: column; }
  .foot__legal {
    order: 1;                    /* row and logo stay at the default 0 */
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-10);    /* air above the rule, under the lock-up */
    /* The base rule ends on --sp-24 of padding, which was separating it from
       the logo BELOW it. Now that it is last, that plus the footer's own
       bottom padding left a large dead strip under the copyright. */
    padding-bottom: 0;
  }

  /* The QR is for someone at a desktop pointing a phone at the screen. On a
     phone it is pointless — you are already there. */
  .foot__qr { display: none; }
}