/* ═══════════════════════════════════════════════════════════════════
   Site footer.

   MEASURED CONTRAST on --menu-bg-deep (#1E1D1E), per §10.4 — computed,
   not estimated:

     --menu-fg        #F0EEEA   14.50:1   passes body
     --menu-fg-muted  #ABA49B    6.81:1   passes body
     --brand          #F8B030    9.00:1   passes body
     --ink-3          #6E6862    3.06:1   FAILS body — large text only

   That last row was a live defect: `.foot-live` set the status line in
   --ink-3, a LIGHT-mode ink token, on the dark footer. 13px at 3.06:1.
   It now uses --menu-fg-muted like everything else here, and no
   light-mode ink token appears in this file at all.

   Link text was 15px and is now 16px (§9.2). The column headings stay
   at 13px uppercase, which is the one thing here that is genuine
   metadata rather than something a customer reads.
   ═══════════════════════════════════════════════════════════════════ */

/* DEMARCATION. The dark ground alone was doing the separating, which
   on a long light page reads as "the page carried on and went dark"
   rather than "the page ended". A hard amber edge, a step down to the
   deeper ground, and real space above it make the boundary explicit.
   The rule is the one accent (§9.5) — no second hue. */
.foot{background:var(--menu-bg-deep);color:var(--menu-fg-muted);
  border-top:3px solid var(--brand);
  margin-top:var(--sp-12);
  padding-block:var(--sp-10) var(--sp-4);font-size:1rem}
.foot-in{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;flex-direction:column;gap:var(--sp-7)}

.foot-brand .brand{margin-inline:0;width:fit-content}
.foot-brand>p{margin-top:var(--sp-3);line-height:1.7;max-width:52ch}

/* The differentiator, given the room it earns. CLAUDE.md §9.7 and
   TONE.md §5: an engineer, not "our team", and never a testing claim. */
/* Support is a LADDER, not two equal options. The Assistant is the
   first rung; the engineer is the last one, separated by a rule and
   given the quieter button. Both are full-width targets and both take
   the SAME type pair — the second tier is subordinate in ORDER and
   WEIGHT, never in legibility (§9.2). */
.foot-support{
  padding:var(--sp-4);
  border:1px solid var(--menu-rule);border-radius:var(--r);
  background:var(--menu-bg);
}
/* A GRID, so the icon can occupy the HEADING's row and centre in it.
   As a flex row it top-aligned against a block that is a heading, a
   sentence and a button: a 30px glyph beside a 22px heading line box
   overhung it by 8px and lined up with nothing. The sentence and the
   button now also start on the heading's left edge, so the tier is
   square vertically as well as horizontally. */
.foot-tier{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:var(--sp-3);row-gap:var(--sp-1);align-items:center}
.foot-tier>.ico{grid-column:1;grid-row:1;width:28px;height:28px;
  flex:0 0 auto;color:var(--brand)}
/* The pair (tokens.css): 17px over 15px. It was 17px over 16px, which
   is not a hierarchy — the sentence read as a second heading. */
.foot-tier b{grid-column:2;grid-row:1;color:var(--menu-fg);
  font-size:var(--fs-pair-head);font-weight:800;line-height:1.3}
.foot-tier span{grid-column:2;grid-row:2;
  font-size:var(--fs-pair-sub);line-height:var(--lh-pair-sub)}
.foot-tier .btn{grid-column:2;grid-row:3;margin-top:var(--sp-2);
  width:100%;justify-content:center;padding-inline:var(--sp-3)}
.foot-tier .btn .ico{width:1.15em;height:1.15em;flex:none}

/* A column entry that opens the Assistant. It is a <button> because it
   opens a panel rather than going anywhere, and it is styled to sit in
   the link list rather than to look like a control in its own right. */
.foot-link-btn{
  display:block;width:100%;text-align:left;
  background:none;border:0;padding:0;cursor:pointer;
  min-height:var(--tap);font:inherit;font-size:1rem;
  color:var(--menu-fg-muted);
}
.foot-link-btn:hover{color:var(--brand)}
.foot-link-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.foot-tier-2{
  margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:1px solid var(--menu-rule);
}
.foot-tier-2>.ico{color:var(--menu-fg-muted)}
/* The escalation's button is quiet against the Assistant's primary, so
   the ladder reads in the right order at a glance. --menu-fg on
   --menu-bg is 13.4:1; the border carries the affordance. */
.foot-support .btn-quiet{
  background:transparent;color:var(--menu-fg);
  border:1px solid var(--menu-rule);
}
.foot-support .btn-quiet:hover{border-color:var(--brand);color:var(--brand)}

