/* ============================================================================
   COR SITE FOOTER — styles

   Pairs with:
     · Website/build/footer-template.html  (the markup — edit the footer there)

   REQUIRES assets/cor.css to be linked FIRST — this file uses its tokens
   (--ink, --ink-2, --ink-3, --blue, --rule, --space-*, --step-*, --section-tight)
   and its .wrap primitive.

   No JavaScript. The footer is static markup.

   The nine clinical pages used to carry their own `.cpc-footer` with a dark
   navy palette hard-coded into it and no tokens at all. That is gone — one
   footer, one set of styles, stamped into every page.
============================================================================ */

footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--section-tight);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-7);
}

.footer-brand-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-1); color: var(--ink);
}
.footer-tagline {
  font-size: var(--step--1); color: var(--ink-3);
  max-width: 26ch; margin-top: var(--space-2);
}

.footer-col-label {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.055em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--space-3);
}
/* The columns are <nav> landmarks carrying <ul>s. Reset the list here rather
   than relying on a page-level reset, since this file has to work on pages
   whose own CSS has been deleted. */
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { padding: 0.2rem 0; }
.footer-col a { font-size: var(--step--1); color: var(--ink-2); }
.footer-col a:hover { color: var(--blue); }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--ink-3);
}

@media (max-width: 1000px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-6); }
}