/* ============================================================
   FOOTER.CSS — Page Footer
   ============================================================
   PURPOSE:
     Styles the site footer: a top row of link columns (Services /
     Ressources / Régions / Outils) implementing the internal-linking
     goals in docs/SEO_GROWTH_PLAN.md Section 5, and a bottom bar
     (logo left, copyright center, legal links right) — the original
     three-column row, now scoped to .footer-bottom instead of the
     bare <footer> element so the columns row can sit above it.

   SAFE TO EDIT:
     - footer background (currently --paper for light gray)
     - Copyright text in index.html (update year manually)
     - Footer link text and hrefs in index.html
     - Footer column titles/links in index.html

   DO NOT MODIFY:
     - padding-bottom on mobile (layout.css, ≤768px) — reserves
       room below the footer so the fixed mobile sticky bar never
       covers footer content. It reads --sticky-bar-height, a CSS
       variable kept in sync with the bar's real rendered height by
       a ResizeObserver in navigation.js. Removing it causes overlap;
       hardcoding it back to a fixed px value re-introduces the
       overlap bug on any FR/EN text-length or text-wrap difference.
============================================================ */


/* ── Footer Container ─────────────────────────────────────── */
footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 2.5rem var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* Smooths --sticky-bar-height changes (language switch, text wrap,
     viewport resize) instead of the footer's bottom padding snapping
     to a new value instantly. */
  transition: padding-bottom 0.2s ease;
}


/* ── Footer Link Columns ──────────────────────────────────────
   4-column grid of grouped links (Services, Ressources, Régions
   desservies, Outils). Mirrors the mega-menu content in the nav
   (see hero.css/index.html) — same destinations, different entry
   point, per the internal-linking goals in SEO_GROWTH_PLAN.md.
────────────────────────────────────────────────────────────── */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 32rem;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-col-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

.footer-col a {
  font-size: 0.8rem;
  color: var(--stone);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: var(--gold);
}

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


/* ── Footer Bottom Bar ─────────────────────────────────────────
   The original logo / copyright / legal-links row. Unchanged
   visually — just renamed from the bare `footer` selector so the
   link columns above it have room in the same <footer> element.
────────────────────────────────────────────────────────────── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* wraps to multiple rows on narrow screens */
  gap: 1rem;
}


/* ── Footer Logo (text) ───────────────────────────────────── */
.footer-logo {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.03em;
}

.footer-logo span {
  color: var(--gold);
}


/* ── Footer Copyright / Credential Text ─────────────────────
   Uses --stone, not --mist: --mist fails WCAG AA contrast
   (~2.2:1) against the --paper footer background. --stone
   passes at ~5:1. See variables.css for token definitions.
──────────────────────────────────────────────────────────── */
.footer-text {
  font-size: 0.75rem;
  color: var(--stone);
  text-align: center;
  line-height: 1.6;
}


/* ── Footer Division Note ──────────────────────────────────────
   One discreet line pointing traditional-buyer traffic toward the
   distressed-homeowner content silo's hub page. Deliberately NOT
   in .footer-columns or the nav — kept low-emphasis so it doesn't
   compete with the primary buyer journey, while still giving
   Google (and a self-selecting visitor) a crawl path into the
   silo. See docs/DISTRESSED_FUNNEL_PLAN.md.
────────────────────────────────────────────────────────────── */
.footer-division-note {
  /* Uses --stone, not --mist: --mist fails WCAG AA contrast against
     the --paper footer background (see .footer-text note above). */
  font-size: 0.72rem;
  color: var(--stone);
  text-align: center;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.footer-division-note a {
  color: var(--stone);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-division-note a:hover {
  color: var(--gold);
}


/* ── Footer Navigation Links ──────────────────────────────── */
.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  font-size: 0.75rem;
  color: var(--stone);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--ink);
}