/* ═══════════════════════════════════════════════════════
   COOKIE CONSENT — RGPD compliant banner
   Shared across all contexts (shop, healthcare, blog)

   TOKENISED 2026-08-09, and for the same reason the CMS sections were: this
   sheet had its palette written by hand (#fff on #e2e8f0 with a #2563eb link),
   so on a dark theme the one piece of UI that MUST be readable — the one asking
   for consent — landed as a white slab. A bespoke theme could not fix it either;
   it does not own this file.

   Every token carries today's value as its fallback, so a theme that declares
   nothing does not move a single pixel. A theme maps a dozen variables and the
   banner belongs to it. Same shape as the `--cms-*` tokens (component tokens of
   Material 3; `prose` of Tailwind, `.markdown-body` of GitHub).

   ⚠️ Background and ink are declared in PAIRS. A surface token without its ink
   token is exactly how a contrast gets broken.
   ═══════════════════════════════════════════════════════ */

.cc-banner {
    position: fixed;
    /* A theme with its own fixed bottom bar (the vertical has a call/evaluate bar
       on mobile) lifts the banner over it with one declaration instead of losing
       either piece behind the other. */
    bottom: var(--cc-offset-bottom, 0px);
    left: 0;
    right: 0;
    /* Above a theme's own sticky furniture, below nothing else: this is a consent
       gate, and a gate that something can cover is not a gate. */
    z-index: var(--cc-z, 9999);
    background: var(--cc-surface, #fff);
    border-top: 1px solid var(--cc-border, #e2e8f0);
    box-shadow: var(--cc-shadow, 0 -4px 24px rgba(0,0,0,0.08));
    padding: 20px 24px;
    /* The home indicator on an iPhone sits over the bottom 34px. Without this the
       reject button is under it — and the reject button is the one that must stay
       reachable (a consent dialog where only "accept" is comfortable is a dark
       pattern, and EDPB guidance treats it as one).
       Reads as: add the safe area, minus however much the theme already lifted us
       by, never below zero. So one token covers both cases and neither of them
       double-counts. */
    padding-bottom: calc(20px + max(0px, env(safe-area-inset-bottom, 0px) - var(--cc-offset-bottom, 0px)));
    display: none;
    font-family: var(--cc-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.cc-banner.is-visible {
    display: block;
    animation: ccSlideUp 0.3s ease;
}

@keyframes ccSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Someone who asked their system for less motion did not ask for less consent:
   the banner still appears, it just does not slide. (WCAG 2.3.3 / prefers-reduced-motion.) */
@media (prefers-reduced-motion: reduce) {
    .cc-banner.is-visible { animation: none; }
}

.cc-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.cc-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cc-text, #334155);
}

.cc-text a {
    color: var(--cc-link, #2563eb);
    font-weight: 600;
    /* Underlined, not colour alone: WCAG 1.4.1. These two links are the privacy
       policy and the terms — the ones a regulator looks for first. */
    text-decoration: underline;
}

.cc-text a:hover {
    text-decoration: none;
}

.cc-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cc-btn {
    padding: 8px 20px;
    border-radius: var(--cc-radius, 6px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .15s, color .15s, border-color .15s;
    font-family: inherit;
    /* 44px is Apple's minimum touch target and the WCAG 2.5.5 figure; the padding
       above gives ~33px, which is a miss on the control people tap in a hurry. */
    min-height: 44px;
}

.cc-btn:focus-visible {
    outline: 2px solid var(--cc-focus, var(--cc-link, #2563eb));
    outline-offset: 2px;
}

.cc-btn--accept {
    background: var(--cc-accept-bg, #0f172a);
    color: var(--cc-accept-ink, #fff);
}

.cc-btn--accept:hover {
    background: var(--cc-accept-bg-hover, #1e293b);
}

/* Reject is a real, equally reachable choice — same size, same row, one tap.
   Not a link buried under "manage preferences": that is the pattern the CNIL
   fined Google and Facebook for in 2022, and the EDPB cookie-banner taskforce
   report names explicitly. */
.cc-btn--reject {
    background: transparent;
    color: var(--cc-reject-ink, #64748b);
    border: 1px solid var(--cc-reject-border, #e2e8f0);
}

.cc-btn--reject:hover {
    border-color: var(--cc-reject-border-hover, #94a3b8);
    color: var(--cc-reject-ink-hover, #334155);
}

@media (max-width: 640px) {
    .cc-inner {
        flex-direction: column;
        text-align: center;
    }

    .cc-actions {
        width: 100%;
    }

    .cc-btn {
        flex: 1;
    }
}