/* The cookie consent banner, and only the banner.

   One file because there is one banner, and js/consent.js puts it on all 29
   pages. Its rules used to live in theme.css, which twenty-three pages load
   and the six section studies do not, so on /about/, /partners/, /summit/,
   /summit/abstracts/, /summit/awards/ and /summit/programme/ the banner
   arrived with NO styling at all: a browser-default <h2> at 31.5px reading
   "Website analytics", two grey UA buttons with outset borders, no ground, no
   containment, sitting in the page flow at the very foot of a 10,000px
   document instead of fixed over it. On a first visit that is the first thing
   an EU visitor meets, and on those six pages they had to reach the end of
   the page to meet it.

   This is the same defect css/foot.css was made to fix, and the first half of
   the fix is the same: extract, and make every value LITERAL.

   Literal is not a shortcut, it is the point. The studies define --film,
   --gold, --ink and --accent too, with their own meanings — /about/ sets
   --ink to #f6eee1, the site's BONE — so a token read with a fallback never
   reaches its fallback. That is exactly how foot.css came out with a
   transparent ground and near-black headings on all six studies. The site's
   theme flip only re-points the PAPER tokens, so the film values below are
   already what the banner resolves to in light and in dark alike.

   ── why this file also resets, and shouts ────────────────────────────────

   Literals alone were not enough here, and two measured failures on /summit/
   are why. That page carries an inline `.btn { justify-self: start }`. The
   banner never declared justify-self, so nothing had to lose a specificity
   contest for it to leak: at 390px it took the two buttons out of their equal
   grid cells and sized each to its own label, 71.3px for Accept against
   72.1px for Refuse. The same page carries
   `:root:not([data-theme="dark"]) :is(.hero__t, h2, ...) { font-weight: 400 }`,
   which at (0,3,0) beat .consent__h at (0,1,0) and thinned the heading in
   light mode only.

   Both are the same lesson: enumerating the properties a page might set is a
   game this file cannot win, because the next hand-written study will reach
   for a property nobody listed. So the first rule below drops every page
   author declaration on the banner's whole subtree, and every rule after it
   is !important so that it survives that drop. That is what !important is
   for — a component injected onto pages that know nothing about it, which
   must look the same on all of them. It is not a shortcut past a cascade
   problem; it IS the cascade instruction.

   The reset must stay FIRST. It selects `.consent` at (0,1,0), the same
   weight as the block that styles `.consent`, so only source order keeps the
   styling from being reverted by it. Every rule for a CHILD is scoped under
   `.consent` to sit at (0,2,0), which clears the reset on specificity and
   does not depend on order at all.

   `all` deliberately does not touch custom properties, so the --c- tokens
   below survive it. In a browser too old for `revert` the declaration is
   dropped and the !important rules still land; only unlisted properties leak,
   which is where this file started.

   ── the load-bearing rule ────────────────────────────────────────────────

   .btn--consent. Accept and Refuse are deliberately identical: same fill,
   same size, same weight, in source order and on screen. Styling Accept as
   the gold primary and Refuse as a quiet ghost is the pattern the Belgian DPA
   keeps ruling against, and js/consent.js names it as rule 2, "Refusing is
   exactly as easy as accepting". An unstyled banner is the one place that
   rule can break with nobody editing it: the buttons then size themselves to
   their own labels, and "Accept" is a shorter word than "Refuse". min-width
   below, and the two equal grid cells under 34rem, are what hold them level. */

/* 1 · the reset. Must stay first. See above. */
.consent, .consent *, .consent *::before, .consent *::after { all: revert !important; }

