/* BrainOS site footer: ONE definition for every website page (homepage,
   static pages, blog, docs). Loaded by every page after its own stylesheet;
   selectors use footer.site-footer so they win over the older per-sheet
   rules regardless of load order. Markup comes from scripts/sync-nav.mjs.
   Full-bleed frosted glass over soft brand glows, gradient hairline on top,
   and always the last thing on the page. The cloud app has its own UI. */

html { overflow-x: clip; }
/* overflow-x: hidden on body makes it a clipping box that cuts off the
   footer's fill below the page; clip stops sideways scroll without that. */
html body { overflow-x: clip; }

/* The footer ends the page: no wrapper padding or margin below it. */
:is(.container, .blog-wrap, main, section, div):has(> footer.site-footer:last-child) { padding-bottom: 0 !important; margin-bottom: 0 !important; }
body:has(footer.site-footer) { margin-bottom: 0; padding-bottom: 0; }

footer.site-footer {
  --ft-bg: rgba(255, 255, 255, 0.55); --ft-line: rgba(20, 20, 40, 0.08); --ft-glow: 1;
  --ft-head: #6e6e84; --ft-link: #4a4a5e; --ft-link-hover: #0b0b16; --ft-brand: #0b0b16;
  --ft-fill: #fbfbfe;
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  width: 100vw; margin: 88px calc(50% - 50vw) 0; padding: 72px 40px 64px;
  background: var(--ft-bg); border-top: 1px solid var(--ft-line);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  text-align: left;
  /* When the page is shorter than the window, the footer's colour carries on
     to the bottom edge, so the footer is always the end of the page. An outer
     shadow is never painted under the glass and never adds scroll height. */
  box-shadow: 0 100vh 0 100vh var(--ft-fill);
}
:root[data-theme="dark"] footer.site-footer {
  --ft-bg: rgba(255, 255, 255, 0.03); --ft-line: rgba(255, 255, 255, 0.08); --ft-glow: 0.7;
  --ft-head: #6b6b85; --ft-link: #a1a1b5; --ft-link-hover: #e4e4ed; --ft-brand: #e4e4ed;
  --ft-fill: #070709;
}
footer.site-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #3533cd 20%, #3533cd 50%, #5452e0 80%, transparent);
  opacity: 0.55;
}
footer.site-footer::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--ft-glow);
  background:
    radial-gradient(460px 240px at 10% 0%, rgba(53, 51, 205, 0.16), transparent 70%),
    radial-gradient(520px 260px at 55% 30%, rgba(53, 51, 205, 0.10), transparent 70%),
    radial-gradient(560px 240px at 90% 55%, rgba(84, 82, 224, 0.12), transparent 70%);
}
footer.site-footer .site-footer-inner {
  max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start;
  gap: 48px 64px; flex-wrap: wrap; text-align: left;
}
footer.site-footer .site-footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 280px; }
footer.site-footer .site-footer-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
footer.site-footer .site-footer-logo .logo-icon { font-size: 22px; color: #3533cd; }
footer.site-footer .site-footer-logo .logo-text { font-size: 17px; font-weight: 600; color: var(--ft-brand); letter-spacing: -0.3px; }
footer.site-footer .site-footer-tag { font-size: 13.5px; color: var(--ft-head); line-height: 1.6; margin: 0; }
footer.site-footer .site-footer-built { font-size: 12.5px; color: var(--ft-head); margin: 4px 0 0; }
footer.site-footer .site-footer-built a { color: var(--ft-head); text-decoration: none; }
footer.site-footer .site-footer-built a:hover { color: var(--ft-link-hover); }
footer.site-footer .site-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(110px, auto)); gap: 32px 56px; }
footer.site-footer .site-footer-col { display: flex; flex-direction: column; gap: 11px; }
footer.site-footer .site-footer-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ft-head); opacity: 0.75; margin-bottom: 3px; }
footer.site-footer .site-footer-col a { font-size: 14px; color: var(--ft-link); text-decoration: none; transition: color 0.2s; }
footer.site-footer .site-footer-col a:hover { color: var(--ft-link-hover); }
@media (max-width: 900px) {
  footer.site-footer { margin-top: 64px; padding: 52px 24px 48px; }
  footer.site-footer .site-footer-inner { flex-direction: column; }
  footer.site-footer .site-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; width: 100%; }
}