/* ============================================================================
   Key for Change — site footer (task 12637; #1000906; re-designed #1000959)

   Deep-purple footer band, same glow language as the heroes. Four zones:
     .k4c-footer__top     — closing CTA line (newsletter omitted, #1000906)
     .k4c-footer__cols    — brand + Guides / Work with Keeley / Resources / Contact
     .k4c-footer__support — sitewide crisis lines + quick exit (YMYL §7)
     .k4c-footer__legal   — copyright + BACP + educational disclaimer

   Montserrat headings, Lato body, yellow link/accent hovers. All palette / type
   / spacing come from tokens.css (var(--k4c-*)) and the shared band tokens
   (var(--kfc-*), defined :root in hero.css/inner-hero.css); footer-only muted
   tints and hairlines are derived with color-mix so no raw hex or px is
   hard-coded here.

   IMPORTANT — specificity: quark2/theme.css styles the footer via the ID
   `#footer` (background/color/padding/border/text-align + `#footer a`/`#footer p`).
   Class selectors lose to an ID, so EVERY rule here is scoped under `#footer` to
   reliably out-specify the vendored theme.

   Loaded at asset priority 81 (after body.css, before custom.css @80).
   ========================================================================== */

#footer.k4c-footer {
  /* Footer-scoped tints derived from brand tokens (white-on-purple, AA-safe) */
  --k4c-footer-bg:      var(--k4c-purple);
  --k4c-footer-legal:   var(--k4c-purple-900);
  --k4c-footer-text:    var(--k4c-white);
  --k4c-footer-muted:   color-mix(in oklab, var(--k4c-white) 80%, var(--k4c-purple)); /* ~AA body text */
  --k4c-footer-line:    color-mix(in oklab, var(--k4c-white) 18%, transparent);       /* hairline divider */
  --k4c-footer-surface: color-mix(in oklab, var(--k4c-white) 8%, transparent);        /* input/chip fill */

  position: relative;
  background: var(--k4c-footer-bg);
  color: var(--k4c-footer-text);
  font-family: var(--k4c-font-body);
  font-size: var(--k4c-fs-base);
  line-height: var(--k4c-lh-body);
  text-align: left;      /* reset quark2 #footer text-align:center */
  padding-block: 0;      /* reset quark2 #footer padding; our zones own spacing */
  border-top: 0;         /* reset quark2 #footer divider */
  overflow: hidden;      /* clip the corner glow */
}

/* Soft brand glow bottom-left, mirroring the hero bands */
#footer.k4c-footer::before {
  content: "";
  position: absolute;
  left: -220px;
  bottom: -320px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--kfc-lilac) 40%, transparent) 0%,
    color-mix(in oklab, var(--k4c-purple) 18%, transparent) 45%,
    transparent 70%);
  pointer-events: none;
}
#footer.k4c-footer > * { position: relative; }

#footer .k4c-footer__inner {
  padding-block: var(--k4c-section-pad);
}

/* quark2 sets `#footer li { list-style-type: square }` (ID specificity) —
   strip markers from every footer list in one place (1,1,1 beats 1,0,1). */
#footer.k4c-footer li {
  list-style: none;
}

/* ---- 1. Closing CTA line ------------------------------------------------- */
/* On-brand depth backdrop (#1001019, chrome-capture: "add an on-brand background
   to give this section depth"). Was a flat wash of the footer purple. Now a
   layered stage built from the hero's own glow language, all from tokens:
     1. lilac bloom top-right, behind the sign-up pill
     2. a whisper of brand yellow bottom-left, behind the white CTA
     3. a 135° depth gradient: lifted purple (top-left) → deepest purple (bottom-right)
   plus (::before) a faint white key-bow mark — the favicon shape — bleeding off
   the right edge, and (::after) a 1px top highlight so the band reads as a raised
   surface above the link columns. Content is lifted with z-index so the layers
   never sit over the copy, and the footer's own overflow:hidden clips the bleed. */
