/**
 * Celthrac Deep Signal - site footer.
 *
 * Split out of layout.css on 2026-07-20. Two reasons:
 *  1. layout.css had grown to cover skip-link, header, nav, mega-menu and
 *     footer; the footer is a self-contained region and reads better alone.
 *  2. Adding a file to the theme's global library changes the aggregate URL,
 *     which is the only reliable way to evict the CDN copy of the old
 *     stylesheet (aggregate filenames are derived from the library list, not
 *     from file contents, and static assets are served with `expires 30d`).
 *
 * Token-only. No hex literals - the palette lives in css/tokens.css.
 */

/* ==========================================================================
 * Footer (.ds-foot) — the shared includes/ds-footer.html.twig, used by both
 * page.html.twig (theme-chrome pages) and page--fullbleed.html.twig (landing
 * pages). This is the ONLY footer on the site.
 *
 * Design notes:
 *  - Deliberately self-contained: the markup no longer carries .ds-sec /
 *    .ds-bg-darker / .ds-wrap. Those class names were also defined (unscoped,
 *    with dead legacy vars) inside the landing-page body fields, which
 *    collapsed the footer's padding and flipped its grid to flex. Owning our
 *    own layout primitives here makes the footer immune to body-field CSS.
 *  - Token-only. No hex literals — the palette lives in css/tokens.css.
 *  - Top edge carries the brand gradient as a 2px signal rule.
 * ========================================================================== */
.ds-foot {
  position: relative;
  background: var(--cx-charcoal-3);
  color: var(--cx-n500);
  font-family: var(--cx-fbody);
  font-size: .9rem;
  line-height: 1.6;
  border-top: 1px solid var(--cx-n700);
}
/* Gradient signal rule along the top edge. */
.ds-foot::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--cx-grad);
  opacity: .9;
}
.ds-foot .ds-foot-inner {
  max-width: var(--cx-maxw);
  margin: 0 auto;
  padding: var(--cx-sec-y-sm) var(--cx-gutter) var(--cx-space-8);
}

/* ---- Layout: brand block + 4 link columns ---- */
.ds-foot .ds-foot-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) 2.6fr;
  gap: var(--cx-space-10) 64px;
  align-items: start;
}
.ds-foot .ds-foot-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cx-space-9) var(--cx-space-8);
}

/* ---- Brand block ---- */
.ds-foot .ds-foot-logo { display: inline-flex; margin-bottom: var(--cx-space-5); }
.ds-foot .ds-foot-tagline {
  margin: 0 0 var(--cx-space-4);
  max-width: 32ch;
  font-family: var(--cx-fhead);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--cx-n100);
}
.ds-foot .ds-foot-meta { margin: 0 0 var(--cx-space-7); max-width: 34ch; color: var(--cx-n500); }

.ds-foot .ds-foot-contact { display: flex; flex-direction: column; gap: var(--cx-space-2); margin-bottom: var(--cx-space-7); }
.ds-foot .ds-foot-label,
.ds-foot .ds-foot-head {
  font-family: var(--cx-fmono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cx-n500);
}
.ds-foot .ds-foot-mail {
  font-family: var(--cx-fhead);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--cx-n100);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color var(--cx-dur) var(--cx-ease), border-color var(--cx-dur) var(--cx-ease);
}
.ds-foot .ds-foot-mail:hover,
.ds-foot .ds-foot-mail:focus-visible { color: var(--cx-white); border-bottom-color: var(--cx-accent); }
.ds-foot .ds-foot-note { font-size: .82rem; color: var(--cx-n500); }

