/* ─────────────────────────────────────────────────────────────────
   cookie-consent.css — First-visit informational banner. Sits along
   the viewport bottom edge, semi-translucent + backdrop-blur so it
   doesn't fully cover the page below. Dismissed by the Accept button
   (cookie-consent.js) and stays dismissed via localStorage.

   The element is `hidden` in HTML by default; JS removes the attribute
   only when no consent flag is found in storage. That avoids a flash
   of the banner on returning visits.
   ───────────────────────────────────────────────────────────────── */

.cookie-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: clamp(0.75rem, 1.6vw, 1rem) 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid color-mix(in srgb, var(--color-green) 18%, var(--color-border, #d8e0db));
    box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, 0.12);
    animation: cookie-consent-slide-in 0.32s ease-out;
}

.cookie-consent[hidden] { display: none; }

.cookie-consent__inner {
    display: flex;
    gap: clamp(0.75rem, 2vw, 2rem);
    align-items: center;
    flex-wrap: wrap;
}

.cookie-consent__text {
    flex: 1 1 320px;
    min-width: 0;
}

.cookie-consent__title {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--color-green-dark, #2e6e3f);
    margin-bottom: 2px;
}

.cookie-consent__body {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--color-fg, #18201A);
    max-width: 78ch;
}

.cookie-consent__link {
    color: var(--color-green-dark, #2e6e3f);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    margin-left: 4px;
    white-space: nowrap;
}
.cookie-consent__link:hover { color: var(--color-green, #3f8451); }

.cookie-consent__accept {
    flex: 0 0 auto;
}

@keyframes cookie-consent-slide-in {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cookie-consent { animation: none; }
}

/* Dark mode — invert the surface so the banner reads against the dark
   page; the bottom border becomes a faint green glow rather than a
   hairline. */
[data-theme="dark"] .cookie-consent {
    background: rgba(14, 22, 18, 0.94);
    border-top-color: color-mix(in srgb, var(--color-green) 32%, transparent);
    box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .cookie-consent__body { color: var(--color-fg, #E9F0EB); }
[data-theme="dark"] .cookie-consent__title,
[data-theme="dark"] .cookie-consent__link { color: var(--color-green, #2DC766); }

@media (max-width: 640px) {
    .cookie-consent__inner { flex-direction: column; align-items: stretch; }
    .cookie-consent__accept { width: 100%; }
}