/* ── Demo-environment indicator (Issue #73) ───────────────────────────
   The small "Website Studio Demo · Enter Studio" badge rendered by
   design_system/document_base.html whenever the current Website's
   `is_demo` flag is set (apps.sites.context_processors.site_context's
   `demo_mode`). Deliberately styled with fixed, hardcoded colors rather
   than the shared `--color-*` custom properties every product's own
   tokens.css redefines - this is platform chrome layered *over* a demo
   product's design system, not part of it, so it must look the same
   (and stay legible) regardless of which brand/palette is underneath it,
   never inheriting Anders & Voss's rust or Solace Coaching's coral.
*/

/* Reserves room at the foot of the page for the fixed badge below, so it
   never sits on top of a short page's own footer content (e.g. the last
   footer column) - the fixed badge's height plus its own bottom offset,
   not a token, since neither varies by product. */
body.has-demo-indicator {
    padding-bottom: 3.25rem;
}

.demo-indicator {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: var(--z-demo-indicator);
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background: rgba(23, 23, 23, 0.92);
    color: #F2F2F2;
    font-family: var(--font-sans);
    font-size: var(--type-caption-size);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.demo-indicator a {
    color: #F2F2F2;
    text-decoration: underline;
}

.demo-indicator a:hover {
    color: #FFFFFF;
}

@media (max-width: 480px) {
    .demo-indicator {
        left: var(--space-4);
        right: var(--space-4);
        text-align: center;
    }
}