/* ═══════════════════════════════════════════════════
   FOOTER — brand column plus two link groups
   Source: css/nav-footer.css lines 299-362 and its .ft-a responsive rules,
   whose 960px block is normalised to the theme's 1024px breakpoint.
═══════════════════════════════════════════════════ */

#footer-a {
  background: var(--c-bg-2);
  padding: var(--sp-20) 0 0;
}

.ft-a-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad) var(--sp-16);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-16);
  border-bottom: 1px solid var(--c-border);
}

/* ── Column 1: brand ── */
.ft-a-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--c-accent);
  margin-bottom: 14px;
}
.ft-a-logo svg { width: 80px; height: auto; display: block }

.ft-a-tagline {
  font-size: var(--fs-300);
  color: var(--c-text-4);
  line-height: 1.75;
  max-width: 220px;
}

/* ── Link groups ── */
.ft-a-col-title {
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: 18px;
}
.ft-a-links { display: flex; flex-direction: column; gap: 10px }
.ft-a-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-200);
  color: var(--c-text-4);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.ft-a-link:hover { color: var(--c-text-1) }
/* The one place --c-accent-bright stays. Measured on its own tinted fill,
   rgb(29,36,48): bright gives 5.56:1 and --c-accent gives 4.24:1, under the
   4.5:1 floor for text this size. The FAQ icon and the sample report's grade
   also drop below 4.5 on --c-accent, but both are aria-hidden decoration and
   answer to the 3:1 threshold for non-text, which they clear. This badge is
   read. */
.ft-a-link-new {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(var(--c-accent-rgb), .1);
  border: 1px solid rgba(var(--c-accent-rgb), .2);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-accent-bright);
}

/* ── Bottom bar: copyright on the left, legal links on the right. ── */
.ft-a-bar {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-5) var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.ft-a-copy { font-size: var(--fs-200); color: var(--c-text-3); line-height: 1.7 }

.ft-a-bar-links { display: flex; gap: var(--sp-5); flex-wrap: wrap }
.ft-a-bar-link {
  font-size: var(--fs-200);
  /* Quiet, but readable. Half opacity on this colour resolved to ~#454A5E and
     measured 1.98:1 against the bar — legally required links that many people
     could not read. At full strength the same token measures 4.73:1 and clears
     the 4.5:1 minimum, while still reading as secondary: it is the colour the
     copyright line beside it already uses, so the whole bar now sits at one
     weight instead of the links whispering under it. */
  color: var(--c-text-4);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.ft-a-bar-link:hover { color: var(--c-text-2) }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ft-a-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-10) }
}

@media (max-width: 768px) {
  .ft-a-inner,
  .ft-a-bar { padding-left: var(--sp-6); padding-right: var(--sp-6) }
  .ft-a-inner { grid-template-columns: 1fr; gap: var(--sp-8) }
}