#footer .k4c-footer__top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--k4c-footer-line);
  background:
    radial-gradient(60% 90% at 88% 0%,
      color-mix(in oklab, var(--kfc-lilac) 34%, transparent) 0%,
      color-mix(in oklab, var(--kfc-lilac) 10%, transparent) 40%,
      transparent 72%),
    radial-gradient(45% 70% at 4% 100%,
      color-mix(in oklab, var(--k4c-yellow) 14%, transparent) 0%,
      transparent 60%),
    linear-gradient(135deg,
      color-mix(in oklab, var(--k4c-purple) 84%, var(--kfc-lilac)) 0%,
      var(--k4c-purple) 42%,
      var(--k4c-purple-900) 100%);
}
#footer .k4c-footer__top::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -6%;
  top: 50%;
  width: clamp(280px, 34vw, 520px);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%) rotate(-14deg);
  background: url("../images/k4c-keybow-white.png") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
#footer .k4c-footer__top::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--k4c-white) 28%, transparent) 30%,
    color-mix(in oklab, var(--k4c-white) 28%, transparent) 70%,
    transparent 100%);
  pointer-events: none;
}
#footer .k4c-footer__top .k4c-footer__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--k4c-space-8);
}
#footer .k4c-footer__closing {
  margin: 0;
  max-width: 40ch;
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-extrabold);
  font-size: var(--k4c-fs-2xl);
  line-height: var(--k4c-lh-heading);
  letter-spacing: -0.02em;
  color: var(--k4c-white);
  text-wrap: balance;
}
#footer .k4c-footer__closing span { color: var(--kfc-lilac); }
#footer .k4c-footer__closing-sub {
  margin: var(--k4c-space-3) 0 var(--k4c-space-5);
  max-width: 52ch;
  color: var(--k4c-footer-muted);
}
/* The shared .k4c-btn--secondary is purple-on-purple — invisible on this band.
   Give the closing CTA a light fill that reads clearly against the deep purple. */
#footer .k4c-footer__closing-cta {
  display: inline-flex;
  background: var(--k4c-white);
  color: var(--k4c-purple);
  border: 0;
  transition: background-color var(--k4c-transition), color var(--k4c-transition),
              transform var(--k4c-transition);
}
#footer .k4c-footer__closing-cta:hover,
#footer .k4c-footer__closing-cta:focus-visible {
  background: var(--k4c-yellow);
  color: var(--k4c-purple);
  transform: translateY(-2px);
}

/* Two columns per the footer design doc (.f-top 7fr/5fr): closing line left,
   newsletter sign-up right. Restored #1000962 (chrome-capture feedback — the
   closing block was rendering full-width with the form stacked underneath). */
#footer .k4c-footer__top .k4c-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--k4c-space-8);
  align-items: start;
}
#footer .k4c-footer__closing { max-width: none; }
#footer .k4c-footer__signup {
  display: flex;
  flex-direction: column;
  gap: var(--k4c-space-3);
}
/* Label + small-print must be light: the vendored `#footer p` rule colours them
   dark, which is illegible on the purple band (the defect this feedback flagged). */
#footer .k4c-footer__signup-label {
  margin: 0;
  font-size: var(--k4c-fs-sm);
  font-weight: var(--k4c-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kfc-lilac);
}
/* Minimalist email-only pill (design .signup). #1000969: UNWIRED placeholder —
   the form submits nowhere yet (onsubmit=return false), wiring is a TODO card. */