/* 2 · the palette, in literals. Not affected by `all`. */
.consent {
  --c-film:      #0d0b08;
  --c-bone:      #f6eee1;
  --c-bone-soft: #d6cbb8;
  --c-gold:      #cba64e;
  --c-gold-hi:   #dcbc71;
  --c-gold-ink:  #1a1409;
  --c-wrap:      74rem;
  --c-gut:       clamp(1.25rem, 4vw, 3.5rem);
  --c-sans:      "Public Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}

/* The foot of the document keeps clear of the banner. consent.js measures the
   banner and publishes --consent-h; without JavaScript there is no banner and
   the fallback is zero, so nothing moves. This is what makes the footer's own
   Privacy link and Cookies button reachable while the banner is up — before
   it, they sat under the banner at every scroll position. */
body { padding-bottom: var(--consent-h, 0px); }

/* 3 · the banner */
.consent {
  box-sizing: border-box !important;
  position: fixed !important; inset: auto 0 0 0 !important; z-index: 90 !important;
  margin: 0 !important;
  background: rgba(13,11,8,.97) !important; color: var(--c-bone) !important;
  border-top: 1px solid rgba(203,166,78,.4) !important;
  padding: clamp(1rem, 3vw, 1.6rem) var(--c-gut) !important;
  box-shadow: 0 -12px 40px rgba(0,0,0,.4) !important;
  /* The inherited half of the type, pinned. A study's body is 300 weight at
     its own clamped size, a generated page's is 400 at another, and both
     would otherwise reach the paragraph. Smoothing is restated because every
     page on the site sets it on body today and the reset above would drop it. */
  font-family: var(--c-sans) !important;
  font-size: 1rem !important; font-weight: 400 !important; font-style: normal !important;
  line-height: 1.62 !important; letter-spacing: normal !important; text-align: left !important;
  -webkit-font-smoothing: antialiased !important;
}
@supports (backdrop-filter: blur(6px)) {
  .consent { background: rgba(13,11,8,.9) !important; backdrop-filter: blur(8px) !important; }
}
.consent[hidden] { display: none !important; }

.consent .consent__wrap {
  box-sizing: border-box !important;
  width: min(100%, var(--c-wrap)) !important; margin-inline: auto !important;
  display: flex !important; flex-wrap: wrap !important;
  gap: 1rem clamp(1rem, 4vw, 2.4rem) !important;
  align-items: center !important; justify-content: space-between !important;
}
.consent .consent__say { flex: 1 1 22rem !important; min-width: 0 !important; }
.consent .consent__h {
  font-family: var(--c-sans) !important; font-size: .74rem !important;
  letter-spacing: .17em !important; text-transform: uppercase !important;
  font-weight: 600 !important; color: var(--c-gold) !important;
  margin: 0 0 .45rem !important; line-height: 1.62 !important;
}
.consent .consent__p {
  font-family: var(--c-sans) !important; font-size: .88rem !important;
  font-weight: 400 !important; line-height: 1.5 !important;
  letter-spacing: normal !important; color: var(--c-bone-soft) !important;
  margin: 0 !important;
}
.consent .consent__p + .consent__p { margin-top: .5rem !important; }
.consent .consent__p a {
  color: var(--c-gold-hi) !important; text-decoration: underline !important;
  text-decoration-thickness: auto !important; text-underline-offset: .25em !important;
}
.consent .consent__acts {
  flex: 0 0 auto !important; display: flex !important;
  gap: .7rem !important; flex-wrap: wrap !important;
}

/* 4 · Accept and Refuse. One rule, both buttons, no modifier between them.
   justify-self and width are declared rather than left to default because
   /summit/ set justify-self on .btn and shrank each button to its own label. */
.consent .btn--consent {
  box-sizing: border-box !important;
  appearance: none !important; -webkit-appearance: none !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: .5em !important;
  justify-self: stretch !important; align-self: auto !important;
  margin: 0 !important; width: auto !important; min-width: 8.5rem !important;
  font-family: var(--c-sans) !important; font-size: .95rem !important;
  font-weight: 600 !important; letter-spacing: .005em !important;
  line-height: 1 !important; text-transform: none !important;
  text-decoration: none !important; text-align: center !important;
  padding: .95em 1.7em !important; border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: linear-gradient(180deg, #d8ad52, #b7862f) !important;
  color: var(--c-gold-ink) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 6px 18px rgba(80,53,10,.22) !important;
  cursor: pointer !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.consent .btn--consent:hover {
  background: linear-gradient(180deg, #e2b95f, #c08f34) !important;
  transform: translateY(-1px) !important;
}
.consent .btn--consent:active { transform: translateY(0) !important; }
/* Outline only, no border-radius. The studies each set a page-wide
   :focus-visible that adds `border-radius: 2px`, which squared the pill. */
.consent :focus-visible { outline: 2px solid var(--c-gold) !important; outline-offset: 3px !important; }
/* /summit/ carried this for its own .btn and the reset above took it away.
   Restored here so all 29 pages answer the setting the same way. */
@media (prefers-reduced-motion: reduce) {
  .consent .btn--consent { transition: none !important; }
  .consent .btn--consent:hover, .consent .btn--consent:active { transform: none !important; }
}

/* 5 · the phone. Two equal cells, which is where the buttons are made level. */
@media (max-width: 34rem) {
  .consent .consent__acts {
    width: 100% !important; display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .consent .btn--consent { min-width: 0 !important; padding-inline: .8rem !important; }
}