/* ============================================================
   95 — FOOTER
   Scope: .ft*  (owned by sections/home/95-footer.html)
   ============================================================ */

.ft {
  /* 44px touch target, derived from the 8pt scale (40 + 4) */
  --ft-tap: calc(var(--s-8) + var(--s-1));
  /* popover entrance offset — one step of the space scale */
  --ft-pop-y: var(--s-2);
  background: var(--surface-alt);
  border-top: 1px solid var(--c-hairline);
}

/* Bottom padding equals .ft__bottom's padding-top, so the legal row sits
   optically centred between its own hairline and the page edge. */
.ft__inner {
  padding-block: clamp(var(--s-11), 7vw, var(--s-13)) var(--s-7);
}

/* ---------------- Rail: wordmark + locale, grouped at the left ---------- */

.ft__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-8);
  margin-bottom: var(--s-10);
}

.ft__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--ft-tap);
  color: var(--c-navy);
}
.ft__brand:hover { color: var(--c-navy); }

/* Same logotype as the header lockup, same token height. */
.ft__wordmark { width: auto; height: var(--s-6); }

/* ---------------- Locale selector ----------------
   A quiet inline affordance, not a floating pill: globe, type, chevron.
   Negative inline margin keeps the text edge flush with the grid edge. */

.ft__locale { position: relative; }

.ft__locale-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--ft-tap);
  padding-inline: var(--s-2);
  margin-inline: calc(var(--s-2) * -1);
  border-radius: var(--r-sm);
  color: var(--text-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
  transition: color var(--t-fast) var(--ease-out);
}
.ft__locale-btn:hover { color: var(--c-navy); }

.ft__ico { flex: none; }

.ft__ico--chev {
  margin-left: var(--s-1);
  transition: transform var(--t-base) var(--ease-expo);
}
.ft__locale.is-open .ft__ico--chev { transform: rotate(180deg); }

/* Opens upward by default; the partial's script measures the space above the
   trigger on every open and adds .is-below when the menu would not fit. */
.ft__pop {
  position: absolute;
  z-index: var(--z-raised);
  bottom: calc(100% + var(--s-2));
  top: auto;
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: calc(100vw - var(--gutter) * 2);
  padding: var(--s-2);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--c-hairline), var(--sh-md);
  opacity: 0;
  transform: translateY(var(--ft-pop-y)) scale(.985);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-base) var(--ease-expo);
}
.ft__locale.is-below .ft__pop {
  top: calc(100% + var(--s-2));
  bottom: auto;
  transform-origin: top left;
  transform: translateY(calc(var(--ft-pop-y) * -1)) scale(.985);
}
.ft__pop[hidden] { display: none; }
.ft__locale.is-open .ft__pop,
.ft__locale.is-below.is-open .ft__pop {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ft__pop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  min-height: var(--s-8);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-align: left;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.ft__pop-item:hover { background: var(--c-hairline-soft); color: var(--c-navy); }
.ft__pop-item.is-current { color: var(--c-brand); font-weight: var(--fw-semi); }

/* Every option carries the tick; only the current one shows it, so the tick,
   the colour and aria-selected are driven by one class and cannot disagree. */
.ft__pop-item svg {
  flex: none;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}
.ft__pop-item.is-current svg { opacity: 1; }

/* ---------------- Link grid ----------------
   Seven groups live in four balanced stacks (20 / 20 / 18 / 13 rows). Below
   the seven-track breakpoint the stacks become the tracks, so a track is
   never short and the grid never leaves a ragged second row. */

.ft__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--s-7);
  row-gap: var(--s-10);
}

.ft__stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-9);
  min-width: 0;
}

/* heading + list live in one element, so a heading can never orphan */
.ft__col { min-width: 0; }

.ft__h {
  margin-bottom: var(--s-4);
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

/* The heading renders as inert text (.ft__h-text) at every width where the
   lists are open, and as a real disclosure <button> (.ft__h-btn) only on the
   narrow accordion — display:none keeps the unused rendering out of the
   accessibility tree entirely, so desktop headings carry no interactivity. */
.ft__h-btn {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--ft-tap);
  padding-block: var(--s-3);
  text-align: left;
  color: inherit;
}