#footer .k4c-footer__signup-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--k4c-space-2);
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  background: var(--k4c-footer-surface);
  border: 1px solid var(--k4c-footer-line);
}
#footer .k4c-footer__signup-input {
  min-width: 0;
  background: none;
  border: 0;
  color: var(--k4c-footer-text);
  font-family: var(--k4c-font-body);
  font-size: var(--k4c-fs-base);
  font-weight: var(--k4c-fw-medium);
  padding: 10px 0;
  margin: 0;             /* strip vendored quark2 `#footer input` 16px bottom margin (the excess space this feedback flagged) */
}
#footer .k4c-footer__signup-input::placeholder { color: var(--k4c-footer-muted); }
#footer .k4c-footer__signup-input:focus-visible { outline: 2px solid var(--kfc-lilac); outline-offset: 2px; }
#footer .k4c-footer__signup-btn {
  font-family: var(--k4c-font-body);
  font-size: var(--k4c-fs-sm);
  font-weight: var(--k4c-fw-bold);
  color: var(--k4c-purple);
  background: var(--k4c-white);
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  margin: 0;             /* strip vendored quark2 `#footer button` 16px bottom margin */
  cursor: pointer;
  transition: background var(--k4c-transition, 0.15s ease);
}
#footer .k4c-footer__signup-btn:hover,
#footer .k4c-footer__signup-btn:focus-visible { background: var(--kfc-lilac); }
#footer .k4c-footer__signup-small {
  margin: 0;
  font-size: var(--k4c-fs-xs);
  line-height: var(--k4c-lh-body);
  color: var(--k4c-footer-muted);
}

/* ---- 2. Column grid: brand / Guides / Work / Resources / Contact -------- */
#footer .k4c-footer__cols {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1.2fr; /* brand + contact a touch wider */
  gap: var(--k4c-space-7);
  align-items: start;
}

#footer .k4c-footer__col { min-width: 0; }

/* ---- Brand column ------------------------------------------------------- */
#footer .k4c-footer__brand {
  display: inline-block;
  border-radius: var(--k4c-radius-sm);
}
#footer .k4c-footer__logo {
  display: block;
  height: 3rem;
  width: auto;          /* preserve aspect ratio — never distort the logo */
}
#footer .k4c-footer__strap {
  margin: var(--k4c-space-4) 0 var(--k4c-space-3);
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-bold);
  font-size: var(--k4c-fs-lg);
  color: var(--k4c-yellow);   /* brand accent for the strapline */
  line-height: var(--k4c-lh-heading);
}
#footer .k4c-footer__about {
  margin: 0;
  max-width: 34ch;
  color: var(--k4c-footer-muted);
}

/* ---- Column headings ---------------------------------------------------- */
#footer .k4c-footer__heading {
  margin: 0 0 var(--k4c-space-5);
  padding-bottom: var(--k4c-space-3);
  border-bottom: 1px solid var(--k4c-footer-line);
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-semibold);
  font-size: var(--k4c-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--k4c-white);
}

/* ---- Links -------------------------------------------------------------- */
/* Link columns are semantic <nav>, which Pico styles as a flex row. Undo that
   so the heading stacks above a tidy left-aligned link list. */
#footer nav.k4c-footer__col { display: block; }
#footer .k4c-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* reset Pico nav ul { align-items:center } */
  gap: var(--k4c-space-3);
}
#footer .k4c-footer__list li {
  display: block;            /* reset Pico nav li { display:inline-block } */
  width: auto;
  margin: 0;
  padding: 0;
}
#footer .k4c-footer__link {
  display: inline-block;
  margin: 0;
  padding: 0;
  color: var(--k4c-footer-muted);
  text-decoration: none;
  font-weight: var(--k4c-fw-regular);
  transition: color var(--k4c-transition);
}
#footer .k4c-footer__link:hover,
#footer .k4c-footer__link:focus-visible {
  color: var(--k4c-yellow);   /* yellow accent on hover/focus */
  text-decoration: none;
}
/* "All 15 guides →" / "Apply for a call →" — lilac, slightly stronger */
#footer .k4c-footer__more {
  color: var(--kfc-lilac);
  font-weight: var(--k4c-fw-semibold);
}
#footer .k4c-footer__more:hover,
#footer .k4c-footer__more:focus-visible { color: var(--k4c-yellow); }

/* ---- Contact ------------------------------------------------------------ */
#footer .k4c-footer__contact { font-style: normal; }
#footer .k4c-footer__contact-line {
  margin: 0 0 var(--k4c-space-3);
  color: var(--k4c-footer-muted);
}
#footer .k4c-footer__contact-line:last-child { margin-bottom: 0; }
#footer .k4c-footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
#footer .k4c-footer__whatsapp svg { flex: 0 0 auto; }

