/* Shared site footer (partials/footer.html). Plain CSS so it renders the
   same on Tailwind-CDN pages, Lumen's compiled app.css pages and the gallery. */
.sl-footer {
    position: relative; z-index: 10; margin: 0;
    background: #000;
    border-top: 1px solid rgba(168, 85, 247, 0.2);
    padding: 2rem 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem; line-height: 1.25rem; letter-spacing: normal; text-align: left;
    color: #a1a1aa;
}
.sl-footer .sl-footer__inner {
    max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    gap: 1rem 1.5rem;
}
/* Desktop: 3-column grid with equal outer columns, so the X button sits at
   the exact page centre however wide the brand / legal groups are. */
@media (min-width: 768px) {
    .sl-footer .sl-footer__inner {
        display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center; gap: 1.5rem;
    }
    .sl-footer .sl-footer__brand { justify-self: start; }
    .sl-footer .sl-footer__x { justify-self: center; }
    .sl-footer .sl-footer__legal { justify-self: end; text-align: right; }
}
.sl-footer a { color: inherit; text-decoration: none; border: 0; }
.sl-footer .sl-footer__brand { color: #71717a; letter-spacing: 0.025em; transition: color .15s; }
.sl-footer .sl-footer__brand:hover { color: #d4d4d8; }
.sl-footer .sl-footer__x {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1.25rem; border-radius: 1rem;
    border: 1px solid rgba(168, 85, 247, 0.2);
    font-size: 0.75rem; line-height: 1rem; color: #d4d4d8;
    transition: border-color .15s, background-color .15s, color .15s;
}
.sl-footer .sl-footer__x svg { color: #fff; transition: color .15s; flex: none; }
.sl-footer .sl-footer__x:hover { border-color: rgba(168, 85, 247, 0.6); background: #18181b; color: #fff; }
.sl-footer .sl-footer__x:hover svg { color: #c084fc; }
.sl-footer .sl-footer__legal { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.025em; color: #71717a; }
.sl-footer .sl-footer__legal a { color: #52525b; transition: color .15s; }
.sl-footer .sl-footer__legal a:hover { color: #a1a1aa; }
.sl-footer .sl-footer__dot { color: #3f3f46; margin: 0 0.375rem; }
.sl-footer a:focus-visible { outline: 2px solid rgba(168, 85, 247, 0.9); outline-offset: 3px; border-radius: 6px; }