/*
 * MPC Consent.
 *
 * One stylesheet serves every site of the installation. The per-site colours
 * and corner radius arrive as `--mpc-consent-*-setting` custom properties from
 * a small nonce-gated inline block; everything here only supplies the fallback
 * chain, so the settings win no matter which of the two the browser sees last.
 * Bootstrap variables are used where a site provides them.
 *
 * Dark mode is decided in that inline block too, because which palette applies
 * is a per-site setting and this file is shared. Nothing here has to know about
 * it: the settings simply carry the other set of colours.
 */

:root {
  --mpc-consent-accent: var(--mpc-consent-accent-setting, var(--bs-primary, #0b5ed7));
  --mpc-consent-on-accent: var(--mpc-consent-on-accent-setting, #fff);
  --mpc-consent-bg: var(--mpc-consent-bg-setting, var(--bs-body-bg, #fff));
  --mpc-consent-fg: var(--mpc-consent-fg-setting, var(--bs-body-color, #1a1a1a));
  --mpc-consent-radius: var(--mpc-consent-radius-setting, var(--bs-border-radius, 0.5rem));
  --mpc-consent-border: color-mix(in srgb, var(--mpc-consent-fg) 20%, transparent);
  --mpc-consent-color-scheme: var(--mpc-consent-color-scheme-setting, light);
}

/*
 * Screen-reader-only text: the live region and the "opens in a new window"
 * hints. Not `display: none`, which would hide it from assistive technology too.
 */
.mpc-consent-visually-hidden,
.mpc-consent-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mpc-consent [hidden] {
  display: none !important;
}

.mpc-consent {
  position: fixed;
  z-index: 1080;
  box-sizing: border-box;
  max-height: 85vh;
  overflow-y: auto;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--mpc-consent-border);
  background: var(--mpc-consent-bg);
  color: var(--mpc-consent-fg);
  box-shadow: 0 0 1.5rem rgb(0 0 0 / 20%);

  /*
   * The checkboxes and the scrollbar of the details layer are drawn by the
   * browser, and it has no way to see the palette in the custom properties.
   * Telling it keeps them from staying light inside a dark banner.
   */
  color-scheme: var(--mpc-consent-color-scheme);
}

.mpc-consent *,
.mpc-consent *::before,
.mpc-consent *::after {
  box-sizing: inherit;
}

.mpc-consent[hidden] {
  display: none;
}

/* Layouts ----------------------------------------------------------------- */

.mpc-consent[data-layout="barBottom"] {
  inset: auto 0 0 0;
  border-width: 1px 0 0;
}

.mpc-consent[data-layout="barTop"] {
  inset: 0 0 auto 0;
  border-width: 0 0 1px;
}

.mpc-consent[data-layout="boxBottomLeft"],
.mpc-consent[data-layout="boxBottomRight"] {
  bottom: 1rem;
  width: min(28rem, calc(100vw - 2rem));
  border-radius: var(--mpc-consent-radius);
}

.mpc-consent[data-layout="boxBottomLeft"] {
  left: 1rem;
}

.mpc-consent[data-layout="boxBottomRight"] {
  right: 1rem;
}

dialog.mpc-consent {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(44rem, calc(100vw - 2rem));
  border-radius: var(--mpc-consent-radius);
}

dialog.mpc-consent:not([open]) {
  display: none;
}

dialog.mpc-consent::backdrop {
  background: rgb(0 0 0 / 50%);
}

/* Panel ------------------------------------------------------------------- */

.mpc-consent-panel {
  margin-inline: auto;
  max-width: 70rem;
}

.mpc-consent-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  line-height: 1.3;
}

.mpc-consent-title:focus-visible,
.mpc-consent:focus-visible {
  outline: 2px solid var(--mpc-consent-accent);
  outline-offset: 2px;
}

.mpc-consent-intro {
  margin: 0 0 1rem;
  max-width: 70ch;
}

.mpc-consent-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
}

/* Actions ----------------------------------------------------------------- */

.mpc-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/*
 * Accept and reject are deliberately the same control. Giving acceptance more
 * visual weight than rejection is the nudging pattern the EDPB guidelines on
 * deceptive design call out, and it makes the consent contestable.
 */
.mpc-consent-button {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--mpc-consent-accent);
  border-radius: var(--mpc-consent-radius);
  background: var(--mpc-consent-accent);
  color: var(--mpc-consent-on-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.mpc-consent-button-quiet {
  background: transparent;
  color: var(--mpc-consent-fg);
  border-color: var(--mpc-consent-border);
  font-weight: 400;
}

.mpc-consent-button:hover {
  filter: brightness(0.92);
}

.mpc-consent-button:focus-visible {
  outline: 2px solid var(--mpc-consent-fg);
  outline-offset: 2px;
}

/* Details layer ----------------------------------------------------------- */

.mpc-consent-details {
  margin: 0 0 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--mpc-consent-border);
}

.mpc-consent-details[hidden] {
  display: none;
}

.mpc-consent-categories,
.mpc-consent-services {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpc-consent-category + .mpc-consent-category {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mpc-consent-border);
}

.mpc-consent-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.mpc-consent-switch input {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--mpc-consent-accent);
}

.mpc-consent-switch input[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.7;
}

.mpc-consent-hint {
  margin-left: 0.5rem;
  font-weight: 400;
  font-size: 0.875rem;
  opacity: 0.8;
}

.mpc-consent-category-description {
  margin: 0.25rem 0 0.75rem;
  max-width: 70ch;
}

.mpc-consent-service {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--mpc-consent-border);
}

.mpc-consent-service-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.mpc-consent-facts {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: 0.125rem 1rem;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

.mpc-consent-facts dt {
  font-weight: 600;
}

.mpc-consent-facts dd {
  margin: 0;
}

/*
 * Five columns do not fit a phone. The wrapper is focusable and labelled so the
 * table can be scrolled by keyboard as well (WCAG 2.1.1).
 */
.mpc-consent-scroll {
  overflow-x: auto;
}

.mpc-consent-scroll:focus-visible {
  outline: 2px solid var(--mpc-consent-accent);
  outline-offset: 2px;
}

.mpc-consent-cookies {
  width: 100%;
  min-width: 32rem;
  margin: 0 0 0.5rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
  text-align: left;
}

.mpc-consent-cookies caption {
  padding-bottom: 0.25rem;
  text-align: left;
  font-weight: 600;
}

.mpc-consent-cookies th,
.mpc-consent-cookies td {
  padding: 0.25rem 0.5rem 0.25rem 0;
  border-bottom: 1px solid var(--mpc-consent-border);
  vertical-align: top;
  font-weight: 400;
}

.mpc-consent-cookies thead th {
  font-weight: 600;
}

.mpc-consent-service-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  font-size: 0.875rem;
}

/* Reopen control ---------------------------------------------------------- */

.mpc-consent-reopen {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1070;
  inset: auto auto 1rem 1rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem;
  border: 1px solid var(--mpc-consent-border, rgb(0 0 0 / 20%));
  border-radius: var(--mpc-consent-radius, 0.5rem);
  background: var(--mpc-consent-bg, #fff);
  color: var(--mpc-consent-fg, #1a1a1a);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 0 0.75rem rgb(0 0 0 / 20%);
}

/*
 * The button is a square with only an icon in it, so the 44 px minimum above is
 * what carries the target size (SC 2.5.8); the icon itself stays smaller.
 */
.mpc-consent-reopen-icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentcolor;
}

.mpc-consent-reopen[hidden] {
  display: none;
}

.mpc-consent-reopen:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

/* Blocked content placeholder --------------------------------------------- */

/*
 * The placeholder stands in for blocked content inside the page, not inside the
 * banner, so it takes its colours from the surrounding text rather than from
 * the banner palette. That also makes it follow a page that switches to dark.
 */
.mpc-consent-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 1.5rem;
  border: 1px dashed color-mix(in srgb, currentcolor 25%, transparent);
  border-radius: var(--bs-border-radius, 0.5rem);
  background: color-mix(in srgb, currentcolor 5%, transparent);
  text-align: center;
}

.mpc-consent-placeholder-body {
  max-width: 40ch;
}

.mpc-consent-placeholder-title {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.mpc-consent-placeholder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0 0;
}

.mpc-consent-placeholder .mpc-consent-button {
  --mpc-consent-accent: var(--bs-primary, #0b5ed7);
  --mpc-consent-on-accent: #fff;
  --mpc-consent-fg: currentcolor;
  --mpc-consent-border: color-mix(in srgb, currentcolor 20%, transparent);
  --mpc-consent-radius: var(--bs-border-radius, 0.5rem);
}

/* Preferences ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mpc-consent,
  .mpc-consent * {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-contrast: more) {
  .mpc-consent {
    --mpc-consent-border: currentcolor;
  }
}