/*
 * Éclore Aesthetics — Cookie consent banner
 * ─────────────────────────────────────────────────────────────────────────────
 * Slim fixed band pinned to the viewport bottom: Ink ground, Bone text,
 * bone-mix hairline top — reads as the footer surfacing early, not a modal.
 * Non-blocking (no overlay, no focus trap); z-index 300 sits above the
 * sticky header (200) and the mobile nav panel (250).
 *
 * One Terracotta action (Accept) per §4 accent scarcity; Decline is a
 * text button recoloured Bone for this dark ground. Entrance is
 * transform/opacity only (§6 budget) and the locked global reduced-motion
 * rule flattens it to an instant swap.
 */

.cookie-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 300;
  background: var(--color-ink);
  color: var(--color-bg);
  border-top: 1px solid color-mix(in srgb, var(--color-bone) 25%, transparent);
  border-radius: 0;
  transform: translateY(8px);
  opacity: 0;
  transition:
    transform var(--dur-short) var(--ease-reveal),
    opacity var(--dur-short) var(--ease-reveal);
}

.cookie-consent.is-open {
  transform: translateY(0);
  opacity: 1;
}

.cookie-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-xs);
}

.cookie-consent__message {
  margin: 0;
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  color: var(--color-bg);
  max-width: 62ch;
}

/* Policy link — Bone with a resting 50% underline, full on hover
   (the terracotta-ground link rule, applied to the Ink ground). */
.cookie-consent__policy {
  color: var(--color-bg);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-bone) 50%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-micro) var(--ease-standard);
}

.cookie-consent__policy:hover,
.cookie-consent__policy:focus-visible {
  text-decoration-color: var(--color-bg);
}

.cookie-consent__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

/* Compact accept — Bone outline, no fill (owner), sized for the slim band. */
.cookie-consent .btn--inverse {
  min-height: 40px;
  padding: 9px 20px;
}

/* Text button recoloured for the dark ground. */
.cookie-consent .btn--text {
  color: var(--color-bg);
}

/* Focus ring outline swaps to Bone on this dark ground (compound ring
   pattern — halo stays Terracotta). */
.cookie-consent :focus-visible {
  outline-color: var(--color-bg);
}

@media (max-width: 479px) {
  .cookie-consent__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}