/* DjangoLux global footer — a faint, very small credit/copyright strip pinned
   to the bottom of the viewport. Theme-aware and semi-transparent so it floats
   over the page without stealing attention. Override the CSS variables below to
   restyle, or override the `footer` / `footer_content` template blocks to change
   what it contains. */
.dlux-footer {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    /* Sit behind the page chrome: the footer is a faint background strip, so it
       must stay BELOW the sidebar (z-index 900, sticky desktop / fixed 1000
       mobile), the navbar/titlebar, and Bootstrap modals/offcanvas — while still
       painting above the static page content. */
    z-index: var(--dlux-footer-z, 850);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.15rem 0.6rem;
    min-height: 1.35rem;
    padding: 0.12rem 0.85rem;
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-align: center;
    /* Derive from theme tokens so the strip flips with the active theme
       (`--hbody` surface tint, `--htitle`/`--title` text) instead of being a
       fixed white bar that looks wrong on dark-based themes (dark, aether,
       gothic, neon, prism, retro, mono). */
    color: var(--dlux-footer-color, color-mix(in srgb, var(--htitle, #64748b) 78%, transparent));
    background: var(--dlux-footer-bg, color-mix(in srgb, var(--hbody, #f1f5f9) 60%, transparent));
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    backdrop-filter: blur(8px) saturate(1.1);
    border-top: 1px solid var(--dlux-footer-border, color-mix(in srgb, var(--title, #64748b) 14%, transparent));
    /* Let clicks pass through the bar to the content behind it; interactive
       children (links/buttons) re-enable pointer events below. */
    pointer-events: none;
    user-select: none;
}

.dlux-footer:empty {
    display: none;
}

.dlux-footer a,
.dlux-footer button {
    pointer-events: auto;
    user-select: auto;
    color: inherit;
    font: inherit;
}

.dlux-footer a {
    text-decoration: none;
    opacity: 0.9;
}

.dlux-footer a:hover,
.dlux-footer a:focus-visible {
    text-decoration: underline;
    opacity: 1;
}