/* Centred on the text, not hung off its first line — same rule as the
   support tiers above. */
.foot-line{display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-4);
  line-height:1.6}
.foot-line .ico{width:24px;height:24px;color:var(--brand);flex:0 0 auto}
.foot-line a{color:var(--brand);font-weight:700}
.foot-line a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── Link columns ───────────────────────────────────────────────── */
.foot-cols{display:flex;flex-direction:column;gap:0}
.foot-col{border-top:1px solid var(--menu-rule)}
.foot-col:last-child{border-bottom:1px solid var(--menu-rule)}
.foot-col-head{margin:0}
.foot-col-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  width:100%;min-height:var(--tap);padding-block:var(--sp-2);
  color:var(--menu-fg);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;text-align:left;
}
.foot-col-toggle .ico{width:22px;height:22px;flex:0 0 auto;color:var(--menu-fg-muted);
  transition:transform .18s ease}
.foot-col-toggle[aria-expanded="true"] .ico{transform:rotate(180deg)}
.foot-col-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.foot-col-links{display:none;padding-bottom:var(--sp-3)}
/* A CLASS ON THE COLUMN, not :has() on the heading.
   The toggle is nested inside the <h3> that keeps it a heading for
   assistive tech, so .foot-col-links is a sibling of the HEADING rather
   than of the button — an adjacent-sibling selector on the button never
   matched, and the fix for that was
   `.foot-col-head:has(.foot-col-toggle[aria-expanded="true"])`.
   That put the ONLY rule which opens these columns behind :has(), which
   Firefox did not ship until 121 and Safari not until 15.4, and no
   Android WebView has before Chromium 105. On every one of those the
   footer's category links were display:none on a phone and could not be
   opened at all — the whole "Shop by category" column, invisible. Above
   768px the media query below forces them open, which is exactly why it
   went unnoticed on a desktop.
   footer.js toggles .is-open alongside aria-expanded. */
.foot-col.is-open>.foot-col-links{display:block}
.foot-col-links a{display:flex;align-items:center;min-height:var(--tap);
  color:var(--menu-fg-muted);font-size:1rem;overflow-wrap:anywhere}
.foot-col-links a:hover{color:var(--brand)}
.foot-col-links a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* Never truncate silently — the control says how many are hidden. */
/* The Shop column used to expand the remaining ranges in place. It now
   hands over to /categories/ instead — a link, not a disclosure, and it
   names what is on the other side of it so the cut is not silent. */
.foot-all{display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:var(--tap);color:var(--brand);font-weight:700;font-size:1rem;
  text-decoration:underline;text-underline-offset:3px}
.foot-all .ico{width:1.25em;height:1.25em}
.foot-all:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ── Bottom bar ─────────────────────────────────────────────────── */
.foot-bottom{max-width:var(--page);margin-inline:auto;margin-top:var(--sp-6);
  padding:var(--sp-4) var(--gutter) 0;border-top:1px solid var(--menu-rule);
  display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:space-between;
  font-size:.875rem}
/* Was --ink-3 (3.06:1 on this ground). See the header comment. */
.foot-live{font-family:var(--font-mono);color:var(--menu-fg-muted)}

@media (min-width:768px){
  /* Three regions, and support is the RIGHTMOST — the last thing in the
     reading order and the only one on its own ground, so the ladder is
     found rather than scrolled past. */
  .foot-in{flex-direction:row;gap:var(--sp-8);align-items:flex-start}
  .foot-brand{flex:1 1 30%;min-width:0}
  .foot-cols{flex:1 1 40%;flex-direction:row;gap:var(--sp-6);align-items:start}
  .foot-support{flex:0 1 340px;margin-top:0}
  .foot-col{flex:1 1 0;min-width:0;border:0}
  .foot-col:last-child{border:0}
  /* TIGHTEN THE COLUMNS. Every link carried min-height:44px — a touch
     target, correct on a phone and pure dead space against a pointer.
     A 16px link in a 44px box leaves ~28px of nothing per row, and a
     link that wrapped to two lines jumped to ~52px, so the column had
     no rhythm at all. Padding instead of a floor: one line and two
     lines now differ by exactly one line. */
  .foot-col-links a,
  .foot-link-btn{min-height:0;padding-block:var(--sp-2)}
  /* Room to lay them out: the disclosure retires and every link shows. */
  .foot-col-toggle{pointer-events:none;min-height:auto;padding-block:0;
    margin-bottom:var(--sp-2)}
  .foot-col-toggle .ico{display:none}
  .foot-col-links{display:block!important;padding-bottom:0}
}