/* ============================================================
   SHARED SITE FOOTER  —  .qc-foot
   Loaded by the homepage (index.html) and every /tools page.

   Why not reuse .site-foot: that class is declared in styles.css,
   which the homepage and the tool pages deliberately do NOT load
   (styles.css is the old landing page's sheet and would fight
   map.css for the same elements). Two components answering to one
   class name, resolved by load order, is exactly the parallel
   source of truth this project bans — so the shared footer gets
   its own name and its own file, and no page ever loads both.

   Needs tokens.css and nothing else. Grammar is the site's:
   flat shapes, hard edges, zero-blur offset shadows, no glows.
   ============================================================ */

.qc-foot{
  /* 61 clears the homepage's fixed proscenium — .theatre (25), .pelmet (59) and
     .drape (60) all frame the scroll journey and would otherwise dim the
     footer's edges and cut a valance across its top. It stays under .qnav
     (62) and .road-progress (63), which are meant to sit over everything. On a
     tool page there is no theatre and the value is simply inert. */
  position: relative; z-index: 61;
  background: var(--paper-100);
  border-top: 4px double var(--ink-500);
  padding: clamp(2.4rem, 7vh, 4rem) clamp(1rem, 4vw, 2rem) 2.6rem;
  font-family: var(--font-body);
  color: var(--ink-700);
}
.qc-foot__inner{ max-width: 60rem; margin: 0 auto; text-align: center; }

.qc-foot__logo{ display: block; margin: 0 auto .8rem; height: clamp(48px, 8vw, 68px); width: auto; }

/* 1.05rem is far under the --font-display floor, so this is body at 700 with
   tracking — reads as a heading without the condensed face falling apart. */
.qc-foot__tag{
  font-size: 1.05rem; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-900); margin: 0 0 .4rem;
}
.qc-foot__line{ font-size: .9rem; line-height: 1.55; color: var(--ink-500); margin: 0 0 .3rem; }

/* ── The link graph. This is the whole reason the footer exists: /tools has no
      other inbound internal link from the homepage. ─────────────────────── */
.qc-foot__nav{
  display: flex; flex-direction: column; gap: .1rem;
  max-width: 44rem; margin: 1.8rem auto 0; text-align: left;
}
.qc-foot__nav a{
  display: block; padding: .6rem .2rem;
  color: var(--ink-700); font-size: .94rem; line-height: 1.4;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-500) 28%, transparent);
  transition: color .18s ease, background-color .18s ease, padding-left .18s var(--snap);
}
.qc-foot__nav a:last-child{ border-bottom: 0; }
.qc-foot__nav a::before{
  content: "\203A"; color: var(--rubric-deep); margin-right: .6rem; font-weight: 700;
}
.qc-foot__nav a:hover{ color: var(--ink-900); background: var(--paper-300); padding-left: .5rem; }
.qc-foot__nav a:focus-visible{ outline: 2px solid var(--rubric-deep); outline-offset: 2px; border-radius: 2px; }

/* The free tools are the reason a stranger has any business here, so the link
   to them is a cut chip rather than another line in the list. */
.qc-foot__nav a.is-primary{
  background: var(--ink-900); color: var(--paper-100);
  font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--ink-900); border-radius: 2px;
  box-shadow: 4px 4px 0 rgba(28, 19, 10, .16);
  padding: .8rem 1rem; margin-bottom: 1rem;
}
.qc-foot__nav a.is-primary::before{ color: var(--gold); }
.qc-foot__nav a.is-primary:hover{
  background: var(--rubric-deep); border-color: var(--rubric-deep);
  color: var(--paper-100); padding-left: 1rem;
  box-shadow: 6px 6px 0 rgba(28, 19, 10, .16);
}

.qc-foot__legal{
  margin: 2rem auto 0; max-width: 46rem;
  font-size: .8rem; line-height: 1.6; color: var(--ink-soft);
}
.qc-foot__legal p{ margin: 0 0 .35rem; }

/* ── The plain pages. Separate from .qc-foot__nav above because that list is
      the site's SEO link graph — long descriptive lines, one per row. These are
      four short obligations, and a stacked list of them would read as a fifth
      content section rather than the small print it is. Inline, separated by a
      printed rule, sitting above the disclaimer they belong with. ────────── */
.qc-foot__legal-nav{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .1rem .9rem; margin: 0 0 .9rem;
}
.qc-foot__legal-nav a{
  position: relative;
  color: var(--ink-700); font-weight: 700;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; padding: .2rem 0;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
/* a hairline between the routes, drawn in the gap rather than as a character,
   so a screen reader never announces a pipe */
.qc-foot__legal-nav a + a::before{
  content: ""; position: absolute; left: -.47rem; top: .35em; bottom: .35em;
  width: 1px; background: color-mix(in srgb, var(--ink-500) 34%, transparent);
}
.qc-foot__legal-nav a:hover{ color: var(--ink-900); border-bottom-color: var(--ink-500); }
.qc-foot__legal-nav a:focus-visible{ outline: 2px solid var(--rubric-deep); outline-offset: 3px; }
.qc-foot__legal-nav a[aria-current="page"]{ color: var(--rubric-deep); border-bottom-color: var(--rubric-deep); }

@media (prefers-reduced-motion: reduce){
  .qc-foot__nav a{ transition-duration: .001ms; }
  .qc-foot__legal-nav a{ transition-duration: .001ms; }
}