/* ===========================================================================
   siriusly.ai - shared site footer (siriusly/_footer.html)
   Every template loads this via design-system.css, same pattern as navbar.css,
   since the footer now renders on every page instead of only the marketing
   pages that used to hard-code this markup.
   =========================================================================== */
.lp-footer { border-top: 1px solid var(--border-subtle); background: var(--surface-card); }
.lp-footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
}
.lp-footer-brand { max-width: 280px; }
.lp-footer-brand .mark { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 20px; color: var(--text-strong); line-height: 1; }
.lp-footer-brand p { font-size: var(--text-body-sm); color: var(--text-muted); margin: 10px 0 0; line-height: 1.55; }
.lp-footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.lp-footer-cols h4 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-subtle);
  margin: 0 0 14px;
}
.lp-footer-cols div a { display: block; font-size: 14.5px; color: var(--text-muted); text-decoration: none; margin-bottom: 10px; }
.lp-footer-cols div a:hover { color: var(--text-strong); text-decoration: none; }
.lp-footer-bottom {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--text-subtle);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.lp-footer-bottom a { color: var(--text-subtle); text-decoration: none; }
.lp-footer-bottom a:hover { color: var(--text-muted); text-decoration: none; }

/* Bottom-right support bubble (base.html), styled like thesisai's Brevo chat
   launcher. It only links to /support/ until siriusly has its own Brevo inbox. */
.sr-support-bubble {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-brand);
  transition: transform 0.15s ease;
}
/* :root[data-theme] prefix outranks colors.light.css's global
   a:hover:not(.lp-btn), which would otherwise turn the icon orange-800. */
.sr-support-bubble:hover,
:root[data-theme] a.sr-support-bubble:hover { color: #fff; transform: scale(1.06); }
.sr-support-bubble svg { width: 26px; height: 26px; }

/* React pages (support, credits, products, ...) render client-side, so #root is
   empty for a moment - hold the footer below the fold until React mounts
   instead of flashing it up under the navbar. */
#root:empty { min-height: 100vh; }