/* ═════════════════════════════════════════════════════════════════
   footer.css — Single source of truth for footer styling.

   Loaded by every page that includes /footer.php. All .footer rules
   that used to live in style.css (canonical), style-index.css (drift),
   style-subpage.css (drift), detail-ws.css (drift), and lp/style.css
   (.revision-footer) have been consolidated here.

   To change the footer look, edit THIS file. No other stylesheet
   should declare .footer rules.

   Palette tokens (--page-bg, --page-text) come from style.css's :root
   when it's loaded. When it isn't (e.g. the /lp/ revision pages, which
   load only /lp/style.css), the fallback values below keep the footer
   rendering the canonical navy/lavender. Update both the canonical
   tokens and these fallbacks if the palette ever changes.
   ═════════════════════════════════════════════════════════════════ */

/* --- Footer — centered, one line on desktop; stacked + compact on mobile --- */
.footer {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: capitalize;
  background: var(--page-bg, #313852);
  color: var(--page-text, #d1d6ff);
  padding: 0.75rem 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: auto;
  text-align: center;
}
.footer h3,
.footer .role,
.footer .copyright {
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: capitalize;
  margin: 0;
  display: inline;
}
.footer h3 {
  font-weight: 600;
  color: var(--page-text, #d1d6ff);
}
.footer .role {
  /* Pink accent for the "& Animator" tail. */
  color: #ff29d1;
}
.footer .role .role-title {
  /* "Creative Developer" in section-heading blue. */
  color: #3d9bff;
}
.footer .role::before {
  content: "·";
  margin-right: 0.6rem;
  /* Dim separator dot — the role/copyright text itself stays in the
     full palette color; only the bullet is faded. */
  color: rgba(255, 255, 255, 0.35);
}
.footer .copyright {
  color: var(--page-text, #d1d6ff);
}
.footer .copyright::before {
  content: "·";
  margin-right: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
}

/* Footer: stacked at 768px; extra compact on narrow mobile. */
@media (max-width: 768px) {
  .footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.6rem 5%;
  }
  .footer h3,
  .footer .role,
  .footer .copyright {
    display: block;
  }
  .footer .role::before,
  .footer .copyright::before {
    content: none;
    margin-right: 0;
  }
}
@media (max-width: 640px) {
  .footer {
    padding: 0.5rem 4%;
    gap: 0.15rem;
    font-size: 0.65rem;
  }
}

/* Section-nav clearance: on pages that have a fixed bottom sub-nav
   (index.php sets body.with-section-nav, /lp/index.php sets
   body.revision-with-section-nav), the footer needs room below it so
   it's not permanently obscured by the nav bar. */
body.with-section-nav .footer,
body.revision-with-section-nav .footer {
  margin-bottom: 65px;
}