/* ---- Social icons (brand column) ---------------------------------------- */
#footer .k4c-footer__social {
  list-style: none;
  margin: var(--k4c-space-5) 0 0;
  padding: 0;
  display: flex;
  gap: var(--k4c-space-3);
}
#footer .k4c-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--k4c-radius-pill);
  color: var(--k4c-white);
  background: var(--k4c-footer-surface);
  transition: background-color var(--k4c-transition),
              color var(--k4c-transition),
              transform var(--k4c-transition);
}
#footer .k4c-footer__social-link:hover,
#footer .k4c-footer__social-link:focus-visible {
  background: var(--k4c-yellow);
  color: var(--k4c-purple);
  transform: translateY(-2px);
}

/* ---- 2b. Collaborations logo marquee (#1000991) ------------------------- */
/* The "Collaborations" carousel from the old WP success-stories footer, rebuilt
   sitewide. CSS-only continuous scroll; logos sit on white chips so the mixed
   brand marks (some colour-on-white, some on colour) all read on the purple. */
#footer .k4c-footer__collab {
  border-top: 1px solid var(--k4c-footer-line);
  padding-block: var(--k4c-space-7);
  text-align: center;
}
#footer .k4c-footer__collab .k4c-footer__inner {
  padding-block: 0;   /* band owns its own vertical rhythm */
}
#footer .k4c-collab__eyebrow {
  margin: 0 0 var(--k4c-space-1);
  font-size: var(--k4c-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--k4c-footer-muted);
}
#footer .k4c-collab__heading {
  margin: 0 0 var(--k4c-space-6);
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-semibold);
  font-size: var(--k4c-fs-lg);
  color: var(--k4c-white);
}
/* Viewport clips the over-wide track; edge masks fade logos in/out at the sides. */
#footer .k4c-collab__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
#footer .k4c-collab__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--k4c-space-4);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: k4c-collab-scroll 48s linear infinite;
}
#footer .k4c-collab__viewport:hover .k4c-collab__track,
#footer .k4c-collab__viewport:focus-within .k4c-collab__track {
  animation-play-state: paused;
}
#footer .k4c-collab__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 70px;
  padding: var(--k4c-space-3) var(--k4c-space-4);
  background: var(--k4c-white);
  border-radius: var(--k4c-radius);
  box-shadow: var(--k4c-shadow-sm);
}
#footer .k4c-collab__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
@keyframes k4c-collab-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* one full set width (track holds 2 sets) */
}
/* Reduced motion / no-anim: freeze into a tidy centred wrap of both sets, but hide the
   aria-hidden duplicate so the wrap doesn't show every logo twice. */
@media (prefers-reduced-motion: reduce) {
  #footer .k4c-collab__viewport {
    -webkit-mask-image: none;
            mask-image: none;
  }
  #footer .k4c-collab__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
  #footer .k4c-collab__item[aria-hidden="true"] { display: none; }
}

/* ---- 3. Support strip: crisis lines + quick exit ------------------------ */
#footer .k4c-footer__support {
  background: var(--k4c-footer-legal);
  border-top: 1px solid var(--k4c-footer-line);
}
#footer .k4c-footer__support-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--k4c-space-3) var(--k4c-space-6);
  padding-block: var(--k4c-space-4);
}
#footer .k4c-footer__support-lead {
  display: inline-flex;
  align-items: center;
  gap: var(--k4c-space-2);
  margin: 0;
  font-weight: var(--k4c-fw-bold);
  color: var(--k4c-white);
}
#footer .k4c-footer__support-lead svg { color: var(--kfc-lilac); flex: none; }
#footer .k4c-footer__support-lines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k4c-space-2) var(--k4c-space-5);
  margin: 0;
  font-size: var(--k4c-fs-sm);
  color: var(--k4c-footer-muted);
}
#footer .k4c-footer__support-lines b {
  color: var(--k4c-white);
  font-weight: var(--k4c-fw-semibold);
  font-variant-numeric: tabular-nums;
}
#footer .k4c-footer__exit {
  display: inline-flex;
  align-items: center;
  gap: var(--k4c-space-2);
  min-height: 2.5rem;
  padding: var(--k4c-space-2) var(--k4c-space-4);
  border-radius: var(--k4c-radius-pill);
  border: 1px solid color-mix(in oklab, var(--kfc-lilac) 50%, transparent);
  color: var(--k4c-white);
  font-size: var(--k4c-fs-sm);
  font-weight: var(--k4c-fw-semibold);
  text-decoration: none;
  transition: background-color var(--k4c-transition), border-color var(--k4c-transition);
}
#footer .k4c-footer__exit svg { color: var(--kfc-lilac); flex: none; }
#footer .k4c-footer__exit:hover,
#footer .k4c-footer__exit:focus-visible {
  background: var(--k4c-footer-surface);
  border-color: var(--kfc-lilac);
  color: var(--k4c-white);
}

