/* ==========================================================================
   cookie.css — cookie notice (DESKTOP/Home frame, node 227:5559)

   New markup, layout tokens only. Loaded site-wide because the notice renders
   on every template, 404 included.
   ========================================================================== */

.cookie {
  position: fixed;
  inset: 0;
  z-index: 80; /* above the header (20) and the mobile drawer (30) */
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

/* Rectangle 21 — #1A1A1A at 40% over the whole page */
/* `display: grid` above would beat the UA's [hidden] rule, so restate it */
.cookie[hidden] {
  display: none;
}

.cookie__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 26, 26, 0.4);
}

.cookie__dialog {
  position: relative;
  inline-size: 100%;
  max-inline-size: 25.6875rem; /* 411px in the frame */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--c-accent-soft); /* #FCB375 */
  border-radius: var(--r-sm);
  background-color: var(--c-bg);
  background-image: var(--grad-sheen);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}

/* The dialog is only a focus waypoint, so it gets no ring of its own; the
   button and the link inside keep the layout's :focus-visible outline. */
.cookie__dialog:focus {
  outline: none;
}

.cookie__title {
  /* SemiBold/Subtitle 2 (24px), restated because this is an H2 element */
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  text-align: center;
}

.cookie__text {
  text-align: center;
  color: var(--c-text-muted);
}

.cookie__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  align-self: stretch;
}

/* The button fills the dialog width in the frame */
.cookie__accept {
  align-self: stretch;
}

.cookie__link {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--c-text);
  text-align: center;
  transition: color var(--dur) var(--ease);
}

.cookie__link:hover {
  color: var(--c-accent-light);
}

@media (prefers-reduced-motion: no-preference) {
  .cookie__dialog {
    animation: cookie-in 0.32s var(--ease) backwards;
  }

  @keyframes cookie-in {
    from {
      opacity: 0;
      scale: 0.96;
    }
  }
}