/* CTA — the nav's dual-chevron "forward flow" pattern, footer-scale. */
.ds-foot .ds-foot-cta {
  display: inline-flex; align-items: center; gap: var(--cx-space-3);
  color: var(--cx-white); font-weight: 600; font-size: .95rem;
  text-decoration: none; line-height: 1;
}
.ds-foot .ds-foot-cta-label { position: relative; padding: 6px 0; }
.ds-foot .ds-foot-cta-label::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--cx-grad); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--cx-ease);
}
.ds-foot .ds-foot-cta:hover .ds-foot-cta-label::after,
.ds-foot .ds-foot-cta:focus-visible .ds-foot-cta-label::after { transform: scaleX(1); }
.ds-foot .ds-foot-cta-chev {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: var(--cx-grad); color: var(--cx-white);
  border-radius: var(--cx-radius-sm);
  transition: box-shadow .42s var(--cx-ease), transform .42s var(--cx-ease);
}
.ds-foot .ds-foot-cta-chev svg { width: 13px; height: 13px; display: block; }
.ds-foot .ds-foot-cta:hover .ds-foot-cta-chev,
.ds-foot .ds-foot-cta:focus-visible .ds-foot-cta-chev {
  box-shadow: 0 0 26px var(--cx-accent-glow);
  transform: translateX(3px);
}

/* ---- Link columns ---- */
/* Column headings sit one step brighter than the "DIRECT LINE" label so the
   four link groups read as structure, not as captions. 7.4:1 on --cx-charcoal-3. */
.ds-foot .ds-foot-head { display: block; margin: 0 0 var(--cx-space-5); color: var(--cx-n300); }
.ds-foot .ds-foot-col ul { list-style: none; margin: 0; padding: 0; }
.ds-foot .ds-foot-col li { margin-bottom: var(--cx-space-3); }
.ds-foot .ds-foot-col a {
  color: var(--cx-n300);
  text-decoration: none;
  transition: color var(--cx-dur) var(--cx-ease);
}
.ds-foot .ds-foot-col a:hover,
.ds-foot .ds-foot-col a:focus-visible { color: var(--cx-white); }
.ds-foot .ds-foot-more { color: var(--cx-n500) !important; font-size: .84rem; }
.ds-foot .ds-foot-more:hover,
.ds-foot .ds-foot-more:focus-visible {
  color: var(--cx-accent-hover) !important;
}
.ds-foot .ds-foot-ext { margin-left: 5px; font-size: .78em; opacity: .65; }

/* ---- Compliance / trust strip ---- */
.ds-foot .ds-foot-trust {
  display: flex; flex-wrap: wrap; gap: var(--cx-space-3) var(--cx-space-4);
  list-style: none; margin: var(--cx-space-10) 0 var(--cx-space-8); padding: 0;
}
.ds-foot .ds-foot-trust li {
  font-family: var(--cx-fmono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cx-n300);
  padding: 7px 13px;
  border: 1px solid var(--cx-n700);
  border-radius: var(--cx-radius-pill);
  background: rgba(var(--cx-accent-rgb), .06);
}

/* ---- Legal bottom bar ---- */
.ds-foot .ds-foot-bottom {
  display: flex; flex-wrap: wrap; gap: var(--cx-space-3) var(--cx-space-6);
  justify-content: space-between; align-items: center;
  border-top: 1px solid var(--cx-n700);
  padding-top: var(--cx-space-6);
  font-family: var(--cx-fmono);
  font-size: .73rem;
  letter-spacing: .05em;
  color: var(--cx-n500);
}
.ds-foot .ds-foot-legal { display: inline-flex; flex-wrap: wrap; gap: var(--cx-space-6); }
.ds-foot .ds-foot-bottom a { color: var(--cx-n500); text-decoration: none; transition: color var(--cx-dur) var(--cx-ease); }
.ds-foot .ds-foot-bottom a:hover,
.ds-foot .ds-foot-bottom a:focus-visible { color: var(--cx-n100); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .ds-foot .ds-foot-grid { grid-template-columns: 1fr; gap: var(--cx-space-10); }
  .ds-foot .ds-foot-brand { max-width: 46ch; }
}
@media (max-width: 720px) {
  .ds-foot .ds-foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-foot .ds-foot-inner { padding-top: var(--cx-space-10); }
}
@media (max-width: 460px) {
  .ds-foot .ds-foot-nav { grid-template-columns: 1fr; gap: var(--cx-space-8); }
  .ds-foot .ds-foot-bottom { flex-direction: column; align-items: flex-start; }
}
