/* ============================================================================
   Key for Change — four-column footer (task 12637)

   Dark-purple footer band that closes the homepage concept. Four columns
   (brand / quick links / contact / social + newsletter) collapse
   4 → 2 (≤900px) → 1 (≤600px); a deeper legal bar grounds the page.

   Montserrat headings, Lato body, yellow link/accent hovers. All palette /
   type / spacing come from tokens.css (var(--k4c-*)); footer-only muted tints
   and hairlines are derived with color-mix on those tokens 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` and
   `#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 fill */

  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 inner/legal own spacing */
  border-top: 0;         /* reset quark2 #footer divider */
}

#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;
}

/* ---- Column grid: 4 → 2 → 1 -------------------------------------------- */
#footer .k4c-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr; /* brand column a touch wider */
  gap: var(--k4c-space-7) var(--k4c-space-6);
}

#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: 32ch;
  color: var(--k4c-footer-muted);
}

/* ---- Column headings ---------------------------------------------------- */
#footer .k4c-footer__heading {
  margin: 0 0 var(--k4c-space-4);
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-semibold);
  font-size: var(--k4c-fs-md);
  color: var(--k4c-white);
  letter-spacing: 0.01em;
}

/* ---- Links -------------------------------------------------------------- */
/* The Quick-links column is a semantic <nav>, which Pico (blades.min.css)
   styles as a flex row (`nav`) with a centred flex-column list (`nav ul` /
   `nav li` / `nav a`). Undo all of 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;                /* reset Pico nav li padding */
}
#footer .k4c-footer__link {
  display: inline-block;
  margin: 0;
  padding: 0;                /* reset Pico nav a padding / negative margin */
  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;
}

/* ---- Contact ------------------------------------------------------------ */
#footer .k4c-footer__contact {
  font-style: normal;   /* reset <address> italics */
}
#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; }

/* ---- Social icons ------------------------------------------------------- */
#footer .k4c-footer__social {
  list-style: none;
  margin: 0 0 var(--k4c-space-5);
  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);
}

/* ---- Newsletter --------------------------------------------------------- */
#footer .k4c-footer__news-label {
  display: block;
  margin-bottom: var(--k4c-space-2);
  font-size: var(--k4c-fs-sm);
  color: var(--k4c-footer-muted);
}

/* Sitewide GoHighLevel opt-in embedded in the footer (#12677). The GHL form
   renders on a light surface, so it sits in a white rounded card to stay legible
   against the dark footer band; form_embed.js resizes the iframe to fit. */
#footer .k4c-footer__newsletter {
  background: var(--k4c-white);
  border-radius: var(--k4c-radius-lg);
  padding: var(--k4c-space-2);
  overflow: hidden;
}
#footer .k4c-footer__newsletter .k4c-ghlform { scroll-margin-top: 0; }
#footer .k4c-footer__newsletter .k4c-ghlform__iframe {
  border-radius: var(--k4c-radius);
}

/* ---- 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);
  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__legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--k4c-space-5);
  font-size: var(--k4c-fs-sm);
}

/* ---- 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: 4 → 2 (tablet) → 1 (mobile) --------------------------- */
@media (max-width: 900px) {
  #footer .k4c-footer__cols {
    grid-template-columns: 1fr 1fr;
  }
  /* Brand column spans the full width above the two link columns */
  #footer .k4c-footer__col--brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  #footer .k4c-footer__cols {
    grid-template-columns: 1fr;
    gap: var(--k4c-space-6);
  }
  #footer .k4c-footer__col--brand { grid-column: auto; }
  #footer .k4c-footer__legal-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}