/* =========================================================================
   Ludic Media Studio — cookie consent

   Its own stylesheet, on purpose. The banner appears on every page,
   including any page that ends up loading no component CSS, and it has to
   look right there too. Folding these rules into components.css is exactly
   how a consent banner ships unstyled to production.

   Same breakpoint ladder as foundation.css: 36 / 48 / 64 / 80rem.
   Reads only the semantic tokens, with literal fallbacks so it still
   renders correctly if foundation.css is somehow absent.
   ========================================================================= */

.consent[hidden] { display: none; }

/* ---------- banner ------------------------------------------------------
   The live site's banner, reproduced: a full-width white bar pinned to the
   bottom, title and body copy on the left, and a pair of pill buttons on the
   right — Deny in salmon, Accept in green, each with its icon.

   Two changes, both measured. The source fills are #df6966 and #129657,
   where white label text lands at 3.31:1 and 3.80:1 — both fail AA for
   text. They are deepened to #c4463f (4.89:1) and #0f7f49 (5.06:1): same
   hues, same relationship, legible. A "Customise" link sits beside them so
   the visitor can choose categories rather than only all-or-nothing.
   ----------------------------------------------------------------------- */
.consent__banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: grid;
  gap: var(--space-sm, 1.5rem);
  padding: var(--space-sm, 1.5rem) 1.25rem;
  background: var(--white, #fff);
  box-shadow: 0 -6px 28px rgb(0 0 0 / 0.14);
}
.consent__banner[hidden] { display: none; }

@media (min-width: 48rem) { .consent__banner { padding-inline: 2rem; } }
@media (min-width: 64rem) {
  .consent__banner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-lg, 3rem);
    padding: var(--space-sm, 1.5rem) var(--container-pad, 2.5rem);
  }
}

.consent__banner-text { max-width: 68ch; }

.consent__title {
  margin: 0 0 0.5rem;
  font-family: "Archivo", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink, #000);
}

.consent__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink, #000);
}

.consent__link { color: var(--black, #000); text-decoration: underline; text-underline-offset: 0.18em; }

/* Accept and reject are peer buttons: same size, same weight, side by side.
   A pre-ticked box or a buried reject link is not consent. */
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.consent__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 8.25rem;
  padding: 0.8125rem 1.5rem;
  border: 0;
  border-radius: 999px;
  color: var(--white, #fff);
  font-family: "Archivo", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 250ms ease;
}
.consent__btn svg { flex: none; }

.consent__btn--deny { background: #c4463f; }
.consent__btn--deny:hover { background: #a83a34; }
.consent__btn--accept { background: #0f7f49; }
.consent__btn--accept:hover { background: #0c6b3d; }

.consent__customise {
  background: none;
  border: 0;
  padding: 0.5rem 0.25rem;
  color: var(--dark-grey, #494949);
  font-family: "Archivo", sans-serif;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.consent__customise:hover { color: var(--black, #000); }

@media (prefers-reduced-motion: reduce) {
  .consent__btn { transition: none; }
}

/* ---------- preferences dialog ------------------------------------------ */
.consent__prefs {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: end center;
  padding: 0;
  background: rgb(49 49 49 / 0.5);
}
.consent__prefs[hidden] { display: none; }

@media (min-width: 48rem) {
  .consent__prefs { place-items: center; padding: 24px; }
}

.consent__prefs-panel {
  width: 100%;
  max-width: 40rem;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 24px 20px 28px;
  background: var(--surface, #fff);
  border-radius: var(--radius-lg, 20px) var(--radius-lg, 20px) 0 0;
}
@media (min-width: 48rem) {
  .consent__prefs-panel { padding: 32px; border-radius: var(--radius-lg, 20px); }
}

.consent__prefs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.consent__prefs-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ink, #313131);
  margin: 0;
}

.consent__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin: -8px -8px 0 0;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--ink-muted, #5c6470);
  cursor: pointer;
  transition: background-color 180ms cubic-bezier(0.2, 0, 0.15, 1);
}
.consent__close:hover { background: var(--surface-alt, #f4f6ee); color: var(--ink, #313131); }

.consent__prefs-intro {
  margin: 0 0 24px;
  color: var(--ink-muted, #5c6470);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.consent__categories { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }

.consent__category {
  padding: 18px 18px 16px;
  background: var(--surface-alt, #f4f6ee);
  border: 1px solid var(--line-strong, #cfd4c8);
  border-radius: var(--radius, 12px);
}

.consent__category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.consent__category-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink, #313131); }

.consent__required {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted, #5c6470);
}

.consent__category-body {
  margin: 0;
  color: var(--ink-muted, #5c6470);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ---------- switch ------------------------------------------------------ */
.consent__switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.consent__switch input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}

.consent__switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 44px; height: 26px;
  background: #7f8a96;
  border-radius: 999px;
  transition: background-color 180ms cubic-bezier(0.2, 0, 0.15, 1);
}
.consent__switch-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgb(49 49 49 / 0.3);
  transition: transform 180ms cubic-bezier(0.2, 0, 0.15, 1);
}
/* The ON state is BLACK, not var(--accent). On this site the accent is
   #fdc727 and the switch knob is white: a yellow track with a white knob
   measures 1.58:1 and the switch looks the same on as off. Black gives a
   14.6:1 track against the knob, and the state is legible at a glance.
   Deliberately hard-coded, and this comment is why. */
.consent__switch input:checked + .consent__switch-track { background: var(--black, #000); }
.consent__switch input:checked + .consent__switch-track::after { transform: translateX(18px); }

/* Keep the outline (transparent when idle) rather than swapping in a
   box-shadow ring — box-shadows vanish in forced-colors mode. */
.consent__switch input:focus-visible + .consent__switch-track {
  outline: 3px solid var(--black, #000);
  outline-offset: 3px;
}

.consent__switch-label { font-weight: 700; color: var(--ink, #313131); }

@media (forced-colors: active) {
  .consent__switch-track { border: 1px solid ButtonText; }
  .consent__switch input:checked + .consent__switch-track { background: Highlight; }
}

.consent__prefs-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent__prefs-actions .button { flex: 1 1 auto; min-width: 9rem; }

@media (prefers-reduced-motion: reduce) {
  .consent__switch-track,
  .consent__switch-track::after,
  .consent__close { transition: none; }
}