/* ==========================================================================
   COMPONENT — .c-cookie  +  .c-legal

   A cookie notice and two policy dialogs, inline on the one page rather than
   two more URLs to build and keep in step.

   The notice is a NOTICE, not a consent gate. It does not pretend to hold
   back the YouTube player until somebody agrees, because it does not: the
   hero video IS the top of the page and gating it would gut the site. What it
   does is tell the truth about what loads and from whom, and give one tap to
   dismiss. If the client ever wants real consent gating for the embeds, that
   is a product decision with a visible cost, not a stylesheet change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The notice
   -------------------------------------------------------------------------- */

.c-cookie {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  padding: var(--sp-4);
  /* Below the dialogs, above everything else. The hero player sits in its own
     stacking context and would otherwise cover this. */
  pointer-events: none;
}

.c-cookie__inner {
  pointer-events: auto;
  max-inline-size: 62rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-4) var(--sp-5);

  /* A solid plate, not a blur. Backdrop-filter on a fixed element repaints on
     every scroll frame, which is exactly what was stripped out of this site
     when it was stuttering on a laptop. */
  background: var(--slate-900);
  color: var(--stone-200);
  border: var(--bw-hair) solid var(--slate-700);
  border-radius: 6px;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);

  animation: aim-cookie-in 0.5s var(--ease-out) both;
}

@keyframes aim-cookie-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .c-cookie__inner { animation: none; }
}

.c-cookie__text {
  margin: 0;
  flex: 1 1 22rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--stone-300);
  text-wrap: pretty;
}

.c-cookie__text strong { color: var(--stone-50); font-weight: 500; }

.c-cookie__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.c-cookie__ok { white-space: nowrap; }

.c-cookie__more {
  padding: 0;
  background: none;
  border: 0;
  border-block-end: var(--bw-hair) solid var(--slate-500);
  color: var(--stone-300);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.c-cookie__more:hover { color: var(--luzzu-gold-400); border-color: var(--luzzu-gold-400); }

/* --------------------------------------------------------------------------
   The dialogs

   <dialog> rather than a div with a z-index: the top layer, a backdrop, focus
   trapping, Escape to close and the right ARIA all come for free and none of
   them are worth reimplementing badly.
   -------------------------------------------------------------------------- */

.c-legal {
  inline-size: min(46rem, calc(100% - 2rem));
  max-block-size: min(80vh, 48rem);
  padding: 0;
  border: var(--bw-hair) solid var(--slate-700);
  border-radius: 8px;
  background: var(--slate-900);
  color: var(--stone-200);
  overflow: hidden;
}

.c-legal::backdrop {
  background: rgba(4, 6, 7, 0.72);
}

.c-legal__inner {
  display: grid;
  grid-template-rows: auto 1fr;
  max-block-size: inherit;
}

.c-legal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-block-end: var(--bw-hair) solid var(--slate-700);
  background: var(--slate-950);
}

.c-legal__title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-xl);
  letter-spacing: var(--tr-display);
  color: var(--stone-50);
}

.c-legal__close {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  background: none;
  border: var(--bw-hair) solid var(--slate-700);
  border-radius: 4px;
  color: var(--stone-300);
  cursor: pointer;
}

.c-legal__close svg { inline-size: 0.9rem; }
.c-legal__close:hover { color: var(--stone-50); border-color: var(--slate-500); }

.c-legal__body {
  padding: var(--sp-6);
  overflow-y: auto;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--stone-300);
}

.c-legal__body p { margin: 0 0 var(--sp-5); max-inline-size: 62ch; text-wrap: pretty; }
.c-legal__body p:last-child { margin-block-end: 0; }
.c-legal__body strong { color: var(--stone-50); font-weight: 500; }

.c-legal__body h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 500;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--luzzu-gold-400);
}

.c-legal__body a { color: var(--luzzu-blue-500); }

.c-legal__body code {
  font-family: var(--ff-mono);
  font-size: 0.9em;
  color: var(--stone-200);
}

/* Who sets what, as a table, because it is a list of three things with two
   columns and prose would have been worse. */
.c-legal__table {
  inline-size: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-5);
}

.c-legal__table th,
.c-legal__table td {
  text-align: start;
  vertical-align: top;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-block-end: var(--bw-hair) solid var(--slate-800);
}

.c-legal__table th {
  inline-size: 7rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 500;
  letter-spacing: var(--tr-normal);
  color: var(--stone-100);
  white-space: nowrap;
}

.c-legal__table tr:last-child th,
.c-legal__table tr:last-child td { border-block-end: 0; }

@media (max-width: 40rem) {
  .c-legal__table th,
  .c-legal__table td { display: block; inline-size: auto; border: 0; padding-block: 0; }
  .c-legal__table th { padding-block-start: var(--sp-4); }
  .c-legal__table td { padding-block-end: var(--sp-3); }
}

/* The footer links. The notice is dismissed once and never seen again, so
   this is how anybody reaches the policies afterwards — which is the whole
   point of having them. */
.c-site-footer__legal-link {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.c-site-footer__legal-link:hover { color: var(--c-accent-text); }

/* Accept and Reject carry the same visual weight. That is not a style
   preference: consent is only valid if refusing is as easy as agreeing, and a
   greyed-out Reject beside a bright Accept is the exact pattern regulators
   have been fining people for. Solid versus ghost distinguishes them without
   making one of them hard to find. */
.c-cookie__no {
  white-space: nowrap;
  border-color: var(--slate-500);
  color: var(--stone-200);
}

.c-cookie__no:hover {
  border-color: var(--stone-300);
  background: color-mix(in oklab, var(--stone-50) 8%, transparent);
  color: var(--stone-50);
}