/* Generated from site/src/styles/components/consent.css by wordpress/tools/sync-theme-assets.mjs – edit the source, not this copy. */
/*
 * Cookie choice (playbook cookie-consent): the banner fixed to the foot of
 * the window until answered, the "Cookies" dialog and the Cookie settings
 * line in the footer. Not used by the reference pages; kept here so the
 * sync copies it into the theme with the other styles.
 * WordPress: assets/css/components/consent.css, on every page when a GA4
 * measurement ID is set (Site settings → Privacy).
 */
/* ---------------------------------------------------------------
   Cookie choice (playbook: cookie-consent).
   The banner is fixed to the foot of the window until answered, so it
   causes no layout shift. Accept and Decline carry equal weight, as UK
   guidance requires: never style one as the primary button.

   Map the six variables to the site's own tokens. They are declared on
   the components, not :root, so they follow the site's dark mode.
   --------------------------------------------------------------- */
.consent, .cookie-details, .cookie-settings {
  --consent-surface: var(--white);
  --consent-ink: #1a1a1a;
  --consent-ink-soft: #6b5050;
  --consent-rule: #ead7c0;
  --consent-link: var(--red);
  --consent-ui-font: var(--text);
}

.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 900; /* above the fixed header (100), below the skip link */
  background: var(--consent-surface);
  color: var(--consent-ink);
  border-top: 1px solid var(--consent-rule);
  box-shadow: 0 -0.5rem 1.5rem rgb(0 0 0 / 0.06);
}
.consent[hidden] { display: none; }
/* Or give this div the site's own container class instead. */
.consent-inner {
  max-width: var(--consent-max, 72rem);
  margin-inline: auto;
  padding: 1rem var(--consent-gutter, 1rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
/* Never below 17px: the banner is read on phones first. */
.consent p { margin: 0; flex: 1 1 22rem; font-size: 1.0625rem; line-height: 1.5; }
.consent-actions { display: flex; gap: 0.75rem; }

/* Both choices, the dialog's Close included, look exactly alike. */
.consent-choice {
  font: inherit;
  font-family: var(--consent-ui-font);
  font-size: 1rem;
  color: var(--consent-ink);
  background: transparent;
  border: 1px solid var(--consent-ink-soft);
  padding: 0.6rem 1.1rem;
  min-height: 2.75rem;
  min-width: 6.5rem;
  cursor: pointer;
}
.consent-choice:hover { border-color: var(--consent-ink); }

/* About cookies and Cookie settings: buttons that read as links. */
.consent-link {
  font: inherit;
  color: var(--consent-link);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.consent-link:hover { color: var(--consent-ink); }

/* The full cookie wording, as a modal dialog: Esc, Close or a tap
   outside it closes it without deciding anything. */
.cookie-details {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.25rem 1.5rem 1.6rem;
  background: var(--consent-surface);
  color: var(--consent-ink);
  border: 1px solid var(--consent-rule);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.cookie-details::backdrop { background: rgb(0 0 0 / 0.45); }
.cookie-details-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.cookie-details-head form { margin: 0; }
.cookie-details h2 { font-size: 1.375rem; margin: 0; }
.cookie-details p { margin: 0 0 1rem; }
.cookie-details .consent-now { color: var(--consent-ink-soft); font-style: italic; }
.cookie-details .consent-actions { margin-top: 1.5rem; }

/* The design: the page's width and gutter; Raleway; the red footer. */
.consent-inner { --consent-max: 1440px; --consent-gutter: 5%; }
.consent-choice { font-weight: 700; }
.cookie-details h2 { color: var(--red); font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.site-footer .cookie-settings { margin: 0; font-size: 16px; line-height: 1.3; }
.site-footer .cookie-settings .consent-link { color: var(--white); }
.site-footer .cookie-settings .consent-link:hover { color: var(--white); text-decoration-thickness: 2px; }