/* ==========================================================================
   Cookie consent dialog + footer "Cookie settings" control
   ==========================================================================

   NEW FILE. app.min.css, style.css, accordion.css, main.min.js and accordion.min.js are
   frozen artefacts, sha256-verified after every deploy, so nothing here edits them. The
   dialog's two action buttons reuse `.btn .btn--primary` FROM app.min.css unchanged — this
   sheet only adds what that class does not cover (cursor, full-width stacking, focus ring).

   Enqueued with `main-css` as a dependency, so it always emits after app.min.css and wins by
   cascade order rather than by specificity escalation or !important.

   COLOUR + CONTRAST (all text pairs measured, WCAG 2.1 AA needs 4.5:1 for body text):

     panel title      #080d0f            on #ffffff  = 19.54:1
     panel body       rgba(8,13,15,.8)   on #ffffff  = 10.98:1   (resolves to #393d3f)
     links / toggle   #071f2a            on #ffffff  = 16.96:1
     cookie name chip #071f2a            on #f2f5f5  = 15.47:1
     chip description rgba(8,13,15,.8)   on #f2f5f5  = 10.01:1
     button label     #abf9ff            on #071f2a  = 14.31:1   (from .btn--primary)
     button hover     #071f2a            on #abf9ff  = 14.31:1   (from .btn--primary)
     footer control   rgba(255,255,255,.8) on #080d0f = 12.51:1   (resolves to #cecfcf)
     focus ring       #071f2a            on #ffffff  = 16.96:1   (non-text, needs 3:1)
     focus ring       #abf9ff            on #080d0f  = 16.49:1   (non-text, needs 3:1)

   The two pairs the brief rules out — #969899 on #f5f5f5 and #637075 on #edeae6 — appear
   nowhere in this file. Every colour used is already in the site's palette.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   --------------------------------------------------------------------------
   `.frm-cc` carries display:flex, which is a class-level author rule and therefore beats the
   UA stylesheet's `[hidden] { display: none }`. Without the explicit rule below the dialog
   would render on top of the page for every visitor, consented or not. */
.frm-cc[hidden] {
  display: none;
}

.frm-cc {
  position: fixed;
  inset: 0;
  z-index: 9000; /* highest z-index anywhere in app.min.css is 53 */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}

/* Dims the page and swallows pointer events, so the dialog is modal to a mouse user in the
   same way aria-modal + the focus trap make it modal to assistive tech and the keyboard.
   Clicking it deliberately does nothing: dismissing by mis-click must not be able to read as
   either acceptance or refusal. Escape, and the two buttons, are the only ways out. */
.frm-cc__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(8, 13, 15, .6);
}

.frm-cc__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background-color: #fff;
  border-radius: 6px;
  padding: 28px;
  box-shadow: 0 12px 40px rgba(8, 13, 15, .35);
}

@supports (max-height: 100dvh) {
  .frm-cc__panel {
    max-height: calc(100dvh - 32px);
  }
}

/* The panel is a programmatic focus target (tabindex="-1") so that screen readers announce
   the dialog role, its title and its description when it opens. It is not in the tab
   sequence and is not an interactive control, so it takes no focus ring of its own — every
   actual control inside it has a visible one. */
.frm-cc__panel:focus {
  outline: none;
}

.frm-cc__panel {
  animation: frm-cc-in .28s ease-out both;
}

@keyframes frm-cc-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

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

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */
.frm-cc__title {
  font-feature-settings: "liga" off, "clig" off;
  color: #080d0f;
  font-family: BigCaslon;
  font-size: 22px;
  line-height: 28px;
  margin: 0 0 12px;
}

.frm-cc__text,
.frm-cc__status {
  font-feature-settings: "liga" off, "clig" off;
  color: rgba(8, 13, 15, .8);
  font-family: RoobertRegular;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 16px;
}

.frm-cc__status[hidden] {
  display: none;
}

.frm-cc__status {
  font-family: RoobertLight;
}

/* --------------------------------------------------------------------------
   Actions
   --------------------------------------------------------------------------
   Accept and Reject are the SAME class, the same size and the same colour. The ICO requires
   refusing to be as easy as accepting, so pairing .btn--primary with .btn--secondary — a dark
   fill against a white outline — is not available here: it would give acceptance visibly more
   weight. The only difference between the two controls is the word on them. */
.frm-cc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

/* .btn--primary sets background, border, radius, colour, font, padding and display. It does
   not set these three, so they are all this rule needs to add. */