/* ---- 4. Legal / copyright bar ------------------------------------------- */
#footer .k4c-footer__legal {
  background: var(--k4c-footer-legal);
  border-top: 1px solid var(--k4c-footer-line);
}
#footer .k4c-footer__legal-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--k4c-space-3) var(--k4c-space-6);
  padding-block: var(--k4c-space-5);
}
#footer .k4c-footer__copy {
  margin: 0;
  font-size: var(--k4c-fs-sm);
  color: var(--k4c-footer-muted);
}
#footer .k4c-footer__bacp {
  margin: 0;
  font-size: var(--k4c-fs-sm);
  color: var(--k4c-footer-muted);
}
#footer .k4c-footer__legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--k4c-space-5);
  font-size: var(--k4c-fs-sm);
}
#footer .k4c-footer__disclaimer {
  flex-basis: 100%;
  max-width: 76ch;
  margin: 0;
  font-size: var(--k4c-fs-xs);
  line-height: var(--k4c-lh-body);
  color: color-mix(in oklab, var(--k4c-footer-muted) 82%, var(--k4c-purple));
}

/* ---- Accessible focus ring (yellow) ------------------------------------- */
#footer.k4c-footer a:focus-visible,
#footer.k4c-footer button:focus-visible {
  outline: 2px solid var(--k4c-yellow);
  outline-offset: 2px;
  border-radius: var(--k4c-radius-sm);
}

/* ---- Responsive: 5 → brand-full + columns → 1 -------------------------- */
@media (max-width: 1000px) {
  #footer .k4c-footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--k4c-space-6);
  }
  #footer .k4c-footer__col--brand { grid-column: 1 / -1; }
  #footer .k4c-footer__closing { font-size: var(--k4c-fs-xl); }
  /* Stack the closing line above the sign-up form (design .f-top @1100px). */
  #footer .k4c-footer__top .k4c-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--k4c-space-6);
  }
}

@media (max-width: 600px) {
  #footer .k4c-footer__cols {
    grid-template-columns: 1fr;
    gap: var(--k4c-space-7);
  }
  #footer .k4c-footer__col--brand { grid-column: auto; }
  #footer .k4c-footer__heading { margin-bottom: var(--k4c-space-4); }
  /* Stacked layout: park the key-bow mark in the top-right corner, smaller and
     fainter, so it never sits behind the email pill or the small print (#1001019). */
  #footer .k4c-footer__top::before {
    top: -8%;
    right: -18%;
    width: 240px;
    transform: rotate(-14deg);
    opacity: 0.05;
  }
  /* Stack the email pill on narrow screens (design .signup @600px). */
  #footer .k4c-footer__signup-form {
    grid-template-columns: 1fr;
    padding: 6px;
    border-radius: 20px;
  }
  #footer .k4c-footer__signup-input { padding: 10px 12px; }
  #footer .k4c-footer__support-inner,
  #footer .k4c-footer__legal-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Both office addresses (#1001663) — small caps label above each block. */
#footer .k4c-footer__addr-label {
  display: block;
  margin-bottom: var(--k4c-space-1);
  font-family: var(--k4c-font-heading);
  font-size: var(--k4c-fs-xs, 0.75rem);
  font-weight: var(--k4c-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k4c-white);
}