/* Component styles for templates/partials/_cookie_banner.html.

   SHARED component — uses ONLY the semantic token contract (base/variables.css
   on the main site; base/surface-editorial.css on the isolated demo showcase).
   No --brand-* primitives, no hardcoded hex except #fff on the red accent. Per
   the token doctrine in CLAUDE.md ("Design tokens & color governance").

   Loaded by: templates/base.html, templates/index.html (main site) and
   demos/_home/base.html (showcase, served via the demos asset whitelist). */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 2px solid var(--red);
    padding: 1rem;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.cookie-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookie-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.cookie-buttons {
    display: flex;
    gap: 0.5rem;
}

/* Editorial buttons — squared, Space Mono. The accept button uses the signal
   red directly (var(--red) — always red on every surface), so the banner reads
   identically on the editorial homepage, the admin surface and the demo. */
.cookie-btn {
    padding: 0.625rem 1.25rem;
    border-radius: 0;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

/* Darkened red fill so the white label reaches WCAG AA: white on the vivid
   --red is only 3.88:1; mixing ~18% black brings it to ~5.4:1. Done via
   color-mix on --red — no raw hex, the button stays brand red, just deeper. */
.cookie-btn.accept {
    background: color-mix(in srgb, var(--red), #000 18%);
    color: #fff;
    border-color: color-mix(in srgb, var(--red), #000 18%);
}

.cookie-btn.accept:hover {
    background: color-mix(in srgb, var(--red), #000 32%);
    border-color: color-mix(in srgb, var(--red), #000 32%);
    color: #fff;
}

.cookie-btn.reject {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--border);
}

.cookie-btn.reject:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-primary);
}

@media (max-width: 600px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
}