/* The cookie banner
   ------------------------------------------------------------------
   One file for every page, hand built and newsroom alike, because the
   banner is on all of them and the host refuses inline styles. Goes up
   with the pages by the site publisher; the newsroom never writes it.

   Rules this file keeps, the same as every other stylesheet on the site:
     - No opacity on text. Anything that recedes gets a measured colour.
     - The violet is a fill or a mark, never text on a dark surface.
     - Accept and Reject carry the same weight and sit side by side.
     - Nothing moves. The banner is simply there or not there.
   ------------------------------------------------------------------ */

/* The banner only, by its data-consent attribute. The contact form's own
   privacy line is a <p class="consent"> as well, and until 20 October 2026
   this rule pinned that line to the foot of the screen too, over the form
   and, once Butler arrived, over the chat button. */
.consent[data-consent] {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 80;
  background: var(--canvas, #FAFAF9);
  color: var(--ink, #1E1330);
  border-block-start: 1px solid var(--rule, #DBDADD);
  box-shadow: 0 -2px 4px rgba(30, 19, 48, 0.06), 0 -18px 44px -16px rgba(30, 19, 48, 0.30);
  padding: 20px var(--margin, 20px);
  padding-block-end: max(20px, env(safe-area-inset-bottom));
}

.consent[hidden] {
  display: none;
}

.consent__inner {
  max-width: var(--container, 1200px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 32px;
  align-items: center;
}

.consent__title {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.consent__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted, #5A5470);
  max-width: 72ch;
}

.consent__body a {
  color: var(--accent, #6D4AFF);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.consent__body a:hover,
.consent__body a:focus-visible {
  color: var(--accent-active, #4C1D95);
}

.consent__choices {
  display: grid;
  gap: 12px;
  justify-items: end;
}

.consent__options {
  margin: 0;
  display: grid;
  gap: 10px;
  justify-self: stretch;
  padding: 12px 14px;
  border: 1px solid var(--rule, #DBDADD);
  border-radius: 10px;
}

/* With the ticks open the banner stacks: words above, ticks and buttons
   below, full width. Side by side, the ticks' descriptions took the auto
   column and squeezed the words into a strip one word wide. Found at 800
   pixels on 19 October 2026, when Advertising became the third tick. */
.consent__inner:has(.consent__options:not([hidden])) {
  grid-template-columns: minmax(0, 1fr);
}

.consent__inner:has(.consent__options:not([hidden])) .consent__choices {
  justify-items: start;
}

.consent__options[hidden] {
  display: none;
}

.consent__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: start;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}

.consent__option input {
  margin: 4px 0 0;
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--accent, #6D4AFF);
}

.consent__option span {
  grid-column: 2;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--muted, #5A5470);
}

.consent__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consent__buttons .btn[hidden] {
  display: none;
}

.consent__buttons .btn:focus-visible {
  outline: 3px solid var(--accent-active, #4C1D95);
  outline-offset: 2px;
}

@media (max-width: 48em) {
  .consent__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .consent__choices {
    justify-items: stretch;
  }

  .consent__buttons .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* The phone menu is a full-screen panel. While it is open, by the :target
   route with JavaScript off or by the class site.js adds, the banner would
   sit over its last links, so it steps aside and returns when the menu
   closes. Found by the audit of 4 September 2026 at 360 by 800. */
html:has(#site-menu:target) .consent,
html:has(#site-menu.is-open) .consent {
  display: none;
}

@media print {
  .consent {
    display: none;
  }
}