.ft__ico--acc {
  color: var(--text-muted);
  transition: transform var(--t-fast) var(--ease-out);
}
.ft__col.is-open .ft__ico--acc { transform: rotate(180deg); }

/* inline-flex + fit-content so the box hugs the ink: the focus ring and the
   hover region are the word, not the whole column */
.ft__link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding-block: var(--s-1);
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-snug);
  transition: color var(--t-fast) var(--ease-out);
}
.ft__link:hover { color: var(--c-navy); }

/* ---------------- Bottom bar ---------------- */

.ft__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-8);
  margin-top: var(--s-11);
  padding-top: var(--s-7);
  border-top: 1px solid var(--c-hairline);
}

.ft__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-6);
  min-width: 0;
}

.ft__copy {
  color: var(--text-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  white-space: nowrap;
}

.ft__legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-6);
  min-width: 0;
}

/* padding grows the hit box past 44px in both axes; the matching negative
   margin keeps the text edge optically flush with the copyright above it */
.ft__legal-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--ft-tap);
  padding-inline: var(--s-2);
  margin-inline: calc(var(--s-2) * -1);
  border-radius: var(--r-sm);
  color: var(--text-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  transition: color var(--t-fast) var(--ease-out);
}
.ft__legal-link:hover { color: var(--c-navy); }

/* the 28x14 toggle glyph is wide enough on its own — tighten its gap */
.ft__legal-link--choices { gap: var(--s-1); }

.ft__choices-ico { flex: none; }

/* ---------------- Social ----------------
   Each 44px box overhangs its own ink by 12px on BOTH sides, so the row's
   layout box is ink-to-ink. It lands flush against the container edge whether
   the bar is side-by-side or wrapped — no side-dependent margin to flip. */

.ft__social {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.ft__social-link {
  display: grid;
  place-items: center;
  width: var(--ft-tap);
  height: var(--ft-tap);
  margin-inline: calc(var(--s-3) * -1);
  color: var(--text-body);
  transition: color var(--t-fast) var(--ease-out);
}
.ft__social-link:hover { color: var(--c-navy); }

/* ---------------- Responsive ----------------
   1280+     : seven tracks — the width at which (inner - 6 gaps) / 7 clears
               the ~150px that the longest label ("Revenue Recognition") needs.
   720–1279  : four tracks, one per balanced stack.
   480–719   : two tracks of open lists — a large phone still gets two columns
               instead of one enormous scroll.
   below 480 : one column of disclosure accordions. */

@media (min-width: 1280px) {
  .ft__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--s-6);
  }
  .ft__stack { display: contents; }
}

@media (max-width: 719px) {
  .ft__inner { padding-block: var(--s-11) var(--s-7); }

  .ft__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    margin-bottom: var(--s-8);
  }

  .ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ft__bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: var(--s-9);
  }
}

/* Accordion — keep in sync with the (min-width: 480px) matchMedia in the
   partial's script. The .js-ready gate (set by main.js) leaves every list
   open and every heading static when JS is unavailable. */
@media (max-width: 479px) {
  .ft__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    border-top: 1px solid var(--c-hairline);
  }
  .ft__stack { gap: 0; }

  .ft__col { border-bottom: 1px solid var(--c-hairline); }

  /* no-JS fallback rhythm: static heading breathing inside its hairline row */
  .ft__h { padding-top: var(--s-3); }

  .js-ready .ft__h { padding-top: 0; margin-bottom: 0; }
  .js-ready .ft__h-text { display: none; }
  .js-ready .ft__h-btn { display: flex; }
  .js-ready .ft__col:not(.is-open) .ft__list { display: none; }

  .ft__list { padding-bottom: var(--s-4); }
}

/* Coarse pointers get 44px rows from padding on the inline box, so the row
   rhythm grows with the ink instead of stretching a full-width block. */
@media (pointer: coarse) {
  .ft__link { padding-block: var(--s-3); }
  .ft__pop-item { min-height: var(--ft-tap); }
}