.frm-cc__btn {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.frm-cc__btn:focus-visible {
  outline: 3px solid #071f2a;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Secondary links
   -------------------------------------------------------------------------- */
.frm-cc__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0;
}

.frm-cc__link {
  font-feature-settings: "liga" off, "clig" off;
  color: #071f2a;
  font-family: RoobertRegular;
  font-size: 15px;
  line-height: 22px;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.frm-cc__link:hover {
  text-decoration-thickness: 2px;
}

.frm-cc__link:focus-visible {
  outline: 3px solid #071f2a;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Cookie detail, revealed by the aria-expanded toggle
   -------------------------------------------------------------------------- */
.frm-cc__details[hidden] {
  display: none;
}

.frm-cc__details {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(8, 13, 15, .15);
}

.frm-cc__details-heading {
  font-feature-settings: "liga" off, "clig" off;
  color: #080d0f;
  font-family: RoobertRegular;
  font-size: 15px;
  line-height: 22px;
  margin: 0 0 8px;
}

.frm-cc__details-heading + .frm-cc__cookies {
  margin-bottom: 18px;
}

.frm-cc__cookies {
  list-style: none;
  margin: 0;
  padding: 0;
}

.frm-cc__cookies li {
  background-color: #f2f5f5;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.frm-cc__cookies code {
  display: block;
  color: #071f2a;
  font-family: monospace, monospace;
  font-size: 14px;
  line-height: 20px;
  /* Cookie names are unbreakable tokens; without this a long measurement-ID cookie can push
     the panel wider than a 375px viewport and put a horizontal scrollbar on the page. */
  word-break: break-all;
  overflow-wrap: anywhere;
  margin-bottom: 2px;
}

.frm-cc__cookies span {
  display: block;
  color: rgba(8, 13, 15, .8);
  font-family: RoobertRegular;
  font-size: 14px;
  line-height: 20px;
}

.frm-cc__note {
  color: rgba(8, 13, 15, .8);
  font-family: RoobertRegular;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Footer "Cookie settings" control
   --------------------------------------------------------------------------
   Consent that cannot be withdrawn is not consent, so this sits in the Legal column of every
   page. Mirrors `.footer_menu-list a` from app.min.css exactly — same family, size, line
   height, colour and opacity, and the same two breakpoints — so it is indistinguishable from
   the links above it despite being a <button>. */
.footer_cookie-settings {
  font-feature-settings: "liga" off, "clig" off;
  color: #fff;
  font-family: RoobertLight;
  font-size: 18px;
  line-height: 24px;
  opacity: .8;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.footer_cookie-settings:hover {
  opacity: 1;
}

.footer_cookie-settings:focus-visible {
  outline: 3px solid #abf9ff;
  outline-offset: 3px;
  opacity: 1;
}

/* Fallback placement, used only if the Legal column is ever renamed or removed. */
.footer_cookie-settings--fallback {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
}

/* --------------------------------------------------------------------------
   Breakpoints — the same two the compiled bundle uses
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .frm-cc {
    padding: 1.25vw;
  }

  .frm-cc__panel {
    max-width: 39.5833333333vw;
    padding: 1.4583333333vw;
    border-radius: .3125vw;
  }

  .frm-cc__title {
    font-size: 1.1458333333vw;
    line-height: 1.4583333333vw;
    margin-bottom: .625vw;
  }

  .frm-cc__text,
  .frm-cc__status {
    font-size: .8333333333vw;
    line-height: 1.25vw;
  }

  .footer_cookie-settings {
    font-size: .9375vw;
    line-height: 1.25vw;
  }
}

/* Below 480px two side-by-side buttons plus their icons no longer fit inside a 375px
   viewport without either wrapping mid-word or forcing the page to scroll sideways, so they
   stack and go full width. Equal width keeps them equally prominent, and the larger target
   is better on a phone anyway. */
@media (max-width: 480px) {
  .frm-cc {
    padding: 12px;
  }

  .frm-cc__panel {
    padding: 20px;
    max-height: calc(100vh - 24px);
  }

  .frm-cc__title {
    font-size: 20px;
    line-height: 26px;
  }

  .frm-cc__text,
  .frm-cc__status {
    font-size: 15px;
    line-height: 22px;
  }

  .frm-cc__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .frm-cc__btn {
    width: 100%;
    justify-content: center;
  }
}

@supports (max-height: 100dvh) {
  @media (max-width: 480px) {
    .frm-cc__panel {
      max-height: calc(100dvh - 24px);
    }
  }
}

@media (max-width: 768px) {
  .footer_cookie-settings {
    font-size: 16px;
    line-height: 22px;
    text-align: center;
  }
}